배경은 어떻게 구성할까?
background-color 속성
--
요소의 배경에 색상을 넣는 속성이다.
기본 형식
background-color: 색상값;
예시 코드
div {
width: 100px;
height: 100px;
background-color: red;
}
--
background-image 속성
--
요소의 배경에 이미지를 넣는 속성이다.
주의 사항
- 요소의 배경 너비, 높이를 지정해야 한다. (배경에 무엇을 삽입하려면)
- 요소의 배경 크기가 이미지 크기보다 작으면 이미지는 잘리고, 크면 이미지가 반복하여 나온다.
기본 형식
background-image: url('이미지 경로');
예시 코드
div {
width: 200px;
height: 100px;
background-image: url('spring boot.png');
}
--
background-repeat 속성
--
요소의 배경에 이미지가 존재할 때
배경의 크기와 이미지의 크기가 다를 때 이미지를 어떻게 보이게 할지에 대한 설정 속성이다.
기본 형식
background-repeat: 속성값;
예시 코드
div {
width: 500px;
height: 500px;
border: 2px solid black;
background-image: url('spring boot.png');
}div {
width: 500px;
height: 500px;
border: 2px solid black;
background-image: url('spring boot.png');
background-repeat: round;
}div {
width: 500px;
height: 500px;
border: 2px solid black;
background-image: url('spring boot.png');
background-repeat: space;
}div {
width: 200px;
height: 200px;
border: 2px solid black;
background-image: url('spring boot.png');
background-repeat: space;
}
--
backgrond-size 속성
--
요소의 배경 크기가 이미지보다 작을 때 이미지가 잘리는 문제는 background-repeat 속성으로는 해결을 못하고
background-size 속성을 통해 이미지 크기를 지정할 수 있다.
기본 형식
backround-size: 속성값;
예시 코드
div {
width: 400px;
height: 600px;
border: 2px solid black;
background-image: url('spring boot.png');
}div {
width: 400px;
height: 600px;
border: 2px solid black;
background-image: url('spring boot.png');
background-size: cover;
}div {
width: 400px;
height: 600px;
border: 2px solid black;
background-image: url('spring boot.png');
background-size: contain;
}
div {
width: 400px;
height: 600px;
border: 2px solid black;
background-image: url('spring boot.png');
background-size: 30px 70px;
}
--
background-position 속성
--
요소의 배경에서 삽입할 이미지의 위치를 지정하는 속성이다.
기본 형식
background-position: x위치 y위치;
- left : 왼쪽
- right : 오른쪽
- top : 위쪽
- bottom : 아래쪽
- center : 가운데
- px : px 단위로 (x 또는 y)축의 위치
- rem : rem 단위로 (x 또는 y)축의 위치
- em : em 단위로 (x 또는 y)축의 위치
- % : 요소의 크기를 백분율로 지정하여 비율로 (x 또는 y)축의 위치 [ 0% = 왼쪽 or 위쪽, 100% = 오른쪽 or 아래쪽 ]
rem은
루트 요소(<html>)의 글꼴 크기를 기준으로 배율을 지정하는 단위로
브라우저 기본 폰트 크기가 1rem이 된다.
일반적으로 브라우저 기본 폰트는 16px이므로 1rem = 16px, 2rem = 32px이 된다.
em은
부모 요소의 글꼴 크기를 기준으로 배율을 지정하는 단위로
부모 요소에서 정의한 글꼴 크기가 1em이 된다.
예시 코드
div {
width: 500px;
height: 500px;
border: 2px solid black;
background-image: url('spring boot.png');
background-repeat: no-repeat;
background-size: 50px 50px;
background-position: 80% 80%;
}
--
background-attachment 속성
--
요소에 삽인된 이미지에 대해 스크롤을 정의하는 속성이다.
기본 형식
background-attachment: 속성값;
예시 코드
<style>
body {
height: 1500px;
}
.parent{
width: 500px;
height: 400px;
border: 1px solid black;
overflow: scroll;
}
.children{
height: 2000px;
background-image: url('spring boot.png');
background-attachment: scroll;
}
</style>
<!-- 생략 -->
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
--
background 속성으로 한 번에 정의하기
--
위에 정리한 backgroun관련 속성을 background 속성을 통해 한 번에 정의할 수 있다.
기본 형식
background: color속성값 image속성값 repeat속성값 position속성값/size속성값 attachment속성값;각 속성 값을 나열하는 순서는 정해져 있지 않지만, 특정 규칙이 존재한다.
1. size 속성 값은 항상 position 속성 값 뒤에 작성해야 하며 둘 사이는 슬래시(/)로 구분한다.
예시 코드
div{
background-color:red;
background-image:url('spring boot.png');
background-repeat:no-repeat;
background-position:center;
background-size:100% 100%;
background-attachment:fixed;
}div{
background:red url('spring boot.png') no-repeat center/100% 100% fixed;
}--
'Language > CSS' 카테고리의 다른 글
| [속성] 기존 스타일 속성 값을 다른 속성 값으로 전환하는 속성 (0) | 2025.03.09 |
|---|---|
| [속성] 위치 관련 속성으로 요소 배치하기 (0) | 2025.03.06 |
| [속성] 박스 모델을 구성하는 속성 (margin, padding 등) (0) | 2025.03.05 |
| [속성] 텍스트 관련 속성을 통해 텍스트 꾸미기 (0) | 2025.03.05 |
| CSS 기본 특징 (0) | 2025.02.28 |
