< CSS 선택자 >
- css를 적용할 때 사용하는 이름
- 태그(tag), 아이디(id), 클래스(class)
1. 아이디(id)
- 태그에 id를 붙여서 스타일을 적용하도록 하는것, 스타일에서 #을 붙여서 사용
- 아이디는 스타일 오버로딩과 상관없이 태그보다 우선적으로 적용
<html>
<head>
<meta charset="UTF-8">
<title>CSS 선택자 1</title>
<style>
h3 { background-color: skyblue;}
#s1 { background-color: pink;} /* s1앞에 #을써야 아이디. 안쓰면 태그임*/
li#s2 { background-color: aqua;} /* li중에서 아이디가 s2인것 */
li { background-color: orange;}
</style>
</head>
<body>
<h3>HTML5 프로그래밍</h3>
<ul>
<li>HTML5</li>
<li id="s1">CSS3</li>
<li>Javascript</li>
<li id="s2">jQuery</li>
</ul>
</body>
</html>
2. 클래스(class)
- 태그에 클래스를 지정하여 스타일을 적용하도록 하는 것, 사용할때는 .를 붙여서
3. 아이디와 클래스의 차이점
- 아이디: id의 이름은 유일하게 사용함. 같은 태그에서 여러 아이디 사용 불가
- 클래스: 여러 태그에서 사용 가능하고, 같은 태그에서 여러 클래스 사용 가능
4. 스타일 범위의 우선
인라인 > 내부, 외부
5. 선택자의 우선 순위
id > class > tag
<html>
<head>
<meta charset="UTF-8">
<title>CSS 선택자 2</title>
<style>
#s1 { background-color: pink;}
#s2 { color: green;}
.c1 { background-color: skyblue;}
.c2 { color: blue;}
.c3 { color: red;}
.c4 { background-color: gray;}
li { color: orange;}
</style>
</head>
<body>
<h3>HTML5 프로그래밍</h3>
<ol>
<li class="c1 c3">HTML5</li>
<ul>
<li class="c2">하이퍼링크</li>
<li class="c2">입력필드</li>
</ul>
<li>CSS3</li>
<ul>
<li class="c3">선택자</li>
<li class="c3">스타일 속성</li>
<li id="s1">레이아웃</li>
</ul>
<li class="c1 c2">Javascript</li>
<ul>
<li id="s1 s2">동적 내용</li>
<li id="s1" class="c4">프레임워크</li>
</ul>
</ol>
</body>
</html>
'Front-end > CSS' 카테고리의 다른 글
| 절대크기와 상대크기 (0) | 2022.08.30 |
|---|---|
| 속성 선택자 (0) | 2022.08.30 |
| 가상 클래스와 가상 요소 (0) | 2022.08.30 |
| [CSS] 스타일 오버로딩 (0) | 2022.08.30 |
| [css] 기본 (0) | 2022.08.30 |