ToDoDoDo

CSS 배경

CSS background 속성은 요소의 배경 효과를 정의하는 데 사용됩니다.

CSS background 속성의 종류

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

배경 색상(background-color)

background-color 속성은 요소의 배경색을 지정합니다. 페이지의 배경색은 다음과 같이 설정됩니다.

안녕 친구들!

이 페이지의 배경색은 lightblue 일거야

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <h1>안녕 친구들!</h1>
  <p>이 페이지의 배경색은 lightblue 일거야</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

전체 소스로 실습하기 CSS를 사용하면 색상은 다음과 같이 지정됩니다.

  • 색상 이름 - ex) "red"
  • HEX값 - ex) "#ff0000"
  • RGB값 - ex) "rgb (255,0,0)"

가능한 색상값의 전체 목록을 보려면 CSS컬러 이름종류 페이지에서 색상값을 보십시오.
아래 예제에서 <h1>, <p> 및 <div> 요소의 배경색은 서로 다릅니다.

CSS background-color 예제!

이 문장을 div 내부입니다!

이 구문은 div 안이긴 하지만 p 태그 안에 있어서 p 태그의 영향력이 제일 강해요!

우리는 여전히 div 안이에요! 
<!DOCTYPE html>
<html>
<head>
  <style>
  h1 {
    background-color: green;
  }
  div {
    background-color: lightblue;
  }
  p {
    background-color: yellow;
  }
  </style>
</head>
<body>
  <h1>CSS background-color 예제!</h1>
  <div>
    이 문장을 div 내부입니다!
    <p>이 구문은 div 안이긴 하지만 p 태그 안에 있어서 p 태그의 영향력이 제일 강해요!</p>
    우리는 여전히 div 안이에요!
  </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

전체 소스로 실습하기




배경 이미지(background-image)

background-image 속성은 요소의 배경으로 사용할 이미지를 지정합니다.
기본적으로 이미지는 요소 전체를 덮을 수 있도록 반복됩니다.
페이지의 배경 이미지는 다음과 같이 설정할 수 있습니다.

아래에 사용된 배경이미지는

입니다.
아래 예제에서 body를 전체적으로 덮은것은 여러번 반복되어 전체를 채운것입니다.

안녕 친구들!

이 페이지는 배경 이미지를 가지고 있어!

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-image: url("paper.gif");
    }
  </style>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This page has an image as the background!</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

전체 소스로 실습하기

아래는 텍스트와 배경 이미지의 잘못된 조합의 예입니다.
이렇게 배치하면 텍스트는 거의 읽을 수가 없습니다.

안녕 친구들!

이 텍스트는 배경색 때문에 읽기가 힘들어!

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-image: url("bgdesert.jpg");
    }
  </style>
</head>
<body>
  <h1>안녕 친구들!</h1>
  <p>이 텍스트는 배경색 때문에 읽기가 힘들어!</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

전체 소스로 실습하기

배경 이미지를 사용할 때는 텍스트를 방해하지 않는 이미지를 사용하십시오.




배경 이미지 - 수평(Horizontally) 또는 수직(Vertically) 반복

기본적으로 background-image 속성은 이미지를 가로 및 세로로 반복합니다.
일부 이미지는 가로 또는 세로로만 반복해야하며, 다음과 같이 이상하게 보입니다.

사용된 이미지

안녕 친구들!

이상한 배경 이미지...

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-image: url("gradient_bg.png");
    }
  </style>
</head>
<body>
  <h1>안녕 친구들!</h1>
  <p>이상한 배경 이미지...</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

전체 소스로 실습하기

위의 경우에는 이미지가 수평으로만 반복되는 경우의 (background-repeat : repeat-x;) 배경이 더 좋아 보일것 같습니다.

안녕 친구들!

이상한 배경 이미지...

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-image: url("gradient_bg.png");
      background-repeat: repeat-x;
    }
  </style>
</head>
<body>
  <h1>안녕 친구들!</h1>
  <p>이상한 배경 이미지...</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

전체 소스로 실습하기

이미지를 세로로 반복하려면 background-repeat: repeat-y를 설정하세요.;




