** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요.
https://www.youtube.com/watch?v=ZkqK4a7i3SI&t=165s
- 선택자 : CSS가 특정 요소를 선택해서 스타일을 변경하기 위해 사용
1. 기본 선택자의 종류
| 선택자 | 설명 | 예시 |
| * | 모든 태그를 선택 | *{ color: red; } |
| 태그명 | 해당 태그를 선택 | h1{ color: red; } |
| 아이디 | 태그 속성인 아이디속성의 값을 선택 | #text01{ color: red; } |
| 클래스 | 태그 속성인 클래스속성의 값을 선택 | .text01{ color: red; } |
2. 전체선택자 - 모든 태그를 선택
1) 코드뷰
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 작성법</title>
<style type="text/css">
*{ font-size: 20px; }
</style>
</head>
<body>
<h1>제목태그</h1>
<p>문단태그</p>
<ul>
<li>리스트태그</li>
<li>리스트태그</li>
</ul>
<ol>
<li>리스트태그</li>
<li>리스트태그</li>
</ol>
</body>
</html>
2) 전체선택자로 스타일을 쓰기 전 미리보기
3) 전체선택자로 스타일을 작성 후 코드 완성뷰
3. 태그선택자
- html에 있는 태그를 선택하여 스타일을 변경
1) 코드 뷰
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 작성법</title>
<style>
*{ font-size: 20px; }
h1{ color: red; }
p{ color: green; }
li{ color: blue; }
</style>
</head>
<body>
<h1>제목태그</h1>
<p>문단태그</p>
<ul>
<li>리스트태그</li>
<li>리스트태그</li>
</ul>
<ol>
<li>리스트태그</li>
<li>리스트태그</li>
</ol>
</body>
</html>
2) 코드 완성뷰
4. 아이디선택자(#)
- 태그에 속성으로 id를 작성하여 태그를 분리해서 CSS를 적용
- 한 HTML에는 id의 값은 한번만 작성해야 한다.(유일한 식별자)
1) 코드 뷰
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 작성법</title>
<style>
#header{ color: red; }
</style>
</head>
<body>
<h1 id="header">제목태그</h1>
<h1>제목태그</h1>
<p>문단태그</p>
<ul>
<li>리스트태그</li>
<li>리스트태그</li>
</ul>
<ol>
<li>리스트태그</li>
<li>리스트태그</li>
</ol>
</body>
</html>
2) 코드 완성뷰
5. 클래스선택자(.)
- 태그에 CSS를 따로 처리하기 위해 class속성을 작성
- 여러 태그에 중복해도 문제가 없다.
1) 코드뷰
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 작성법</title>
<style>
.first{ color: red; }
.second{ color: blue; }
</style>
</head>
<body>
<h1>제목태그</h1>
<p>문단태그</p>
<ul>
<li class="first">리스트태그</li>
<li class="second">리스트태그</li>
</ul>
<ol>
<li class="first">리스트태그</li>
<li class="second">리스트태그</li>
</ol>
</body>
</html>
2) 코드 완성뷰
6. 한 태그에 여러 클래스를 중복해서 적용
- html의 class속성에 값들을 띄어쓰기 해서 작성
1) 코드 뷰
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 작성법</title>
<style>
.color{ color: red; }
.line{ text-decoration: underline; }
.bold{ font-weight: bold; }
</style>
</head>
<body>
<h1>제목태그</h1>
<p class="color line bold">문단태그</p>
<ul>
<li>리스트태그</li>
<li>리스트태그</li>
</ul>
<ol>
<li>리스트태그</li>
<li>리스트태그</li>
</ol>
</body>
</html>
2) 코드 완성뷰
'웹언어 > CSS3' 카테고리의 다른 글
| [CSS3강좌] 6강 리스트(ol, ul)관련 속성 (0) | 2020.04.25 |
|---|---|
| [CSS3강좌] 5강 FONT(글자관련속성) (0) | 2020.04.25 |
| [CSS3강좌] 4강 TEXT(글자관련속성) (0) | 2020.04.25 |
| [CSS3강좌] 3강 CSS색상넣기(컬러값처리) (0) | 2020.04.25 |
| [CSS3강좌] 1강 CSS문법과 스타일시트 (0) | 2020.04.23 |
