CSS Layout 에 대한 정리🌷

Floats

floats는 한 요소가 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싼다.

• float : none;
  요소가 float하지 않음
  

• float : left;
  요소가 자신을 포함한 블록의 좌측에 float해야 함을 나타내는 키워드이다.
  

• float : right;
  자신을 포함한 블록의 우측에 float해야 한다.
  

• float : inline-start;
  시작쪽에 float해야 한다. left to rigt는 왼쪽, right to left는 오른쪽이다.

• float : inline-end;
  끝쪽에 float해야 한다.

display

block, inline 또는 inline-block 같은 기준 속성값은 보통 흐름속에서 요소가 동작한다.
normal flow 속에서 요소가 동작하는 방식을 변경할 수 있다.

• display: block
  요소 밑에 표시된다. (기본값 / div, p, h, li) 가로 한 줄을 다 차지하게 된다.
• display : inline
  상대 바로 옆에 표시된다. (span, b, i, a)
  컨텐츠를 감쌀 정도의 크기만 갖게 된다.
• display : none
  요소가 표시되지 않는다.
• display : inline-block
  block과 inline의 중간 형태이며 줄바꿈이 되지만 크기를 지정할 수 없다.
• display : flex
  컨테이너의 width 길이 만큼만 차지하게 된다. height도 컨테이너만큼 차지하게 된다.

flexbox

일차원 상에서 컨테이너를 배치할 경우 편리를 돕기 위해 마련되었다.
flexbox를 사용하기 위해서는 진열하려는 모든 요소의 부모 요소를 display:flex로 적용한다.
모든 직계 자식이 flex 항목이 된다.

부모 요소에 display:flex를 부여하면 자식 요소들이 일렬로 배치된다.
flexbox가 초기값을 부여한 것인데, 초기값은 flex-direction: row 이다.
또한, 자식 요소 중 가장 높은 높이의 요소에 height가 맞춰진다. 이것도 초깃값인 align-items : stretch 에 맞춰졌기 때문이다.

가변 콘테이너에 적용될 수 있는 속성 중 여유 공간에 맞춰 수축되거나 연장될 수 있는 속성이 있다.

자식 속성에 flex:1 을 부가할 할 수 있다. 컨테이네에 여유 공간을 활용할 수 있다.

<div class="wrapper">
    <div>하나</div>
    <div>둘</div>
    <div>셋</div>
</div>

.wrapper {
    display: flex;
}

.wrapper > div {
    flex: 1;
}

Grid Layout

flex box는 일차원 레이아웃을 위해 마련되었지만, grid layout은 이차원 레이아웃을 위해 마련되었다.
행과 열에 포함된 요소들을 배열한다.
display:grid로 그리드 레이아웃으로 전환할 수 있다.

grid-template-columns 으로 열을 정의할 수 있고,
grid-template-rows 으로 행을 정의할 수 있다.

grid-column 은 배열 안 요소의 열을 정의할 수 있다.
grid-row 은 배열 안 요소의 행을 정의할 수 있다.

Box Model

• contents area
  콘텐츠의 경계가 감싼 영역이다. 글이나 이미지 등 요소의 실제 내용을 포함한다.
  크기는 width, min-width, max-width, height, min-height, max-height 속성을 사용해서 설정할 수 있다.
• padding area
  안쪽 여백 경계가 감싼 영역이다. 콘텐츠 영역을 요소의 안쪽 여백까지 포함하는 크기로 확장한다.
  padding-top, padding-rigth, padding-bottom, padding-left로 크기를 설정할 수 있다.
  4가지 요소를 함쳐서 padding으로 사용할 수 있다.
• border area
  테두리 경계가 감싼 영역이다. padding의 요소의 테두리까지 표함하는 크기로 확장한다.
  boarder-width 가 테두리의 두께를 설정한다.
• margin area
  바깥 여백의 경계가 감싼 영역이다. 테두리 요소를 확장해서 인근 요소 사이의 빈 공간까지 포함하도록 만든다.
  margin-top, margin-right, margin-bottom, margin-left 와 단축 속성인 margin이 크기를 정의한다.

참조

CSS 기본 박스 모델 입문-MDN
이번에야말로 CSS Flex를 익혀보자
CSS 레이아웃 입문서 - MDN