HTML <style> 태그와 style 속성은 둘 다 모두 CSS를 특정 html요소에 적용하기 위해서 사용됩니다.
즉, HTML 과 CSS를 연결시켜 주는 개념입니다. 먼저 <style> 태그를 알아봅시다.
<style> 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>style in html</title>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
head 태그 사이에 body 에서 사용되는 h1, p 요소를 선택자를 사용해서 스타일을 설정합니다.
여기서는 텍스트 색상을 빨강과 파랑으로 설정했습니다.
하기 결과처럼, <style> 태그를 사용하면 특정 html 요소 부분에 스타일을 적용할 수 있습니다.
style 속성
이번에는 style 속성을 사용해서 동일한 결과를 만들어 봅니다.
html 태그 내부의 inline 스타일로 적용했습니다. 결과는 동일합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>style in html</title>
</head>
<body>
<h1 style="color: red;">A heading</h1>
<p style="color: blue;"> paragraph.</p>
</body>
</html>
두 가지 방법 모두 특정 태그 요소에 스타일을 적용하기 위한 방법입니다.
하지만, html 파일과의 혼용 및 특정 요소들을 한 번에 다 수정하기 위해서는 해당 방법들은 그리 편리하지 않습니다.
그렇기에 CSS 파일을 외부로 만들어두고, HTML의 link 태그를 활용해서 연결하는 방식이 더 효율적일 수 있습니다.
외부 링크 방식은 하기 페이지를 참고 드립니다.
감사합니다.
반응형
'앱 만들기 > HTML5 study' 카테고리의 다른 글
2강. HTML 태그란 무엇일까? (2) | 2024.06.17 |
---|---|
1강 HTML 기본구조 (1) | 2024.06.16 |
HTML <script> 태그 사용법 (1) | 2023.07.24 |
HTML onkeydown 이벤트 (4) | 2023.07.22 |
HTML 태그 구조 (3) | 2023.07.03 |
댓글