1. CSS 배경
- CSS는 배경 색상 지정, 배경에 이미지 배치 및 위치 관리 등 요소의 배경 스타일 지정을 위한 여러 속성을 제공한다.
- 배경의 속성은 아래와 같은 종류가 있다.
2. background-color
- 배경색을 지정하는데 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting background-color of an Element in CSS</title>
<style>
body {
background-color: yellow;
}
h1 {
background-color: red;
}
</style>
</head>
<body>
<h1> h1 부분 입니다.</h1>
<p> p 부분 입니다.</p>
</body>
</html>
3. background-image
- 이미지를 HTML 요소의 배경으로 설정한다.
- 기본적으로 브라우저는 배경 이미지를 가로 및 세로로 반복하거나 바둑판식으로 배열하여 요소의 전체 영역을 채운다. 이를 background-repeat 속성으로 제어할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting background-image in CSS</title>
<style>
body {
background-image: url("/examples/images/tile.png");
}
</style>
</head>
<body>
<h1>background-color demo</h1>
<p> p 부분 입니다</p>
</body>
</html>
4. background-repeat
- 배경에 적용된 이미지를 바둑판식처럼 배열되는 방식을 제어할 수 있다.
- 배경 이미지를 y축, x축, 양방향을 포함한 어느 방향으로든 반복하도록 설정할 수 있다.
- 아래처럼 속성 값에 따라 반복되는 형상을 조작할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting Horizontal background-repeat in CSS</title>
<style>
body {
background-image: url("/examples/images/gradient.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>background-repeat demo</h1>
<p> 내용 부분입니다.</p>
</body>
</html>
5. background-position
- 배경 이미지의 위치를 제어하는 데 사용된다.
- 배경 위치의 값이 지정되지 않으면 기본적으로 왼쪽 상단(0, 0)에 위치한다.
- background-position 속성에 대해 두 개의 값이 지정된 경우 첫 번째 값은 가로 위치, 두 번째 값은 세로 위치를 나타낸다. 첫 번째 값만 지정한다면 두 번째 값은 중앙으로 간주한다.
- 또한, 키워드 외에도 백분율 또는 길이 값을 사용할 수 있다. (px, em)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting Custom background-position of Images in CSS</title>
<style>
body {
background-image: url("/examples/images/robot.png");
background-repeat: no-repeat;
background-position: 50% top;
}
h1, p {
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Background Position Demo</h1>
<p> content</p>
</body>
</html>
* em / ex / px / pt / % 의 차이
- CSS 표준 권고안에 따르면 단위는 절대 단위와 상대 단위로 구분된다.
- 절대 단위 : in, cm, mm, pt, pc가 있으며 출력장치(e.g 모니터)의 물리적 속성을 알고 있는 경우 효율적.
- 상대 단위 : em, ex, px, %가 있으며 기종간, 플랫폼 간의 호환성을 유지하는데 효율적.
- em : font_size, 해당 폰트의 대문자 M의 너비를 기준으로 함.
- ex : x-height, 해당 폰트의 소문자 x의 높이를 기준으로 함.
- px : pixel, 표시 장치(e.g 모니터)에 따라서 상대적인 크기를 가짐.
- % : percent, 기본 글꼴의 크기에 대하여 상대적인 값을 가짐.
- pt : point, 일반 문서(e.g 워드)에서 많이 사용하는 단위.
-
background-attachment- 배경 이미지가 뷰 포트와 관련하여 고정되는지 아니면 컨테이너 블록과 함께 스크롤되는지 여부를 결정.
body {
background-image: url("images/bell.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
-
배경 약식 속성 (Background Shorthand Property)- 배경을 다룰 때 고려가 필요한 많은 속성들이 있다.
- 이러한 모든 속성을 단일 속성에 지정하여 코드를 줄이거나 추가 입력을 방지할 수 있다.- background: {color} {image} {repeat} {attachment} {position} 이다.
| 일반적인 배경 속성 지정 | |
| 약식 속성 | |
'Language > CSS' 카테고리의 다른 글
| [CSS] CSS 링크 (0) | 2021.02.03 |
|---|---|
| [CSS] CSS 텍스트 (0) | 2021.02.03 |
| [CSS] CSS 글꼴 (0) | 2021.02.03 |
| [CSS] CSS 색상 (0) | 2021.02.03 |
| [CSS] CSS 기초 (0) | 2021.02.03 |