Preface
이번 장에선 배경색과 배경 이미지를 지정하는 방법과 그라데이션 효과를 사용하는 방법을 공부했다.
지난 장의 마지막 부분에서 배경 이미지를 사용한 예제를 수정할 때 마음대로 되지 않는 부분이 있었는데,
background 속성을 배운 후 다시 보니 쉽게 문제를 해결할 수 있었다.
아, 그리고 같이 공부하는 친구와 블로그 스킨에 대해 이야기하던 도중 며칠 전 공부한 웹 폰트가 생각나 친구의 블로그 헤더 부분의 글씨체를 바꿔줬다.
1. 배경색과 배경 범위 지정하기
- background-color 속성: 배경색을 지정한다.
→ 상속되지 않는다.
- background-clip: 배경색의 적용 범위를 조절한다.
1) border-box: 박스 모델의 가장 외곽인 테두리까지 적용한다. (기본값)
2) padding-box: 박스 모델에서 테두리를 뺀 패딩 범위까지 적용한다.
3) content-box: 박스 모델에서 내용(콘텐츠) 부분에만 적용한다.
2. 배경 이미지 지정하기
- background-image 속성: 웹 요소에 배경 이미지를 넣는다.
→ 파일 경로는 현재 웹 문서를 기준으로 상대 경로를 지정할 수도 있고 http://로 시작하는 절대 경로를 사용할 수도 있다.
background-image: url('이미지 파일 경로')
- background-repeat 속성: 배경 이미지의 반복 방법을 지정한다.
1) repeat: 브라우저 화면에 가득 찰 때까지 가로와 세로로 반복한다. (기본값)
2) repeat-x: 브라우저 화면 너비에 가득 찰 때까지 가로로 반복한다.
3) repeat-y: 브라우저 화면 높이에 가득 찰 때까지 세로로 반복한다.
4) no-repeat: 한 번만 표시하고 반복하지 않는다.
- background-position 속성: 배경 이미지의 위치를 조절한다.
1) 수평 위치: left, center, right, 백분율, 길이 값
2) 수직 위치: top, center, botton, 백분율, 길이 값
3) 속성값을 2개로 지정하면 첫 번째 값은 수평 위치의 값이 되고, 두 번째 값은 수직 위치의 값이 된다.
4) 속성값을 하나만 지정하면 지정한 값을 수평 위칫값으로 간주하고, 수직 위칫값은 center로 간주한다.
background-position: <수평 위치> <수직 위치>;
- background-origin 속성: 배경 이미지의 적용 범위를 조절한다.
1) content-box: 박스 모델에서 내용 부분에만 배경 이미지를 표시한다. (기본값)
2) padding-box: 박스 모델에서 패딩까지 배경 이미지를 표시한다.
3) border-box: 박스 모델에서 테두리까지 배경 이미지를 표시한다.
- background-attachment 속성: 배경 이미지를 고정한다.
1) scroll: 화면을 스크롤하면 배경 이미지도 스크롤된다. (기본값)
2) fixed: 화면을 스크롤하면 배경 이미지는 고정되고 내용만 스크롤된다.
- background 속성: 배경 이미지와 관련된 속성을 하나의 속성으로 줄여 사용할 수 있다.
- background-size 속성: 배경 이미지 크기를 조절한다.
→ 속성값이 하나일 땐 그 값을 너비로 인식하고, 높이는 원래 이미지의 너비와 높이 비율에 따라 자동 계산한다.
1) auto: 원래 배경 이미지 크기만큼 표시한다. (기본값)
2) contain: 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소한다.
3) cover: 배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소한다.
4) 크기: 이미지의 너비와 높이를 지정한다.
5) 백분율: 배경 이미지가 들어갈 요소의 크기를 기준으로 값을 지정한다.
3. 그라데이션 효과로 배경 꾸미기
- 선형 그라데이션: 색상이 수직, 수평 또는 대각선 방향으로 일정하게 변하는 것
→ linear-gradient 함수를 사용한다.
- 방향
1) 끝 지점을 기준으로 to 예약어와 함께 사용한다. (예약어 최대 2개까지 사용 가능)
2) 예약어 종류: left, right, top, bottom
3) 위치나 각도 옵션을 생략하면 to bottom으로 인식한다.
- 각도: 그라데이션이 끝나는 부분이고 값은 deg로 표기한다.
- 색상 중지점: 그라데이션에서 바뀌는 색
→ 쉼표로 색상을 구분하는데, 중지점의 위치도 함께 지정할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>선형 그러데이션</title>
<style>
div {
width:500px;
height:300px;
margin: 0 auto;
}
.grad {
background: #06f; /* css3를 지원하지 않는 브라우저용 */
background: linear-gradient(to bottom, #06f, white 30%, rgb(102, 196, 35)); /* 위에서부터 30% 위치에 색상 중지점 지정 */
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>
- 원형 그라데이션: 원 또는 타원의 중심에서부터 동심원을 그리며 바깥 방향으로 색상이 바뀐다.
1) 모양: 원형(circle), 타원형(ellipse: 기본값)
2) 크기
① closest-side
② closest-corner
③ farthest-side
④ farthest-corner: 기본값
3) 위치: at 키워드와 함께 지정하면 그라데이션이 시작하는 원의 중심을 다르게 나타낼 수 있다.
→ 키워드나 백분율을 사용하며, 생략하면 가로와 세로 모두 center로 인식한다.
- 그라데이션을 사용한 패턴 만들기
1) repeating-linear-gradient: 선형 그라데이션을 반복한다.
2) repeating-radial-gradient: 원형 그라데이션을 반복한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>원형 그러데이션 반복</title>
<style>
div {
width:500px;
height:300px;
border:1px solid #222;
border-radius:10px;
margin-bottom:30px;
}
.grad1 {
background: red;
background: repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);
}
.grad2 {
background: #ccc;
background: repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%);
}
</style>
</head>
<body>
<div class="grad1"></div>
<div class="grad2"></div>
</body>
</html>
'Web Front > HTML + CSS + 자바스크립트' 카테고리의 다른 글
| [CSS] 트랜지션과 애니메이션 (0) | 2022.08.01 |
|---|---|
| [CSS] CSS 고급 선택자 (0) | 2022.07.30 |
| [CSS] 레이아웃을 구성하는 CSS 박스 모델 (2) (0) | 2022.07.27 |
| [CSS] 레이아웃을 구성하는 CSS 박스 모델 (1) (0) | 2022.07.26 |
| [CSS] 텍스트를 표현하는 다양한 스타일 (0) | 2022.07.23 |
댓글