FRONTEND/CSS

[CSS] Flexbox 톺아보기 (flex-grow,shrink,basis)

기존 float와 inline-block가 가지는 레이아웃 설정에서의 한계점을 보완하는 Flexbox에 대해 공부해 보았다. flex container에 적용하는 속성 flex container 의 자식요소인 flex item에 적용하는 속성 flexbox를 사용하려면 부모태그인 container를 설정하고 CSS로 flex를 설정한다. //html //css .container { display: flex; } flex 설정 후 width -> content의 크기만큼. height-> 부모 컨테이너의 높이만큼 늘어남. ▶container에 적용하는 속성 - flex-direction : row(default) / row-reverse / column / column-reverse reverse 속성은..

[CSS] 레이아웃을 깨뜨리는 마진병합 현상

- 2개의 박스가 있다. 첫 번째 박스는 margin이 위,아래로 20px 두 번째 박스는 margin이 위, 아래로 40px See the Pen Untitled by tangjinlog (@tangjinlog) on CodePen. 분명 첫 번째 박스와 두 번째 박스 사이에는 총 margin이 60px 존재하지만, 개발자 도구로 확인시 40px로 설정된다. 즉, 좀 더 큰쪽의 margin값으로 설정된다. 이와 같은 현상이 '마진 병합'현상이다. ▶ 마진 병합 현상이 발생하는 경우 1. 형제 요소끼리 - 블럭요소끼리 인접해 있을 때, margin-top, margin-bottom이 겹칠 경우 2. 부모 자식요소끼리 - 부모 태그안의 자식요소가 margin 설정시 부모도 함께 적용됨. -> 자식요소에 p..