배치 (2) 썸네일형 리스트형 [CSS] flexbox flexbox란? 박스 내 요소 공간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다. flexbox를 1차원 모델이라 부르는 이유는, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 특성 때문이다. flexbox를 flex 컨테이너라고도 한다.(요소들을 포함하기 때문) flex 컨테이너를 만들기 위해서는 컨테이너에 display:flex;를 적용해야 한다. flexbox에는 주축(main-axis)과 교차축(cross-axis)이 있다. flex-direction 속성 flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정한다. - row : 기본값. 주축은 행이고 방향은 콘텐츠의 방향과 동일 - row-reverse : 주축은 행이고 방향.. [CSS] 배치 - display, position, float 박스의 유형 제어 1) display : block - 블록 박스 항상 새 라인에서 시작 / 블록 박스 내에만 배치 / 옆에 다른 요소 배치 불가능 / width와 height로 크기 조절 / padding, border, margin 조절 가능 2) display : inline - 인라인 박스 새 라인에서 시작 못함. 라인 안(inline)에 있음. / 모든 박스 내 배치 가능 / 옆에 다른 요소 배치 가능 / width와 height로 크기 조절 불가능 / margin-top, margin-bottom 조절 불가능 3) display : inline-block - 인라인 블록 박스 (inline 속성) 새 라인에서 시작 못함. 라인 안에 있음 / 모든 박스 내 배치 가능 / 옆에 다른 요소 배치 가.. 이전 1 다음
