Week 2

Obebe·2026년 2월 10일

codeit

목록 보기

2/13

02.09-02.13 WIL

용어 정리

seo : 검색 엔진 최적화를 위한 작업들 (웹사이트가 검색 결과에 더 잘 보이도록 하는 과정)

css reset : 브라우저는 기본적인 css를 가지고 있기에, 개발자의 의도와 다른 기본 브라우저 css 세팅을 리셋하여 의도대로 디자인을 진행

캐싱(Caching) : 자주 사용하는 데이터나 계산 결과를 캐시(cache)라는 고속 임시 저장소에 미리 복사해 두어, 이후 요청 시 원본 저장소보다 빠르게 데이터를 제공하는 기술
구현 방법은 여러가지가 있으며 중요 포인트는 서버까지 도달해야하는 리소스를 줄여 비용을 절감하는 것

웹 접근성 : 장애인, 고령자 등 모든 사용자가 신체적, 기술적 제약 없이 웹 사이트에서 제공하는 정보에 동등하게 접근하고 이용할 수 있도록 보장하는 것 → 시맨틱 태그, 대체 텍스트 제공, 키보드 조작 보장, alt tag 등이 있음 (법적 의무 사항)

Weekly Paper

📢주제

CSS의 Cascading에 대해 설명해 주세요.
시맨틱 태그를 사용하면 좋은 점을 설명해 주세요.

CSS의 Cascading에 대해 설명해 주세요

1️⃣ Cascading이란 무엇인가?

CSS의 C는 Cascading의 약자다.
직역하면 “폭포처럼 흐른다”는 뜻인데, CSS에서는 여러 스타일 규칙이 충돌할 때 어떤 것이 최종적으로 적용되는지를 결정하는 규칙 체계를 의미한다.

즉,

같은 요소에 여러 스타일이 적용될 때
어떤 스타일이 살아남는지를 정하는 규칙이 바로 Cascading이다

2️⃣ 왜 Cascading이 필요한가?

다음 코드를 보자.

<p class="text">안녕하세요</p>

p {
  color: blue;
}

.text {
  color: red;
}

이 경우 글자 색은 파란색일까? 빨간색일까?

👉 빨간색이다.

왜냐하면 CSS는 단순히 “위에 있으면 이긴다”가 아니라,
우선순위 규칙(Cascade Rule)을 가지고 있기 때문이다.

3️⃣ Cascading을 결정하는 3가지 요소

CSS에서 최종 스타일을 결정하는 기준은 크게 세 가지다.

① 중요도 (Importance)

가장 강력한 것은 !important다.

p {
  color: blue !important;
}

.text {
  color: red;
}

👉 결과: 파란색

!important는 다른 모든 규칙보다 우선한다.
실무에서는 정말 필요한 경우에만 사용하는 것이 원칙이다.

② 명시도 (Specificity)

선택자가 얼마나 구체적인지에 따라 우선순위가 달라진다.

선택자 종류 명시도 점수
인라인 스타일 1000
ID 선택자 100
클래스 선택자 10
태그 선택자 1

예시:

p {
  color: blue;
}

#title {
  color: green;
}

.text {
  color: red;
}

<p id="title" class="text">안녕하세요</p>

👉 결과: 초록색 (ID가 가장 높음)

명시도는 “누가 더 구체적으로 가리키는가?”의 싸움이다.

③ 선언 순서 (Source Order)

명시도와 중요도가 같다면,
나중에 작성된 코드가 우선 적용된다.

p {
  color: blue;
}

p {
  color: red;
}

👉 결과: 빨간색

뒤에 작성된 것이 이긴다.

4️⃣ 정리하면, 우선순위는 이렇게 결정된다

1. !important

2. 명시도(Specificity)

3. 코드 작성 순서

이 세 가지가 합쳐져 최종 스타일이 결정된다.

5️⃣ Cascading이 중요한 이유

Cascading을 이해하지 못하면:

스타일이 왜 안 먹는지 모름
CSS가 “버그 같다”고 느껴짐
유지보수가 어려워짐

하지만 Cascading을 이해하면:

예측 가능한 스타일 설계 가능
불필요한 !important 제거 가능
구조적인 CSS 작성 가능

시맨틱 태그를 사용하면 좋은 점을 설명해 주세요.

시맨틱 태그 (semantic tag)

태그 자체가 의미를 담고 있는 HTML 요소

비시맨틱 vs 시맨틱
비시맨틱 태그: <div>와 <span>

<div>
  <div>
    <div>메뉴</div>
    <div>로고</div>
  </div>
  <div>
    <div>메인 콘텐츠</div>
  </div>
  <div>
    <div>저작권 정보</div>
  </div>
</div>

<div>는 단순한 "박스"일 뿐, 어떤 내용인지 알 수 없습니다.
사람이 코드를 읽어도 의미를 파악하기 어렵습니다.

시맨틱 태그 사용:

<header>
  <nav>메뉴</nav>
  <h1>로고</h1>
</header>
<main>
  <article>메인 콘텐츠</article>
