CSS 포지셔닝

목차

주요 속성

1) CSS 포지셔닝이란?

① CSS를 이용해 웹 문서 요소를 적절히 배치하는 것

 

2) 박스 너비 기준 정하기

box-sizing 속성

① 웹 문서에 여러 요소를 배치하려면 각 요소의 너비 값을 기준으로 해야되는데 width 속성은 박스 모델
전체의 너비가 아니고 콘텐츠 부분의 너비임. 따라서 패딩이나 테두리 크기는 따로 계산해야됨
② box-sizing 속성을 사용하면 width 속성을 콘텐츠 영역의 너비 값으로 할지 요소의 너비 값으로 할지 지정 가능
③ 기본형 box-sizing : content-box | border-box
④ 속성 값

content-box : width 속성 값을 콘텐츠 영역 너비 값으로 사용. 기본값

border-box : width 속성 값을 박스 모델 전체 너비 값으로 사용

 

3) float 속성

왼쪽이나 오른쪽에 배치하기

① 웹 요소를 문서위에 떠있게 만듬. 왼쪽 구석이나 오른쪽 구석에 요소를 배치

② 기본형 float : left | right | none

③ float 속성 해제하기

clear 속성 : float 속성이 더 이상 유효하지 않다고 알려주는 속성

기본형 clear : none | left | right | both

 

4) 배치 방법 지정하기

position 속성 

① 웹 문서안의 요소들을 자유자재로 배치해 주는 속성. HTML, CSS를 이용해 웹 문서를 제작할 때 중요하게 사용되는 속성 중 하나
② 기본형 position : static | relative | absolute | fixed

 

< position 속성에서 사용 가능한 속성 값>
③ static을 제외한 나머지 속성 값은 위치 조절 가능. top, bottom, left, right로 지정
- top : 위쪽에서 얼마나 떨어져 있는지
- bottom : 아래쪽에서 얼마나 떨어져 있는지
- left : 왼쪽에서 얼마나 떨어져 있는지
- right : 오른쪽에서 얼마나 떨어져 있는지

④ static 속성 값 – 문서의 흐름대로 배치하기
- position 속성의 기본 값으로 요소를 나열한 순서대로 배치
- top, bottom, left, right로 위치 지정 불가
- float 속성으로 좌우 배치는 가능
⑤ relative 속성 값 – 문서 흐름 따라 위치 지정하기
- static과 동일하게 요소를 나열한 순서대로 배치
- top, bottom, left, right로 위치 지정 가능
⑥ absolute 속성 값 – 원하는 위치에 배치하기
- 문서의 흐름과 상관없이 top, bottom, left, right로 원하는 위치에 배치
- 기준이 되는 위치 가장 가까운 부모 요소 중 position: relative;인 요소
⑦ fixed 속성 값 – 브라우저 창 기준으로 배치하기
- absolute 속성과 동일하게 문서 흐름과 상관없이 배치 가능하지만 기준이 되는 위치가 브라우저 창
- 브라우저 창 왼쪽 위 꼭지점(0, 0) 기준으로 좌표 계산
- 브라우저 창 화면을 스크롤해도 계속 같은 위치에 고정

 

4) visibility 속성

요소를 보이게 하거나 보이지 않게 하기

① 특정 요소를 화면에 보이게 하거나 보이지 않게 또는 겹치게 설정하는 속성

② 기본형 visivility : visivle | hidden | collapse

③ 속성 값

속성 값	설명
visivle	화면에 요소를 표시. 기본 값
hidden	화면에서 요소 감춤. 하지만 크기는 그대로 유지되기 때문에 배치에 영향을 줌.
collapse	표의 행, 열, 행 그룸, 열 그룹 등에서 지정하면 서로 겹치도록 조절 그외 영역에서는 hidden처럼 처리됨

 

5) 요소를 쌓는 순서 정하기

z-index 속성

① 요소 위에 요소를 쌓을 때 쌓는 순서 지정
② 기본형 z-index: <숫자>
③ z-index가 작을수록 아래에 쌓이고 클수록 위에 쌓임
④ z-index를 명시하지 않으면 맨 먼저 삽입된 요소가 1로 지정되고 그 후 삽입되는 요소들은 1씩 증가

 

