[CSS] 클래스, 아이디, 우선순위

📌 CSS 적용 방식 3가지

방식위치예시

✅ 인라인 스타일	HTML 태그 안	<div style="color:red;">내용</div>
✅ 내부 스타일 시트	<style> 안	<style> div { color:red; } </style>
✅ 외부 스타일 시트	css 파일로 분리	<link rel="stylesheet" href="app.css">

---

🧠 선택자 정리

선택자설명예시

*	전체 요소 선택	* {}
태그명	해당 태그 전체	div {}
.클래스명	class="이름" 인 요소	.red {}
#아이디명	id="이름" 한 요소	#x1 {}

---

💡 클래스 vs 아이디

구분클래스 (class)아이디 (id)

사용 대상	여러 개의 요소	단 하나의 요소
선언 방식	.클래스명	#아이디명
HTML 예시	<div class="box">	<div id="main">

✅ 한 요소에 클래스는 여러 개 부여 가능, 아이디는 하나만 가능

🔎 주요 스타일 속성 정리

속성명설명예시

color	글자 색상	color: red;
font-size	글자 크기	font-size: 3em; or 16px;
font-weight	굵기	font-weight: bold;
font-style	기울임	font-style: italic;
background-color	배경색	background-color: black;

em 단위는 부모 글자 크기 기준으로 배수 지정
1em = 기본 크기, 2em = 두 배 크기

 

⚔️ CSS 우선순위(Cascade Priority)

❗ 같은 요소에 여러 스타일이 적용될 경우, 누가 더 센지 우선순위로 결정해.

우선순위 순서 (높을수록 강함)

1. 인라인 스타일 → style="..."
2. id 선택자 → #x1 {}
3. class 선택자 / 속성 선택자 / 가상 클래스 → .red {}
4. 태그 선택자 → div {}
5. 전체 선택자 → * {}
6. 외부 스타일 시트 < 내부 스타일 시트 < 인라인 스타일

🎯 즉, 같은 스타일이 충돌하면 인라인 스타일이 가장 먼저 적용되고, 나머지는 위 순서대로 밀려남.

---

💻 예제 설명

<div style="color: red;">안녕하세요</div> <!-- 인라인 스타일: 무조건 red 적용 -->

<div id="x1">안녕하세요</div> <!-- 내부 스타일에서 id 선택자: blue 적용 -->

<div>안녕하세요</div> <!-- 기본 div: 별도 스타일 없음 -->

<div class="big-font red-color">안녕하세요</div> <!-- 외부 스타일의 클래스 스타일 2개 적용 -->

<div class="red-color">안녕하세요</div> <!-- 외부 스타일에서 red-color 적용 -->

 

외부 CSS (app.css 예시)

 .red-color {

                color: green;

            }

            .big-font {

                font-size: 3em;

  }

 

🧪 실전 우선순위 예시

<!-- 모두 같은 요소일 때 -->

<div style="color:red;" class="red-color" id="x1">텍스트</div>

어떤 색이 적용될까? → red
왜냐면 style="..."는 인라인 스타일이기 때문에 우선순위 1위!

---

🎯 요약정리

요소설명

style=""	가장 높은 우선순위 (무조건 적용됨)
#id	고유한 요소 선택 (강력함)
.class	여러 요소에 동일 스타일 부여 가능
태그 선택자	약하지만 기본 설정에 유용
.class1.class2	여러 클래스 동시 적용 가능
클래스 여러 개 적용 시	스타일이 겹치면, 후순위 속성 덮어쓰기됨

---

💡 꿀팁

• 클래스는 띄어쓰기해서 여러 개 적용 가능 (class="big red-color")
• 아이디는 하나의 요소에만 사용
• 우선순위 헷갈리면 F12 개발자도구에서 확인하면 정확함