※ CSS 선택자
1. 전체 선택자
- 스타일을 모든 요소에 적용한다. 디테일한 선택자로 적용한 스타일은 전체 선택자나 body에 적용한 스타일보다 더 우선시된다.
* {
css 문법
}
<head>
<title>전체 선택자</title>
<style>
* { color: green; }
h2 { color: red; }
* { color: blue; }
</style>
</head>
<body>
<h2>전체 선택자</h2>
<p>전체 선택자는 * 기호를 사용</p>
<ol>
<li>전체 선택자는 한번에 많은 요소를 선택</li>
<li>너무 많은 요소가 있는 html 문서에서 사용할 경우 부하를 줄 수 있다.</li>
</ol>
</body>
2. 태그 선택자
- 특정 태그가 쓰인 모든 요소에 스타일을 적용한다.
태그이름 {
css 문법
}
<head>
<title>태그(요소) 선택자</title>
<style>
p { color: blueviolet; }
</style>
</head>
<body>
<h2>태그(요소) 선택자</h2>
<p>특정 태그가 쓰인 모든 요소에 스타일을 적용한다.</p>
<p>상속하는 <span>속성</span>이다.</p>
<p>상속하는 <em>속성</em>이다.</p>
<p>상속하는 <strong>속성</strong>이다.</p>
</body>
3. id 선택자
- 웹 문서 안의 특정한 요소, 부분에 스타일을 적용한다. html 요소의 id 속성값을 이용한다.
# 기호를 이용한다.
#아이디명 {
css문법
}
<head>
<title>아이디 선택자</title>
<style>
#header {
background-color: deepskyblue;
width: 200px;
height: 200px;
/* 상하 외부 여백은 50px, 좌우 외부 여백은 자동(가운데 정렬) */
margin: 50px auto;
}
#container {
background-color: gold;
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<h2>아이디 선택자</h2>
<div id="header">div 첫 번째 영역</div>
<div id="container">div 두 번째 영역</div>
</body>
4. class 선택자
- 특정 집단의 요소에 한번에 스타일을 적용할 때 사용한다. html 요소의 클래스 속성값을 이용한다.
. 기호를 이용한다.
.클래스명 {
css 문법
}
<head>
<title>클래스 선택자</title>
<style>
.redText { color: red; }
.blueText { color: blue; }
/* 선택자1선택자2: 선택자1과 선택자2를 둘 다 만족하는 요소를 선택한다. */
/* span 태그이면서 bigText라는 class를 가진 요소를 선택한다. */
span.bigText { font-size: 20px; }
</style>
</head>
<body>
<h2>클래스 선택자</h2>
<p>
<span class="redText bigText">클래스 선택자</span>는
<span class="blueText">특정 집단의 여러 요소를 한번에 선택</span>할 때 사용합니다.
</p>
<p class="bigText">
<span class="redText">특정 집단을 클래스(class)</span>라고 하며,
<span class="blueText">. 기호를 사용</span>하여 같은 클래스 이름을 가지는 요소들을
모두 선택합니다.
</p>
</body>
5. 그룹 선택자
- 여러 개의 선택자를 나열하고 ,로 구분해 스타일을 적용한다.
선택자1, 선택자2 {
css 문법
}
<head>
<title>그룹 선택자</title>
<style>
h2, p {
text-align: center;
color: blue;
}
h2 { color: red; }
h2, p#bigTest { font-size: 40px; }
</style>
</head>
<body>
<h2>그룹 선택자</h2>
<p>여러 개의 선택자를 나열하고 ,로 구분해 스타일을 적용한다.</p>
<p id="bigText">선택자를 다양하게 사용 가능하다.</p>
</body>
6. 자손 선택자
- 조상요소 하위에 있는 자손을 선택해 스타일을 적용한다. 자손은 자식을 포함한다.
조상요소선택자 자손요소선택자 {
css 문법
}
ex)
1) p.txt : p태그들 중에 txt 클래스를 가진 요소를 선택한다.
2) p .txt : p 태그들 안에 있는 txt 클래스를 가진 요소를 선택한다.
<head>
<title>자손 선택자</title>
<style>
ul a{
color: deeppink;
text-decoration: none;
}
.second a { background-color: deepskyblue; }
</style>
</head>
<body>
<h2>자손 선택자</h2>
<ul>
<a href="https://www.naver.com">네이버</a>
<li>
<a href="https://www.google.com">구글</a>
</li>
<li>
<a href="https://www.daum.net">다음</a>
</li>
</ul>
<ul class="second">
<li>
<a href="https://www.nate.com">네이트</a>
</li>
</ul>
</body>
7. 자식 선택자
- 부모 요소 하위에 있는 자식을 선택해 스타일을 적용한다.
부모선택자 > 자식선택자 {
css 문법
}
<head>
<title>자식 선택자</title>
<style>
ul > a {
color: deeppink;
text-decoration: none;
}
ul > li > a {
color: deepskyblue;
text-decoration: none;
}
ul > li > p > a {
color: gold;
text-decoration: none;
}
</style>
</head>
<body>
<h2>자식 선택자</h2>
<ul>
<a href="https://www.naver.com">네이버</a>
<li><a href="https://www.google.com">구글</a></li>
<li><p><a href="https://www.daum.net">다음</a></p></li>
</ul>
<ul class="second">
<li><a href="https://www.nate.com">네이트</a></li>
</ul>
</body>
8. 인접 형제 선택자
- 형제 관계에서 연속적으로 존재하는 요소를 선택할 때 사용한다.
형선택자 + 동생선택자 {
css 문법
}
ex)
a + li : a 태그를 바로 위의 형으로 가지고 있는 li 태그를 선택한다.
<head>
<title>인접 형제 선택자</title>
<style>
/* h3 바로 다음에 오는 p */
h3 + p {
color: white;
background-color: deeppink;
font-size: 50px;
}
/* h3 다음에 오는 p, 그리고 그 다음에 있는 p (h3 다음 다음 p 아님) */
h3 + p + p {
font-weight: bold;
font-size: 30px;
}
</style>
</head>
<body>
<h2>인접 형제 선택자</h2>
<div>
<h3>첫째</h3>
<p>둘째</p>
<p>셋째</p>
<p>넷째</p>
<h4>다섯째</h4>
</div>
</body>
9. 일반 형제 선택자
- 형제 관계로 있는 요소들을 선택할 때 사용한다. 형 요소 다음에 오는 모든 동생 요소를 선택한다.
형선택자 ~ 동생선택자 {
css 문법
}
ex)
a ~ li : a 태그를 형으로 가지고 있는 모든 li 태그 선택
<head>
<title>일반 형제 선택자</title>
<style>
h3 ~ p {
color: white;
background-color: deeppink;
font-size: 30px;
}
</style>
</head>
<body>
<h2>일반 형제 선택자</h2>
<div>
<p>첫째</p>
<h3>둘째</h3>
<p>셋째</p>
<h4>넷째</h4>
<a href="#">다섯째</a>
<p>여섯째</p>
</div>
</body>
10. 속성 선택자
- HTML 요소 중 src, href, style, type 등과 같은 속성을 선택자로 지정해서 스타일을 적용한다.
[속성명] {
css 문법
}
<head>
<title>속성 선택자 - 1</title>
<style>
[href] {
text-decoration: none;
color: green;
}
h2[title] { color: blue; }
[type = "button"] { font-size: 30px; }
</style>
</head>
<body>
<h2>속성 선택자 - 1</h2>
<p><a href="https://www.naver.com">네이버</a></p>
<h2 title="h2 요소의 title 속성">title 속성을 가지고 있는 h2</h2>
<p title="p 요소의 title 속성">속성명과 속성값이 모두 일치하는 요소를 선택지로 지정</p>
<input type="text">
<input type="button" value="버튼">
</body>
| [속성명] | 해당 속성을 가진 모든 요소들을 선택한다. |
| [속성명 = 값] | 해당 속성의 값으로 완벽히 일치하는 값을 가진 요소들을 선택한다. |
| [속성명 ~= "속성값"] | 속성값이 완벽히 일치하는 문자를 가지고 있는 요소를 선택한다. ex) = "apple" → 값이 "apple"인 것 ~= "apple" → 값에 "apple"이라는 분리된 문자열이 있는 것 |
| [속성명 *= "속성값"] | 속성값이 포함된 문자를 가지고 있는 요소를 선택한다. |
| [속성명 $= "속성값"] | 속성값이 접미사로 끝나는 문자를 가지고 있는 요소를 선택한다. |
| [속성명 ^= "속성값"] | 속성값이 접두사로 시작하는 문자를 가지고 있는 요소를 선택한다. |
| [속성명 |= "속성값"] | 속성값이 접두사로 시작하는 문자를 가지고 있는 요소를 선택한다. 그중 하이픈(-)으로 연결된 것만 선택한다. |
<title>속성 선택자 - 2</title>
<style>
/* 1, 4, 8 */
[title ~= "css"] { color: red; }
/* 전부 다 */
[title *= "css"] { font-size: 20px; }
/* 1, 2, 3, 4, 5 */
[title $= "css"] { background-color: skyblue; }
/* 1, 6 */
[title |= "css"] { font-weight: bold; }
/* 1, 6, 7, 8, 9 */
[title ^= "css"] { text-align: center; }
/* img 태그 중 .jpg 파일을 띄워주고 있는 태그들만 선택 */
img[src $= ".jpg"] {}
</style>
</head>
<body>
<h2>속성 선택자 - 2</h2>
<p title="css">1 - 독립적인 단어</p>
<p title="funny-css">2 - 하이픈이 들어간 파생어(접미사)</p>
<p title="funny_css">3 - 언더바가 들어간 파생어(접미사)</p>
<p title="funny css">4 - 공백으로 연결된 파생어(접미사)</p>
<p title="funnycss">5 - 공백이 없는 파생어(접미사)</p>
<p title="css-funny">6 - 하이픈이 들어간 파생어(접두사)</p>
<p title="css_funny">7 - 언더바가 들어간 파생어(접두사)</p>
<p title="css funny">8 - 공백으로 연결된 파생어(접두사)</p>
<p title="cssfunny">9 - 공백이 없는 파생어(접두사)</p>
</body>
11. 순서에 따른 가상 클래스 선택자
- 클래스를 추가할 필요없이 요소 중에서 순서에 따라 원하는 특정 요소를 선택하여 스타일을 지정한다.
<head>
<title>가상클래스 선택자</title>
<style>
/* 첫 번째 자식만 */
.list > li:first-child { color: red; }
/* 마지막 자식만 */
.list > li:last-child { color: purple; }
/* 4번째 자식만 */
.list > li:nth-child(4) { color: forestgreen; }
/* 홀수번째 자식만 */
.list > li:nth-child(odd) { color: gold; }
/* 짝수번째 자식만 */
.list > li:nth-child(even) { font-size: 20px; }
/* 2, 5, 8, ... 번째 자식만 */
.list > li:nth-child(3n+2) { background-color: deepskyblue; }
</style>
</head>
<body>
<h2>가상클래스 선택자</h2>
<ul class="list">
<li>김사과</li>
<li>반하나</li>
<li>이체리</li>
<li>차두리</li>
<li>유자석</li>
<li>피조아</li>
<li>최포도</li>
</ul>
</body>
12. 가상 요소 선택자
- 선택자::before
→ 선택자 이전에 가상의 요소가 있다고 가정한 후 스타일을 지정한다.
글, 이미지, 그라데이션 등을 선택자 요소 앞에 삽입한다.
- 선택자::after
→ 선택자 다음에 가상의 요소가 있다고 가정한 후 스타일을 지정한다.
글, 이미지, 그라데이션 등을 선택자 요소 뒤에 삽입한다.
| :link | 하이퍼링크가 연결되었을 때(기본 상태) |
| :visited | 특정 하이퍼링크를 방문한 적이 있을 때 |
| :active | 요소를 마우스로 클릭하고 있을 때 |
| :hover | 요소에 마우스 커서를 올리고 있을 때 |
| :checked | 체크박스, 라디오버튼을 클릭해서 체크해 놓은 상태일 때 |
<head>
<title>가상 요소 선택자</title>
<style>
.tx1::before {
content: '☆';
color: rebeccapurple;
}
.tx2::after {
content: '★';
color: blue;
}
a:link { color: deeppink; }
a:visited { color: green; }
a:hover { color: chocolate; }
a:active { color: mediumblue }
input[type = 'checkbox']:checked { margin-left: 300px; }
</style>
</head>
<body>
<h2>가상 요소 선택자</h2>
<p class="tx1">before</p>
<p class="tx2">after</p>
<a href="https://www.naver.com">네이버</a>
<a href="https://www.alsooupsum.com">알 수 없음</a>
<hr>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
</body>728x90
'CSS' 카테고리의 다른 글
| 국비 수업 28일 차(22.11.10.) - CSS position (0) | 2022.11.11 |
|---|---|
| 국비 수업 27일 차(22.11.09.) - 박스 모델 (0) | 2022.11.11 |
| 국비 수업 26일 차(22.11.08.) - CSS 텍스트 (0) | 2022.11.10 |
| 국비 수업 26일 차(22.11.08.) - CSS 컬러 (0) | 2022.11.09 |
| 국비 수업 25일 차(22.11.07.) - CSS, 문법 (0) | 2022.11.08 |
