반응형
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 태그를 활용해서 연결하는 방식이 더 효율적일 수 있습니다.
외부 링크 방식은 하기 페이지를 참고 드립니다.
감사합니다.
CSS 외부 스타일 시트 란? 그리고 html 문서와 연동방법 알아보기
외부 스타일 시트 란? 외부에 별도의 파일로 저장된 스타일을 의미 합니다. 외부 CSS 파일을 사용하게 되면, 여러 웹문서에서 동일한 CSS 스타일 링을 한번에 적용할 수 있습니다. 즉, 내부 스타일
soo0100.tistory.com
반응형
'앱 만들기 > 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 |
댓글