프론트엔드 개발 180일 도전: 헤딩, 단락, 구분선 요소 마스터링

카테고리

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

서브카테고리

웹 개발

대상자

• 초보~중급 프론트엔드 개발자
• 웹 디자이너 및 콘텐츠 기획자
• HTML/CSS 문법 학습자
• 난이도: 초보자 대상, SEO 및 접근성 기초 개념 포함

핵심 요약

• ~
  헤딩 요소는 콘텐츠 계층 구조를 정의 (SEO 최적화를 위해
  은 1개만 사용)
• 
은 스페이싱 대신 CSS 마진/패딩 사용 (과도한 사용은 접근성 저하)

• ---

  은 섹션 간 주제적 구분을 위한 요소 (스타일링 가능)
• 문서 구조 예시:
  →
  → +

  ---

  의 계층적 사용

섹션별 세부 요약

1. 텍스트 정형의 중요성

• 사용자 가독성 향상 및 검색 엔진 최적화
• 시각적 계층 구조 형성 (헤딩, 단락, 구분선 병행)

2. 헤딩 요소 사용 가이드

• : 페이지 제목 (1개만 사용)

• ~
  : 하위 섹션 제목 (계층 순서 유지)
• 경고: 헤딩 레벨 점프 (예:
  →
  )는 SEO에 부정적

3. `
` 및 `

---

` 요소 활용

• 
: 단일 줄 간격 생성 (닫는 태그 필요 X)

• ---

  : 섹션 간 구분선 (CSS로 스타일링 가능)
• 주의:
과도 사용은 CSS 대신 사용할 것

4. "About Me" 페이지 예시 구현

• : 제목

• : 섹션 제목 (예: "스킬", "취미")
• : 설명 문단

• ---

  : 섹션 간 구분
• 
: 줄 간격 추가 (예: "트레킹
  과학 소설 읽기")

5. 일반적인 실수 및 개선 사항

• 헤딩 요소를 전체 스타일링 대용 (CSS 사용 권장)
• 
과도 사용으로 인한 접근성 문제
• 태그 닫기 태그 누락
• 헤딩 레벨 계층 순서 무시

6. 실습 과제

1. HTML 파일 생성:

-

-

- 각 섹션 내 포함

-

1. 
태그 사용 실험

결론

• 실무 팁: 좋아하는 웹사이트 소스 코드 보기 (우클릭 → "페이지 소스 보기")
• 추천 자료: "180일 프론트엔드 개발" 전자책 활용
• 핵심 원칙: 헤딩 계층,
대체 방안,

  ---

  사용을 통해 접근성 및 SEO 최적화 실현