HTML 스타일(Style)
HTML 요소의 style 속성(attribute)을 이용하면 CSS 스타일을 HTML 요소에 직접 설정할 수 있다.
하지만 이러한 style 속성을 이용한 방법은 오직 단 하나의 HTML 요소에만 스타일을 적용할 수 있다.
문법
<태그이름 style="속성이름:속성값">
배경색 변경
<h1 style="background-color:white">
style 속성을 이용한 배경색 변경
</h1>
글자색 변경
<h1 style="color:pink">
style 속성을 이용한 글자색 변경
</h1>
글자 크기 변경
<h1 style="font-size:250%">
style 속성을 이용한 글자 크기 변경
</h1>
텍스트(문단) 정렬
text-align속성은 HTML 요소에 대한 수평 텍스트 정렬(가운데)
<h1 style="text-align:center">
style 속성을 이용한 문단 정렬 변경
</h1>
여러 스타일의 설정
style 속성을 이용하여 여러 CSS 스타일을 한 번에 적용할 수 있다.
<body style="background-color:green;">
<h1 style="background-color:white; color:pink; font-size:150%; text-align:center">
style 속성을 이용하여 한 번에 스타일링 하기!
</h1>
</body>
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>
배경을 다른 이미지로 변경
background 속성을 이용하면 HTML 요소의 배경을 이미지(image)로 설정할 수 있다.
문법
<태그이름 background="이미지주소">
예제
<body background="/examples/images/img_background_good.png">
...
</body>
'HTML' 카테고리의 다른 글
| HTML 블록과 인라인 (0) | 2020.04.05 |
|---|---|
| HTML 리스트,테이블 (0) | 2020.04.05 |
| HTML 링크 , 이미지 (0) | 2020.04.04 |
| HTML텍스트 요소 (0) | 2020.04.03 |
| HTML기초,요소 (0) | 2020.04.03 |
