레이아웃

레이아웃(layout)을 만든다는 것은 웹 페이지를 어떻게 구성할 지를 정하고 컨텐츠를 배치할 공간을 나누는 작업이라고 할 수 있다. 즉, 웹 페이지의 밑그림을 그리는 작업이라고 할 수 있다. 내 경험상(적은 경험이지만 자기소개 페이지 만들때;) 레이아웃을 만드는 일이 가장 중요하고 생각보다 어려운 일인것 같다. 물론 웹 페이지에서 사용하는 레이아웃은 어느 정도 일반화된 레이아웃이 몇 가지 있겠지만 새롭고 효과적인 레이아웃을 만드는 것은 어려운 작업일 것 같다.

레이아웃은 CSS의 여러 속성들을 사용하여 구성할 수 있는데 대표적으로 position, display , float 이 있다. 계속 헷갈리는 개념이기 때문에 확실히 정리하고 반복적으로 사용해봐야 제대로 사용할 수 있을것 같다.

position

position 은 요소의 위치를 결정하는 속성

static

default값이며 따로 명시하지 않으면 static값을 가진다. html문서에서 작성한 요소 순서대로 배열되며, top, bottom,left,right 의 속성을 사용할 수 없다.

relative

static이었을때를 기준으로 상대적인 위치를 지정할 수 있는 속성값. 즉, top, bottom,left,right 을 사용하면 html문서에 작성한 순서에 의해 정해진 요소의 위치를 기준으로 배치한다.

absolute

relative 의 기준이 static 일때 위치를 기준으로 위치를 정하는 것인 반면, absolute는 모두 무시하고 무조건 브라우저 왼쪽 상단을 기준으로 위치를 지정한다. 또는, 가장 가까운 부모 요소나 조상 요소 중 position값이 relative 인 요소를 기준으로 한다.

fixed

요소의 위치를 스크롤과 상관없이 좌측상단을 기준으로 특정 위치에 고정한다.

display

display는 브라우저에 요소의 크기를 어떻게 표시할 지를 결정하는 속성.

block

div 태그의 default값이며 가로 한 줄을 다 차지한다.엄연히 말하면 자신을 감싸는 요소의 너비 100%를 차지한다. 태그마다 default값은 다를 수 있다.

inline

자신의 컨텐츠를 감싸는 만큼만 차지한다. 임의로 width값을 줘도 적용되지 않고 컨텐츠를 감싸는 만큼만 차지한다.즉, 크기 변경 불가능.

inline-block

inline과 block 을 섞어놓은 것으로 컨텐츠를 감싸는 만큼 차지하지만 크기를 임의로 변경할 수 있다. 👍

float

요소를 띄워서 한 쪽으로 배치할 때 사용하는 속성. 가로로 배치하고자 할 때 많이 사용한다.

left

요소를 오른쪽에 이어서 배치한다.(오타가 아니고 생각하기 쉽게 말하면 오른쪽에 요소를 이어서 배치하는 것임)

right

요소를 왼쪽에 이어서 배치.

none

float을 사용하지 않음.

left, right 속성 사용시 display 속성은 무시된다.

[TIL] #8. HTML&CSS - 레이아웃