flex (2) 썸네일형 리스트형 [CSS] flexbox의 모든 것을 알아보자 Flexbox flexbox는 공간을 최대한 효과적으로 사용할 수 있도록 콘텐츠 사이의 공간을 배분하고 정렬하는 강력한 기능을 제공한다. float과 position으로 구현하기 어려운 형태의 레이아웃도 손쉽게 구현할 수 있게 해준다. flexbox는 수평, 수직 중 하나의 방향으로만 레이아웃을 다룰 수 있는 1차원 레이아웃이다. 수평, 수직을 동시에 다룰 수 있는 2차원 레이아웃 Grid Layout과의 제일 큰 차이점이다. Flexbox의 구성 flexbox는 container (parent element) 와 item (children element) 으로 구성된다. 하나의 요소에 display: flex; 를 적용하면 display: flex; 가 설정된 부모 요소를 Flex container 라.. [CSS] CSS layout 레이아웃 종류와 기본설명 CSS layout CSS layout 기술은 웹페이지에 포함된 block level element들을 모아 원하는 위치에 배치할 수 있게 해준다. Normal flow Display 속성(flexbox, Grid Layout) Floats Positioning Multi-column layout Table layout normal flow normal flow는 페이지 레이아웃에 특정한 css 설정을 적용하지 않을 경우 브라우저가 기본값으로 html페이지를 배치하는 방법이다. 여기서 기본값이란 block level element는 부모요소의 너비 100%, content의 최대 높이가 되고, 항상 새로운 줄에서 시작한다. inline level element는 content의 최대 너비와 높이가 되고,.. 이전 1 다음
