기본 선택자
- class 속성
- 목적 : 동일한 스타일이나 동작을 여러 요소에 적용하기 위해 사용
- 중복 가능 : 여러 요소가 같은 class 값을 가질 수 있음
=> 여러 요소를 그룹화 시킬수 있음 - 스타일 정의 : CSS에서 점(.)으로 시작하는 선택자를 사용하여 스타일 정의
- 한 요소에 여러 클래스 사용 가능
<p class="hello hi nihao">안녕하세요</p>
<button class="btn">Save</button>
<button class="btn">Cancel</button>
- id 속성
- 목적: 특정 요소를 고유하게 식별하기 위해 사용
- 중복 불가: 하나의 문서 내에서 각 요소는 고유한 id 값을 가져야 함
- 스타일 정의: CSS에서 샵(#)으로 시작하는 선택자를 사용하여 스타일 정의
<p id="my-hello">안녕하세요</p>
<p class="hello hi nihao" id="my-hello">안녕하세요</p>- * 속성
: 전체 선택자
-모든 태그의 스타일 변경 가능
css
*{
color : red;
}
다중 선택자
다중 선택자를 조합하면 효율적으로 요소를 타겟팅하고 코드 재사용성을 높일 수 있음
- 하위(후손) 선택자
: 특정 부모 요소의 자식 또는 하위 요소를 선택합니다.
-css 작성시 공백(띄어쓰기) 사용
html
<div class="container">
<p>This is inside a container.</p>
</div>
<p>This is outside a container.</p>
css
.container p {
color: red;
}- 자식 선택자 (>)
: 직계 자식 요소만 선택
-css 작성시 > 사용, < 사용 불가능 !
html
<div class="container">
<p>Direct child</p>
<div>
<p>Nested child</p>
</div>
</div>
css
.container > p {
color: green;
}
- 형제 선택자
- 인접 형제 (+) : 특정 요소 바로 다음 형제를 선택
- 일반 형제 (~) : 특정 요소 이후의 모든 형제를 선택
html
<h1>Heading</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
css
h1 + p {
color: purple;
}
h1 ~ p {
font-style: italic;
}
- 상태 선택자
: 특정 상태의 요소를 선택
- 호버 상태 (:hover)
요소에 마우스를 올렸을 때 스타일 적용 - 활성 상태 (:active)
요소를 클릭 중일 때 스타일 적용 - 포커스 상태 (:focus)
요소가 포커스를 받을 때 스타일 적용
css
button:hover {
background-color: yellow;
}
button:active {
transform: scale(0.95);
}
input:focus {
border: 2px solid blue;
}
/* 복합선택자 혼합해서 사용가능 */
.links > a:hover{
background-color: coral;
}
/* 방문을 한 사이트 색상 변경 */
.links > a:visited{
color: red;
}
- 의사 클래스와 의사 요소
- 의사 클래스
특정 상태나 조건을 타겟팅 (:first-child, :nth-child, :hover 등). - 의사 요소
요소의 특정 부분만 스타일 지정 (::before, ::after).
html
<div class="box">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
<ul class="zoo">
<h1>동물원 입니다.</h1>
<div>푸바오</div>
<li>사자</li>
<li>토끼</li>
<li>거북이</li>
<div>캥거루</div>
<li>코끼리</li>
<li>원숭이</li>
</ul>
<button>Click Me</button>
css
/* 여러 요소를 그룹화 */
p, button {
font-family: Arial, sans-serif;
}
/* 특정 부모의 자식만 타겟 */
.box p {
color: blue;
}
/* 첫 번째 문단에만 스타일 */
p:first-child {
font-weight: bold;
}
.zoo > * {
background-color: green;
color: white;
}
/*
#1. E(요소): first-child
=> E(요소)가 첫번재 요소라면
*/
.zoo > *:first-child{
background-color: red;
}
/*
#2. E:last-child
=> E가 마지막 요소라면
*/
.zoo > *:last-child{
background-color: black;
}
/*
#3. E:nth-child(n)
=> E가 n번째 요소라면
n:수식도 가능하다 ex)2n + 1
*/
.zoo *:nth-child(2){
background-color: aqua;
}
/*
#4. E: not(XYZ)
=> XYZ가 아닌 요소 선택
last 하고 first에서 지정한게 더 쎔 (스타일 적용 X)
*/
.zoo *:not(div){
background-color: pink;
}
- 속성 선택자
: 요소의 특정 속성을 기준으로 선택합니다.
css
[disabled]{
color: red;
background-color: aquamarine;
}
[type="password"]{
color: blue;
background-color: blueviolet;
}
input[type="text"] {
background-color: lightgrey;
}
[placeholder]{
background-color: black;
}