🍁선택자
1. 전체 선택자: * {}
2. 태그 선택자: tag {}
3. ID 선택자: #id {}
4. class 선택자: .class {}
5. 그룹 선택자: sel1, sel2, sel3 {}
6. 자식 선택자: parent > child {}
7. 자손 선택자: parent child {}
8. 인접 형제 선택자: sel1 + sel2 {}
9. 형제 선택자: sel1 ~ sel2 {}
[CSS] CSS Seletor (CSS 선택자) 1
🍁CSS 문법 선택자 { 속성명: 값; } 선택자 { 속성명: 값; 속성명: 값; 속성명: 값;} 선택자 { 속성명: 값; } 선택자 { 속성명: 값; 속성명: 값; 속성명: 값; } CSS 문법으로 위의 틀을 사용한다. 선택자와
isaac-christian.tistory.com
이전 CSS Selector (CSS 선택자) 1 글과 이어진다.
🍁CSS Selector (CSS 선택자)
자식 선택자 (Child Selector)
부모 선택자 > 자식 선택자 {
구현부;
}ul이 할아버지, li가 부모, span이 자식일 때, 위와 같이 작성하여 span의 서식을 변경할 수 있다.
자식 선택자는 친부모와 친자식을 조건으로 하기 때문에 정밀도가 높고, 범위가 좁다.
자손 선택자 (Desendant Selector)
부모선택자 자식선택자 {
구현부;
}이때 할아버지와 자식인 ul과 span만을 작성하고, 부모는 작성하지 않아도 결과는 똑같다.
자손 선택자는 정밀도는 자식 선택자보다 낮지만, 범위가 넓다.
자손 선택자는 경우의 수가 많기 때문에 잘 고려해서 작성해야 한다.
자식 선택자와 자손 선택자의 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 자식 선택자 */
li > span {
color: blue;
}
/* 자손 선택자 */
ul > span {
color: blue;
}
</style>
</head>
<body>
<h1>커리큘럼</h1>
<ol>
<li>Java <span>OOP</span></li>
<li>Oracle Database</li>
<li>Client(<b>HTML</b>)</li>
<li>Client(<b>CSS</b>)</li>
<li>Client(<b>JavaScript</b>)</li>
</ol>
<h2>공지 사항</h2>
<ul>
<li>구글 드라이브에 오후까지 <span>과제를 <b>제출</b>하세요.</span></li>
<li>주말에 <span>복습</span>하세요.</li>
<li>다음 주 <b>추석 연휴</b>입니다.</li>
</ul>
<hr>
<b>볼드체</b>
<hr>
<span>span 영역입니다.</span>
</body>
</html>
<tr>의 출생의 비밀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table > tr > td {
color: blue;
}
</style>
</head>
<body>
<h1>테이블</h1>
<table border="1" width="500">
<tr>
<td>데이터</td>
<td>데이터</td>
<td>데이터</td>
<td>데이터</td>
<td>데이터</td>
</tr>
<tr>
<td>데이터</td>
<td>데이터</td>
<td>데이터</td>
<td>데이터</td>
<td>데이터</td>
</tr>
<tr>
<td>데이터</td>
<td>데이터</td>
<td>데이터</td>
<td>데이터</td>
<td>데이터</td>
</tr>
<tr>
<td>데이터</td>
<td>데이터</td>
<td>데이터</td>
<td>데이터</td>
<td>데이터</td>
</tr>
<tr>
<td>데이터</td>
<td>데이터</td>
<td>데이터</td>
<td>데이터</td>
<td>데이터</td>
</tr>
</table>
</body>
</html>
table > tr > td 자식 선택자로 서식을 설정하면 변경될 거 같지만, 변경되지 않았다.
사실 <tr>은 <table>의 자식이 아니기 때문이다.
<table border="1">
<thead>
<tr>
<td>컬럼명</td>
</tr>
</thead>
<tbody>
<tr>
<td>데이터</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>바닥글</td>
</tr>
</tfoot>
</table>
테이블 원형을 살펴보면 <tr>의 부모는 <thead>이고, <table>은 할아버지였다.
<thead>는 생략할 수 있기 때문에 작성하지 않았던 것이다.
<style>
/* 정석적인 방법 */
/* table > tbody > tr > td {color: blue; } */
table td {
color: blue;
}
</style>
그래서 정석적인 방법으로 자식 선택자를 작성하려면 위와 같이 작성하며, 자손 선택자를 사용하는 방법을 사용해도 된다.
가장 경제적인 방법⭐
<style>
#tbl1 td { color: blue; }
</style>테이블에 서식을 적용하는 가장 경제적인 방법은 테이블에 id를 부여하는 것이다.
인접 형제 선택자 (Adjacent Sibling Selector)
선택자 + 선택자 {
구현부;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
hr + p {
color: blue;
}
</style>
</head>
<body>
<p>p 태그</p>
<p>p 태그</p>
<p>p 태그</p>
<span>span 태그</span>
<hr>
<p>p 태그</p>
<span>span 태그</span>
<p>p 태그</p>
<div>div 태그</div>
<span>span 태그</span>
</body>
</html>
<hr>과 <p>가 서로 붙어 있는 것만 찾으라는 의미이다.
<style>
p + p {
color: blue;
}
</style>
그렇다면 형을 <p> 태그로 하면 어떨까? 앞에 <p> 태그를 사용한 <p> 태그만 서식을 적용한다.
인접 형제 선택자는 이와 같이 바로 앞에 인접한 형제를 조건으로 찾는다.
형제 선택자 (Sibling Selector)
선택자 ~ 선택자 {
구현부;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
hr ~ p {
color: blue;
}
</style>
</head>
<body>
<p>p 태그</p>
<p>p 태그</p>
<p>p 태그</p>
<span>span 태그</span>
<hr>
<p>p 태그</p>
<span>span 태그</span>
<p>p 태그</p>
<div>div 태그</div>
<span>span 태그</span>
</body>
</html>
형제 선택자는 붙어있지 않더라도 형제라면 모두 서식을 적용한다.
위 코드는 <hr> 동생 중에 <p> 태그를 모두 찾는다.
인접 형제 선택자는 정밀도가 높고 범위가 좁다. 반면에 형제 선택자는 정밀도는 낮지만 범위가 넓다.
인접 형제 선택자는 자식 선택자와, 형제 선택자는 자손 선택자와 비슷하다.
의사 클래스 (Pseudo Class)
의사 클래스는 가상 클래스라고도 부른다.
실제 태그에 class 속성이 없는데, CSS에서는 존재하는 클래스처럼 사용되는 클래스이다.
과거에는 <a>태그에만 지원했었지만, 현재는 모든 태그에 지원한다.
가상 클래스의 특징
일반 클래스와 의사 클래스를 구분하기 위해 의사 클래스는 ':'를 사용한다.
의사 클래스에는 link, visited, active, hover가 있다.
<a> 태그의 상태에 따라 각각 적용되는 기능성 클래스이다. 의사 클래스는 단지 태그를 찾는 게 끝이 아니라 태그가 어떤 상태냐에 따라서 찾을 수 있다.
가상 클래스의 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* <a> 태그의 상태에 따라 각각 적용되는 클래스 */
/* 브라우저가 방문한 이력이 없는 링크 */
a:link { color: red; }
/* 브라우저가 방문한 이력이 있는 링크 */
a:visited { color: orange; }
/* 활성화 상태 */
a:active { color: yellowgreen; }
/* 마우스 커서를 링크 위에 올린 상태 */
a:hover { color: aqua; }
</style>
</head>
<body>
<h1>링크</h1>
<a href="https://isaac-christian.tistory.com/">아이작의 블로그로 이동합니다.</a>
<br>
<a href="https://naver.com">네이버로 이동합니다.</a>
<br>
<a href="https://naver.com">마우스 커서를 올린 링크</a>
</body>
</html>
링크의 일반적인 서식
/* 링크의 일반적인 서식 */
a {
color: black;
text-decoration: none;
}
a:hover {
color: red;
}
보편적으로 링크는 평소에는 일반적으로 보이게 하다가 마우스를 올려두었을 때 색을 바꾸게 하는 편이다.
가상 클래스 중에서는 hover 말고는 잘 사용하지 않는다.
