✏️색상과 배경을 위한 스타일
웹에서 색상 표현하는 방법
▪️ 16진수 표기법
▪️ RGB / RGBA 표기법
▪️ HSL / HSLA 표기법 : hue(색상) 값, saturation(채도) 값, lightness(밝기) 값, alpha(불투명도) 값
▪️ 색상 이름 표기법
▪️ 색상 추출 사이트 이용
배경 색과 배경 이미지
background-color 속성 : 배경 색 지정하기
▪️ 스타일 상속이 이루어 지지 않는다.
background-clip 속성 : 배경 적용 범위 조절하기
▪️ 박스 모델 관점에서 배경 적용 범위를 조절한다.
| 속성 값 | 설명 |
|---|---|
| border-box | 박스 모델의 가장 외곽인 테두리(border)까지 적용 |
| padding-box | 박스 모델에서 테두리를 뺀 패딩(padding)까지 적용 |
| content-box | 박스 모델에서 내용 부분에만 적용 |
background-image 속성 : 웹 요소에 배경 이미지 넣기
▪️ 클래스 선택자나 id 선택자를 이용해 태그에 배경 이미지를 지정한다.
▪️ backgroun-image : url(파일경로)
▪️ 배경 이미지가 여러 개 사용될 경우, 첫번째 이미지부터 순서대로 표시한다.
▪️ 이미지가 채우려는 요소 크기보다 작을 경우, 가로와 세로가 반복되어 채워진다.
background-repeat 속성 : 배경 이미지 반복 방법 지정하기
| 속성 값 | 설명 |
|---|---|
| repeat | 브라우저 화면에 가득 찰 때까지 이미지 반복 |
| repeat-x | 브라우저 창 너비와 같아질 때까지 이미지 가로로 반복 |
| repeat-y | 브라우저 창 높이와 같아질 때까지 이미지 세로로 반복 |
| no-repeat | 배경 이미지를 한번만 표시하고 반복하지 않음 |
background-size 속성 : 배경 이미지 크기 조절하기
| 속성 값 | 설명 |
|---|---|
| auto | 원래 배경 이미지 크기만큼 표시 |
| contain | 요소 안에 배경 이미지가 다 들어오도록 확대/축소 |
| cover | 배경 이미지로 요소를 모두 덮도록 확대/축소 |
| <크기 값> | 너비 값과 높이 값을 지정 |
| <백분율> | 이미지가 들어갈 요소의 크기를 기준으로 백분율 값을 지정 (100% 100%로 값을 지정하면 요소의 너비와 높이에 맞추어짐) |
background-position 속성 : 배경 이미지 위치 조절하기
▪️ 백분율 표시법, 길이 표시법
▪️ 키워드 표시법 : top, right, bottom, left, center
background-origin 속성 : 배경 이미지 배치할 기준 조절하기
▪️ background-position 속성을 이용해 이미지를 배치할 때 기준을 지정해준다.
| 속성 값 | 설명 |
|---|---|
| border-box | 박스 모델의 가장 외곽인 테두리(border)가 기준 |
| padding-box | 박스 모델에서 테두리를 뺀 패딩(padding)이 기준 |
| content-box | 박스 모델에서 내용 부분이 기준 |
background-attachment 속성 : 배경 이미지 고정하기
▪️ 스크롤을 내렸을 때 이미지도 함께 이동하기 때문에 배경 이미지를 고정시키고 싶을 때 사용한다.
| 속성 값 | 설명 |
|---|---|
| scroll | 함께 스크롤 (기본 값) |
| fixed | 화면이 스크롤 되더라도 이미지 고정 |
✔️ background 속성 하나로 배경 이미지를 제어하기 위해서는 다음과 같은 순서로 사용한다.
1. background-image
2. background-repeat
3. background-attachment
4. background-position
5. background-clip
6. background-origin
7. background-size
📍CSS 박스 모델
블록 레벨 요소 / 인라인 레벨 요소
블록 레벨 요소
태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소이다.
▪️ 너비나 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야 한다.
▪️ 해당 요소의 너비가 100% 라는 의미이기 때문에 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다.
✔️ p, h1~h6, ul, ol, div, blockquote, form, hr, table, fieldset, address
인라인 레벨 요소
태그를 사용해 요소를 삽입했을 때 줄을 차지하지 않는 요소이다.
▪️ 화면에 표시되는 콘텐츠만큼만 영역을 차지한다.
▪️ 나머지 공간에는 다른 요소가 올 수 있다.
✔️ img, object, br, sub, sup, span, input, textarea, label, button
박스 모델 Box Model
◾ 박스 형태의 콘텐츠를 말한다.
◾ 박스 형태의 요소를 '박스 모델 요소'라고 부른다.
◾ 실제 콘텐츠 영역, padding, border, margin 요소로 구성된다.
width, height 속성 : 콘텐츠 영역의 크기
▪️ px, cm, 백분율, auto(기본 값)으로 지정한다.
⚠️ 콘텐츠 크기 계산 시 주의점
▪️ 모던 브라우저에서 박스 모델의 전체 너비 = width 값 + 좌우 padding + 좌우 테두리
▪️ 인터넷 익스플로러 6에서 박스 모델의 width 값 = 콘텐츠 너비 + 좌우 padding + 좌우 테두리
display 속성 : 화면 배치 방법 결정하기
▪️ 블록 레벨 요소, 인라인 레벨 요소를 바꿀 때 사용한다.
| 속성 값 | 설명 |
|---|---|
| block | 해당 요소를 블록 레벨로 지정 |
| inline | 블록 레벨 요소를 인라인 레벨로 바꿈 주로 목록, 수평 내비게이션용에서 사용 |
| inline-block | 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정 너비, 높이, 위아래 마진, float 값 정확히 적용 가능 |
| none | 해당 요소를 표시 X , 공간 차지 X |
| inherit | 상위 요소의 display 속성을 상속 받음 |
테두리 관련 속성
border-style 속성 : 테두리 스타일 지정하기
| 속성 값 | 설명 |
|---|---|
| none | 테두리가 나타나지 않음 (기본 값) |
| hidden | 테두리가 나타나지 않음border-collapse:collapse 일 경우, 다른 테두리도 표시 X |
| dashed | 테두리를 짧은 선으로 표시 |
| dotted | 테두리를 점선으로 표시 |
| double | 테두리를 이중선(겹선)으로 표시두 선 사이 간격은 border-width 값으로 지정 |
| groove | 테두리를 창에 조각한 것처럼 표시 |
| inset | border-collapse:separate일 경우, 전체 박스 테두리가 창에 박혀 있는 것처럼 표시 border-collapse:collapse일 경우, groove와 똑같이 표시 |
| outset | border-collapse:separate일 경우, 전체 박스 테두리가 창에 튀어나온 것처럼 표시 border-collapse:collapse일 경우, ridge와 똑같이 표시 |
| ridge | 테두리를 창에서 튀어나온 것처럼 표시 |
| solid | 테두리를 실선으로 표시 |
border-width 속성 : 테두리 두께 지정하기
▪️ top, right, bottom, left 순으로 두께를 지정한다.
▪️ px 과 같은 크기를 직접 입력할 수도 있고, thin/medium/thick과 같은 키워드에서 선택할 수도 있다.
border-color 속성 : 테두리 색상 지정하기
▪️ top, right, bottom, left 순으로 테두리 색상을 지정한다.
✔️ border 속성 : 테두리 스타일 묶어 지정하기
▪️ border : <두께> <색상> <스타일>
border-radius 속성 : 박스 모서리 둥글게 만들기
▪️ <크기> : 둥글게 처리할 반지름 크기를 px나 em 같은 단위와 함께 수치로 표시한다.
▪️ <백분율> : 현재 요소의 크기를 기준으로 둥글게 처리할 반지름 크기를 %로 지정한다.
▪️ 타원 형태로 둥글게 만들 땐 속성 값에 <가로 반지름 크기>와 <세로 반지름 크기>를 함께 지정한다.
box-shadow 속성 : 선택한 요소에 그림자 효과 내기
▪️ 수평거리와 수직거리는 필수 값이다.
▪️ inset은 안쪽 그림자를 설정할 때 사용한다.
▪️ box-shadow : none | <그림자 값> [, <그림자 값>]*;<그림자 값> = <수평 거리> <수직 거리> <흐림 정도><번짐 정도> <색상> inset
여백을 조절하는 속성
margin 속성 : 요소 주변 여백 설정하기
▪️ top, right, bottom, left 순으로 두께를 지정한다.
▪️ 값이 2개인 경우 서로 마주보는 값끼리 묶인다.
▪️ {margin : 0 auto} 화면 중앙에 배치하기
| 속성 값 | 설명 |
|---|---|
| <크기> | 너비나 높이 값을 px이나 cm 같은 단위와 함께 수치로 지정 |
| <백분율> | 박스 모델을 포함하고 있는 부모 요소를 기준으로 너비나 높이 값을 %로 지정 |
| auto | display속성에서 지정한 값에 맞게 자동 지정 |
✔️ margin overlap (마진 중첩) 현상
요소를 세로로 배치할 경우, 마진과 마진이 만나면 마진 값이 큰 쪽으로 겹쳐지는 현상이다.
▪️ margin overlap (마진 중첩) 또는 margin collapse (마진 상쇄)라고 부른다.
▪️ 여러 요소를 세로로 배치할 때 맨 위와 맨 아래 마진에 비해 중간 마진들이 너무 커지는 것을 방지하기 위함이다.
▪️ 오른쪽과 왼쪽 마진이 만나는 경우는 마진 중첩 현상이 일어나지 않는다.
padding 속성 : 콘텐츠 영역과 테두리 사이 여백 설정하기
▪️ padding, top, right, bottom, left를 사용할 수 있다.
▪️ margin과 속성 값이 동일하게 사용된다.
📍CSS 레이아웃
CSS 포지셔닝
box-sizing 속성 : 박스 너비 기준 정하기
⚠️ css의 width 속성은 콘텐츠 영역의 너비를 나타내기 때문에 해당 요소에 적용한 패딩이나 테두리 크기를 따로 계산해서 배치해야하는 문제점이 있다.
▪️ 이때 box-sizing 속성을 사용하면 콘텐츠 영역의 너비에 패딩과 테두리 크기까지 합쳐 width 속성을 지정할 수 있다.
| 속성 값 | 설명 |
|---|---|
| content-box | width 속성 값을 콘텐츠 영역 너비 값으로 사용 (기본 값) |
| border-box | width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용 |
float 속성 : 왼쪽이나 오른쪽으로 배치하기
웹 요소를 문서 위에 떠있게 만드는데 이때 '떠 있다' 라는 의미는 왼쪽 구석이나 오른쪽 구석에 요소가 배치된다는 뜻이다.
▪️ 속성 값은 left, right, none 이 있다.
▪️ float를 이용해 배치 시킨 후 다른 요소와 적당한 간격을 유지하기 위해 margin-right 속성을 함께 사용한다.
clear 속성 : float 속성 해제하기
▪️ float 속성을 이용해 배치하면 그 다음 요소들에게도 똑같은 속성이 전달되기 때문에 clear 속성을 이용해 이어지는 속성을 끊어준다.
▪️ float: left 를 위에서 사용하였다면, clear : left 를 다음에 적용시켜 무효화 시킨다.
▪️ 속성 값과 관계없이 무조건 기본 상태로 되돌리고 싶다면 clear: both 를 사용한다.
position 속성 : 배치 방법 지정하기
| 속성 값 | 설명 |
|---|---|
| static | 요소를 문서의 흐름에 맞추어 배치 |
| relative | 이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있음 |
| absolute | 원하는 위치를 지정해 배치 |
| fixed | 지정한 위치에 고정하여 배치, 화면에서 요소가 잘릴 수도 있음 |
▪️ position 속성 중 static 을 제외한 나머지 속성 값에서는 좌표를 이용해 각 요소의 위치를 조절할 수 있다.
▪️ top, bottom, left, right 로 지정한다.
✔️ 속성 값
static : 오로지 float 속성을 이용해 좌우로 배치한다.
relative : 문서의 흐름에 따라 위치를 지정하는데, 이 속성을 사용해 요소끼리 겹치게 할 수 있다.
absolute : 요소를 원하는 위치에 배치할 수 있는데, 이때 기준이 되는 위치는 가장 가까운 부모 요소나 조상 요소 중 position 속성이 relative인 요소이다.
fixed : 브라우저 창을 스크롤 하더라도 화면에 계속 고정되어 표시한다.
visibility 속성 : 요소를 보이게 하거나 보이지 않게 하기
| 속성 값 | 설명 |
|---|---|
| visible | 화면에 요소를 표시 (기본값) |
| hidden | 화면에서 요소를 감추지만, 크기는 그대로 유지하여 배치에 영향을 미침 |
| collapse | 표의 행, 열, 행 그룹, 열 그룹 등에서 지정하면 서로 겹치도록 조절그 외의 영역에서 사용하면 hidden 처리 |
z-index 속성 : 요소 쌓는 순서 정하기
▪️ z-index 값이 작을 수록 아래에 쌓이고 값이 클수록 z-index 값이 작은 요소보다 위에 쌓인다.
▪️ z-index 값을 명시하지 않을 경우, 웹 문서에 맨 먼저 삽입하는 요소가 z-index : 1 값을 가지면서 그 후 삽입되는 요소들은 z-index 값이 점점 커진다.
▪️ position 속성이 설정되어 있지 않으면 z-index 값에 영향을 미치지 않는다.