배경 이미지 - 위치 및 반복 없음(no-repeat) 설정

배경 이미지를 한 번만 표시하는 것은 background-repeat 속성에 의해 지정됩니다.

안녕 친구들!

배경 이미지 예제가 여기있네.

이 배경 이미지는 한번만 표시됩니다. 하지만 글자를 읽는데 방해가 되네요.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-image: url("img_tree.png");
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <h1>안녕 친구들!</h1>
  <p>배경 이미지 예제가 여기있네.</p>
  <p>이 배경 이미지는 한번만 표시됩니다. 하지만 글자를 읽는데 방해가 되네요.</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

전체 소스로 실습하기


위의 예에서 배경 이미지는 텍스트와 같은 위치에 표시됩니다. 이미지의 위치를 ​​변경하여 텍스트를 너무 많이 방해하지 않도록하고 싶으면 다음과 같이 합니다.

안녕 친구들!

이건 한번만 나오는 배경이미지의 position 을 이용한 위치 지정 예제입니다.

이번에도 배경이미지는 한번만 나오지만 오른쪽 위로 붙으면서 가독성이 높아졌습니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-image: url("img_tree.png");
      background-repeat: no-repeat;
      background-position: right top;
      margin-right: 200px;
    }
  </style>
</head>
<body>
  <h1>안녕 친구들!</h1>
  <p>이건 한번만 나오는 배경이미지의 position 을 이용한 위치 지정 예제입니다.</p>
  <p>이번에도 배경이미지는 한번만 나오지만 오른쪽 위로 붙으면서 가독성이 높아졌습니다.</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

전체 소스로 실습하기

위의 css 중에 margin-right 라는 속성은 오른쪽에 여백을 두는 속성이에요!
이미지를 최대한 오른쪽으로 붙여 놓았지만 글이 너무 길어져서 이미지를 침범하게 될 수 있기 때문에
문장이 이미지를 침범하지 않게 해준것이랍니다.
이 속성은 다음에 css margin 항목에서 배우게 됩니다.




배경 이미지 - 고정 위치(fixed)

배경 이미지를 고정해야한다고 지정하려면 (페이지의 나머지 부분과 함께 스크롤하지 않음)
background-attachment 속성을 사용하세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

이 배경 이미지는 고정되었습니다. 스크롤을 아래로 이동해보세요.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-image: url("img_tree.png");
      background-repeat: no-repeat;
      background-position: right top;
      margin-right: 200px;
      background-attachment: fixed;
    }
  </style>
</head>
<body>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
  <p>이 배경 이미지는 고정되었습니다. 예제에서 스크롤을 아래로 이동해보세요.</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

전체 소스로 실습하기

이 효과를 이용해서 시차 스크롤(Parallax scrolling) 이라는 효과를 줄 수 있습니다.

시차 스크롤(Parallax scrolling) 데모 페이지 새창에서 보기



배경 shorthand - 한줄로 작성하기

코드 단축을 위해 하나의 단일 속성에서 모든 배경 속성을 지정할 수도 있습니다. 이를 shorthand property 라고합니다. 배경에 대한 shorthand property은 background 입니다.

안녕 친구들!

지금 배경이미지 한번만 보여주고 포지션 오른쪽에 붙인 예제야.

잘 보면 위에서 배운 background 속성들을 background 에 한번에 다 작성했어!

순서대로 잘 넣어야 해!

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background: #ffffff url("img_tree.png") no-repeat right top;
      margin-right: 200px;
    }
  </style>
</head>
<body>
  <h1>안녕 친구들!</h1>
  <p>지금 배경이미지 한번만 보여주고 포지션 오른쪽에 붙인 예제야.</p>
  <p>잘 보면 위에서 배운 background 속성들을 background 에 한번에 다 작성했어!</p>
  <p>순서대로 잘 넣어야 해!</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

전체 소스로 실습하기

shorthand property 을 사용할 때 속성 값의 순서는 다음과 같습니다.

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

다른 값이 순서대로 있는 한 속성 값 중 하나가 누락 되어도 상관 없습니다.




← CSS 테두리 →