기본 선택자
1. 전체 선택자(*) : 문서의 모든 요소를 선택하는 선택자
2. 태그 선택자 : 요소명으로 요소를 선택하는 선택자
3. 클래스 선택자 : 클래스명으로 요소를 선택하는 선택자
4. 아이디 선택자 : 아이디명으로 요소를 선택하는 선택자
1. 전체 선택자 : * {}
· 전체 요소를 선택하여 스타일 속성과 스타일값을 적용
· 요소의 너비값에 박스 안쪽 여백(padding)과 테두리(border)가 포함되도록 하는
스타일 속성은 box-sizing : border-box 이다.
· (전체 선택자에는 margin, padding, box-sizing 세가지 값만 넣는다.)
<!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;}
</style>
</head>
<body>
<div>
<div class="box">box</div>
<div id="idBox"></div>
<ul class="fruit">
<li><p class="apple" id="apple">사과</p></li>
<li><p id="banana">바나나</p></li>
<li><p id="orange">오렌지</li>
</ul>
</div>
</body>
</html>2. 태그 선택자 : 태그명 {}
div {} 와 같이 태그명 {} 인 경우는 태그 선택자이다.
<!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>
div{height:100vh; background:orange;}
</style>
</head>
<body>
<div>
<div class="box">box</div>
<div id="idBox"></div>
<ul class="fruit">
<li><p class="apple" id="apple">사과</p></li>
<li><p id="banana">바나나</p></li>
<li><p id="orange">오렌지</li>
</ul>
</div>
</body>
</html>
3. 클래스 선택자 : .클래스명 {}
클래스명 앞에 .을 붙여 사용한다.
<!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>
.box {
width:50%; height:200px;
text-align:center; line-height:200px;
background:brown;
}
</style>
</head>
<body>
<div>
<div class="box">box</div>
<div id="idBox"></div>
<ul class="fruit">
<li><p class="apple" id="apple">사과</p></li>
<li><p id="banana">바나나</p></li>
<li><p id="orange">오렌지</li>
</ul>
</div>
</body>
</html>
4. 아이디 선택자 : #아이디명 {}
· 아이디명 앞에 #을 붙여서 사용한다
· id 속성으로 요소의 아이디명을 붙일 때는 페이지에서 유일한 이름을 붙여야 한다.
이름이 중복되면 안된다.
· 아이디명은 자바스크립트와 관련이 있다.
<!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>
#idBox {width:200px; height:100px; background:red;}
</style>
</head>
<body>
<div>
<div class="box">box</div>
<div id="idBox"></div>
<ul class="fruit">
<li><p class="apple" id="apple">사과</p></li>
<li><p id="banana">바나나</p></li>
<li><p id="orange">오렌지</li>
</ul>
</div>
</body>
</html>
'국비지원 JAVA 풀스택 과정 > HTML+CSS3' 카테고리의 다른 글
| [HTML+CSS3] 상태 선택자, 속성 선택자 (0) | 2022.09.26 |
|---|---|
| [HTML+CSS3] 자식+후손 선택자 (0) | 2022.09.26 |
| [HTML+CSS3] 스타일시트 기본 문법 (0) | 2022.09.26 |
| [HTML+CSS3] 회원가입 화면 만들기 (0) | 2022.09.23 |
| [HTML+CSS3] gradient(그레디언트) (2) | 2022.09.23 |