하와이 가는 여정

별 찍기 시리즈를 진행하고 있습니다. https://www.acmicpc.net/search#q=%EB%B3%84%EC%B0%8D%EA%B8%B0&c=Problems 검색 www.acmicpc.net fun main(){ var num:Int= readLine()!!.toInt() for(i in 1 .. num) { for(j in num-i+1 downTo 1) { print("*") } println() } } 나는 이렇게 어거지로 코딩을 하였는데 조금 더 클린하게 멋있게 한 코드가 있다면 알려주세요😭

https://solved.ac/class에서 Class level을 따라가고 있다. solved.ac - 문제 › CLASS solved.ac fun main(){ var max=0 var count=0 var return_cut=0 for(i in 1 .. 9) { var num:Int= readLine()!!.toInt() count++ if(max

https://solved.ac/class에서 Class level을 따라가고 있다. solved.ac - 문제 › CLASS solved.ac fun main(){ var a:Int= readLine()!!.toInt() for(i in 1 .. a) { for(j in a-i downTo 1) { print(" ") } for(z in 1 .. i) { print("*") } println() } }

flex containe의 프로퍼티를 배웠다면 이제 flex item 차례이다. flex item의 프로퍼티는 display: flex 가 적용된 부모 요소의 자식 요소에만 사용할 수 있다. flex-grow flex-grow는 이름 그대로 flex item의 확장과 관련이 있다. 단위 없는 숫자 값(비율)을 사용하며 기본값은 0이다. 값이 0일 경우 flex container가 커져도 flex item의 크기는 커지지 않고 원래 크기를 유지한다. 하지만 값이 1 이상일 경우 flex item의 원래 크기와 상관없이 flex container를 채우기 위해 flex item도 커지게 된다. 1 0 1 1 1 1 2 1 .container { background-color: skyblue; height: ..

align-content는 flex items 들이 여러 줄일 경우 flex-direction 방향으 기준으로 수직 정렬 방법을 결정한다. stretch, flex-start, center, flex-end 기본값은 stretch이다. flex-direction: row (가로 방향) align-content: flex-start 1 2 3 4 5 6 align-content: center 1 2 3 4 5 6 align-content: flex-end 1 2 3 4 5 6 flex-direction: column (세로 방향) align-content: flex-start 1 2 3 4 5 6 align-content: center 1 2 3 4 5 6 align-content: flex-end 1 2..

align-items는 저번 포스팅에서 다룬 justify-content와 달리 item을 flex-direction에서 정해진 방향의 수직방향으로 정렬한다. stretch align-items는 기본값으로 stretch를 갖는데, 이는 별다른 크기가 지정되지 않았을 때 flex 아이템을 늘려서 맞춰준다. 1 2 3 .item { border: pink 4px solid; background-color: #fff; text-align: center; } .container { background-color: skyblue; height: 200px; display: flex; } .item에 따로 높이를 지정해 주지 않았지만 자동으로 부모 요소의 크기만큼 늘어나 있다. .align-items의 기본값인 ..

이번에는 정렬과 관련된 프로퍼티 순서이다. 가장 먼저 살펴볼 프로퍼티는 justify-content이다. justify-content는 flex-direction으로 정해진 방향에 flex item들을 어떻게 정렬할 것인지 정한다. flex-start, center, flex-end flex-direction: row (가로 방향) justify-content: flex-start 1 2 3 justify-content: center 1 2 3 justify-content: flex-end 1 2 3 flex-direction: column (세로 방향) justify-content: flex-start 1 2 3 justify-content: center 1 2 3 justify-content: fle..

이번 시간에는 부모 요소인 flex container에서 사용 가능한 프로퍼티 중 방향과 흐름을 정의하는 프로퍼티에 대해 알아보자. flex-direction flex-direction으로 flex container 안에서 flex item이 배치될 기본 방향을 정할 수 있다. 이 프로퍼티로 따로 지정하지 않으면 row라는 값으로 기본 설정되며 item은 왼쪽에서 오른쪽으로 정렬한다. 아래와 같이 flex container에 dispaly: flex를 작성하면 flex-direction의 기본값인 row로 가로 정렬되는 것을 확인할 수 있다. .container { background-color: skyblue; padding: 16px; display: flex;/* flex container에 해당하..

flexbox는 크기가 불분명한 요소들에 대해 효율적으로 동작하고, 특별한 계산 없이 쉽게 정렬할 수 있다. flexbox는 아래와 같이 부모 요소인 flex container와 자식 flex item으로 구성되어있다. flexbox를 사용하려면 정렬하고자 하는 요소의 부모 요소인 flex container에 display: flex; 를 추가하면 된다. display: flex; 를 사용하지 않으면 flex를 사용할 수 없다. display: flex; .parent { /* 배치, 정렬하고자 하는 요소를 감싸는 부모 요소 */ display: flex; } .child { /* 배치, 정렬하고자 하는 대상 요소 */ ... } flexbox는 기본적으로 가로 혹은 세로로 정해둔 방향을 기준으로 프로퍼..

float는 뜨다, 띄우다는 뜻을 가지고 있으며, float 프로퍼티는 말 그대로 요소를 어떻게 띄울지 결정한다. float 프로퍼티는 요소를 디자인 흐름에서 벗어나게 한 뒤, 사용자가 지정한 방향에 배치하도록 하는 프로퍼티이다. 문서 작성 프로그램에서 위와 같이 사진과 본문 사이의 배치를 조정하여 사진과 글이 함께 보여지도록 문서를 작성한 경험이 있을 것이다. 웹에서도 이와 동일하게 배치할 수 있다. float를 사용함으로... 처음 실습은 float를 적용하지 않고 실습해보겠다. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy..