float left (2) 썸네일형 리스트형 크기를 자동계산해 주는 border-box 속성 CSS 의 float 속성으로 html 레이아웃 코딩하다보면 미치고 환장할때가 있습니다 바로 border 나 margin, padding 등을 주려고 하면 1, 2 픽셀 차이 때문에 밑으로 떨어지곤 하는 짜증 솟구치는 현상때문이죠.#ads_1사실 이게 저한텐 너무나 큰 스트레스였습니다.예전 table 태그로 레이아웃 잡을때는 레이아웃에 대한 스트레스는 없었는데웹표준코딩으로 넘어오면서 레이아웃때문에 정말 엄청나게 스트레스를 받았습니다.1px, 2px 때문에 얼마나 열이 받았던지 웹프로그램을 때려치우기로 맘 먹은적도 있었습니다. 실제로 1년넘게 쳐다보지도 않았죠 ㅋㅋㅋ 암튼 마음 가다듬고 픽셀과의 싸움하면서 그냥 팔자려니 했는데....간단하게 해결하는 방법이 있었네요 ㅠㅠ바로 box-sizing 속성에서 b.. float:left 요소의 부모영역의 높이 차지하게 만들기 블록요소를 가로로 정렬하게 하기 위해서 보통 float:left 를 사용합니다.하지만 이때 float 적용한 요소가 부모의 영역 초과하게 될때 부모요소는 자식의요소의 높이를 반영하지 않아 참 괴롭습니다. 보통 아래와 같이 되지요.#ads_1 AAABBB AAA BBB 이걸 해결하는 간단한 방법이 있습니다.#ads_2 방법1)바로 부모의 overflow 항목을 hidden 으로 주기만 하면 됩니다.왜 그런지는 저도 이해가 잘 안되지만 결과적으론 잘 되니 만족스럽습니다. 결과는? 짜잔~ AAA BBB 방법2)부모 박스 뒤에 가상의 블록을 만들어 clear:both 시켜도 됩니다..parent:after{content:'';display:block;clear:both;}이렇게요.결과는 똑같습니다.방법1보다는 .. 이전 1 다음