..

Search

14) 배경

HTML 배경


HTML 배경(Background)

HTML 문서의 기본 배경(background)은 흰색입니다.

또한, HTML 요소들도 각자 자신만의 배경을 가지고 있습니다.

 

HTML에서는 이러한 배경을 다음과 같이 변경할 수 있습니다.

 

1. 배경을 다른 색으로 변경

2. 배경을 다른 이미지로 변경


배경색을 다른 색으로 변경

HTML5 이전까지는 bgcolor 속성을 이용하여 HTML 요소의 배경색을 다른 색으로 변경할 수 있었습니다.

하지만 HTML5부터는 bgcolor 속성을 더 이상 지원하지 않으며, CSS를 이용하여 배경색을 변경하도록 하고 있습니다.

 

다음 예제는 CSS 스타일을 이용하여 배경색을 다른 색으로 변경하는 예제입니다.

예제

<style>

    body { background-color: lightblue; }

    h1 { background-color: rgb(255,128,0); }

    p { background-color: #FFFFCC; }

</style>123

 

CSS의 background 속성을 이용하면, 더욱 다양한 방법으로 배경색을 설정할 수 있습니다.

 

CSS 배경 수업 확인 =>


배경을 다른 이미지로 변경

background 속성을 이용하면 HTML 요소의 배경을 이미지(image)로 설정할 수 있습니다.

문법

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

 

예제

<body background="/examples/images/img_background_good.png">

...

</body>

코딩연습 ▶

 

배경으로 이미지를 사용하면 웹 페이지의 로딩시간이 증가하게 됩니다.

따라서 보통은 작은 사이즈의 이미지를 패턴(pattern)으로 만들어 배경 이미지로 반복 설정합니다.

 


연습문제