1. 셀렉터(Selector)
1️⃣ 셀렉터란?
1) 개념
어떤 HTML 요소에 스타일을 적용할지를 지정하는 문법
2) 예시
선택자 { 스타일: 값; }
p {
color: red;
}➡️ p 태그를 선택해서 글자를 빨간색으로 바꾼다
2️⃣ 기본 셀렉터 (가장 중요 ⭐)
1) 태그 선택자 (Type Selector)
p {
font-size:16px;
}- 해당 태그 전부 적용
2) 클래스 선택자 (Class Selector) ⭐주로 사용⭐
.box {
border: 1px solid black;
}<div class="box"></div>.으로 시작
- 여러 요소에 재사용 가능
3) 아이디 선택자 (ID Selector)
#header {
background: gray;
}<div id="header"></div>#으로 시작
- 한 페이지에 하나만 사용
실습
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.a {
color: red;
font-size: 20px;
}
h1 {
color: blue;
}
#line {
color: green;
}
</style>
</head>
<body>
<h1>CSS 기본 문법</h1>
<hr />
<div class="a">HelloWorld</div>
<div id="line">HelloWorld</div>
</body>
</html>
Share article