</main>
<footer>
  <p>저작권 정보</p>
</footer>

태그 이름만 봐도 각 영역의 역할을 알 수 있습니다.
코드 가독성이 높아집니다.

주요 시맨틱 태그
HTML5에서 도입된 시맨틱 태그들입니다.

태그	의미	사용 위치
`<header>`	머리글 영역	페이지 상단, 섹션 상단
`<nav>`	내비게이션(메뉴)	주요 링크 모음
`<main>`	주요 콘텐츠	페이지의 핵심 내용 (페이지당 1개)
`<article>`	독립적인 콘텐츠	블로그 글, 뉴스 기사
`<section>`	주제별 섹션	콘텐츠의 논리적 구분
`<aside>`	부가 정보	사이드바, 관련 링크
`<footer>`	바닥글 영역	페이지 하단, 섹션 하단
`<figure>`	독립적인 콘텐츠	이미지, 도표, 코드 블록
`<figcaption>`	figure의 설명	figure 내부
`<time>`	날짜/시간	작성일, 이벤트 시간
`<mark>`	강조/하이라이트	검색 키워드 강조

시맨틱 태그를 사용하는 이유

(1) 접근성 향상 (Accessibility) 스크린 리더 사용자를 위한 배려: 시각 장애인은 스크린 리더(화면 읽기 프로그램)로 웹을 이용합니다. 시맨틱 태그를 사용하면 스크린 리더가 페이지 구조를 파악하고 효율적으로 탐색할 수 있습니다.
```

<div id="header">...</div>
<div id="nav">...</div>
<div id="main">...</div>


<header>...</header>
<nav>...</nav>
<main>...</main>
```
스크린 리더 기능:
- 사용자가 "H 키"를 누르면 제목(<h1>, <h2> 등)만 건너뛰며 이동합니다.
- "M 키"를 누르면 <main> 영역으로 바로 이동합니다.
- "N 키"를 누르면 <nav> 영역으로 이동합니다.
  
  시맨틱 태그가 없으면 이런 빠른 탐색이 불가능합니다.
(2) SEO 최적화 (Search Engine Optimization) 검색 엔진 크롤러의 이해도 향상: 구글, 네이버 같은 검색 엔진은 시맨틱 태그를 보고 페이지 구조를 파악합니다.
```

<div class="title">HTML 강의</div>
<div class="content">...</div>


<article>
  <h1>HTML 강의</h1>
  <p>...</p>
</article>
```
SEO 효과:
- <h1> 태그에 있는 키워드는 높은 가중치를 받습니다.
- <article> 안의 콘텐츠는 주요 내용으로 인식됩니다.
- <nav> 안의 링크는 사이트 구조를 파악하는 데 사용됩니다.
  
  검색 순위 향상:
- 시맨틱 태그를 적절히 사용하면 검색 결과 상위에 노출될 가능성이 높아집니다.
- 특히 <article>, <time>, <author> 등은 뉴스/블로그 검색에 유리합니다.

(3) 코드 가독성과 유지보수성 개발자 간 협업 향상:

<!-- Before: div만 사용 -->
<div class="wrapper">
  <div class="top">
    <div class="logo">...</div>
    <div class="menu">...</div>
  </div>
  <div class="content-area">...</div>
  <div class="bottom">...</div>
</div>

<!-- After: 시맨틱 태그 사용 -->
<div class="wrapper">
  <header>
    <h1 class="logo">...</h1>
    <nav class="menu">...</nav>
  </header>
  <main>...</main>
  <footer>...</footer>
</div>

태그 이름만 봐도 역할을 즉시 이해할 수 있습니다.
클래스명을 보지 않아도 구조를 파악할 수 있습니다.
6개월 후에 코드를 다시 봐도 쉽게 이해됩니다.

(4) 브라우저 기본 기능 활용 일부 브라우저는 시맨틱 태그를 인식하여 특별한 기능을 제공합니다.
- Reader Mode (리더 모드): Safari, Firefox 등의 리더 모드는 <article> 태그를 우선적으로 추출합니다.
- Outline (개요): 개발자 도구에서 페이지 구조를 트리 형태로 보여줍니다.
(5) 미래 호환성 (Future-proof) 새로운 기기나 기술이 나왔을 때도 시맨틱 HTML은 계속 작동합니다.
- 스마트 워치, 음성 어시스턴트, AI 에이전트 등 다양한 환경에서 콘텐츠를 올바르게 해석할 수 있습니다.
- 웹 표준을 따르기 때문에 브라우저 업데이트에도 안정적입니다.
(6) 실무 적용 팁 시맨틱 태그 선택 기준:
1. 의미가 명확하면 시맨틱 태그 사용
  - 헤더 → <header>
  - 메뉴 → <nav>
  - 주요 콘텐츠 → <main>
2. 의미가 불명확하거나 단순 레이아웃이면 <div> 사용
  - 레이아웃용 컨테이너
  - CSS 스타일링만을 위한 wrapper
