1. position의 속성 - static, relative, absolute, fixed
| 속성명 | 설명 |
|---|---|
| static | 요소를 문서 흐름에 맞추어 배치 |
| relative | 이전 요소(주로 부모 요소)에 자연스럽게 연결하여 위치를 지정 |
| absolute | 원하는 위치를 지정해 배치 |
| fixed | 지정한 위치에 고정하여 배치 |
1. static
static은 position 속성의 기본값입니다.
요소를 나열한 순서대로 배치하며 top, right, bottom, left와 같은 속성을 사용할 수 없습니다. (float 속성은 가능)
2. relative
static이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 속성값입니다. 예로들어, static일 때 기준으로 왼쪽으로부터 50px, 위쪽으로부터 30px에 위치해 있다면 style="top:5px; left: 5px;" 을 적용하면 왼쪽으로부터 55px, 위쪽으로부터 35px 이동하는 형식입니다. 상대적 위치는 top, right, bottom, left 속성을 써서 나타낼 수 있습니다.
3. absolute
absolute 속성값은 브라우저가 문서의 흐름과 상관없이 (요소를 수직으로 쭉 놓을지, 수평으로 쭉 놓을지 등을 결정하는 것) left, right, top, bottom 속성값을 이용하여 요소를 위치시키는 속성값입니다. 이때 기준이 되는 위치는 가장 가까운 부모 요소 혹은 조상 요소 중 position 속성이 relative인 요소입니다.
4. fixed
fixed 속성값은 absolute 속성값과 마찬가지로 문서의 흐름과 상관없이 위치를 좌표로 결정합니다. 하지만 position:relative인 제일 가까운 부모 혹은 조상 요소가 아닌 브라우저 창이 기준이 됩니다. 따라서 브라우저 창을 어디로 스크롤 하더라도 계속 고정되어 표시되게 됩니다.
(기준점: 브라우저 왼쪽 위 꼭지점)
2. inline, block, inline-block 에 대해서
1. inline
display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다.
대표적인 inline 엘리먼트로 <span>이나 <a>, <em> 태그 등을 들 수 있습니다.
2. block
display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다.
대표적인 block 엘리먼트로 <div>이나 <p>, <h1> 태그 등을 들 수 있습니다.
3. inline-block
display 속성이 inline-block으로 지정된 엘리먼트는 마치 하이브리드 모드처럼 동작하는데, 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능합니다.
내부적으로는 block 엘리먼트의 규칙을 따르면서 외부적으로 inline 엘리먼트의 규칙을 따르게 되는 것입니다.
대표적인 inline-block 엘리먼트로 <button>이나 <input>, <select> 태그 등을 들 수 있습니다.
