1. 비쥬얼스튜디오코드 프로그램으로 수업내용 복붙
2. css 선택자 미리보기로 활용 복습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS - 기본선택자</title>
<style>
/* css 영역 (스타일을 작성할 수 있는 영역) */
/* * { color: red; } */
h3 { background-color: pink; }
p, pre { color: cornflowerblue; }
li { background-color: lightskyblue; }
#item2 { background-color: orangered; }
.c1 { color: red; }
.c2 { color: #11a600; font-size: 30px; }
</style>
</head>
<body>
<h1>CSS 기본 선택자</h1>
<h3>선택자란?</h3>
<p>
특정 html요소를 선택하고자 할 때 사용하는 기능<br>
해당 요소를 선택해서 원하는 <strong>스타일</strong>과 <b>기능</b>을 적용시킬 수 있다.
</p>
<h3>모든(전체) 선택자 : *</h3>
<p>현재 이 문서 상에 모든 요소들을 다 선택하고자 할 때 사용</p>
<pre>
* {
스타일속성: 값;
스타일속성: 값;
}
</pre>
<hr>
<h3>태그 선택자 : 태그명</h3>
<p>현재 이 문서 상에 해당 태그를 모두 선택하고자 할 때 사용</p>
<pre>
태그명 {
스타일속성: 값;
}
</pre>
<hr>
<h3>아이디 선택자 : #아이디명</h3>
<p>
현재 이 문서 상에 특정 html 요소 "하나"만을 선택하고자 할 때 사용<br>
단, 해당 요소에서 id속성을 이용해서 고유한 아이디를 부여해야됨
</p>
<pre>
#아이디명 {
스타일속성: 값;
}
</pre>
<ol type="I">
<li>아이템1</li>
<li id="item2">아이템2</li>
<li>아이템3</li>
<li>아이템4</li>
</ol>
<hr>
<h3>클래스 선택자 : .클래스명</h3>
<p>
현재 문서 상에 특정 html 요소 "여러 개"를 선택하고자 할 때 사용
</p>
<pre>
.클래스명 {
스타일속성: 값;
}
</pre>
<ul>
<li class="c1">A</li>
<li class="c2">B</li>
<li class="c1 c2">C</li>
<li class="c1">D</li>
<li>E</li>
</ul>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>'##CSS' 카테고리의 다른 글
| 글꼴 관련 스타일 (0) | 2024.10.18 |
|---|---|
| 기타선택자 수업내용 복습 (5) | 2024.10.16 |
| 선택자 우선순위 (0) | 2024.10.14 |
| CSS 기본 선택자 알아보기 (1) | 2024.08.18 |
| 스타일 시트란 ? (0) | 2024.08.10 |