HTML 스타일(Style)
HTML 요소의 style 속성(attribute)을 이용하면 CSS 스타일을 HTML 요소에 직접 설정할 수 있습니다.
태그를 바타으로 이 <style> 속성을 어떻게 만들어주느냐에 따라 홈페이지마다 각각 다른 레이아웃과 특징을 갖게 되는데
태그가 우리 각자의 방이라면 <stlye>은 방에 어떤 인테리어를 어떻게 입혀주는가에 대한 기능이라고 생각하면 훨씬 이해하기 쉬울 것 같습니다 :)
하지만 이러한 style 속성을 이용한 방법은 오직 단 하나의 HTML 요소에만 스타일을 적용할 수 있는데,
여기에서는 가볍게 맛보기만 하고 자세한 것은 html 공부가 완료된 후 카테고리 CSS에서 공부할 수 있도록 합시다
(물론 html과 css 둘다 함께 시작해도 무방합니다.)
◆ <style> 어떻게 사용할까?
[문법]
|
<태그이름 style="속성이름:속성값">
|
우리가 배우고 있는 태그 안에 style을 선언하고 속송과 값을 입력하면 됩니다.
여러개의 속성을 쓸 경우에는 세미콜론으로 구분합니다.
배경색 변경
다음 예제는 style 속성을 이용하여 배경색을 변경하는 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Styles</title>
</head>
<body style="background-color:#33CCFF">
<h1 style="background-color:white">
style 속성을 이용한 배경색 변경
</h1>
</body>
</html>
글자색 변경
다음 예제는 style 속성을 이용하여 글자색을 변경하는 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Styles</title>
</head>
<body>
<h1 style="color:maroon">
style 속성을 이용한 글자색 변경
</h1>
</body>
</html>
이런식으로 컬러를 입력하여 글자 색을 변경 할 수 있습니다.
문단 정렬 변경
다음 예제는 style 속성을 이용하여 문단 정렬을 변경하는 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Styles</title>
</head>
<body>
<h1 style="text-align:center">
style 속성을 이용한 문단 정렬 변경
</h1>
</body>
</html>
여러 스타일의 설정
style 속성을 이용하여 여러 CSS 스타일을 한 번에 적용할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Styles</title>
</head>
<body style="background-color:#33CCFF">
<h1 style="background-color:white; color:maroon; font-size:150%; text-align:center">
style 속성을 이용하여 한 번에 스타일링 하기!
</h1>
</body>
</html>
※ style 속성값에 사용되는 CSS 속성(property)과 속성값들은 세미콜론(;)을 이용하여 구분합니다.
※ CSS 속성을 하나만 사용할 때나, 여러 개의 CSS 속성 중 맨 마지막 CSS 속성은 세미콜론(;)을 생략할 수 있습니다.
이렇게 각 태그에 속성과 값을 넣어주면 좀 더 다양한 모습으로 변화하는데 이것이 바로 <style>입니다.
앞으로 수 많은 속성 값들은 CSS 에서 더 자세하게 배우게 될 것입니다. :)
'share > html' 카테고리의 다른 글
| [HTML] 배경넣기 background color/image (0) | 2022.01.30 |
|---|---|
| [HTML] web에서 색 표현하기 (0) | 2022.01.29 |
| [HTML] 엔티티(Entity) - 예약어 (공백과 특수기호 사용하는 방법) (0) | 2022.01.26 |
| [HTML] 주석 처리 <!-- --> (comment) (0) | 2022.01.24 |
| [HTML] 인용구 (Quotation) - <q><blockquote><abbr><address> (0) | 2022.01.23 |
