☁️ goormTIL | HTML/CSS #4

매루·2025년 9월 5일

DEEPDIVE_FE TIL goormTIL

goormTIL

목록 보기

2/67

📅 2025-09-04

➡️ HTML 시맨틱 태그와 CSS 선택자 정리 + 🤔

🔎 학습 리마인드

📌 시맨틱 태그

태그 이름으로 역할과 의미를 알 수 있는 태그
가독성 ↑, 접근성 ↑, SEO (검색 엔진 최적화) ↑

주요 시맨틱 태그들

<header> : 문서나 섹션의 머리말 (로고, 내비게이션 등)
<footer> : 문서나 섹션의 바닥글 (저작권, 연락처 등)
<aside> : 부가 정보 영역 (광고, 관련 글 등)
<nav> : 주요 탐색 링크 메뉴, 네비게이션
<main> : 문서의 핵심 콘텐츠 영역
<section> : 관련 있는 콘텐츠 묶음
<article> : 독립적인 콘텐츠 (뉴스, 포스트 등)

📌 HTML 트리 구조

📌 CSS 선택자

💡 속성 선택자

특성 속성 값을 가진 요소만 선택할 수 있음

input[type="text"] {
  /* 스타일 */
}

자주 쓰이는 예시
- input[disabled] → 비활성화된 input
- a[target="_blank"] → 새 창으로 열리는 링크

💡 가상 클래스

요소의 특정 상태에 따라 스타일 적용

:hover {
  /* 마우스를 올렸을 때 */
}

:hover → 마우스를 올렸을 때
:focus → 포커스 상태(클릭했거나, Tab키로 이동하여 선택)일 때
:active → 사용자에 의해 활성화 됐을 때

💡 가상 자식 선택자 (nth-child)

부모 요소 안에서 순서를 기준으로 자식을 선택할 때 사용
부모의 n 번째 자식

<ul>
  <li>사과</li>
  <p>딸기</p>
  <li>바나나</li>
  <li>포도</li>
</ul>

li:nth-child(3){
	color: red;
}

바나나 선택

💡 가상 자식 타입 선택자 (nth-of-type)

부모 요소 안에서, 같은 태그 이름을 가진 요소들 중에서 순서로 선택

<ul>
  <li>사과</li>
  <p>딸기</p>
  <li>바나나</li>
  <li>포도</li>
</ul>

ul :nth-of-type(1){
  color: red;
}

사과, 딸기 → 붉은색으로 변함
- 사과 → li 중 첫 번째
- 딸기 → p 중 첫 번째

💡 가상 요소 (::before, ::after)

실제 HTML에 없는 가상의 요소를 만들어내는 선택자
❗ ::before, ::after → content 속성을 꼭 사용해야 함!

.div::before {
  content: "";
  /* 스타일 적용 */
}

빈 문자열(content: "")이라도 넣어야 가상 요소가 화면에 나타남

📌 CSS 적용 우선 순위

❗CSS는 기본적으로 동일한 우선순위의 스타일이 충돌할 경우, 마지막에 작성된 스타일이 최종적으로 적용
!important > inline > id > class > HTML 태그
- !important는 잘 안 쓰는 걸 추천!
  - 그럼 보통 언제 사용? → 외부 라이브러리나 프레임워크에서 제공하는 스타일을 덮어써야 할 경우

📌 결합자

특정 상황에서만 선택자를 적용하고 싶을 때 결합자 사용

💡 후손 결합자

<div>
  <p>첫 번째 문단</p>
  <span><p>두 번째 문단</p></span>
</div>
<p>세 번째 문단</p>

div p {
  color : red; 
}

div 안에 있는 모든 후손 p 선택 (자식, 손자 포함)
→ 첫 번째 문단, 두 번째 문단

💡 자식 결합자

<div>
  <p>첫 번째 문단</p>
  <span><p>두 번째 문단</p></span>
  <p>세 번째 문단</p>
</div>

div > p {
  color: blue;
}

div의 직계 자식 p만 선택
→ 첫 번째 문단, 세 번째 문단

💡 인접 형제 결합자

<p>설명문</p>
<img src="sample.jpg" alt="샘플 이미지">
<img src="sample2.jpg" alt="샘플 이미지2">

p + img {
  border: 2px solid red;
}

p 바로 다음에 오는 형제 img 하나 선택
→ 샘플 이미지

💡 일반 형제 결합자

<p>설명문</p>
<img src="sample.jpg" alt="샘플 이미지">
<img src="sample2.jpg" alt="샘플 이미지2">

p ~ img {
  border: 2px solid blue;
}

p 뒤에 오는 모든 형제 img 선택
→ 샘플 이미지, 샘플 이미지2

🌊 Deep Dive

🤔 CSS 가상 클래스 focus와 active의 차이점

➡️ focus와 active는 비슷하다고 느껴지는데 뭐가 다른걸까?

:focus : 요소가 선택(포커스) 상태일 때(클릭 / Tab 키) → ❗클릭이 끝나도 유지
- 주로 입력창, 버튼, 링크에 자주 사용
:active : 요소를 누르는 순간 → ❗누르고 있는 동안만 유지
- 주로 버튼이나 링크에 자주 사용