이전에는 CSS에서 인라인 요소 / 블록 레벨 요소가 가지는 기본적인 위치 지정 속성에 대해서 배웠다면 더 나아가 float, grid, flex 3형제가 있다. (나한텐 참 복잡하다...) float에 대해 정리해 보고 float가 가는곳엔 항상 따라다니는 overflow에서도 정리해보려 한다. Float 이전 글에서 언급했다시피 html에서 블록 레벨 요소는 한줄을 다 차지 하여 다음 요소는 바로 밑줄에 내려 오게 된다. 이러한 블록 레벨 요소들을 다른 요소들과 어울리며 정렬 시켜 주는 것이 'float' 속성. float:left float:right로 블록 레베 요소들을 좌측, 우측 정렬할 수 있다. float:right의 속성을 줄 경우, 오른쪽에 해당 블록 요소가 위치하게 되고 나머지는 박스의..

CSS에서 사용되는 여러 단위 css에서 사용되는 단위는 절대 길이 단위 / 상대 길이 단위가 있다. 절대 길이 단위 cm, mm, px 등 pixel (picture + element)는 '화소'를 나타내는 단위로 이미지를 표현하는 가장 작은 단위이자 CSS에서 가장 많이 쓰이는 단위이다. 상대 길이 단위 em은 부모의 font-size가 기준점이다. 즉 em=1 은 100%를 의미하여 부모의 font-size가 24px이면 em=1=24px이 된다. 만약 자식의 font-size를 0.5em 으로 설정하면 24 * 0.5 = 12 즉, 자식의 font-size는 12px이 된다. 부모 폰트의 px크기 * 자식 폰트의 em 값 = 자식 폰트의 px값 %(퍼센트)는 말 그대로 크기의 비율을 나타낸다. 기..