홍시의 씽크탱크

🖥️ IT, 컴퓨터/🌐 HTML, CSS, JS

[HTML] 개념 정리 8 :: CSS background 활용한 배경 설정

김 홍시 2025. 1. 3.
반응형

CSS 스타일 속성을 활용한 배경 설정

CSS는 배경색과 배경 이미지를 포함한 다양한 스타일 속성을 제공하여 웹페이지의 배경을 세부적으로 설정할 수 있음. CSS의 background 관련 속성들을 사용하면 HTML <body> 태그에 배경을 효과적으로 적용 가능.

1. CSS 배경 스타일 속성

(1) background-color: 배경색 설정

웹페이지 또는 특정 요소의 배경색을 지정.

예제
<style>
  body {
    background-color: #FFCC99; /* 오렌지 톤 배경 */
  }
</style>

(2) background-image: 배경 이미지 설정

배경에 이미지를 삽입.

예제
<style>
  body {
    background-image: url('background.jpg'); /* 배경 이미지 설정 */
  }
</style>

(3) background-repeat: 이미지 반복 여부

이미지의 반복 방식을 지정.

  • repeat: 기본값. 이미지가 가로와 세로로 반복됨.
  • no-repeat: 반복 없이 이미지를 한 번만 표시.
  • repeat-x: 가로 방향으로만 반복.
  • repeat-y: 세로 방향으로만 반복.
예제
<style>
  body {
    background-image: url('background.jpg');
    background-repeat: no-repeat; /* 이미지 반복 없음 */
  }
</style>

(4) background-position: 배경 이미지 위치

배경 이미지의 시작 위치를 지정.

  • 값: left, center, right, top, bottom, 또는 픽셀(px) 단위.
예제
<style>
  body {
    background-image: url('background.jpg');
    background-position: center; /* 중앙 정렬 */
  }
</style>

(5) background-size: 배경 이미지 크기

이미지의 크기를 조정.

  • auto: 기본값. 원본 크기 유지.
  • cover: 화면 전체를 채우도록 확대/축소.
  • contain: 이미지 전체가 보이도록 축소.
  • 특정 값: 픽셀(px), 퍼센트(%).
예제
<style>
  body {
    background-image: url('background.jpg');
    background-size: cover; /* 화면 전체 채우기 */
  }
</style>

(6) background-attachment: 배경 고정 여부

스크롤 시 배경의 고정 여부를 설정.

  • scroll: 스크롤 시 배경도 함께 이동 (기본값).
  • fixed: 스크롤해도 배경이 고정됨.
예제
<style>
  body {
    background-image: url('background.jpg');
    background-attachment: fixed; /* 배경 고정 */
  }
</style>

(7) background: 배경 속성의 단축형

background 속성을 사용하면 배경 관련 속성을 한 줄로 작성 가능.

형식
background: [color] [image] [repeat] [attachment] [position] [size];
예제
<style>
  body {
    background: #FFCC99 url('background.jpg') no-repeat fixed center / cover;
  }
</style>

2. CSS 배경 설정 종합 예제

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 배경 설정</title>
  <style>
    body {
      background-color: #FFCC99; /* 배경색 설정 */
      background-image: url('background.jpg'); /* 배경 이미지 */
      background-repeat: no-repeat; /* 반복 없음 */
      background-position: center top; /* 중앙 위쪽 정렬 */
      background-size: cover; /* 화면 전체 채우기 */
      background-attachment: fixed; /* 배경 고정 */
    }
  </style>
</head>
<body>
  <h1>CSS를 활용한 배경 설정</h1>
  <p>이 페이지는 CSS 배경 속성을 활용하여 작성되었습니다.</p>
</body>
</html>

결론

  • CSS를 사용하면 배경색과 이미지를 효율적으로 설정하고, 반복 여부, 위치, 크기 등을 세부적으로 조정 가능.
  • background 단축 속성을 활용하면 간결하고 효율적인 코드를 작성할 수 있음.
  • HTML 태그 속성보다 CSS를 사용하는 것이 현대 웹 개발 표준에 부합하며, 더 많은 디자인 옵션을 제공함.
반응형
저작자표시 비영리 동일조건

'🖥️ IT, 컴퓨터 > 🌐 HTML, CSS, JS' 카테고리의 다른 글

[HTML] 개념 정리 10 :: CSS와 JavaScript를 활용한 레이아웃 설정  (0) 2025.01.03
[HTML] 개념 정리 9 :: 내장프레임 <iframe> 페이지 삽입 및 속성  (0) 2025.01.03
[HTML] 개념 정리 7 :: 음악 및 동영상 태그 <audio> <video> <source>  (0) 2025.01.03
[HTML] 개념 정리 6 :: 테이블 태그<table>와 속성  (0) 2025.01.03
[HTML] 개념 정리 5 :: 이미지 <img> 태그와 속성  (0) 2025.01.03

댓글

티스토리툴바