이전 문서에서 배경에 그라데이션을 넣는 방법에 대해 작성했었다. 이번에는 배경에 이미지 혹은 색상을 넣어보는 방법에 대해 적어보고자 한다.
- background-color
배경에 색깔을 지정할 수 있다. 텍스트에 색깔을 지정하는 것과 같이 RGB, HSL 등을 통해 지정이 가능하다. - background-image: url('이미지주소');
배경에 이미지를 불러올 수 있다. 기본적으로 이미지를 삽입하게 되면 브라우저의 크기에 따라 이미지가 반복해서 출력이 된다.- background-repeat: repeat-x | repeat-y | no-repeat;
배경의 반복을 설정할 수 있다. repeat-x는 x축으로 반복, repeat-y는 y축으로 반복, no-repeat는 반복하지 않는다는 뜻이다. - background-attachment: scroll | fixed | local;
스크롤을 해도 배경을 그대로 유지하고 싶다면 fixed를 사용하면 된다. local의 경우 요소의 컨텐츠와 함께 이미지가 함께 scoll 된다.
- background-repeat: repeat-x | repeat-y | no-repeat;
Background-position
- background-position: 수평위치 수직위치;
수평위치와 수직위치를 지정하여 배경의 위치를 설정할 수 있다. left, right 등의 키워드를 사용하여 설정할 수 있으며 % 혹은 px로도 설정할 수 있다. 키워드를 사용하고 싶다면 수평위치에는 left, right, center이 수직위치에는 top, bottom, center이 값으로 들어갈 수 있다. 예를들어 오른쪽 위에 배경의 위치를 설정하고 싶다면 background position: right top;으로 설정하면 된다.
Background-clip
- background-clip: content-box | padding-box | border-box;
배경화면을 어디까지 적용할 것인가에 대한 내용으로 border-box는 테두리까지만 배경을 적용하고(기본값), padding-box는 컨텐츠와 테두리부분까지, content는 컨텐츠까지만 적용시킨다.
Background-origin
- background-origin: padding-box | content-box | margin-box;
background-clip이 어디까지 배경을 지정할 것이냐를 설정하는 것이라면, background-origin은 어디서부터 background를 적용할지에 대해서 설정 가능하다.
Background-size
- background-size: 가로비율 세로비율;
배경의 크기는 비율(%), 픽셀 등에 따라 조정할 수도 있고 이미지의 짧은 부분 혹은 긴부분에 맞춰 이미지를 조정할 수 있다. - background-size: cover | contain;
배경의 이미지를 짧은 부분(cover)으로 맞출 것인지 긴 부분(contain)을 기준으로 맞출 것인지 조정할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 모든 div에 padding, border, 사이즈 설정함 */
div{
width: 300px;
height: 100px;
border: 5px dashed black;
padding: 20px;
margin: 10px;
}
/* 첫번째 div에 background-color를 설정함 */
div:nth-of-type(1){
background-color: lightskyblue;
}
/*두번째와 세번째의 차이점
1. background-attachment: 스크롤할때 컨텐츠와함께 scoll될것이냐 fixed냐
2. background-clip을 컨텐츠박스까지 아니면 보더까지 할 것이냐
3. 세번째는 background-size를 이미지의 긴영역에 사이즈를 맞춤*/
div:nth-of-type(2){
background-image: url('./selft-study-image/field.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-clip: content-box;
background-position: right bottom;
}
div:nth-of-type(3){
background-image: url('./selft-study-image/field.jpg');
background-repeat: no-repeat;
background-attachment: local;
background-clip: border-box;
background-size: contain;
}
/* 네번째와 다섯번째의 차이는 background-origin이 border-box냐,
padding-box냐이다. 이미지의 시작 위치를 확인하면 선을 기준으로 이미지가
어디있는지 확인하면 차이점을 볼 수 있다. */
div:nth-of-type(4){
background-image: url('./selft-study-image/field.jpg');
background-repeat: no-repeat;
background-size: 100px;
background-origin: border-box;
}
div:nth-of-type(5){
background-image: url('./selft-study-image/field.jpg');
background-repeat: no-repeat;
background-size: 100px;
background-image: padding-box;
}
</style>
</head>
<body>
<div><p>Hello</p></div>
<div><p>Hello</p></div>
<div><p>Hello</p></div>
<div><p>Hello</p></div>
<div><p>Hello</p></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
'Frontend > CSS' 카테고리의 다른 글
| CSS의 width와 height 속성을 알아보자 (0) | 2024.07.07 |
|---|---|
| CSS에서 display를 사용해서 테이블을 만들어보자 (0) | 2024.07.07 |
| CSS에서의 배치 방법 (0) | 2024.07.07 |
| CSS3의 박스모델 (0) | 2024.07.07 |
| CSS에서 배경에 그라데이션을 넣어보자 (0) | 2024.07.03 |
| CSS로 list-style을 변경해보자 (0) | 2024.07.03 |
| CSS의 overflow 기능에 대해 알아보자 (0) | 2024.07.02 |
| CSS3에서 텍스트를 정렬하는 방법 (0) | 2024.07.02 |