Learn HTML & CSS. 12.Layout(*)

Review what I learned

1. position 속성은 태그의 위치를 세가지 방식으로 지정할 수 있게 해준다.


2. position 속성을 relative 로 설정하면 해당 태그의 위치가 상대 위치가 된다. (기본 위치가 기준)
   태그에 top, bottom, left, right 값을 설정할 수 있게 되며, 이는 좌표설정과 비슷하다.
   (예. top: 240px; 의 경우 해당 태그가 240px만큼 내려와있게 된다.)
   
   
3. position 속성을 absolute 로 설정하면 해당 태그의 위치가 절대 위치가 된다. (기본 위치를 기준)
   태그에 top, bottom, left, right 값을 설정할 수 있게 되며, 해당 페이지에서 위치가 고정되지만, scroll할 경우 밖으로 같이 나가게 된다.


4. position 속성을 fixed 로 설정하면 해당 태그의 위치가 고정되게 된다. 이는 scroll을 해도 화면에서 그대로 유지되게 된다.


5. z-index 속성은 서로 겹쳐 보이게 되는 태그들 중에서 어떤 태그가 위로 올라오게 될지를 정해준다.
   (클수록 위로 올라오게 됨) (10이 1보다 위에 있게 된다.) (기본값은 0)


6. float 속성은 해당 태그를 페이지에서 왼쪽(left)이나 오른쪽(right)으로 몰아 넣을 수 있다. (가능한 최대로)


7. clear 속성을 통해 해당 태그의 왼쪽이나 오른쪽 또는 모두 비울 수 있다. (left, right, both, none)
   (기본값 : none)

이 단원은 이해하기 살짝 어려운 감이 있었다. absolute와 float, clear은 크게 사용할 일이 없을 것 같다.

출처 : codecademy(HTML & CSS)