가상 클래스 선택자
선택자에 의해 지정된 요소가 특정 상태일때, 스타일링 적용.
가상이라 함은 HTML 코드가 실제 존재하지 않는 상태에서 지정함을 의미한다.
:hover
지정된 요소에 마우스 포인터를 올리면 스타일링 적용.
h1:hover {
background-color: aqua;
}
form button:hover {
color: red;
}
form:hover label {
font-style: italic;
font-weight: bold;
}
:focus
링크 , 입력상자 , 버튼 등 마우스나 TAB 키로 포커스가 맺혔을 때 스타일링 적용.
손이나 팔이 불편한 사람들을 위해 TAB 키로 포커스를 맞출 수 있는 기능이 제공이 되는데 ,
이상태를 규정함으로 사용자들에게 편의를 제공하는 태그.
a:focus,
input:focus,
button:focus {
outline: none;
background-color: darkgrey;
}
:active
링크나 버튼 등을 눌렀을 때 스타일링 적용.
a:active {
background-color: orange;
}
:visited
이미 방문한 링크인 경우 스타일링 적용.
a:visited {
color: red;
}
:checked
redio 나 checkbox 버튼 등 체크 되었을 때 스타일링 적용.
버튼 모양은 직접적인 형태 변경이 불가하여 다른 형태로 구현하는 것이 일반적임.
input:checked+label {
background-color: bisque;
}
: target
target 페이지 내부 링크에 의해 지목된 id 를 가진 요소에 스타일링 적용.
#title:target {
text-decoration: underline;
}
: enabled
:disabled
enabled : 텍스트 입력상자나 버튼 등이 활성화 된 상태일 때 스타일링 적용.
disabled : 텍스트 입력상자나 버튼 등이 비활성화 된 상태일 때 스타일링 적용.
button:enabled {
font-weight: bold;
}
button:disabled {
font-size: 10px;
}
:not(태그[속성])
지정된 선택자가 아닌 요소에 스타일링 적용.
/* form 태그의 자손 요소중 button 태그가 아닌 태그에 스타일 적용. */
form :not(button) {
background-color: chartreuse;
}
/* ol 태그의 자손이 되는 li 태그 요소중 id 속성 값이 "kt"가 아닌 요소에 스타일 적용. */
ol li:not([id="kt"]) {
font-weight: bold;
font-size: 32px
}
선택자에서는 부모 요소나 이전 발생한 형제 요소를 지정하는 방법은 제공되지 않음.
따라서 아래의 코드는 input 전의 lable 에 대하여 적용 되지 않는다.
input:checked+label {
background-color: bisque;
} <div>
<label for="gender">남</label>
<input type="radio" name="gender" id="gender" value="man">
<label for="woman">여</label>
<input type="radio" name="gender" id="woman" value="woman">
</div>그러므로 lable 태그와 input 태그의 순서를 바꿈으로
input에 대한 lable 태그 스타일링을 적용 할 수 있다.
버튼의 순서는 바뀌나 , 차후에 버튼을 삭제하고 다른 형태로 구현하는 방법도 있다.
<div>
<input type="radio" name="housing-type" id="homeowner" value="homeowner">
<label for="homeowner">자가</label>
<input type="radio" name="housing-type" id="rental-house" value="rental-house">
<label for="rental-house">임대</label>
</div>
disabled 의 속성 : 텍스트 입력상자나 버튼등을 비활성화 하는 속성을 지님.
<button type="reset" disabled>초기화</button>
<button>전송</button>트리구조 가상 클래스 선택자
HTML 문서 내에 임의 부모요소를 기준으로 자식 관계가 성립되는 형제 요소에 대한 위치와 관련된 스타일링 적용.
태그 추가 또는 삭제가 있을 경우 전부 변경해야하기 때문에 유지보수면에 좋지 않지만,
태그 추가 또는 삭제가 없다는 가정하에 , class 를 대신 사용할 수 있다.
:first-child
:last-child
:nth-child()
부모 요소를 기준으로 서로 다른 형제 요소들을 포함한 순번에서
지정된 위치와 지정된 요소가 모두 일치 해야지만 스타일링 적용.
일치하지 않는다면 , 적용되지 않는다.
/* 첫 번째 자식 요소가 li 태그이면 스타일 적용. */
li:first-child {
background-color: antiquewhite;
}
/* 마지막 자식 요소가 li 태그이면 스타일 적용. */
li:last-child {
background-color: chocolate;
}
/* 첫 번째 자식 요소가 p 태그이면 스타일 적용. */
p:first-child {
color: red;
}
/* 3 번째 자식 요소가 li 태그이면 스타일 적용. */
li:nth-child(3) {
font-size: 20px;
}
/* 끝에서 3번째 자식 요소가 li 태그이면 스타일 적용. */
li:nth-last-child(3) {
font-size: 10px;
}
/* 마지막 자식 요소가 아닌 모든 li 태그의 자손 요소인 a 태그에 스타일 적용. */
li:not(:last-child) a {
color: red;
}
nth-child(An+B)
구분자 소괄호 내에서 산술 연산을 통한 자식 요소의 선택이 가능.
n을 0부터 카운팅.
*연산자는 생략해야하며 연산에 의해 결정된 자식요소는 1번째 부터 카운팅 되어 선택됨에 주의.
/* div 태그의 자식 요소중 2의 배수(짝수) 번째에 해당하는 요소가 p 태그이면 스타일 적용. */
div p:nth-child(2n) {
background-color: darkgrey;
}
/* div 태그의 자식 요소중 홀수 번째에 해당하는 요소가 p 태그이면 스타일 적용. */
div p:nth-child(2n+1) {
background-color: yellow;
}
짝수는 nth-child(even)
홀수는 nth-child(odd)
로 대체 표기가 가능하다.
- 는 역순표기,
:nth-child(n+B):nth-child(-n+C) B 이상 C 이하로 범위 선택도 가능하다.
:fist-of-type
:last-of-type
:nth-of-type()
child 는 부모 요소를 기준으로 모든 다른 형제 요소들을 포함한 순번에서
지정된 위치와 지정된 요소가 모두 일치해야지만 스타일이 적용되는 특성을 가진 반면,
type 은 지정된 동일 타입의 형제 요소들 중에서만 순번을 매칭하여 스타일을 적용한다.
/* 동일 계층의 다른 태그를 제외한 p 태그 중에서의 첫 번째 요소에 스타일 적용. */
p:first-of-type {
text-decoration: underline;
}
/* body 태그의 자식 요소 계층의 다른 태그를 제외한 p 태그 중에서의 마지막 요소에 스타일 적용. */
body>p:last-of-type {
background-color: green;
}가상 요소 선택자
선택한 요소의 특정 부분에 특정 스타일이나 내용을 지정.
가상 클래스 선택자와 구분하기 위해 구분자로 단일 콜론(:) 대신 이중 콜론 (::)을 사용함.
::before
첫 부분에서 사용하겠다.
::after
마지막 부분에서 사용하겠다.
많은 이미지들을 사용하면 , 용량이 부담스러울 수 있다.
이를 위해 텍스트 기반으로 한 아이콘도 존재한다.
이는 다음번에 자세히 소개하겠다.
li {
list-style: none;
}
li:first-child::before {
content: "\f072";
font: var(--fa-font-solid);
color: red;
}
li:nth-child(2)::after {
content: " ♡";
color: red;
}
li:last-child::before,
li:last-child::after {
content: " ★ ";
color: blue;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사용자 정의 속성(data-)과 attr 함수</title>
<style>
li {
list-style: none;
}
/*
< attr 함수 >
인수로 지정된 속성에 대한 value 를 문자열로 반환하되 속성이 존재하지 않으면 빈 문자열 반환.*/li:first-child:hover::before {
content: attr(data-before-heart);
color: red;}
li:nth-child(2):hover::after {
content: attr(data-after-heart);
color: red;
}
li:last-child:hover::before,
li:last-child:hover::after {
content: attr(data-beforeAfter-star);
color: blue;
}
</style>
</head>
<body>
<h1>사용자 정의 속성(data-)과 attr 함수</h1>
<hr>
<h2>커리큘럼</h2>
<!--
< 사용자 정의 속성 >
접두사 "data-" 뒤에 임의 사용자 정의 속성명을 정의하고 value 를 할당함으로써
사용자 정의 속성에 해당하는 특정 value 를 컨텐트로 활용 가능.
-->
<ul>
<li data-before-heart="♡ ">HTML</li>
<li data-after-heart=" ♡">CSS</li>
<li data-beforeAfter-star=" ★ ">JavaScript</li>
</ul>
</body>
</html>
'Developer > HTML_CSS' 카테고리의 다른 글
| CSS,속성 선택자를 알아보자. (0) | 2024.04.15 |
|---|---|
| 폰트 기반의 아이콘 사이트 , 폰트 어썸. (0) | 2024.04.15 |
| CSS, 결합자에 대해 알아보자. (0) | 2024.04.14 |
| CSS, 기초와 선택자를 알아보자 (0) | 2024.04.14 |
| HTML/CSS , 인라인 , 내부링크 , 외부링크 (0) | 2024.04.14 |