HTML5 + CSS3 (7) 배경 스타일, (8) 레이아웃 스타일, (9) CSS 포지셔닝

7. 배경 스타일

* 색상 표현법

- 16진수 표기법

• #ffffff 형식(000000(검은색) ~ ffffff(흰색))으로 6자리의 16진수 표기
• 앞 2자리 = 빨강, 중간 2자리 = 초록, 끝 2자리 = 파랑
• 2자리씩 중복될 경우 중복해서 사용할 수 있음(ffaacc -> fac)

- hsl/hsla 표기법

• color: hsl(240, 100% 50%) 표기
• 240(색상, hue), 100%(채도, saturation), 50%(밝기, light)
• 투명도를 조절할 때 마지막에 알파값 추가(알파값은 불투명도를 나타내는 값, 0 ~ 1)

- rgb/rbga 표기법

• color: rgb(255, 0, 0) 표기
• 빨강, 초록, 파랑
• 0은 하나도 섞이지 않음, 255 가득 섞임
• 투명도를 조절할 때 마지막에 알파값 추가(알파값은 불투명도를 나타내는 값, 0 ~ 1)

- 색상 이름 표기법

• 색상 이름으로 표시(16가지)

* 배경 색, 배경 이미지

- background-color 속성(웹 문서의 요소에 배경색 지정)

• 16진수, rbg, rgba 값, 색상 이름 사용
• 배경 색은 상속되지 않는다.

background-color: <색상>

- background-clip 속성: 배경을 어디깔지 적용할지를 결정하는 속성

background-clip: border-box | padding-box | content-box

속성 값	설명
border-box	박스 모델의 가장 외곽인 테두리까지 적용
padding-box	박스 모델에서 테두리를 뺀 패딩 범위까지 적용
content-box	박스 모델에서 내용 부분만 적용

- background-image 속성: 이미지 지정

background-image: url(파일 경로)

- background-repeat 속성: 배경 이미지 반복 여부 및 반복 방향 지정

background-repeat: repeat | repeat-x | repeat-y | no-repeat

속성 값	설명
repeat	브라우저 화면에 가득 찰 때까지 배경 이미지를 가로와 세로를 반복
repeat-x	브라우저 창 너비와 같아질 때까지 가로로 반복
repeat-y	브라우저 창 높이와 같아질 때까지 세로로 반복
no-repeat	1번만 표시

- background-size 속성

background-size: auto | contain | cover | <크기 값> | <백분율>

속성 값	설명
auto	원래 크기
contain	요소 안에 배경 이미지가 다 들어오도록 확대/축소
cover	배경 이미지로 요소를 모두 덮도록 확대/축소
<크기 값>	너비와 높이 값을 지정
<백분율>	비율 만큼 확대/축소

- background-position 속성: 배경 이미지를 반복하지 않을 경우, 배경 이미지를 표시할 위치 지정

background-position: <수평 위치> <수직 위치>;

수평 위치: left | center | right | <백분율> | <길이 값>
수직 위치: top | center | bottom | <백분율> | <길이 값>

- background-attachment 속성: 이미지를 고정하는 속성

background-attachment: scroll | fixed

---

8. 레이아웃 스타일

* CSS, 박스 모델

- 블록 레벨 요소

• 요소를 삽입했을 때 한 줄을 차지하는 요소
• 기본 너비: 100%
• 예: <div>, <p> 등

- 인라인 레벨 요소

• 줄을 차지하지 않는 요소
• 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에 다른 요소가 들어갈 수 있음
• 예: <img>, <strong> 등

- 박스 모델: 실제 콘텐츠 영역, 패딩, 테두리, 마진 등의 요소 구성됨.

width: <크기> | <백분율> | auto
height: <크기> | <백분율> | auto

display: none | contents | block | inline | inline-block | table | table-cell 등
(블록 레벨 요소를 인라인 레벨 요소로 바꾸거나 인라인 레벨 요소를 블록 레벨 요소로 바꿈)

* 테두리 관련 속성

- border-style 속성(기본 값: none)

border-style: none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid

