5. HTML 요소 이해: 인라인, 블록, 시맨틱 태그

1. 인라인 요소:

• 특징:
  • 콘텐츠 크기만큼 자리 차지 (텍스트, 이미지, span 등)
  • 텍스트 특징 (글꼴, 크기, 색상 등 적용 가능)
• 예시:
  • span: 텍스트 내 특정 부분 강조
  • img: 이미지 삽입
  • a: 링크 생성

 

2. 블록 요소:

 

span 태그:

• 특징:
  • 인라인 요소
  • 글자 단위 영역 설정
  • 특정 텍스트에 스타일 적용
• 사용 예시:
  • 특정 단어 색상 변경
  • 툴팁 표시
  • 마우스 오버 효과 적용

div 태그:

• 특징:
  • 블록 요소
  • 면 단위 영역 설정
  • 콘텐츠 그룹화 및 레이아웃 구성
• 사용 예시:
  • 페이지 헤더, 푸터 영역 설정
  • 콘텐츠 영역 구분
  • 컬럼 레이아웃 구성

 

 

3. 시맨틱(semantic) 태그

semantic: 의미가 있는, 의미론적인

• div > div > div > .. 끝없는 div를 탐색하는 것보다 효율적
• 개발자에게 명확한 의미를 전달
• 스크린 리더를 사용하여 페이지를 탐색할 때 도움
• 검색엔진 봇에게 정보를 제공

대표적인 시맨틱 태그:

<header>

• 페이지의 제목과 같은 소개, 내용을 포함
• heading<h> 태그나 로고, 검색양식, 작성자 이름등을 포함

<nav>

• 메뉴, 목차 등에 사용

<main>

• 주 컨텐츠 영역을 나타내는 태그

<section>

• 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타냄
• 제목이 있는 컨텐츠에 사용하는 것이 일반적

<article>

• 자체로 의미가 있는 웹페이지의 부분
• 독립적으로 배포 또는 재사용되도록 의도된 문서
• 블로그, 게시물, 신문기사

<footer>

작성자의 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크, 카피라이트 등을 포함

<aside>

• 간접적으로 문서와 관련된 내용 또는 관련 없는 사이드바