Keep going
이미지와 그러데이션 효과로 배경 꾸미기 본문
9-1 배경색과 배경 범위 지정하기
배경색을 지정하는 background-color 속성
배경색을 지정하려면 배경을 넣고 싶은 요소의 스타일 규칙을 만들 때 background-color 속성을 사용한다.
background-color는 앞에서 설명한 16진수나 rgb 값 또는 색상 이름을 사용해서 지정한다.
|
background-color : #008000;
background-color : rgb(0,128,0);
background-color : green;
|
cs |
글꼴이나 글자 크기 등은 <body> 태그 선택자에서 지정하면 문제 전체에 상속된다.
따라서 하위 요소에서 스타일을 수정하지 않는 한 문서 전체에 똑같이 적용되었다.
하지만 예외로 background-color 값은 상속되지 않는다.
기본적으로 모든 웹 문서 요소의 배경은 투명하므로 body 스타일로 지정한 문서 배경이 그대로 비치는 것일 뿐 웹 요소에 배경색이 상속된 것은 아니다.
배경색의 적용 범위를 조절하는 background-clip 속성
배경을 넣고 싶은 요소마다 속성을 입력하면 되지만 박스 모델 관점에서 배경의 적용 범위를 조절할 수도 있다.
박스 모델의 가장 외곽인 테두리까지 적용할지, 테두리를 빼고 패딩 범위까지 적용할지, 아니면 내용 부분에만 적용할지 선택할 수 있다.
| 종류 | 설명 |
| border-box | 박스 모델의 가장 외곽인 테두리까지 적용한다. 기본값이다. |
| padding-box | 박스 모델에서 테두리를 뺀 패딩 범위까지 적용한다. |
| content-box | 박스 모델에서 내용 부분에만 적용한다. |
|
#clip-border { // 테두리까지
background-clip: border-box;
}
#clip-padding { // 테두리 뺀 패딩 범위까지
background-clip: padding-box;
}
#clip-content { // 콘텐츠에만
background-clip: content-box;
}
|
cs |
9-2 배경 이미지 지정하기
웹 요소에 배경 이미지를 넣는 background-image 속성
웹 요소에 배경 이미지를 넣을 때 가장 기본으로 알아 둘 속성은 background-image 이다.
url( )에 이미지 파일 경로를 넣어서 사용한다.
이미지 파일은 *jpg, *gif, *png 형식을 사용하며 파일 경로에는 작은 따옴표(' ')나 큰 따옴표(" ")를 붙인다.
파일 경로는 현재 웹 문서를 기준으로 상대 경로를 지정할 수도 있고 http://로 시작하는 절대 경로를 사용할 수도 있다.
배경을 넣을 때 요소보다 이미지 크기가 작으면 이미지가 가로와 세로로 반복되면서 요소의 배경을 가득 채운다.
|
<style>
body {
background-image: url('images/bg1.jpg');
}
</style>
|
cs |
배경 이미지의 반복 방법을 지정하는 background-repeat 속성
background-repeat 속성을 사용하면 배경 이미지를 가로와 세로 중에서 어떤 방향으로 반복할지 지정하거나, 반복하지 않고 한 번만 나타나게 할 수도 있다.
속성값을 2개로 지정한다면 첫 번째 값은 수평 위치의 값이 되고 두 번째 값은 수직 위치의 값이다.
속성값을 하나만 지정한다면 웹 브라우저에서는 지정한 값을 수평 위칫값으로 간주하고, 수직 위칫값은 50%나 center로 간주한다.
키워드
배경 이미지의 위치를 지정할 때 가장 많이 사용하는 속성값은 키워드다.
수평 위치는 left, center, right 중에서 선택할 수 있고 수직 위치는 top, bottom, center 중에서 선택한다.
백분율(%)
위치 속성값을 백분율로 표시한다는 것은 요소가 있는 해당 위치에 배경 이미지의 위치를 백분율로 계산하여 맞춘다는 뜻이다.
예를 들어 background - position : 30% 60% 라면 배경 이미지를 넣을 요소의 왼쪽 모서리로부터 가로 30%, 세로 60%의 위치에 배경 이미지의 가로 세로가 각각 30%, 60% 인 위치를 맞춘다.
크기
배경 이미지의 위치를 길이로 직접 지정할 수도 있다.
|
<style>
ul {
list-style:none; /* 불릿 없앰 */
margin-left:-30px; /* 왼쪽 여백 줄임 */
}
li {
background-image:url('images/book-icon.png'); /* 배경 이미지 파일 */
background-repeat:no-repeat; /* 배경 이미지 반복 안함 */
background-position:left center; /* 배경 이미지 위치 */
padding-left:50px; /* 왼쪽 패딩 (박스 모델) */
line-height:40px; /* 줄간격 */
}
</style>
</head>
<body>
<h1>이지스퍼블리싱</h1>
<ul>
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
</body>
</html>
|
cs |
배경 이미지의 적용 범위를 조절하는 background - origin 속성
박스 모델에 패딩이나 테두리가 있다면 배경 이미지를 패딩까지 표시하거나 테두리까지 포함해서 표시할 수도 있다.
이렇게 배경 이미지를 적용할 범위는 background-origin 속성으로 지정한다.
| 종류 | 설명 |
| content-box | 박스 모델에서 내용 부분에만 배경 이미지를 표시한다. 기본값이다. |
| padding-box | 박스 모델에서 패딩까지 배경 이미지를 표시한다. |
| border-box | 박스 모델에서 테두리까지 배경 이미지를 표시한다. |
배경 이미지를 고정하는 background-attachment 속성
background-attachment 속성을 사용하면 배경 이미지를 고정할 수 있다.
| 종류 | 설명 |
| scroll | 화면을 스크롤하면 배경 이미지도 스크롤된다. 기본값이다. |
| fixed | 화면을 스크롤하면 배경 이미지는 고정되고 내용만 스크롤된다. |
|
<style>
body {
background-image:url('images/bg2.png'); /* 문서 전체 배경 이미지 */
background-repeat:no-repeat; /* 배경 이미지 반복 안 함 */
background-position:right top; /* 배경 이미지를 오른쪽 상단에 위치시킴 */
background-attachment:fixed; /* 배경 이미지 고정 */
}
div {
width:400px;
height:250px;
padding: 20px;
border: 20px solid rgba(204, 204, 204, 0.493);
margin-bottom:20px;
overflow:auto;
background-image:url('images/bg3.png'); /* 텍스트 상자의 배경 이미지 */
background-repeat:no-repeat; /* 배경 이미지 반복 안 함 */
background-position:right top; /* 배경 이미지를 오른쪽 상단에 위치시킴 */
}
#bg1 {
background-origin:padding-box; /* 패딩까지 배경 이미지 표시 */
}
#bg2 {
background-origin:border-box; /* 테두리까지 배경 이미지 표시 */
}
#bg3 {
background-origin:content-box; /* 내용 영역만 배경 이미지 표시 */
}
</style>
|
cs |
background 속성 하나로 배경 이미지 제어하기
배경 이미지 관련 속성을 background라는 하나의 속성으로 줄여 사용할 수 있다.
배경 이미지 크기를 조절하는 background-size 속성
배경을 채울 요소 크기에 비해 이미지가 너무 작거나 클 경우 background-size 속성을 사용하여 배경 이미지의 크기를 조절할 수 있다.
속성값이 하나라면 그 값은 너비로 인식하고 높이는 원래 이미지의 너비와 높이 비율에 따라 자동 계산한다.
| 종류 | 설명 |
| auto | 원래 배경 이미지 크기만큼 표시한다. 기본값이다. |
| contain | 요소 안에 배경 이미지가 다 들어오도록 이미지를 확애, 축소한다. |
| cover | 배경 이미지로 요소를 모두 덮도록 이미지를 확대, 축소한다. |
| <크기> | 이미지의 너비와 높이를 지정한다. 값이 하나만 주어질 경우 너빗값으로 인식하며, 이미지의 너비와 너빗값에 맞춘 높잇값도 자동 계산한다. |
| <백분율> | 배경 이미지가 들어갈 요소의 크기를 기준으로 값을 백분율로 지정하고 그 크기에 맞도록 배경 이미지를 확대, 축소한다. |
|
<style>
#container{
width:1100px;
margin:50px auto;
}
.box{
float:left;
border:1px solid #222;
width:300px;
height:300px;
margin:20px;
background:url('images/bg4.jpg') no-repeat left top;
}
#bg1 { background-size:auto;} /* 원래 배경 이미지 크기로 표시 */
#bg2 { background-size:200px;} /* 너비는 200px, 높이는 자동 계산 */
#bg3 { background-size:50%;} /* 배경 이미지 너비는 요소 너비의 50%, 높이는 자동 계산 */
#bg4 { background-size:100% 100%;} /* 배경 이미지 너비와 높이는 요소 너비의 100%, 요소 높이의 100% */
#bg5 { background-size:contain;} /* 요소 안에 배경 이미지가 다 보이도록 표시 */
#bg6 { background-size:cover;} /* 요소를 완전히 덮도록 배경 이미지 표시 */
</style>
|
cs |
9-3 그러데이션 효과로 배경 꾸미기
선형 그러데이션
선형 그러데이션이란 색상이 수직, 수평 또는 대각선 방향으로 일정하게 변하는 것을 말한다.
이것을 만들어 주는 함수는 linear-gradient 인데 색상이 어느 방향으로 바뀌는지 그리고 어떤 색상으로 바뀌는지 알려 주어야 한다.
<기본형>
linear-gradient(to <방향> 또는 <각도>, <색상 중지점>, [ <색상 중지점>, ....]);
방향
그러데이션 방향을 지시할 때는 끝 지점을 기준으로 to 예약어와 함께 사용한다.
to 다음에는 방향을 나타내는 예약어를 최대 2개 까지 사용할 수 있다.
이때 예약어는 수평 방향을 나타내는 left, right, 수직 방향을 나타내는 top과 bottom을 사용한다.
|
.grad {
background: blue;
background: linear-gradient(to right bottom, blue, white); /* 왼쪽 위에서 오른쪽 아래 방향으로, 파랑에서 흰색으로 */
}
|
cs |
각도
각도는 선형 그러데이션에서 색상이 바뀌는 방향을 알려주는 방법이다.
이때 각도는 그러데이션이 끝나는 부분이고 값은 deg 로 표기한다.
|
.grad {
background: #f00; /* CSS3를 지원하지 않는 브라우저용 */
background: linear-gradient(45deg, #f00, #fff); /* 45도 (오른쪽 위)방향으로, 빨간색에서 흰색으로 */
}
|
cs |
색상 중지점
2가지 색이상의 선형 그러데이션을 만들려면 색상이 바뀌는 부분을 지정해 주어야 한다.
그러데이션에서 바뀌는 색을 색상 중지점이라고 한다.
색상 중지점을 지정할 때 쉼표로 색상을 구분하는데, 색상만 지정할 수도 있고 색상과 함께 중지점의 위치도 함께 지정할 수 있다.
|
.grad {
background: #06f; /* css3를 지원하지 않는 브라우저용 */
background: linear-gradient(to bottom, #06f, white 30%, #06f); /* 위에서부터 30% 위치에 색상 중지점 지정 */
}
|
cs |
원형 그러데이션
선형 그러데이션이 직전 형태로 색상이 바뀌는 거라면, 원형 그러데이션은 원 또는 타원의 중심에서부터 동심원을 그리며 바깥 방향으로 색상이 바뀐다.
따라서 원형 그러데이션은 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그러데이션의 모양을 선택한다.
<기본형>
radial-gradient(<모양> <크기> at <위치>, <색상 중지점>, [<색상 중지점>, ....])
모양
원형 그러데이션에서 만들어지는 모양은 원형과 타원형이다. 모양을 따로 지정하지 않으면 타원형으로 인식한다.
|
/* 타원형 원형 그러데이션 */
.grad1{
background:red;
background:radial-gradient(white, yellow, red); /* 타원형으로 흰색, 노란색, 빨간색으로 바뀌는 그러데이션 */
}
/* 원형 그러데이션 */
.grad2{
background:red;
background:radial-gradient(circle, white, yellow, red); /* 원형으로 흰색, 노란색, 빨간색으로 바뀌는 그러데이션 */
}
|
cs |
크기
원형 그러데이션을 지정할 때 원의 크기도 정할 수 있다.
원의 모양과 크기를 나타내는 키워드값을 함께 쓰면 되는데, 크기에서 사용할 수 있는 값은 다음과 같다.
| 속성값 | 설명 |
| closest-side | 원형이라면 그러데이션 가장자리가 그러데이션 중심에서 가장 가까운 요소의 측면에 닿을 때까지 그린다. 타원형이라면 그러데이션 중심에서 가장 가까운 요소가 가로 측면이나 세로 측면에 닿을 때까지 그린다. |
| closest-corner | 그러데이션 가장자리가 중심에서 가장 가까운 요소의 코너에 닿도록 그린다. |
| farthest-side | 원형이라면 그러데이션 가장자리가 그러데이션 중심에서 가장 멀리 떨어져 있는 측면에 닿을 때까지 그린다. |
| farthest-corner | 그라데이이션의 가장자리가 그라데이션의 중심에서 가장 멀리 떨어져있는 코너에 닿도록 한다. 기본값이다. |
위치
at 키워드와 함께 지정하면 그러데이션이 시작하는 원의 중심을 다르게 나타낼 수 있다.
사용할 수 있는 위치 속성값은 키워드 또는 30%, 20% 같은 백분율이다.
속성값을 생략하면 가로와 세로 모두 중앙인 center 로 인식한다.
|
.grad {
background: blue; /* css3를 지원하지 않는 브라우저용 */
background: radial-gradient(circle at 20% 20%,white,blue); /* 20% 20%에서 시작하여 흰색에서 파란색으로 바뀌는 원형 그러데이션 */
}
|
cs |
색상 중지점
선형 그러데이션처럼 원형 그러데이션에서도 색상이 바뀌는 부분을 색상 중지점이라고 한다.
그러데이션의 색상과 어느 부분에서 색상을 바꿀지 위치도 함께 지정할 수 있다.
|
.grad1{
background:skyblue; /* css3를 지원하지 않는 브라우저용 */
background:radial-gradient(yellow, white, orange); /* 노란색에서 흰색을 거쳐 주황색으로 바뀌는 타원형 그러데이션 */
}
.grad2{
background:skyblue; /* css3를 지원하지 않는 브라우저용 */
background:radial-gradient(yellow, white 10%, orange 60%); /* 노란색에서 10% 위치의 흰색, 60% 위치의 주황색으로 바뀌는 타원형 그러데이션 */
}
|
cs |
그러데이션을 사용한 패턴 만들기
선형 그러데이션과 원형 그러데이션은 반복해서 패턴을 만들 수 있다.
선형 그러데이션을 반복할 때는 repeating-linear-gradient를 사용하고
원형 그러데이션을 반복할 때는 repeating-radial-gradient를 사용한다.
|
.grad1 {
background: red;
background: repeating-linear-gradient(yellow, red 20px);
}
.grad2 {
background: #ccc;
background: repeating-radial-gradient(circle, white, #ccc 10%);
}
|
cs |
그런데 이렇게 선형 그러데이션을 반복하면 그러데이션끼리 만나는 부분이 자연스럽지 않다.
예를 들어 'yello, red 20px' 옵션을 사용하므로 노란색부터 빨간색까지 부드럽게 섞여 표시되지만, 다음 노란색이 시작되는 부분에서는 이전 빨간색과 노란색이 겹쳐 주황색으로 표시된다.
그래서 그러데이션을 반복해서 패턴을 만들 때는 각 색상 중지점의 위치를 적절하게 조절해야 한다.
선형 그러데이션을 반복할 때는 시작 색상과 끝 색상을 명확히 구분해 줘야 중간에 섞이지 않는다.
|
.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%);
}
|
cs |
출처 : Do it! HTML+CSS+자바스크립트 웹 표준의 정석 [고경희 (이지퍼블리싱)]
'Web Project > CSS' 카테고리의 다른 글
| 트랜지션과 애니메이션 (0) | 2021.03.03 |
|---|---|
| CSS 고급 선택자 (0) | 2021.03.01 |
| 레이아웃을 구성하는 CSS 박스 모델 (0) | 2021.02.24 |
| 텍스트를 표현하는 다양한 스타일 (0) | 2021.02.20 |
| CSS의 기본 (0) | 2021.02.19 |