3. 인라인 요소는 <span> 사용
  - 텍스트 일부에만 스타일 적용
  
  체크리스트:
- 페이지에 <main> 태그가 하나만 있는가?
- 제목 태그가 순서대로 사용되었는가? (<h1> → <h2> → <h3>)
- 주요 메뉴는 <nav>로 감쌌는가?
- 독립적인 콘텐츠는 <article>로 감쌌는가?
- 이미지에 alt 속성이 있는가?
- 폼의 모든 입력 필드에 <label>이 연결되어 있는가?

✔️ 추가 공부 내용

폼(Form)

사용자로부터 정보를 입력받아 서버로 전송하는 HTML의 핵심 기능
인터렉션을 일으키는 것들 중에 가장 기초적인 것
데이터 수집, 검증, 전송의 역할을 함

기본 문법:`<form>`태그

<form action="/submit" method="POST">
  <!-- 폼 내용 -->
</form>

주요속성
action : 데이터를 전송할 서버의 URL
method : 전송 방식 ( GET, POST )

입력 필드: `<input>` 태그

사용자가 데이터를 입력하는 가장 기본적인 요소

<form>
  <label for="username">아이디:</label>
  <input type="text" id="username" name="username">
</form>

라벨: `<label>` 태그

입력 필드에 대한 설명을 제공

<!-- 방법 1: for 속성 사용 (권장) -->
<label for="email">이메일:</label>
<input type="email" id="email" name="email">

<!-- 방법 2: input을 label로 감싸기 -->
<label>
  비밀번호:
  <input type="password" name="password">
</label>

라벨의 중요성:

라벨을 클릭하면 연결된 입력 필드에 포커스가 이동합니다.
스크린 리더가 라벨을 읽어주어 접근성이 향상됩니다.
클릭 영역이 넓어져 사용성이 좋아집니다

정리

핵심 포인트 :

폼(<form>)은 action(전송 경로)과 method(전송 방식)를 필수로 지정합니다.

<input>의 name 속성은 서버로 전송될 변수명이므로 반드시 작성해야 합니다.

<label>*은 접근성과 사용성을 위해 항상 사용하는 것이 좋습니다.

GET은 검색/조회용, POST는 등록/수정/삭제용으로 구분하여 사용합니다.

type 속성을 바꾸면 다양한 입력 필드(email, date, file 등)를 만들 수 있습니다.

required, placeholder, pattern 등의 속성으로 사용자 경험을 개선할 수 있습니다.

자주 사용하는 input type 요약:

type	용도	예시
`text`	일반 텍스트	이름, 주소
`password`	비밀번호	로그인
`email`	이메일 주소	회원가입
`tel`	전화번호	연락처
`number`	숫자	나이, 수량
`date`	날짜	생년월일
`checkbox`	다중 선택	약관 동의, 관심사
`radio`	단일 선택	성별, 등급
`file`	파일 업로드	사진, 문서

Obebe

다른 건 노력의 시간

이전 포스트

코드잇 스프린트 풀스택 12기 Meet-up 데이 후기

다음 포스트

Week 2

codeit

02.09-02.13 WIL

용어 정리

Weekly Paper

📢주제

CSS의 Cascading에 대해 설명해 주세요

1️⃣ Cascading이란 무엇인가?

2️⃣ 왜 Cascading이 필요한가?

3️⃣ Cascading을 결정하는 3가지 요소

③ 선언 순서 (Source Order)

4️⃣ 정리하면, 우선순위는 이렇게 결정된다

5️⃣ Cascading이 중요한 이유

시맨틱 태그를 사용하면 좋은 점을 설명해 주세요.

시맨틱 태그 (semantic tag)

시맨틱 태그를 사용하는 이유

✔️ 추가 공부 내용

폼(Form)

기본 문법:`<form>`태그

입력 필드: `<input>` 태그

라벨: `<label>` 태그

정리

코드잇 스프린트 풀스택 12기 Meet-up 데이 후기

✍Week 2 회고록

0개의 댓글

Week 2

codeit

02.09-02.13 WIL

용어 정리

Weekly Paper

📢주제

CSS의 Cascading에 대해 설명해 주세요

1️⃣ Cascading이란 무엇인가?

2️⃣ 왜 Cascading이 필요한가?

3️⃣ Cascading을 결정하는 3가지 요소

③ 선언 순서 (Source Order)

4️⃣ 정리하면, 우선순위는 이렇게 결정된다

5️⃣ Cascading이 중요한 이유

시맨틱 태그를 사용하면 좋은 점을 설명해 주세요.

시맨틱 태그 (semantic tag)

시맨틱 태그를 사용하는 이유

✔️ 추가 공부 내용

폼(Form)

기본 문법:<form>태그

입력 필드: <input> 태그

라벨: <label> 태그

정리

코드잇 스프린트 풀스택 12기 Meet-up 데이 후기

✍Week 2 회고록

0개의 댓글

기본 문법:`<form>`태그

입력 필드: `<input>` 태그

라벨: `<label>` 태그