기본 선택자는 전체 선택자, 태그 선택자, 클래스 선택자, 아이디 선택자가 있다.
1. 전체 선택자(*): 문서의 모든 요소를 선택하는 선택자
2. 태그 선택자: 요소명으로 요소를 선택하는 선택자
3. 클래스 선택자: 클래스명으로 요소를 선택하는 선택자
4. 아이디 선택자: 아이디명으로 요소를 선택하는 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 선택자</title>
<style>
* {margin:0; padding:0; box-sizing:border-box;}
/*전체 요소를 선택하여 스타일속성과 스타일값을 적용*/
/*요소의 너비값에 박스 안쪽 여백(padding)과 테두리(border)가 포함되도록 하는 스타일은 box-sizing:border-box이다.*/
div {height:100vh; background:orange;}
/*div는 태그 선택자이다.*/
.box {
width:50%; height:200px;
text-align:center; line-height:200px;
background:brown;
}
/*.box는 클래스 선택자이다.*/
#idBox {width:200px; height:100px; background:red;}
/*#idBox는 아이디 선택자이다.*/
.fruit {width:300px; height:200px; background:aliceblue;}
.apple {font-size:32px; color:red;}
.orange {font-size:26px; color:orange;}
</style>
</head>
<body>
<div>
<div class="box">BOX</div>
<div id="idBox"></div>
<!-- id 속성으로 요소의 아이디명을 붙일 때는 페이지에서 유일한 이름을 붙여야 한다. 이름이 중복되면 안된다. 아이디명은 자바스크립트와 관련이 있다. -->
<!-- 사과, 바나나, 오렌지라는 텍스트를 저장하는 요소가 있다. 이 요소에 클래스명을 붙이고 원하는 스타일을 적용하세요.
필수적용 스타일: 사과 텍스트는 텍스트 크기를 키우고 색상을 red로 설정, 오렌지 텍스트는 텍스트 크기를 키우고 색상을 오렌지로 설정한다. -->
<ul class="fruit">
<li class="apple">사과</li>
<li>바나나</li>
<li class="orange">오렌지</li>
</ul>
</div>
</body>
</html>
결과
