Web/html

STYLE - 배경

mr.팡 2025. 1. 17. 00:53

웹페이지의 첫인상을 결정짓는 중요한 요소 중 하나는 **배경(Background)**입니다. 기본적으로 HTML 문서의 배경은 흰색이며, 각 HTML 요소들도 고유한 배경을 가지고 있습니다. 하지만 이러한 배경은 색상과 이미지를 활용해 쉽게 변경할 수 있습니다. 아래에서는 HTML과 CSS를 사용하여 배경을 변경하는 방법을 살펴보겠습니다.

 

1. 배경색 변경하기

HTML5 이전에는 bgcolor 속성을 사용하여 배경색을 변경할 수 있었습니다. 하지만 현대 웹 개발에서는 bgcolor 대신 CSS를 이용하는 것이 권장됩니다. CSS를 활용하면 더 세부적인 색상 설정과 스타일링이 가능합니다.

 

예제: CSS로 배경색 변경하기

아래 코드는 다양한 HTML 요소의 배경색을 CSS로 설정하는 방법을 보여줍니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배경색 변경</title>
    <style>
        body {
            background-color: lightblue; /* 페이지 배경색 */
        }
        h1 {
            background-color: rgb(255, 128, 0); /* RGB로 설정된 배경색 */
        }
        p {
            background-color: #FFFFCC; /* 16진수로 설정된 배경색 */
        }
    </style>
</head>
<body>
    <h1>CSS로 배경색 변경하기</h1>
    <p>이 문단의 배경색은 밝은 노란색입니다.</p>
</body>
</html>

 

2. 배경 이미지를 사용하기

배경으로 이미지를 설정하면 웹 페이지를 더 생동감 있고 독창적으로 꾸밀 수 있습니다. HTML에서는 background 속성을 사용하여 배경 이미지를 지정합니다.

 

<태그이름 background="이미지주소">

 

예제: 배경 이미지 설정

아래는 페이지 배경에 이미지를 적용하는 간단한 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배경 이미지 설정</title>
    <style>
        body {
            background-image: url('/examples/images/img_background_good.png'); /* 배경 이미지 */
            background-repeat: repeat; /* 이미지 반복 */
            background-size: cover; /* 배경 이미지 크기 조정 */
        }
    </style>
</head>
<body>
    <h1>배경 이미지를 사용해보세요!</h1>
    <p>이미지는 웹페이지의 분위기를 크게 좌우합니다.</p>
</body>
</html>

 

배경 이미지 사용 시 주의사항
배경 이미지를 활용하면 페이지가 더욱 아름다워질 수 있지만, 이미지 파일 크기가 크다면 페이지 로딩 속도가 느려질 수 있습니다. 이를 방지하기 위해 다음 팁을 고려해보세요:

  • 작은 크기의 이미지를 사용하고 반복 패턴으로 배경을 꾸미세요.
  • 이미지를 최적화하여 용량을 줄이세요.
  • 필수적인 경우에만 배경 이미지를 사용하세요.

마무리

HTML과 CSS를 활용하면 배경색과 이미지를 조합해 다양한 스타일을 연출할 수 있습니다. 이로 인해 웹페이지는 단순한 정보 제공에서 벗어나 시각적으로 매력적인 콘텐츠를 제공하게 됩니다. 적절한 배경 설정으로 여러분의 웹사이트를 더욱 돋보이게 만들어 보세요!

'Web > html' 카테고리의 다른 글

HTML - 이미지  (0) 2025.01.21
HTML - 링크  (0) 2025.01.20
STYLE - 색(Color)  (0) 2023.11.08
HTML 요소 - 스타일(Style)  (0) 2023.11.08
HTML 요소 - 문자셋(Character set)  (0) 2023.09.10