1. 레이아웃이란?
웹페이지는 기본적으로 아무 작업을 하지 않을 경우 입력된 내용을 순서대로 표시합니다.
하지만 우리가 보는 웹페이지들은 보통 Header, 메인컨텐츠, Footer, 사이드바 영역으로 나뉘어져 있는 것이 일반적입니다.
이 블로그 같은 경우에도, 블로그 타이틀, 포스트 제목, 내용, 댓글, 네비게이션 영역으로 나뉘어져 있습니다.
이처럼 문자·그림·사진 등을 시각적 효과와 사용 목적을 고려하여 구성·배열하는 행위를 말합니다.
웹페이지를 레이아웃을 구현하기 위해서는 아래의 css 옵션을 사용합니다.
2. CSS 속성
2-1. position 속성
문서 상에 요소를 배치하는 방법을 지정합니다.
static, relative, absolute, fixed 네가지 값이 있으며, 유형에 따라 top, bottom, left, right 속성으로 위치를 조절합니다.
2-1-1. static
기본값입니다. position:static;으로 지정했을 때와 없을 때와 동작이 같습니다.
명시적으로 position 속성을 사용하지 않겠다고 의사표현을 할 때 사용하면 좋을 것 같습니다. (과연?)
2-1-2. relative
요소를 순차적인 문서 흐름에 따라 배치하고, 자기 자신 기준으로 top,bottom,left,right 의 값에 따라 오프셋을 적용합니다.
>[캡쳐1] relative 사용 예제. 이전 요소가 배치 된 다음 지점부터 top 10px, left 10px 위치에 배치됨.
2-1-3. absolute
요소를 순차적인 문서 흐름에서 제거하고, 페이지 레이아웃 공간도 배정하지 않습니다. 대신 가장 가까운 부모 요소 위치를 기준으로 요소를 상대적으로 배치합니다.
>[캡쳐2] absolute 사용 예제. 상위 요소가 없어 컨테이닝 블록 기준으로 top 10, left 300 위치에 배치됨.
2-2-4. fixed
요소를 순차적인 문서 흐름에서 제거하고, 페이지 레이아웃 공간도 배정하지 않습니다. 대신 컨테이너 블록(페이지 컨테이너의 0,0 지점)을 기준으로 요소를 배치합니다. fixed를 사용하여 요소를 배치한 경우 최상위에 위치하여 스크롤 하여도 항상 위치가 고정됩니다.
>[캡쳐3] fixed 사용 예제. 초기위치 기준으로 top 0, left 100px 위치하며 타 요소와 겹칠 경우 상위에 표시. 스크롤하여도 항상 고정된 위치에 자리함.
2-2. display 속성 (CSS Flow Layout)
일반적인 흐름(Normal Flow), 또는 흐름 레이아웃(Flow Layout) 은 그 레이아웃 변화가 있기 전까지 페이지 안의 블록 요소와 인라인 요소가 보여지는 방식 입니다.
일반적인 흐름에서 인라인(inline) 요소들은 한줄로 보여지게 됩니다.
블록(block) 요소들은 단락으로 나누어져 보입니다. block 요소들은 한 줄에 나란히 배치할 수 없습니다.
<p>,<div>,<table> 등과 같은 요소는 block요소로 사용하게 되면 위아래로 배치됩니다.
<span>,<img>,<a> 는 inline 요소입니다.
그러나 display 속성을 사용하면 인라인/블록을 임의로 변경하여 사용할 수 있습니다.
>[캡쳐4] inline, block, inline-block 사용 예제
2-2-1. inline
요소의 크기만큼 공간을 점유하고 줄바꿈을 하지 않습니다.
- width/height 적용불가
- margin/padding-top/bottom 적용불가
- line-height를 원하는대로 사용할 수 없다.
2-2-2. block
요소의 높이만큼 가로 공간을 점유하여 일반적인 흐름에서 다른 요소들은 줄바꿈 됩니다.
2-2-3. inline-block
값 명칭처럼 inline과 block의 특징이 합쳐져 있습니다. 줄바꿈은 하지 않지만 공간을 점유하여 사용할 수 있습니다.
캡쳐4와 같이 마지막 <div> 태그와 같이 block요소이지만 이전 요소와 나란히 배치됩니다.
2-3. float(floating, 부동) 속성
한 요소가 보통 흐름(normal flow)으로부터 빠져 주변의 다른 요소들과 자연스럽게 어울리도록 설정하는 속성입니다. 본인의 컨테이너 기준으로 왼쪽, 오른쪽으로 방향을 지정할 수 있습니다.
*컨테이닝 블록이란?
요소의 크기와 위치는 컨테이닝 블록의 영향을 받는데, 보통 가장 가까운 블록 레벨 부모의 콘텐츠 영역이나 항상 그런 것은 아닙니다.
참고 : https://developer.mozilla.org/ko/docs/Web/CSS/Containing_block
2-3-1. none
>[캡쳐4] float:none 사용 예제. float을 설정하지 않았을 때와 동작이 같다.
float 속성의 초기값으로 위에서부터 아래로 요소들이 배열 되어지는 보통 흐름과 동작이 같습니다.
2-3-2. left
요소의 흐름을 왼쪽에서 시작되어 다른 요소들과 어울립니다.
2-3-3. right
요소의 흐름을 오른쪽에서 시작되어 다른 요소들과 어울립니다.
초기 사용용도는 위와 같이 이미지를 배치하기 위해 쓰여졌으나, float 특성을 사용하여 레이아웃을 구성하는데 자주 사용됩니다.
그러나 float 기법을 사용하여 레이아웃을 구성하게 되면 몇 가지 문제에 맞닥뜨리게 됩니다.
- margin 겹침
- float적용한 요소가 부모 컨테이너를 벗어남
- 동일 컨테이너에 여러개의 float 요소가 존재할 경우 의도와 다르게 화면에 배치될 수 있습니다.
- position: absolute과 함께 사용할 수 없습니다.
