34. CSS - CSS 포지셔닝

1. CSS 포지셔닝

1. CSS 포지셔닝이란

1. CSS 속성을 이용하여 HTML 웹 문서의 태그들을 적절한 위치에 배치하는 것을 CSS 포지셔닝이라고 한다.
2. float, position, visibility등의 속성들을 이용해서 태그들을 원하는 위치에 배치하여 웹 문서 구조를 잡는 작업

2. CSS 포지셔닝의 다양한 속성들

1. 태그를 왼쪽이나 오른쪽 배치하는 float 속성
   • 태그의 레이어를 바꿔서 붕 떠있게 하는 속성.
   • 붕 떠있는 태그의 위치를 왼쪽 구석이나 오른쪽 구석으로 배치할 수 있다.
   • 지정가능한 속성 값
     • left: 해당 태그를 웹 문서의 왼쪽에 배치
     • right: 해당 태그를 웹 문서의 오른쪽에 배치
     • none: 해당 태그를 좌우 어느 쪽에도 배치하지 않음
2. 태그들의 배치 방법 지정하는 position
   • 웹 문서 안의 태그들을 자유자재로 배치해주는 속성.
   • 지정가능한 속성 값
     • static: 웹 문서의 흐름에 맞춰 자동 배치. 기본 값.
     • relative: 바로 전에 배치된 태그와의 위치 관계를 자연스럽게 연결해서 배치. 위치 지정 가능.
     • absolute: 원하는 위치에 지정해서 배치. 부모 태그들 중 position: relative;로 잡혀있는 가장 가까운 부모를 기준으로 배치.
     • fixed: 지정한 위치에 고정해서 배치. 화면에서 태그가 잘려 보일 수 있음.
   • static을 제외한 속성 값들은 위치 조정 가능
   • 위치를 조정하는 값들
     • top: 위쪽에서 얼마나 떨어져 있는지 지정
     • left: 왼쪽에서 얼마나 떨어져 있는지 지정
     • right: 오른쪽에서 얼마나 떨어져 있는지 지정
     • bottom: 아래쪽에서 얼마나 떨어져 있는지 지정
   • static: 문서 흐름대로 배치해주는 속성 값. 기본값으로 태그들을 나열한 순서대로 배치. top, left, right, bottom 사용불가. float로 좌우 배치 가능.
   • relative: 문서 흐름대로 배치하면서 위치도 지정할 수 있는 속성 값. static과 동일하게 태그들을 배치한 순서대로 나열. top, left, right, bottom으로 위치 조정이 가능.
   • absolute: 태그를 원하는 위치에 배치할 수 있는 속성 값. 문서의 흐름과 상관없이 top, left, right, bottom으로 원하는 위치에 배치 가능. top, left, right, bottom의 기준이 되는 태그는 부모 태그들 중에 position: relative;로 설정된 가장 가까운 부모태그.
   • fixed: 브라우저 창 기준으로 배치할 수 있는 속성 값. 문서 흐름과 관계없이 배치할 수 있지만 기준이 브라우저이다. 브라우저 왼쪽 상단 꼭지점이 (0, 0) 기준으로 위치 계산. 브라우저 창 화면에서 스크롤해도 항상 그자리에 표시되는 속성 값.
3. 태그를 보이거나 보이지않게 숨겨주는 visibilty
   • 특정 태그를 화면에서 보이게 하거나 보이지 않게 해줄 때 사용하는 속성으로 숨겼을 때는 공간은 숨겨지지 않고 그대로 남아있는 특성을 가지고 있다.
   • 지정가능한 속성 값
     • visible: 화면에 태그를 보이게 함. 기본 값.
     • hidden: 화면에서 태그를 감춤. 크기는 유지되기 때문에 배치에 영향을 준다.
4. 태그를 쌓는 순서를 정해주는 z-index
   • 태그 위에 태그를 쌓을 순서를 지정할 때 사용하는 순서
   • z-index: 숫자;
   • z-index 값이 작을수록 아래에 깔리고 클수록 위에 쌓이게 된다.
   • z-index 값을 명시하지 않으면 최초로 배치된 태그가 1로 잡히고 다음부터 배치되는 태그들은 1씩 증가한 z-index가 부여된다.