전체 글 (47) 썸네일형 리스트형 노마드코더 CSS Layout 마스터클래스 챌린지 - 4일차 1. Auto Columns and Rows 미리 정해둔 그리드의 수보다 많은 양의 컨텐츠가 추가될 때 grid-auto 를 사용하여 그리드를 자동으로 추가할 수 있다. .father{ display: grid; gap: 10px; min-height: 50vh; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-auto-rows: 1fr; grid-auto-columns: 1fr; grid-auto-flow: column; } 가로 2개, 세로 2개의 그리드를 생성해 두었지만 더 많은 양의 내용이 추가되었을 때 grid-auto-rows : 1fr 크기의 새로운 행을 추가한다. grid-auto-columns .. 노마드코더 CSS Layout 마스터클래스 챌린지 - 3일차 1. flex grid flex는 한 방향으로만 레이아웃을 표현한다면, grid는 가로, 세로 2개의 방향의 레이아웃을 표현할 수 있다.. body { display: grid; grid-template-columns: 100px 200px 50px; grid-template-rows: 200px 100px 100px; row-gap: 10px; column-gap: 20px; } grid-template-columns : 열 배치 grid-template-rows : 행 배치 body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 2fr 1fr 1fr; row-gap: 10px; column-gap: 20px; } fr.. 노마드코더 CSS Layout 마스터클래스 챌린지 - 2일차 1. 플렉스 박스 안에 20개의 상자를 넣을 수 있을까? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 20개의 박스를 넣을 수는 있지만, 상자의 크기가 자동으로 조절된다. 이 문제를 해결하기 위해서 flex-wrap을 사용한다. body{ display: flex; height: 100vh; gap : 10px; justify-content: center; flex-wrap: wrap; } 아까와는 다르게, 박스가 각각 자신의 크기를 유지하면서 줄을 바꾼다. 2. flex-flow flex-flow는 flex-direction 과 flex-wrap 을 한번에 사용할 수 있게 해준다. body{ display: flex; height: 100vh; gap : .. 노마드코더 CSS Layout 마스터클래스 챌린지 - 1일차 1. flex를 사용하지 않고 상자 정렬하기 display : inline - 바로 옆에 다른 요소 올 수 있음. 크기 지정 못함 display : block - 바로 옆에 다른 요소 못 옴. 크기 지정 가능 display : inline-block - 옆에 다른 요소 올 수 있음. 크기 지정 가능 2. flex는 부모 요소에 적용한다. flex-direciton : flex 박스 요소의 방향 결정, row, column (기본값 row), row-reverse, column-reverse 주축(main axis) 와 교차축(cross axis)로 나눠지며, 주축은 왼쪽에서 오른쪽, 교차축은 위에서 아래로 진행. body{ display: flex; flex-direction: row; height: 1.. [Kotlin] 상속과 접근 제한자 [Kotlin] 상속과 접근 제한자 상속 코틀린에서의 상속 형식은 아래와 같다. open class Fruit { } class Apple: Fruit(){ } 다른 클래스에서 상속이 가능하게 하려면 open 키워드를 사용해야 한다. 상속 관계에서는 상속 대상이 되는 클래스를 상위 클래스라 하고, 상속받는 클래스를 하위 클래스라고 한다. 위와 같은 경우에서 상위 클래스는 Fruit 이며, 하위클래스는 Apple 이 된다. 상위 클래스가 매개변수를 가지고 있다면 생성자를 호출할 때 다음과 같이 입력한다. open class Fruit(name: String) { } class Apple(name:String) : Fruit(name){ } 오버라이딩 상속의 가장 큰 장점은 상위 클래스에서 정의한 변수와 함.. [Kotlin] 코틀린 클래스 , 생성자 [Kotlin] 코틀린 클래스 , 생성자 클래스 선언하기 class Person class Person { } 코틀린에서 클래스는 class 키워드를 사용하여 선언한다. 중괄호 영역에 아무것도 없다면 중괄호를 생략할 수 있다. class Person { var name = "cho" constructor(name : String){ this.name = name } fun testFun(){ println("name : $name") } class test{ } } 클래스의 멤버는 생성자, 변수, 함수, 클래스로 구분된다. 클래스 안에 다른 클래스를 선언할 수 있다. 코틀린에서는 객체를 생성할 때 new 키워드를 사용하지 않는다. val person = Person("Cho") person.testFun.. [1.20.1] 다이아몬드를 발견하였습니다! 알림 플러그인 유저가 다이아몬드 , 고대 잔해를 캘 때 서버 전체에 알림 메시지가 뜨게 됩니다. 플러그인 문서 내 config 파일을 통하여 알림 메시지의 접두사를 ON / OFF 하거나, 접두사의 내용을 수정할 수 있습니다. 아래 링크에서 다운가능합니다. DiamondAnnouncer 다이아몬드, 고대잔해를 캘 때 서버 전체 메시지 출력 topping-market.com 마인크래프트 플러그인 개발해보기 [12] - 광물 알람 플러그인 만들기 (3) https://gangchul.tistory.com/299 마인크래프트 플러그인 개발해보기 [11] - 광물 알람 플러그인 만들기 (2) 마인크래프트 플러그인 개발해보기 [10] - 광물 알람 플러그인 만들기 (2) https://gangchul.tistory.com/298 마인크래프트 플러그인 개발해보기 [10] - 광물 알람 플러그인 만들기 (1) 마인크래프트 플러그인 gangchul.tistory.com 전편에서 이어집니다. 지금까지 개발한 내용을 다시 정리해보면, 철, 석탄 , 다이아몬드 등의 광물을 부술 때 마다 서버 전체에 광석을 발견하였다는 메시지를 출력하도록 만들었습니다. 그러나 문제가 있는데, 광물 1개를 부술 때 마다 계속해서 메시지가 나오기 때문에 채팅창이 도배가 될 수 있다는 점입니.. 이전 1 2 3 4 5 6 다음
