1. background 프로퍼티란?
background 프로퍼티는 요소의 배경을 설정하는데 사용됩니다. 배경 색상, 이미지, 반복 방식, 위치, 크기
등을 한버넹 정의할 수 있는 단축 속성(shorthand property) 입니다. 개별 속성으로도 설정 가능하며, 단축
속성을 사용하면 코드를 간결하게 작성할 수 있습니다.
주요 개별 속성
-backgroud - color: 배경 색상을 지정합니다.
-backgroud - image: 배경 이미지를 지정합니다.
-backgroud - repeat : 배경 이미지의 반복 방식을 설정합니다.
backgroud - position : 배경 이미즈이 위치를 설정합니다.
backgroud - size : 배경 이미지를 크기를 설정합니다.
backgroud - attachment : 배경 이밎의 스크롤 동작을 설정합니다.
2. 1 backgroud - color
- 요소의 배경 색상을 지정합니다.
- 값 ; 색상 이름(red,blue), HEX 코드(#FF0000), RGB( rgb255,0,0)등
- 예 : background - color: blue;
2.2 backgroud - image
- 배경 이미지의 반복 방식을 정의합니다.
- 값 :
- reppeat: 가로/세로 모두 반복(기본 값).
- repeat-x : 가로 방행으로만 반복.
- repeat-y : 세로 방향으로만 반복.
- no - repeat: 반복 없음.
- space : 이미지가 요소에 맞게 간격을 두고 반복.
- round : 이미지가 요소에 맞게 비율울 유지하며 반복.
- 예: background - repeat : no - repeat;
2.4 backgroud - position
- 배경 이미지의 위치를 지정합니다.
- 값 :
- 키워드 : left, right, top, bottom, center.
- 좌표 : x y (예 : 50% 50%, 10 px, 20px).
예 : background - position; center center,
2.5 backgeround - size
- 배경 이미지의 크기를 설정합니다.
값:
- auto: 원본 크기(기본값)
- length: 특징 크ㄱ; (예; 100px 200 px).
- cover : 요소르 덮도록 크기 조정 (비율 유지, 잘림 기능)
예 : backgroud - size: cover.
2.6 .backgroud- attachment
- 배경 이미지의 스크롤 동작을 설정합니다.
값
-scroll : 요소와 함께 스크롤 (기본값)
- fixed : 뷰포트에 고정 , 스크롤 시 움직이지 않음,
- 예 : backgroud _ attachment: fixed;
2.7 단축 속성 background
- 위 속성들을 한 줄로 정의활 수 있습니다.
- 순서: background: color image repeat attachment position/ size;
-예 : background: yellow url('image.jpg') no-repeat fixed center center/cover.
예제 1 - backgroud 의 여러 속성들
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background 예제 1</title>
<style>
.box {
width: 100%; /* 요소의 너비를 부모 요소의 100%로 설정하여 전체 너비를 차지하도록 함 */
height: 300px; /* 요소의 높이를 300px로 고정 */
background-color: lightblue; /* 배경 색상을 연한 파란색(lightblue)으로 설정 */
background-image: url('https://picsum.photos/200/300'); /* 배경 이미지로 지정된 URL의 이미지를 사용 */
background-repeat: repeat; /* 배경 이미지가 반복 설정 */
background-repeat: no-repeat; /* 배경 이미지가 반복 안되게 설정 */
background-position: center center; /* 상하 좌우 사운데 배치 */
}
</style>
</head>
<body>
<div class="box">
<h2>배경 이미지 예제</h2>
<p>배경 이미지가 중앙에 위치하며 반복되지 않습니다.</p>
</div>
</body>
</html>
|예제 2 - 단축 속성 사용해 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background 예제 2</title>
<style>
.box {
width: 100%; /* 요소의 너비를 부모 요소의 100%로 설정하여 전체 너비를 차지하도록 함 */
height: 300px; /* 요소의 높이를 400px로 고정 */
background: yellow url('https://picsum.photos/200/300') no-repeat fixed center/cover; /* 단축 속성 사용: 배경 색상(yellow), 이미지 URL, 반복 없음(no-repeat), 고정(fixed), 위치(center), 크기(cover) 설정 */
color: white; /* 텍스트 색상을 흰색으로 설정 */
text-align: center; /* 텍스트를 가운데 정렬 */
padding: 20px; /* 내부 여백을 20px로 설정 */
}
</style>
</head>
<body>
<div class="box">
<h2> 배경 설정</h2>
<p>단축 속성 사용해 보기</p>
</div>
</body>
</html>
예제 3 - background-size 속성 사용'
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Background 예제 3</title> <style> .box { width: 100%; /* 요소의 너비를 부모 요소의 100%로 설정하여 전체 너비를 차지하도록 함 */ height: 300px; /* 요소의 높이를 300px로 고정 */ background-image: url('https://picsum.photos/400/400'); background-repeat: no-repeat; background-position: center; /* 1. contain: 이미지가 요소 안에 완전히 보이도록 조정, 비율 유지, 빈 공간 생길 수 있음 */ background-size: contain; /* 2. auto: 이미지의 원본 크기를 유지, 기본값 */ /* background-size: auto; */ /* 3. 특정 크기(px, %, rem 등): 명시적으로 너비와 높이 설정 */ /* background-size: 100px 50px; */ /* 너비 100px, 높이 50px */ /* background-size: 50% 50%; */ /* 요소 크기의 50%로 설정 */ /* 4. cover: 이미지가 요소를 완전히 덮도록 조정, 비율 유지, 잘릴 수 있음 (이미 알고 계신 값) */ /* background-size: cover; */ background-color: lightgray; /* 배경 색상을 연한 회색(lightgray)으로 설정 */ } </style> </head> <body> <div class="box"> <h2> 배경 이미지</h2> <p>background-size 설정 하기</p> </div> </body> </html>
'HTML CSS' 카테고리의 다른 글
| CSS font 속성 - 16 (3) | 2025.06.04 |
|---|---|
| CSS block, inline 에 대해 알아 보자 - 15 (0) | 2025.06.03 |
| CSS 박스 모델에 이해 - 13 (0) | 2025.05.31 |
| (JAVA) 파일 복사 기능 만들어 보기-18 (1) | 2025.05.29 |
| (HTML/CSS/JavaScript)CSS 선택자(속성 선택자) - 12 (1) | 2025.05.29 |