Layout의 핵심은 블록 레벨 요소들을 원하는 위치에 배열하는 것이다.

Position

• 요소가 화면 어디에 위치 할 것 인지 결정 하는 속성
• top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정 한다.

position 속성은 아래의 values 값을 선택해 지정 가능하다.

1. static (default 값)

position 속성의 기본 값으로 position 속성을 지정하지 않았을 때와 같다.

기본적으로 이 값을 지정할 일은 없지만, 이미 설정된 position을 무력화하기 위해 사용될 수 있다.

2. relative

기본 위치를 기준으로 top, right, bottom, left 값에 따라 움직여지는 값

div {
	position: relative;
}

3. absolute

부모 요소중 type (relative, fixed, absolute)이 지정된 태그에 기준하여 변화하고, 부모 요소가 static 인 경우 문서의 크기를 기준으로 하여 위치하게 된다.

div {
	position: absolute;
}

4. fixed

부모 요소와 관계없이 브라우저의 viewport(현재 화면에 보여지고 있는 영역) 를 기준으로 top, bottom, left, right 를 사용하여 위치를 이동시킨다.

div {
	position: fixed;
}

Display

모든 element 에는 element 의 유형에 따라 기본 표시값이 있다. 기본값은 보통 block이나 inline이다.

bolck

• 화면 크기의 전체의 가로폭을 차지하는 요소 (Width: 100%)
• width, height, margin, padding 속성 지정이 가능하다.
• block 레벨 요소 예
  • div
  • h1~h6
  • p
  • ol
  • li
  • table

inline

• content 너비만큼의 가로폭을 차지하는 요소
• width, height, margin, padding 속성 지정 할 수 없다.
• inline 레벨 요소 예
  • span
  • a
  • strong
  • img
  • br

inline-block

• block과 inline 레벨 요소의 특징을 모두 갖는 요소
• inline 레벨 요소와 같이 한 줄에 표현되면서 width, heigt 속성 지정 가능하다.

float

float은 주로 이미지 주변에 텍스트를 감싸기 위한 속성

속성
- left : 요소가 자신의 블록 좌측에 float 할 수 있게 만드는 속성
- right : 요소가 자신의 블록 우측에 float 할 수 있게 만드는 속성
- none : default 값

요즘에는 flex 속성을 기반으로 레이아웃을 잡는 경우가 훨씬 많기 때문에 float은 자주 사용되지 않는다.