기본형
예시
후손선택자
: 공백으로 구분하며 어떤 부모태그 안에 해당 자식태그가 들어있으면 몇 개층 아래에 있던지 상관없이 모두 선택한다.
부모태그 자식태그 {속성: 값;}
div h2{}
자손 선택자
: 부모 태그 안에 있는 자식 요소를 선택할 때 사용한다.
후손 선택자는 공백으로 구분하며 어떤 부모태그 안에 해당 자식태그가 들어있으면 몇 개층 아래에 있던지 상관없이 모두 선택한다.
하지만 자손 선택자는 바로 아래계층 안에 있는 자식태그만 선택한다.
부모선택자 > 자식선택자 { 속성: 값; }
div > h2{}
동위선택자
: 동위선택자(=형제선택자)는 동위관계에서 바로 아래줄에(뒤에) 있는 형제 태그를 선택하거나 뒤에 있는 모든 형제태그를 선택할 때 사용한다.
+선택자는 바로 뒤에 있는 형제 태그 1개를 선택할 때 사용하고 바로 뒤에 해당 동생태그가 없으면 선택되지 않는다.
~선택자는 위치와 관계 없이 기준 태그(형) 뒤에 해당 동생 태그가 있으면 모두 선택한다.
1. 선택자A + 선택자B { 속성: 값;} -바로 뒤에 있는 하나의 형제만 선택
2. 선택자A ~ 선택자B { 속성: 값;} -뒤에 있는 형제들 모두 선택
h1 + h2{}
h1 ~ h2{}
속성선택자
: 태그에서 어떤 특정한 속성을 가지고 있는 태그만 선택하는 선택자.
선택자[속성=값]{ 속성: 값; }
: 태그에 해당하는 속성이 있는 태그만 선택한다.
선택자[속성="값"]{ 속성: 값; }
: 태그에 해당하는 속성과 값이 일치하는 태그만 선택한다.
a[href]{}
a[target="_blank"]{}
반응 선택자
: 반응 선택자는 사용자의 행위에 따라 반응하는 선택자를 말한다.
선택자:hover { 속성: 값; } ★
: 사용자가 해당 태그 위에 마우스를 올리면 반응(특정 동작을 수행)한다.
선택자:active { 속성: 값; }
: 사용자가 해당 태그를 클릭하면 반응(특정 동작을 수행)한다.
div{
width: 200px;
height: 200px;
background-color: darkolivegreen;
}
/* div에 마우스가 올라가면 해당 속성을 적용 */
div:hover{
background-color: chartreuse;
width: 300px;
height: 300px;
border-radius: 40px;
}
div:active{
background-color: brown;
width: 200px;
height: 200px;
}
/* h2태그에 마우스를 올렸을 때와 클릭했을 때 모양을 지정하기 */
h2:hover{
font-weight: 500;
color: crimson;
}
h2:active{
background-color: burlywood;
font-size: large;
}
/* a태그에 마우스를 올렸을 때 밑줄을 없애고 클릭했을 때 밑줄 나타내기 */
a:hover{
text-decoration: none;
color: aqua;
}
a:active{
text-decoration: underline;
background-color: blueviolet;
}
구조선택자★
: 부모태그 안에 동일한 태그의 자식들로 구성되어 있을 때 특정 자식요소를 선택하는 선택자.
선택자:first-child{ 속성: 값; }
: 부모태그 안에 자식들 중 첫번째 태그를 선택함.
선택자:last-child{ 속성: 값; }
: 부모태그 안에 자식들 중 마지막에 위치한 태그를 선택함.
선택자:nth-child(숫자 / 숫자n){ 속성: 값; }
: 부모태그 안에 자식들 중 해당 숫자 번째에 위치한 태그를 선택하거나
n은 수열을 뜻하며 2n번째 2의 배수 번째에 있는 태그를 선택할 수 있다.
선택자:nth-last-child(숫자 / 숫자n){ 속성: 값; }
: 부모태그 안에 자식들 중 뒤에서(=막내부터) 해당 숫자 번째에 위치한 태그를 선택하거나 뒤에서 수열번째에 있는 태그를 선택한다.
/* ul 안에 있는 li 중 첫째 선택하기 */
ul li:first-child{
background-color: aquamarine;
/* ul 안에 있는 li 중 막내 li 선택하기 */
}
ul li:last-child{
background-color: blanchedalmond;
}
/* ul 안에 있는 li 중 세번째 li 선택하기 */
ul li:nth-child(3){
background-color: #c5c5c5;
}
/* ul 안에 있는 li 중 짝수번째 li 선택하기 */
ul li:nth-child(2n){
color: blue;
font-weight: bold;
}
/* ul 안에 있는 li 중 홀수번째 li 선택하기 */
ul li:nth-child(2n+1){
color: rgb(128, 9, 68);
font-weight: bold;
}
형태구조선택자
: 부모박스 안에 자식(형제)태그들이 다르게 구성되어 있을 때 사용한다.
선택자: first-of-type
: 부모 박스 안에 형제관계 중 첫번째로 위치하는 태그를 선택한다.
선택자: last-of-type
: 부모 박스 안에 형제관계 중 마지막에 위치하는 태그를 선택한다.
선택자: nth-of-type(숫자/수열)
: 부모 박스 안에 형제관계 중 숫자 또는 수열 번째로 위치하는 태그를 선택한다.
선택자: nth-last-of-type(숫자/수열)
: 부모 박스 안에 형제관계 중 뒤에서 숫자 또는 수열 번째로 위치하는 태그를 선택한다.
h1:first-of-type{
color: blueviolet;
}
h2:last-of-type{
color: chartreuse;
}
h3:first-of-type{
color: coral;
}
p:nth-of-type(2){
color: aqua;
}
상태선택자 (인라인속성, 단독태그)
: 상태 선택자는 입력양식 태그의 상태를 지정할 때 사용하는 선택자.
선택자 : checked
: 체크박스에 체크가 된 상태의 input태그를 선택한다.(체크박스에만 사용한다)
선택자 : focus
: 초점이 맞춰진 input태그를 선택한다.
선택자 : enabled
: 입력 또는 사용이 가능한 상태의 input태그를 선택한다.
선택자 : disabled
: 입력 또는 사용이 불가능한 상태의 input태그를 선택한다.
<!-- css -->
<style>
/* 입력이 가능한 상태의 input태그 */
input:enabled {
background-color: rgb(255, 172, 237);
border: 1px solid rgb(143, 5, 136);
color: darkblue;
padding: 4px 10px;
/* 입력할 때의 창-포커스 상태를 없앨 때 */
outline: none;
}
/* 입력양식이 포커스 상태(입력하려고 활성화된 상태) */
input:focus{
background-color: chartreuse;
color: blue;
}
/* 입력이 불가능한 상태의 input태그 */
input:disabled{
border: 1px solid cadetblue;
background-color: chocolate;
}
input:checked{
width: 200px;
height: 200px;
background-color: aqua;
}
<body>
<!-- 입력 가능한 상태 -->
<h2>enabled</h2>
<P><input type="text" /></P>
<!-- 입력 불가능한 상태 -->
<h2>disabled</h2>
<P><input type="text" disabled/></P>
<!-- 체크박스 -->
<h2>disabled</h2>
<P><input type="checkbox" >체크</P>
</body>
시작 문자 선택자
: 시작 문자 선택자는 태그 내부의 첫 글자나 첫 줄을 선택할 때 사용하는 선택자.
선택자 ::first-letter
: 태그 내부의 첫 글자를 선택함.
/* p태그의 첫 번째 글자 선택 */
p::first-letter{}
선택자::first-line
: 태그 내부의 첫 줄을 선택함.
/* p태그의 첫 번째 줄 선택 */
p::first-line{}
가상 요소 선택자★x100
: 선택한 태그에 앞이나 뒤에 가상 요소를 만드는 선택자.
html코드에는 존재하지 않지만 html구조에 가상요소를 만들어서 스타일을 부여하는 역할.
마치 html코드가 있는 것처럼 스타일링할 때 사용한다.
가상 요소 선택자로 만들어진 요소는 기본적으로 inline속성을 가짐.
가상 요소를 만들 때 content속성을 이용한다.
선택자::before
: 특정 요소의 앞에 가상 요소를 만들고 내용은 content속성으로 넣는다.
선택자::after
: 특정 요소의 뒤에 가상 요소를 만들고 내용은 content속성으로 넣는다.
p::before{}
p::after{}
span::before{}
span::after{}
'Web > HTML & CSS' 카테고리의 다른 글
| list-style (0) | 2024.07.24 |
|---|---|
| overflow와 selection (0) | 2024.06.25 |
| align-content (0) | 2024.06.13 |
| align-itmes (1) | 2024.06.08 |
| display 속성 (1) | 2024.06.08 |