다단

1) 단의 너비 고정

column-width

① 화면이 커지면 단의 개수가 많아짐 – 단의 너비 고정하고 다단 구성하기

② 기본형 column-width : <크기> | auto

< 크기 > : 단 너비를 직접 지정

auto : 단의 개수(column-count)같은 다른 속성에 따라 단의 너비가 자동 계산

 

2) 단의 개수 고정

column-count

① 브라우저 창의 너비와 상관없이 단의 개수 유지

② 화면이 커지면 단의 너비가 증가

③ 기본형 column-count : <숫자> | auto

 

3) 다단 위치 지정

break-after

① 기본형
- break-before: column | avoid-column -> 특정 요소 앞
- break-after: column | avoid-column -> 특정 요소 뒤
- break-inside: column | avoid-column -> 특정 요소 안
② column : 단 나눔, avoid-column : 단 나누지 않음

 

4) 여러 단을 하나로 합치기

① 기본형 : column-span : 1 | all

1 : 단 하나만 합치는 것이므로 합치지 않는 것과 같음. 기본 값

all : 전체 단을 하나로 합쳐 표현. 일부만 합치는 것은 불가능

 

표스타일

1) 표 제목 위치 정하기

caption-side 속성

① caption은 기본으로 표 위쪽에 표시됨.

② 기본형 caption-side : top | bottom

 

2) 표 테두리 스타일

border 속성

① 표의 바깥 테두리와 셀 테두리 모두 지정해야 됨.

ex) border : 1px solid black;

 

3) 테두리 통합, 분리하기

border-collapse 속성

① 표 테두리와 셀 테두리를 합칠 것인지 설정

② 기본형 border-collapse : collapse | separate

            하나로 합쳐서 | 테두리를 따로 표시 기본값

 

4) 인접한 셀 테두리 사이 거리 지정

border-spacing 속성
① border-collapse: separate를 사용해 셀들을 분리했을 때, 인접한 셀 테두리 사이의 거리 지정
② 값 개수에 따른 차이
- 1개 : 수평 거리 & 수직 거리를 같게
- 2개 : 첫 번째 값은 수평 거리, 두 번째 값은 수직 거리
③ 기본형 border-spacing : <크기>

 

5) 빈 셀의 표시 여부 지정

empty-cell 속성

① border-collapse: separate를 사용해 셀들을 분리했을 때, 내용이 없는 빈 셀들의 표시 여부 지정
② 기본형 empty-cells : show | hide

 

6)표 너비와 높이 지정

 width, height 속성 
① 너비나 높이를 지정하지 않으면 셀 안의 내용이 표시될 만큼 표시
② width 값을 지정할 경우 padding 속성을 이용해 여백을 넣어주면 보기 좋게 꾸밀 수 있음

 

7) 콘텐츠에 맞게 셀 너비 지정

table-layout 속성

① 셀 안의 내용 양에 따라 셀 너비를 변하게 할지, 고정시킬지 결정

② 기본형 table-layout : fixed |auto

           셀너비를 고정 | 셀 내용에 따라 셀의 너비가 달라짐 기본값

 

8) 셀 안에서 수평 정렬

text-align 속성 

① 셀 안에서의 수평 정렬 방법 지정

② 기본형 text-align : left | right | center

 

9) 셀 안에서 수직 정렬

vertical-align 속성 

① inline이나 inline-block으로 배치한 요소의 세로 정렬 방법 지정

② 셀 안에서의 수직 정렬 방법 지정

③ 기본형 vertical - align : top | bottom | middle

④ 속성 값들

속성 값	설명
baseline	셀의 기준선에 내용의 기준선을 맞춤. 기본 값
top	패딩의 위쪽 가장자리에 내용의 윗부분을 맞춤
middle	패딩 박스의 중앙에 내용을 맞춤
bottom	패딩의 아래쪽 가장자리에 내용의 아랫부분을 맞춤