HTML 입문 | HTML 기본 요소 | HTML 배경(background)

Tags:

HTML 문서의 기본 배경(background)은 흰색이다. HTML 요소들마다 각각의 배경이 존재한다.

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

  1. 배경색 변경
  2. 배경을 이미지로 변경

배경색 변경

HTML5 이전까지는 bgcolor 속성을 이용하여 HTML 요소의 배경색을 다른 색으로 변경할 수 있었다. 하지만 HTML5부터는 bgcolor 속성을 더 이상 지원하지 않으며, CSS를 이용하여 배경색을 변경하도록 권장하고 있다.

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

<style>
    body { background-color: lightgreen; }
    div { background-color: rgb(255,0,128); }
    p { background-color: #FFCCFF; }
</style>

코드 실행

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

배경을 이미지로 변경

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

문법

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

다음 예제는 이미지를 이용하여 배경을 만들고 있다.

<body background="/resources/images/logo/96x96.png">
</body>

코드 실행

배경으로 이미지를 사용하면 웹 페이지의 로딩시간이 길어진다.
따라서, 보통은 작은 사이즈의 이미지를 패턴(pattern)으로 만들어 배경 이미지로 반복 표시하도록 설정한다.




최종 수정 : 2021-08-27