DigIT의 DevLog & TechLog

[Flexbox Froggy Level 24 Solution!] (Korean is at the bottom) 1. First of all, We can see that yellow frogs and the other frogs are separated. Therefore, we can guess that we need to use 'flex-wrap' properties to set them apart. 2. The flex items are placed vertically, so we need to use 'flex-direction' properties. 3. We can see that the red frog is placed on the top. To move it to the bottom, w..

[CSS] Position 1. Position →position은 요소들을 어떻게 배치할지 정하는 속성 static(기본값으로 요소를 나열한 순서대로 배치) relative(원래 요소가 배치되는 위치를 기준으로 상대적 위치를 지정한다.) absolute(특정한 상황에서 가장 가까운 부모 또는 조상 요소를 기준으로 절대적으로 위치 지정) fixed(브라우저 화면을 기준으로 요소 배치) sticky(설정된 위치 전까지는 static, 그 이후부터는 fixed처럼 행동하는 속성) 2. relative position: relative; 만으로는 아무런 변화 없다. top,left,bottom, right 값을 추가적으로 설정하게 되면 원래 그 요소가 있어야 할 자리를 기준으로 위치가 이동하게 된다. Ex.)..

[CSS] Block / Inline /Inline-Block 1. Block 가로 크기가 부모 요소의 100%를 차지(쉽게 말하자면 옆(좌우측)에 다른 요소를 붙여넣을 수 없다) -대부분의 element는 block 요소(, , , , , , .......) -가로(width)와 세로(height) 크기를 지정가능. 2. Inline 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치 가능(옆에 다른 요소를 붙일 수 있다.) -, , ...... cf. 주의! width와 height 속성을 지정해도 무시된다. 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있고, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영X cf.)inline 성질을 block으로 변경 가능 span..