레이아웃(layout)이란?

디자인 ·광고 ·편집에서 각 구성요소를 공간에 효과적으로 배열하는 일, 또는 그 기술

1. position 속성

position 속성은 태그를 어떻게 위치시킬지를 정의하는 합니다.
좌표를 지정 해주기 위해서는 left, right, top, bottom 속성과 함께 사용합니다.

1) relative

원래 있던 위치를 기준으로 좌표를 지정합니다.

좌표를 지정 해주기 위해서는 left, right, top, bottom 속성과 함께 자주사용됩니다. 다른 소요에 영향을 주지 않아 화면이 겹치지않습니다.

2) absolute

절대 좌표와 함께 위치를 지정해 줄 수 있습니다.

position: absolute 속성은 static이나 relative 와 다르게 바깥 쪽에 공간이 생기지 않습니다. 그래서 다른 요소랑 겹치게 할 수 있습니다.
여기서 absolute는 상위 요소인 static 위치를 기준으로 위치가 결정 된다.

3) fixed

스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정합니다.

position: fixed 속성은 브라우저 화면의 상대 위치입니다.
따라서 화면이 바뀌어도 고정된 위치를 설정 할 수 있고, 상위 요소에 영향을 받지 않습니다. 예로 화면 맨 위에 고정을 하였을 때 마우스 스크롤로 화면을 아래로 이동해도 고정된 상태로 이동하지 않습니다.

*static이라는 종류도 있으나 기본값을 의미하며, 다른 태그와의 관계에 의해 자동으로 배치되며 위치하기에 따로 부여하지는 않습니다. position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 됩니다.

2. display 속성

display 속성은 요소를 어떻게 보여줄지를 결정합니다.
inline,block,inline-block,none 4가지 속성값이 쓰이는데, 태그마다 기본값이 다릅니다.

1) inline

<span>,<img>,<a> 태그 등이 이에 해당됩니다.
block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없습니다.

width:0, height:0 으로 기본설정되어 있습니다.
word 같은 문서에서 볼드, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있습니다. 문서에서 특정 부분에 색상을 입힌다고 다음에 나오는 글이 줄바꿈 되지 않듯이 inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시됩니다.

2) block

<div>, <p>,<h1>,<h2>,<h3>,<li> 태그 등이 이에 해당됩니다.
기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 되어 나타납니다.

width:100%, height:0 으로 기본지정되어 있으며 속성을 지정 할 수 있습니다, block 요소 뒤에 등장하는 태그가 그 이전 block 요소에 오른쪽에 배치될 수 있어도 항상 다음 줄에 표시가됩니다.

3) inline-block

block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정 할 수 있습니다.

*이해하기 쉬운 이미지

3) float 속성

float 이라는 단어는 원래 ‘뜨다’ 라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. 대부분 left,right,none을 사용합니다.

left : 왼쪽에 부유하는 블록 박스를 생성하고 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 작성됩니다.

right : 오른쪽에 부유하는 블록 박스를 생성하고 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 작성되며 이후 요소에 clear속성이 있으면 페이지 흐름이 달라짐니다. none상태가 아니면 display 속성은 무시된다.

none : 요소를 적용시키지 않습니다.