속성 값	설명
none	없음
hidden	테두리가 나타나지 않음
dashed	테두리를 짧은 선(직선으로 된 점선)으로 표시
dotted	테두리를 점선으로 표시
groove	테두리를 창에 조각한 것처럼 표시
inset	창에 박혀있는 것처럼 표시
outset	창에서 튀어나온 것처럼 표시
ridge	테두리를 창에서 튀어나온 것처럼 표시
solid	테두리를 실선으로 표시

- border-width속성: 테두리 두께 지정

속성 값 개수	설명	예시
1개	네 방향 모두 같은 두께	.box1 {border-width: 2px;}
2개	위아래 / 좌우 묶어서 같은 두께	.box1 {border-width: thick thin;}
4개	top -> right -> bottom -> left 순서 두께	.box1 {border-width: 5px 10px 15px 20px;}

- border-color 속성: 색상 지정

- border-radius 속성: 박스 모서리 부분을 둥글게 처리

* 여백 조절 속성

- padding 속성: 콘텐츠 영역과 테두리 사이의 여백(테두리 안쪽 여백)

- margin 속성: 현재 요소 주변의 여백, 마진을 이용하면 요소와 요소 간의 간격 조절 가능

---

9. CSS 포지셔닝

* 정의 및 주요 속성

- CSS 포지셔닝: 웹 문서 요소를 적절히 배치하는 것

- box-sizing 속성: 박스 모델의 너비 값 기준 지정

속성 값	설명
content-box	width 속성 값을 콘텐츠 영역 너비 값으로 사용(기본 값)
border-box	width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용

- float 속성: 요소를 왼쪽이나 오른족에 떠 있게 지정

float: left | right | none

- clear 속성: float 속성을 무효화 시키는 속성

clear: none | left | right | both

- position 속성: 웹 문서 안에 요소들을 배치하기 위한 속성

position: static | relative | absolute | fixed

속성 값	설명
static	- 요소를 문서의 흐름에 맞추어 배치 - left, top 속성을 지정할 수 없다.
relative	- 이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있음 - 자연스럽게 배치 - 고정 X, 변경 가능 - 상대적인 위치 지정
absolute	- 원하는 위치를 지정해 배치 - 문서의 흐름과 상관없이 원하는 위치에 요소를 배치
fixed	- 지정한 위치에 고정해 배치(화면에서 잘릴 위험 있음) - 부모 요소가 아닌 브라우저 창 기준 - 브라우저 창 화면을 스크롤하더라도 계속 같은 위치에 고정

- visibility 속성: 특정 요소를 화면에 보이거나 보이지 않게 설정하는 속성

visibility: visible | hidden | collapse

속성 값	설명
visible	표시(기본 값)
hidden	감추기, 크기는 그대로 유지하기 때문에 배치에 영향을 미침
collapse	서로 겹치도록 지정, 그 외의 영역에서 사용하면 hidden처럼 처리

* 다단으로 편집

- column-width: 단의 너비를 고정하고 화면을 분할, 화면이 커지면 단의 수가 많아진다.

column-width: <크기> | auto

- column-count: 단의 개수를 정하고 화면을 분할, 화면이 커질수록 너비가 넓어짐

column-count: <숫자> | auto

- 다단 위치 지정: 특정 요소의 앞이나 뒤

• break-before: column, avoid-column
• break-after: column, avoid-column

- column-span: 여러 단을 하나로 합치기

column-span: 1 | all

* 표 스타일

- caption-side: 캡션의 위치 지정(기본값: 위)

caption-side: top | bottom

- border: 표의 바깥 테두리와 셀 테두리 모두 지정

- border-collapse: 표 테두리와 셀 테두리를 합칠 것인지 설정

border-collapse: collapse | separate

속성 값	설명
collapse	테두리를 하나로 합쳐 표시
separate	테두리를 따로 표시(기본 값)

- border-spacing: (셀이 분리되었을 경우)인접한 셀 테두리 사이의 거리를 지정(값이 2개일 경우, 첫 번째 값은 수평, 두 번째 값은 수직 거리)

border-spacing: <크기>

- empty-cell: 셀이 분리되었을 경우, 내용이 없는 빈 센들의 표시 여부를 지정

empty-cells: show | hide

- width, height: 너비, 높이 지정

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

- text-align: 셀 안에서의 수평 정렬 방법(left, right, center)

- vertical-align: 셀 안에서의 수직 정렬 방법(top, bottom, middle)