웹 페이지의 배경 꾸미기
배경색 지정하기
| 속성명 | 속성값 | 설명 |
|---|---|---|
| background-color | 영문명 | 배경색을 영어 색상명으로 지정 |
| rgb(0, 0, 0) | 배경색을 RGB 표기법으로 지정 | |
| #000000 | 배경색을 16진수 표기법으로 지정 |
16진수 표기법
색상값 입력시 같은 숫자나 알파벳 반복되면 3개로 줄여서 작성가능
배경 이미지 삽입하기
| 속성명 | 속성값 | 설명 |
|---|---|---|
| background-image | url(이미지 경로) | 배경 이미지 삽입 |
| background-repeat | repeat, repeat-x, repeat-y, no-repeat | 배경 이미지 반복 |
| background-position | 가로축, 세로축 | 배경 이미지 위치 지정 |
| background-size | contain, cover | 배경 이미지 크기 지정 |
| background-attachment | fixed | 배경 이미지가 움직이지 않도록 고정 |
이미지 경로 지정
작성 중인 파일을 기준으로 상대 경로 입력
- no-repeat
- 반복하지 않음
- repeat-x, repeat-y
- 가로(x)축, 세로(y)축으로만 반복
- background-position
- center, center(정중앙 배치)
- right bottom(오른쪽 아래로 배치)
- 20px, 60px(왼쪽 위 기준 오른쪽으로 20px, 아래로 50px 이동)
- 100% 50%(왼쪽 위 기준 오른쪽으로 100%, 아래로 50% 백분율 이동)
배경 이미지 크기 조절하기
- background-size 속성값
- contain : 이미지 비율을 유지하며 영역 안을 이미지로 채움
- cover : 이미지가 잘리더라도 가득채워 배치
웹 페이지의 레이아웃 구성하기
CSS 초기화하기
- 모든 태그에는 고유의 여백과 폰트 크기 등이 기본 설정되어 있어 원하는 값으로 조절하려면 초기화 작업 필요
float - 블록 요소 좌우로 배치하기
- 블록 요소 : 화면 레이아웃 배치 시 사용
- 자동 줄 바꿈하는 특성이 있어 한 줄에 하나의 블록 요소만 넣을 수 있음
- 2개 이상의 블록 요소를 한 줄에 배치하려면 float 속성 사용
1
2
3
4
5
6
7
8
9
/* float 속성을 이용해서 블록 요소를 강제로 띄우면 부모 요소는 float 속성이 적용된 요소의 높잇값을 인식 할 수 없음 */
/* 자식 요소에 float 속성이 적용되더라도 부모 요소가 자식 요소의 높잇값을 인식할 수 있도록 하는 방법(부모 요소의 float 해제) */
.부모요소::after {
content:'';
display:block;
clear:both;
}
가상 선택자 ::after
- 적용하고자 하는 요소의 안에 있는 내용 뒷쪽에 content 추가
- content라는 속성을 반드시 추가해 주어야 한다
float가 해제된 부모 요소 안에 float되는 요소가 하나라도 있다면 형제 요소들은 모두 float를 설정해야 부모 요소가 해당 자식 요소의 전체 높잇값을 제대로 인식할 수 있음
| 속성명 | 속성값 | 설명 |
|---|---|---|
| float | left | 요소를 띄워서 왼쪽에 배치합니다 |
| right | 요소를 띄워서 오른쪽에 배치합니다 |
position - 요소를 자유롭게 배치하기
-
float가 큰 영역의 덩어리를 자우로 배치하는 역할을 한다면, position은 특정 영역 안에서 위치 조절을 자유롭게함
-
좌표값
- 가로축 : left, right
- 세로축 : top, bottom
- 양수 : 선택축 기준으로 추가된 픽셀만큼 이동
- 음수 : 반대 방향으로 이동
| 속성명 | 속성값 | 설명 |
|---|---|---|
| position | relative | 적용된 요소의 현재 위칫값 기준으로 상대 위치 지정(본인 현 위치 기준 이동) |
| absolute | 부모 요소의 특정 구간 기준으로 절대 위치 지정 | |
| fixed | 웹 브라우저 기준으로 절대 위치 지정 |
absolute
좌표값의 기준점이 부모 요소 중 position을 적용한 요소로 설정(부모 태그 중 position 속성을 적용한 요소가 없으면 최상위 태그 기준으로 위치 지정)
fixed
요소가 자식으로 종속되어 있어도 좌푯값은 무조건 브라우저 기준으로 설정되기때문에 고정됨
object-fit - 콘텐츠를 특정 영역에 채우기
| 속성명 | 속성값 | 설명 |
|---|---|---|
| object-fit | fill | 요소의 비율을 무시하고 채움 |
| cover | 요소의 비율을 유지하며 여백없이 채움 | |
| contain | 요소의 비율을 유지하며 콘텐츠가 잘리지 않게 채움 |
fill : 이미지 비율이 바뀌어 찌그러질 수 있음
cover : 이미지가 확대되어 잘릴 수 있음
contain : 공백이 생길 수 있음
z-index - 겹쳐 있는 요소의 z축 순서 지정하기
| 속성명 | 속성값 | 설명 |
|---|---|---|
| z-index | 순섯값 | 요소에 z축 순서 지정 (값이 큰 요소가 위로 올라감) |
값이 큰 요소가 앞으로 오게됨
opacity - 요소의 투명도 설정하기
| 속성명 | 속성값 | 설명 |
|---|---|---|
| opacity | 0~1 | 요소의 투명도 지정 |
속성값 0 ~ 1
0 : 투명
0.5 : 반투명
1 : 완전 불투명
다양한 그래픽 효과 적용하기
box-shadow, text-shadow - 요소의 그림자 만들기
- 해당 속성 이용시 블록 요소와 텍스트에 그림자 효과 적용 가능
| 속성명 | 속성값 | 설명 |
|---|---|---|
| box-shadow | 가로축 / 세로축 / 퍼짐 정도 / 색상 | 블록 요소의 그림자 생성 |
| text-shadow | 가로축 / 세로축 / 퍼짐 정도 / 색상 | 텍스트 그림자 생성 |
border-radius - 모서리를 둥글게 만들기
| 속성명 | 속성값 | 설명 |
|---|---|---|
| border-radius | px, % | 모서리를 속성값만큼 둥글게 만듦 |
linear-gradient, radial-gradient - 그레이디언트 적용하기
| 속성명 | 속성값 | 설명 |
|---|---|---|
| gradient | linear-gradient(방향, 색상1, 색상2) | 직선 모양의 그레이디언트 적용 |
| radial-gradient(색상1, 색상2) | 타원 모양의 그레이디언트 적용 |
1
2
3
4
5
6
7
8
9
10
/* 아래쪽 방향으로, 빨강 > 파랑 */
태그1 {
background : linear-gradient(to top, red, blue);
}
/* 45도 방향으로, 빨강 > 파랑 > 초록 */
/* 색상 여러개 사용 가능 */
태그2 {
background : linear-gradient(45deg, red, blue, green);
}
filter - 특수 효과 사용하기
| 속성명 | 속성값 | 설명 |
|---|---|---|
| filter | blur | 요소의 흐림 효과 조절 |
| brightness | 요소의 밝기 조절 | |
| contrast | 요소의 명도 대비 조절 | |
| grayscale | 요소의 흑백 지정 | |
| hue-rotate | 요소의 색상 단계 조절 | |
| invert | 요소의 색상 반전 단계 조절 | |
| saturate | 요소의 채도 조절 | |
| sepia | 요소의 갈색 톤 단계 조절 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/* 값이 커질 수록 blur 효과 커짐 */
태그1 {
filter: blur(1px);
}
/* 1보다 작아지면 어두워지고 커지면 밝아짐 */
태그2 {
filter: brightness(1);
}
/* 100%에서 작아지면 대비 감소, 커지면 증가 */
태그3 {
filter: contrast(100%);
}
/* 100%에 가까울수록 흑백으로 전환 */
태그4 {
filter: grayscale(100%);
}
/* 0deg는 원색상, 0~360deg까지 색상 변경 가능 */
태그5 {
filter: hue-rotate(100deg);
}
/* 100%에 가까울수록 색상 반전 */
태그6 {
filter: invert(100%);
}
/* 0에 가까울수록 채도가 낮아짐 */
태그7 {
filter: saturate(1);
}
/* 100%에 가까울수록 갈색 톤으로 변경 */
태그8 {
filter: sepia(100%);
}