HTML 문서에
CSS 스타일 적용 하는 방법
1. 인라인 스타일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 style="color: rgb(223, 223, 81);"> CSS 인라인 스타일 </h1>
</body>
</html>위와 같이, 해당 태그 h1에 직접적으로
style 을 입력하여 CSS를 적용시키는 방식입니다.
2. 내부 스타일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2 {
color: blue;
}
</style>
</head>
<body>
<h2> CSS 내부 스타일 </h2>
</body>
</html>내부 스타일 방식은 head 부분에 style 태그 내에
적용할 h2 태그를 적고 거기에 속성값을 주는 것 입니다.
- 외부 스타일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- link css -->
<link rel="stylesheet" href="../css/06_2_ex1.css">
</head>
<body>
<h3> CSS 외부 스타일 </h3>
</body>
</html>↑ .HTML 문서
h3 {
color: purple;
}↑ .CSS 문서
외부 스타일 방식은 HTML문서를 작성 한 후,
.CSS 문서를 따로 만들어 적용할 h3 태그에 속성 값을 주는 것 입니다.
CSS문서를 따로 만들었기 때문에 HTML문서> head > link:css 태그에 CSS파일 위치 url을 적어주어야 합니다.
