1. 가상 클래스 선택자
2. 속성 선택자
3. 전후 선택자
4. shadow
1. 가상 클래스 선택자
[ 정의 ]
- 태그에 실제 클래스가 존재하지 않는다.
- 태그에 불필요한 클래스를 추가할 필요가 없다. ( 언제든지 사용이 용이하다. )
[ 속성 ]
1) first-child : 자신이 첫째인 요소
2) last-child : 자신이 막내인 요소
3) nth-child(n) : 자신이 n번째인 요소(one-based index)
4) nth-last-child(n) : 자신이 거꾸로 n번째인 요소
- n: index + 수열 역할
- 2n: 0, 2, 4 ...
- 2n+1: 1, 3, 5 ...
- 키워드: even(짝수), odd(홀수)
<style>
#list > li:first-child { color: blue; }
#list > li:last-child { color: red; }
#list > li:nth-child(5) { color: orange; }
#list > li:nth-last-child(4) { color: cornflowerblue; }
#list > li:nth-child(even) {
width: 200px;
background-color: hotpink;
}
</style>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Java</li>
<li>Oralce</li>
<li>C#</li>
<li>C++</li>
<li>Spring</li>
<li>PHP</li>
<li>ASP.NET</li>
<li>Python</li>
<li>Scalar</li>
</ul>
</body>
2. 속성 선택자
[ 정의 ]
- 태그의 속성이나 속성의 값을 조건으로 요소를 검색한다.
[ 문법 ]
| 작성법 | 설명 |
| 선택자[속성명] | 해당 속성을 명시한 태그 검색 |
| 선택자[속성명=값] | 해당 속성을 명시하고 특정 값을 가진 태그 검색 |
| 선택자[속성명^=값] | 해당 속성을 명시하고 특정 값으로 시작하는 태그 검색 |
| 선택자[속성명$=값] | 해당 속성을 명시하고 특정 값으로 끝나는 태그 검색 |
| 선택자[속성명*=값] | 해당 속성을 명시하고 특정 값이 포함된 태그 검색 |
[ 예제 ]
<style>
a {
text-decoration: none;
color: #555;
display: block;
margin-bottom: 5px;
}
a[title] { color: red; }
a[target='_blank'] { color: blue; }
a[href^='https://'] { color: orange; }
a[href$='.kr'] { color: lightseagreen; }
a[href*='naver'] { color: darkviolet; }
</style>
<body>
<h1>속성 선택자</h1>
<a href="http://naver.com" target="_blank">네이버</a>
<a href="http://yes24.com" target="_self" title="서점으로 이동합니다.">YES24</a>
<a href="https://daum.net">다음</a>
<a href="http://11st.co.kr"">11번가</a>
<a href="https://coupang.com" target="_blank">쿠팡</a>
</body>
3. 전후 선택자
1) ::before : 선택자의 앞부분에 컨텐츠를 삽입 한다. (content 속성 사용)
2) ::after : 선택자의 뒷부분에 컨텐츠를 삽입 한다. (content 속성 사용)
--> ':' 콜론은 하나만 써도 되고 '::' 두번 써도 된다.
[ content 속성 값 종류 ]
- none
- 문자열
- open-quote
- close-quote
<style>
#test1::before { content: '['; }
#test1::after { content: ']'; }
#test2::before { content: open-quote; }
#test2::after { content: close-quote; }
</style>
<body>
<div id="test1">테스트입니다.</div>
<div id="test2">테스트입니다.</div>
</body>
4. shadow
- 그림자 효과를 지정할 수 있다.
[ 속성 ]
1) text-shadow: 텍스트 글씨에 그림자 효과를 지정할 수 있다.
2) box-shadow: 박스에 그림자 효과를 지정할 수 있다.
<style>
.box {
width: 200px;
height: 200px;
font-size: 3em;
border: 1px solid black;
background-color: cornflowerblue;
}
.box:hover {
text-shadow: 5px 5px 5px #555;
box-shadow: 15px 15px 5px #777;
}
</style>
<body>
<div class="box">상자</div>
</body>
MEMO>
# 여러가지 속성이 있다고 다 외우려 하지말고 자주 쓰는것만 우선적으로 기억해둬서 헷갈리지말자.
# 개발자의 향상성을 위한 emmet을 조금씩 익히자.
# 주말 공부.....
'교육 > CSS' 카테고리의 다른 글
| CSS 개발자 수업 59일차 - animation, flex (0) | 2021.06.21 |
|---|---|
| CSS 개발자 수업 58일차 - transform, transition (0) | 2021.06.20 |
| CSS 개발자 수업 56일차 (0) | 2021.06.17 |
| CSS 개발자 수업 55일차 - float, position, z-index (0) | 2021.06.17 |
| CSS 개발자 수업 54일차 - text, box, align, overflow, visibility, display, opacity (0) | 2021.06.15 |
댓글