HTML&CSS (TIL2) - 레이아웃의 모든것

Layout

이름으로 추론해볼 수 있듯이, 시각적으로 보기 좋게 배치하는 작업이다.

Layout의 종류

• Position
• Display

순서대로 한번 알아보자.

Position

개인적으로 가장 복잡한 레이아웃이다.

• static

  기본값으로, 자동으로 배치되며 위치를 임의로 정할 수 없다. 자주 쓰이지는 않는다.

• relative

  원래 위치를 기준으로 위치를 정한다.
  태그의 위치를 변경하고 싶을 때 사용한다.
  top, right, bottom, left property가 필요하다.

• absolute

  가장 가까운 부모element에 상대적으로 위치가 지정된다.
  부모element에 relative, fixed, absolute가 있으면 된다.
  absolute를 사용하고 싶으면, 부모에 relative를 부여한다.
  부모element가 없으면 document body를 기준으로 움직인다.

• fixed

  스크롤과 상관없이 화면에 요소를 고정시킨다.

Display

• inline (span, b, a)

  텍스트의 길이만큼 존재한다.
  width와 height를 줄 수 없다.
  자동 줄바꿈이 안된다.

• block (div, p, h, li)

  가로 영역이 기준이 된다.
  inline과는 다르게 줄바꿈이 된 것처럼 보인다.
  width와 height를 줄 수 있다.

• inline-block

  block과 inline의 중간형태다.
  줄바꿈은 안되지만 크기는 설정이 가능하다.

• flex

  손쉽게 컨테이너들의 정렬을 바꿀 수 있다.
  요소의 상하좌우 정렬, 순서변경이 간단하다.
  요소간의 간격 조절이 간단하다.

Display에서 단연 최고의 레이아웃은 flex인 것 같다. 아직 제대로 배우지 않아서 잘은 모르겠지만, flex하나로 왠만한 레이아웃은 대체가 가능한 것 같다.

flex의 간단한 사용 방법을 설명해보자면:

display:flex; -> 컨테이너가 수직으로 쌓인다
display:inline-flex; -> 컨테이너가 수평으로 놓인다.

간격 조절

justify-content: space-between; -> 간격이 일정해진다

item 축 설정

flex-direction: row; -> item을 수평축으로 표시
flex-direction: row-reverse; -> row 반대로 표시
flex-direction: column; -> 수직축으로 표시
flex-direction: column-reverse; -> column반대로 표시

item 줄 묶음

flex-wrap: wrap; -> item을 여러줄로 묶음
flex-wrap: nowrap; -> 묶지 않음

item 정렬

align-content: space-between; -> 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨

등등 여러가지 메서드가 존재한다.