Language/CSS

[CSS] CSS 배경

마탁이 2021. 2. 3. 11:57

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>

<background-color>

 

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>

<background-image>

 

4. background-repeat

 - 배경에 적용된 이미지를 바둑판식처럼 배열되는 방식을 제어할 수 있다.
 - 배경 이미지를 y축, x축, 양방향을 포함한 어느 방향으로든 반복하도록 설정할 수 있다.

 - 아래처럼 속성 값에 따라 반복되는 형상을 조작할 수 있다.

<background-repeat, 속성 값에 따른 반복 양상>

<!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>

<backround-repeat, x축 예제>

 

 

5. background-position

 - 배경 이미지의 위치를 제어하는 데 사용된다.
 - 배경 위치의 값이 지정되지 않으면 기본적으로 왼쪽 상단(0, 0)에 위치한다.

 - background-position 속성에 대해 두 개의 값이 지정된 경우 첫 번째 값은 가로 위치, 두 번째 값은 세로 위치를 나타낸다. 첫 번째 값만 지정한다면 두 번째 값은 중앙으로 간주한다.
 - 또한, 키워드 외에도 백분율 또는 길이 값을 사용할 수 있다. (px, em)

<값 또는 백분율에 따른 image 위치>

<!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>

<background-position, 가로 50%, 세로 top>

 

 * 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