[KUIT 3기 Web] 2주차(3) - CSS positioning, 원하는 위치에 요소 배치하기

1) static

• position 속성의 기본값. 요소를 나열한 순서대로 배치.
• 원하는 위치에 콘텐츠를 배치할 방법 없음.
• 콘텐츠를 왼쪽에서 오른쪽으로 추가하다가, 오른쪽에 공간이 없을 경우 다음 줄로 넘겨서 순서대로 배치한다.

2) relative

• static과 같이 나열한 순서대로 배치되지만 top, right, bottom, left 속성을 사용해 원하는 위치를 지정할 수 있다.
• 이때 좌표값은 static 기준으로 위치한 곳이 (0px, 0px)이 된다.
• 지정한 속성에 따라 상/하/좌/우 원하는 자리에 배치하는 것이 가능 하다.

3) absolute

• top, right, bottom, left 속성값을 이용해 요소를 원하는 위치에 배치할 수 있다.
• 기준 위치는 position 속성이 relative인 요소 중 가장 가까운 상위 요소.

4) fixed

• 전체 브라우저 창 기준으로 좌표를 고정해서 표시.

5) sticky

• 현재 브라우저에 보여지는 화면 기준으로 좌표를 고정해서 표시.
• 스크롤 하더라도 같은 위치에 계속 고정되어 있는다.
• 부모 요소 기준으로 고정하며, 부모 요소를 넘어가면 고정이 풀린다.

5-1) sticky가 적용되지 않는 이유

1. 부모 요소 안에서만 작동한다.
2. 부모 요소에 height 속성이 있어야 한다.
3. 부모 요소에 overflow 속성이 hidden일 경우, sticky 작동 안한다.

 

+) white-space : 단어 기준으로 잘라서 여러 줄로 만들어 준다.

 

+) overflow : text가 바깥으로 빠져나왔을 때 보일지, 안 보일지 결정한다.

 

+) z-index

• 겹치는 박스들의 수직 위치를 조정하기 위한 속성.
• z-index 값이 높을수록 위, 작을수록 아래에 배치되며 -인 경우 기준 콘텐츠의 아래쪽을 의미.
• position 속성이 적용된 경우에만 의미가 있음.

---

분명히 z-index는 position 속성이 적용된 경우에만 의미가 있다라고 기록해 놓고서도 오늘 구현할 때도 까먹어서 왜 z-index 적용이 안 되었나 헤멨다. chrome devtools 들어가서 position 적용해야 한다는 오류 메세지를 보고서야 수정했으니.

프로젝트를 계속 하면서 느끼는 거지만, CSS 속성들은 큼직큼직한 부분들만 기억하고 있다가 세밀한 조건들은 그때그때 찾아보는 것이 적당하다. 모든 것을 기억하기보단 어떤 상황에서 어떤 검색어로 찾으면 빠를지 딕셔너리처럼 인덱싱 해두면 좋지 않을까.