이전에는 table을 사용하여 layout을 만들기도 하였으나 html과 css의 본연의 취지와도 맞지 않을 뿐더러 반응형 웹 페이지 작성이 곤란하며 코드의 양 또한 많아져 현재는 거의 사용하지 않는다. 모던한 웹 페이지는 style과 layout을 담당하는 CSS를 사용하여 layout을 구성하는 것이 바람직하다.
layout이란 웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것이다. 공간을 분할할 때는 먼저 행을 구분한 후, 행 내부 요소를 분리하는 것이 일반적이다.핵심은 블록 레벨 요소들을 원하는 위치에 배열하는 것이다.
- position 속성값 - static, relative, absolute, fixed
position 속성은 웹 문서 안의 요소를 자유자재로 배치해 주므로 HTML과 CSS를 이용해 웹문서를 만들 때 중요합니다.
static(문서의 흐름에 맞춰 배치합니다.기본값입니다.)
relative(위치값을 지정할 수 있다는 점을 제외하면 static과 같습니다.)
absolute(relative부모값을 사용한 상위 요소를 기준으로 위치를 지정해 배치합니다.)
fixed(브라우저 창을 기준으로 위치를 지정해 고정 배치합니다.광고에 자주 사용됩니다.)
- inline, inline-block, block 에 대해서
display속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있습니다.
block(인라인 레벨 요소를 블록 레벨 요소로 만듭니다.)
inline(블록 레벨 요소를 인라인 레벨 요소로 만듭니다.)
inline-block(인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고있으며 마진과 패딩을 지정할 수 있습니다.)
none(해당 요소를 화면에 표시하지 않습니다.)
display속성값 사용 예시: {display:inline-block}
CSS를 사용하여 layout을 구성할 때에 자주 사용되는 핵심 기술은 float
왼쪽이나 오른쪽으로 배치하는 float(뜨다&떠있다)속성
float속성값 사용 예시:img{float:left}
float 속성을 해제하는 clear 속성(속성값:left,right,both)
🐔참고문헌
· 웹프로그래밍 튜토리얼
https://poiemaweb.com/css3-layout
· HTML+CSS+자바스크립트 웹 표준의 정석(이지스퍼블리싱)
