[CSS] 기본 선택자
컴퓨터/CSS<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 기본선택자</title>
</head>
<body>
<h1>CSS 기본선택자</h1>
<h3>선택자란?</h3>
<p>
특정 html요소를 선택하고자 할 때 사용하는 기능<br>
해당 요소를 선택하여 원하는 '스타일'과 '기능'을 적용시킬 수 있음
</p>
<h3>1. 모든(전체) 선택자 : *</h3>
<p>현재 이 문서의 모든 요소들을 선택하고자 할 때 사용</p>
<pre>
* {
스타일속성 : 값;
스타일속성 : 값;
}
</pre>
<!-----------------------style--------------------------->
<style>
* {
background-color: antiquewhite;
}
</style>
<h3>2. 태그 선택자 : 태그명</h3>
<p>
현재 이 문서의 해당 태그들을 모두 선택하고자 할 때 사용<br>
여러 태그가 동일한 스타일을 갖는다면 , 로 여러개를 넣을 수 있다
</p>
<pre>
태그명 {
스타일속성 : 값;
}
태그명, 태그명 {
스타일속성 : 값;
}
</pre>
<!-----------------------style--------------------------->
<style>
h3 {
background-color: rgb(127, 193, 255);
color: blue;
}
p, pre {
color: brown;
}
</style>
<h1>3. 아이디 선택자 : #아이디명</h1>
<p>
현재 문서에서 특정 요소 "하나만"을 선택하고자 할 때 사용<br>
단, 해당 요소에 id속성을 이용하여 고유한 아이디값을 부여해야 함
</p>
<pre>
#아이디명 {
스타일속성 : 값;
}
</pre>
<ol>
<li>아이디 선택자1</li>
<li id="id1">아이디 선택자2</li>
<li>아이디 선택자3</li>
<li>아이디 선택자4</li>
</ol>
<!-----------------------style--------------------------->
<style>
#id1 {
color: red;
}
</style>
<h3>4. 클래스 선택자 : .클래스명</h3>
<p>문서내에 내가 원하는 요소 "여러개" 선택하고자 할 때 사용</p>
<pre>
.클래스명 {
스타일속성 : 값;
}
</pre>
<ul>
<li class="class1">클래스 선택자1</li>
<li class="class2">클래스 선택자2</li>
<li class="class1">클래스 선택자3</li>
<li class="class2">클래스 선택자4</li>
<li class="class1">클래스 선택자5</li>
</ul>
<!-----------------------style--------------------------->
<style>
.class1 {background-color: azure;}
.class2 {font-size: 25px;}
</style>
<!--
모든 태그내에 공통으로 쓸 수 있는 속성 : id, class
- id : 문서내에서 "고유"한 값으로 "하나"만 작성
- class : 문서내에서 "중복"된 값으로 "여러개" 작성가능
-->
</body>
</html>
<화면>
'컴퓨터 > CSS' 카테고리의 다른 글
| [CSS] 텍스트 관련 스타일 (0) | 2024.06.27 |
|---|---|
| [CSS] 글꼴 관련 스타일 (0) | 2024.06.27 |
| [CSS] 선택자 우선순위 (0) | 2024.06.27 |
| [CSS] 기타 선택자 (2) | 2024.06.27 |
| [CSS] hello CSS (0) | 2024.06.26 |