Day 3/200 (풀스택 개발)

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 초보 웹 개발자
• HTML/CSS 기초 학습자
• SEO 최적화에 관심 있는 개발자
• 난이도: 기초 수준 (HTML 태그 개념 이해)

핵심 요약

• 세마틱 태그 사용:
  ,
  , 등은 SEO 최적화와 웹 접근성 향상에 핵심적
• 인라인/블록 요소 구분: span (인라인), div (블록) 등은 레이아웃 구조 설계에 중요
• 예시 코드:

```html

```

섹션별 세부 요약

1. 세마틱 태그의 목적

• SEO(검색 엔진 최적화): Google 등 검색 엔진이 페이지 구조를 쉽게 파악
• 웹 접근성: 스크린 리더 사용자에게 의미 있는 정보 전달
• 예시 태그:
  , ,
  ,
  ,

2. 인라인 vs 블록 요소

• 인라인 요소(예: ): 텍스트 흐름에 따라 배치, 높이/너비 제어 불가
• 블록 요소(예: ): 자체 블록으로 표현, 줄 바꿈 발생
• 레이아웃 설계: 블록 요소는 섹션 분리, 인라인 요소는 텍스트 스타일링에 사용

3. 실습 예제

• HTML 구조:

```html

이 텍스트는 강조됩니다.

```

• 결과: 웹 브라우저에서 의미 있는 구조로 렌더링, 검색 엔진이 콘텐츠를 쉽게 해석

결론

• 세마틱 태그와 요소 타입 구분은 웹 개발의 기초이며, SEO 및 접근성 향상에 직접적인 영향
• 실무 적용:
  ,
  , 등 세마틱 태그를 사용해 페이지 구조를 명확히 정의하고, 블록 요소로 레이아웃을 구성하세요.