[CSS] 스타일 기본 & 선택자

👩🏼‍💻 연결 방식부터 단위, 상속, 우선순위, 선택자, 가상 클래스/요소, 사용자 지정 속성, 카운터까지!

---

1️⃣ CSS 연결 방식

• <link> 태그: 외부 스타일시트 연결
• @import: 내부 스타일에서 다른 CSS 불러오기

<!-- link 방식 -->
<link rel="stylesheet" href="style.css">

<!-- import 방식 -->
<style>
  @import url("style.css");
</style>

---

2️⃣ 단위 (Units)

단위	의미	특징
px	고정 픽셀	디바이스 기준 고정
%	백분율	부모 기준
em	부모 글꼴 크기 기준 배율	중첩 영향 받음
rem	root(html) 기준	전역 스타일 관리 용이
vw	뷰포트 너비의 1%	반응형 디자인
vh	뷰포트 높이의 1%	풀스크린 등

---

3️⃣ 색상 표현 방식

• 키워드: red, blue
• Hex: #ff0000
• rgb(): rgb(255, 0, 0)
• rgba(): rgba(255, 0, 0, 0.5) (투명도 포함)

---

4️⃣ 상속 (Inheritance)

• 상속됨: color, font-family, line-height
• 상속 안됨: margin, padding, width, border
• inherit 키워드로 강제 상속 가능

div {
  color: inherit;
}

---

5️⃣ 우선순위 (Cascading)

우선순위	예시
!important	최상위
인라인 스타일	<div style="...">
ID 선택자	#box
클래스/속성/가상	.red, [type], :hover
태그 선택자	p, div
전체 선택자	*
상속	가장 낮음

---

6️⃣ 사용자 지정 속성 (CSS 변수)

:root {
  --main-color: tomato;
  --spacing: 10px;
}

.box {
  color: var(--main-color);
  margin: var(--spacing);
}

📌 calc() 함수와 함께 사용 시:

.box {
  --size: 50;
  width: calc(var(--size) * 1px);
}

---

7️⃣ 기본 선택자

선택자	설명
*	전체
div, p	태그 기반
.class	클래스
#id	아이디

---

8️⃣ 속성 선택자

선택자	설명
[name]	name 속성 있음
[name=title]	정확히 일치
[name^=a]	a로 시작
[name$=z]	z로 끝
[name*=lo]	lo 포함

---

9️⃣ 결합자 (Combinators)

결합자	설명
>	자식
공백	자손
+	인접 형제
~	일반 형제

---

🔟:has() 선택자 (CSS4)

.subject:has(.highlight) {
  background: yellow;
}

• 부모 요소가 자식 조건을 만족할 때 적용
• 최신 브라우저만 지원

---

1️⃣1️⃣ 가상 클래스 (Pseudo-classes)

선택자	설명
:hover, :active, :focus	사용자 상호작용
:first-child, :last-child	구조 기반
:checked, :disabled	폼 상태 기반
:valid, :invalid	입력 유효성 검사
:not(.class)	부정 조건

---

1️⃣2️⃣ 가상 요소 (Pseudo-elements)

선택자	설명
::before, ::after	요소 앞/뒤에 콘텐츠 삽입
::first-letter	첫 글자만 스타일
::first-line	첫 줄만 스타일

.sale::before {
  content: "SALE";
  background: red;
  color: white;
  padding: 2px;
}

---

1️⃣3️⃣ 카운터 예제 (목록 자동 번호)

ol {
  counter-reset: chapter;
}
li {
  counter-increment: chapter;
}
li::before {
  content: "제" counter(chapter) "장 ";
}

---

예제 : 카페 할인 뱃지

.sale::before {
  content: "SALE\A 할인";
  display: inline-block;
  background: red;
  color: white;
  white-space: pre;
}

---

✅ 마무리 정리

• CSS는 선언 순서 + 선택자 강도 + 위치로 적용 우선순위 결정
• 단위와 상속 개념은 전체 스타일링에 큰 영향
• 선택자와 가상 요소는 실전 UI 구현의 핵심
• 사용자 변수, 카운터, has() → 실무 팁

---