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>123CSS의 background 속성을 이용하면, 더욱 다양한 방법으로 배경색을 설정할 수 있습니다.
색상은 이전 수업에 색상표현방법 3가지를 다 이용해서 background-color를 설정할 수 있습니다.
더 자세한 내용은 이후의 CSS 수업에서 좀 상세하게 다루도록 하겠습니다. ^^
배경을 다른 이미지로 변경
background 속성을 이용하면 HTML 요소의 배경을 이미지(image)로 설정할 수 있습니다.
※ 문법
|
<태그이름 background="이미지주소">
|
위의 문법을 가지고 아래의 예제처럼 활용 할 수 있습니다.
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Backgrounds</title>
</head>
<body background="/examples/images/img_background_good.png">
<h1>배경으로 이미지 삽입하기</h1>
</body>
</html>
배경으로 이미지를 사용하면 웹 페이지의 로딩시간이 증가하게 됩니다.
따라서 보통은 작은 사이즈의 이미지를 패턴(pattern)으로 만들어 배경 이미지로 반복 설정합니다.
'share > html' 카테고리의 다른 글
| [HTML] 이미지 태그 / 이미지주소 <img src="image 주소"> (0) | 2022.02.03 |
|---|---|
| [HTML] 하이퍼링크(hyperlink)와 타겟(target)넣기 (0) | 2022.01.31 |
| [HTML] web에서 색 표현하기 (0) | 2022.01.29 |
| [HTML] 스타일 적용하기 <style> - 태그 스타일 꾸미기 (0) | 2022.01.28 |
| [HTML] 엔티티(Entity) - 예약어 (공백과 특수기호 사용하는 방법) (0) | 2022.01.26 |
