0025 HTML style 속성(attribute) 및 배경색 설정
스타일링이라 함은 폰트, 크기, 테두리, 색깔 등을 이용하여 예쁘게 꾸미는 것을 말하고 HTML 문서를 스타일링 할 때는 CSS(Cascading Style Sheet)라는 별도의 언어체계를 이용한다.
이 때, HTML의 개별 요소(element) 하나를 CSS를 이용하여 꾸미고 싶을 때에는 style 속성을 사용하면 된다.
HTML의 style 속성은 다음과 같은 구문으로 사용된다.
<태그명 style="속성:속성값;">
위 구문에서 속성은 CSS에서 사용하는 속성(property)이고, 속성값도 CSS에서 사용하고 있는 속성값(value)이다. 즉, style 속성은 개별 요소에 CSS를 적용하기 위한 속성인 것이다.
따라서 이 style 속성을 다루면서 익히게 될 속성(property)과 속성값(value)은 모두 CSS에서도 그대로 사용할 수 있다.
또, 당연히 style은 모든 요소에 적용할 수 있는 전역 속성(global attribute)이다.
추후에 CSS를 공부하면서 상세하게 다룰 내용이지만 참고적으로 간단히 언급하면 CSS를 적용하는 것은 아래와 같이 세 가지 방법이 있는데 그 중 마지막 방법이 이 style 요소를 사용하는 방법이다.
하나는 <head> 요소 내부에 중첩된 <style> 요소에 CSS를 작성하는 것이다.
둘은 <link> 요소를 이용하여 외부에서 CSS 파일을 불러 읽는 것이다.
마지막은 개별 요소에 style 속성을 부가하여 CSS를 이용하는 것이다.
보통 첫 번째와 두 번째 방법으로 CSS를 사용하지만 이러한 방법은 일괄적으로 HTML 페이지의 스타일을 설정하기 때문에 이에 대한 예외적인 스타일이 적용되어야할 요소(element)들은 개별 요소에 style 속성을 이용하여 CSS를 부여하기도 한다(이는 CSS 상속과 적용 범위의 문제이므로 나중에 다시 보도록 하자.).
앞서 0017 이미지를 보여주는 img 요소 02 대체할 문구 및 크기 결정에서 <img> 요소의 크기를 style 속성으로 결정하는 예문을 아래와 같이 다루면서 최근 style 속성을 사용하여 이미지의 크기를 결정하는 이유를 CSS 스타일 시트에서 일괄적으로 이미지의 크기를 조작할 때 그 적용을 피하기 위해서라고 언급한 바 있는데 이것이 바로 위와 같은 이유이다.
<img src="sun.jpg" style="width:100px;height:100px" alt="떠오르는 태양" />
위의 예문에서 style 속성으로 CSS 속성인 width와 height를 이용하고 있고 속성값으로 픽셀수(px)를 이용하고 있다.
배경색(Background Color)
HTML 요소의 배경색을 결정하는 CSS 속성은 background-color 속성이다. 요소의 배경색을 이용하여 앞서 공부한 블록 요소와 인라인 요소의 차이점을 다시 한번 살펴보자.
background-color 속성은 다음과 같이 사용한다.
<태그명 style="background-color:색상이름;">
색상이름은 red, blue, purple, yellow, white, black, powderblue 등 영문의 색상이름이 그대로 적용되고 더 디테일한 색상을 다룰 때에는 색상의 일련번호로 집어넣을 수도 있다.
다음과 같이 
0025.html 파일을 만들어 실행해보자.
<!DOCTYPE html>
<html>
<head><title>배경색</title></head>
<body style="background-color:black;">
<h1 style="background-color:red;">h1 요소</h1>
<p style="background-color:white;">
p요소<br />
<strong style="background-color:yellow;">중요한 텍스트</strong><br />
<em style="background-color:purple;">강조 텍스트</em><br />
a 요소 <a href="https://deliciouslearning.tistory.com/" style="background-color:blue;">책 씹어먹는 즐거움</a>
</p>
</body>
</html>
<body> 요소에 중첩된 각각의 요소에 전부 배경색을 다르게 설정해보았다. 그리고 실행해보면 다음과 같이 나타난다.
블록 요소와 인라인 요소에 따라서 배경색이 다르게 설정되어 있는 것을 알 수 있다. 블록 요소는 해당 행의 가로폭을 전부 차지하는 요소이므로 실제 내용이 얼마 안되더라도 해당 행의 전체에 배경색이 칠해진다. 반면, 인라인 요소는 배경색이 꼭 필요한 부분으로 한정되는 것을 알 수 있다.
CSS에서 사용하고 있는 다양한 속성과 속성값을 이 자리에서 전부 살펴보는 것은 적합하지 않은 것 같다. 우선 배경색만 살펴보고. 또, 다른 요소들을 다루면서 관련된 스타일 속성은 그때그때 알아보도록 하자.
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 
0025 HTML style 속성(attribute) 및 배경색 설정.apkg
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0027 HTML 순서가 없는(unordered) 목록의 글머리 기호 바꾸기 (0) | 2018.11.29 |
|---|---|
| 0026 HTML 목록(list) 요소 만들기 (0) | 2018.11.28 |
| 0024 블록(block) 요소와 인라인(inline) 요소 (0) | 2018.11.26 |
| 0023 HTML에서 인용하기(Quotation) (0) | 2018.11.25 |
| 0022 HTML로 글자의 형식 정하기 (0) | 2018.11.23 |
