1. position 속성
position 속성은 문서 상에 요소를 배치하는 방법을 결정한다.
1-1. static
위 사진의 노란색 박스의 position은 현재 static이다. static은 기본값으로, 요소를 HTML 문서에서 작성된 순서 그대로 나타낸다.
1-2. relative
position: relative;
top: 40px;
left: 40x;
relative는 요소를 원래 위치를 기준으로 상대적으로 배치해준다.
요소의 위치 지정은 top, bottom, left, right 속성을 이용해서 지정할 수 있다.
static의 예시 사진과 비교했을 때, 위와 왼쪽 기준으로 40px 씩의 공간이 생긴 것을 확인 할 수 있다.
1-3. absolute
position: absolute;
top: 40px; left: 40px;
absolute 속성은 자신의 상위 요소 중 position 속성이 static이 아닌 첫 번째 상위 요소가 배치 기준이 된다. 만약 상위에 position 속성이 static이 아닌 요소가 없다면, <body>요소가 배치 기준이 된다.
그렇기 때문에, 어떤 요소의 display 속성을 absolute로 설정하면 부모 요소의 display 속성을 relative로 지정하는 경우가 많다.
1-4. fixed
position: fixed;
bottom: 0px;
fixed는 부모의 속성에 상관없이 항상 화면(window)에서 절대적인 위치를 가지게 되며, 스크롤 시에도 고정되어 있다.
2. display 속성
display 속성은 해당 HTML 요소를 어떻게 보여주는지를 결정한다.
대부분의 HTML 요소는 display 속성의 기본값으로 block, inline 두 가지 값 중 하나의 값을 가진다.
2-1. block
<div>, <p>, <h1>, <li>태그 등이 해당된다.
언제나 새로운 라인에서 시작하며, 가로 영역의 모든 너비를 차지한다. width, height 속성을 지정할 수 있다.
2-2. inline
<span>, <a>, <img>태그들은 대표적인 인라인 요소들이다. 인라인 요소들은 새로운 라인에서 시작하지 않는다. (자동으로 줄 바꿈이 되지 않는다.) 또한, 요소의 너비도 해당 HTML 요소의 내용만큼만 차지한다.
속성값이 블록인 요소의 속성값을 인라인으로 바꿀 수 있고, 그 반대의 경우도 가능하다.
블록 요소의 속성값을 인라인으로 변경하게 된다면, 가로 영역의 모든 너비를 차지하게 되는 특징을 잃어버리게 된다. 하지만, display 속성값을 변경해도 실제로 해당 요소가 완전히 다른 타입의 요소로 바뀌는 것은 아니다. 그렇기 때문에, 인라인 요소를 블록으로 변경하더라도 내부에 다른 요소를 포함할 수는 없다.
3. float에 대해서
float은 원래 '뜨다'라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성이다.
