<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택자란</title>
<!-- css코드는 아래와 같이 style 태그 안에 작성합니다. -->
<style>
/*
# css 주석
# css 구조
선택자 {
속성 : 값;
속성 : 값;
}
# 선택자란, HTML의 즉정한 요소를 선택하기 위한 요소
*/
/* h1태그의 텍스트 색상을 red로 지정 */
h1 {
color: red;
}
</style>
</head>
<body>
<h1>텍스트 색상은 빨강입니다.</h1>
</body>
</html>
/* 02_exam.css */
h3 {
color: deeppink;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 작성방법 3가지</title>
<!--
# CSS 작성방법 3가지
1. HTML에 포함하기(내장 방식)
2. 태그에 직접 작성하기(인라인 방식)
3. HTML 외부에서 불러오기
-->
<style>
/* 내장 방식*/
h1 {
color: tomato;
}
</style>
<link rel="stylesheet" href="02_exam.css">
</head>
<body>
<h1>내장 방식</h1>
<h2 style="color: gold;">인라인 방식</h2>
<h3>HTML파일 외부에서 불러오기</h3>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택자 찾기</title>
<style>
/*
# 태그 선택자
h1 태그의 텍스트 색상을 tomato로 설정
*/
h1 {
color: tomato;
}
/*
# id 선택자
id가 second인 요소의 텍스트 색상을 deeppink로 설정
*/
#second {
color: deeppink;
}
/*
# class 선택자
class가 third인 요소의 텍스트 색상을 gold로 설정
*/
.third {
color: gold;
}
</style>
</head>
<body>
<h1>제목1</h1>
<h1 id="second">제목2</h1>
<h1 class="third">제목3</h1>
</body>
</html>