늘 염두에 두고 있었지만 제대로 공부해본 적 없던 Flexbox를 이번 기회에 확실히 정리해보고자 한다. 그동안 주로 대학교와 관공서 프로젝트를 진행했기에 IE 구 버전 대응 이슈 때문에 사내 프로젝트에서 Flexbox의 사용을 지양해왔었는데, 타 회사들의 작업물을 살펴보면서 여러 비효율적이고 구시대적인 CSS 정렬 방법을 Flexbox로 간편하게 해결할 수 있다는 걸 느꼈다. 또, 이 기술이 나온 지 시간이 꽤 흘러서인지 예전보다 크로스 브라우징의 어려움이 많이 없어졌고 꽤 많은 국내 사이트들에서도 Flexbox를 사용하고 있다. 먼저 Flexbox의 기본 기능을 공부해보고, 간단한 페이지를 만들어 Flexbox로 레이아웃을 구축해보기로 한다. 나아가 사내 프로젝트에서도 팀원들과 이야기하여 작은 컴포넌..
12345678910111213141516171819202122232425262728293031/* 7, 14, 21, 28 번째 box 배경색 변경 (7의배수) */.box:nth-child(7n){ font-size:14px;}/* 22번 부터 이후 모든 box 폰트색 변경 */.box:nth-child(n+22) { font-size:14px;}/* 1번째 부터 4번째 까지 box 배경색 변경 */.box:nth-child(-n+5) { font-size:14px;}.box:nth-of-type(-n+6){ font-size:14px;}/* 16번째 부터 19번째 까지 box 배경색 변경 */.box:nth-child(n+16):nth-child(-n+19) { font-size:14px;}/* 맨..
이번 포스팅에서는 CSS 시 특정 요소의 부모 높이가 0이 될 때, 그 부모의 높이를 잡는 방법에 대해 알아보겠습니다. 부모의 높이가 0이 될 경우, 별문제가 되지 않는 경우도 있지만 대부분의 경우, 뒤 영역이 앞 영역을 타고 올라오는 등 UI 레이아웃이 깨지는 현상이 있어 문제가 됩니다. 이를 해결하기 위한 방법을 함께 알아보겠습니다. 1. 부모의 높이가 0이 되는 원인 1.1. float 속성 사용 자식 요소에게 float 속성을 부여한 것이 가장 대표적인 원인입니다. 최근에는 display: flexbox, grid 등의 레이아웃 관련 CSS 속성이 추가되어 float 속성을 이용해 레이아웃을 잡는 일이 적어졌는데요. 그렇지만 기존 사이트를 유지보수 하거나, 새로운 사이트를 구축할 때도 float ..
Eric Meyer’s “Reset CSS” 2.0 http://meyerweb.com/eric/tools/css/reset/HTML5 Doctor CSS Reset http://html5doctor.com/html-5-reset-stylesheet/Yahoo! (YUI 3) Reset CSS http://yuilibrary.com/yui/docs/cssreset/Normalize.css 1.0 https://github.com/necolas/normalize.css