Archive

02 HTML5

9 min read

1. 개요 및 HTML5 특징

  • 웹 기술의 3요소

    • HTML5: 웹 페이지의 내용(Content)과 구조 작성
    • CSS3: 웹 페이지의 스타일(Style) 지정
    • JavaScript: 웹 페이지의 상호작용(Interaction) 담당

  • HTML5

    • 웹 페이지를 기술하기 위한 마크업(markup) 언어
    • 태그를 이용해서 문서의 구조를 표현한다.
    • HTML은 태그로 이루어진 요소(element)로 구성

  • HTML5의 주요 특징

    • 플랫폼 의존성 제거: ActiveX나 Flash 같은 별도 플러그인 없이 작동 (비디오, 오디오 등)
    • 표준화된 API 제공: 비디오/오디오 재생, 2D/3D 그래픽(Canvas, SVG), 로컬 저장소(Web Storage), 위치 정보, 파일 입출력 등 지원

  • 기본 구조

    • <!DOCTYPE html> 선언으로 브라우저가 HTML5 문서임을 인식
    • <html> 태그로 시작하고 끝나며, <head>(설정, 제목)와 <body>(실제 내용)로 구성

1.1. 요소

  • 요소(Element)
    • 시작 태그 + 콘텐츠 + 종료 태그
      • (예: <title>제목</title>)
    • 단독 태그

1.2. 태그

  • 태그 이름

    • 공백 없는 문자열, 대소문자 구분 없음

  • 태그 종류

    • 글자 태그: h(heading), p(paragraph), br(line break), pre, 글자 표현 태그 등
    • 리스트 태그: ol(ordered list), ul(unordered list), li(list item)
    • table 태그: tr(table row), td(table data), th(table header)
      • 속성: width, border, colspan, rowspan
    • a(anchor, 하이퍼링크) 태그, img 태그, audio 태그, video 태그
    • iframe(인라인 프레임) 태그: 현재 html 페이지 내 영역에 다른 html 페이지 프레임을 삽입하여 출력한다.
    • object 태그, embed 태그: iframe 태그를 대체하여 HTML 파일이 아닌 비디오, 오디오 등 외부의 애플리케이션 파일을 포함하는 데 주로 사용한다.
    • 시맨틱(semantic) 태그: 브라우저에게 요소의 의미나 목적을 명확하게 알려주는 요소

1.3. 속성

  • 속성(Attribute)
    • 시작 태그 내에 이름="값" 형태로 추가 정보 제공
      • (예: <h1 title="툴팁">)

2. 글자 태그

  • 구조 관련

    • <h1~6>: 제목(Heading), 숫자가 작을수록 크고 굵음
    • <p>: 문단(Paragraph), 앞뒤로 줄바꿈 발생
    • <br>: 강제 줄바꿈 (종료 태그 없음)
    • <pre>: 입력한 공백, 탭, 줄바꿈을 그대로 표시
    • <!-- -->: 주석

  • 스타일 및 의미 표현

    • <i>: 기울임꼴 (단순 시각적)
    • <b>: 굵게 (단순 중요도 없음)
    • <em>: 강조 (기울임꼴, 의미적 강조)
    • <strong>: 강한 강조 (굵게, 의미적 강조)
    • <sub>, <sup>: 아래 첨자, 위 첨자
    • <ins>, <del>: 밑줄(추가됨), 취소선(삭제됨)
    • <hr>: 수평 가로줄 (주제 분리)

  • 특수 문자: 특수 기호(Entity)로 입력

    • &nbsp;: 공백 문자 한 개 (non-breaking space)
    • &lt;: <
    • &gt;: >
    • &quot;: "
    • &amp;: &

3. 리스트와 테이블

  • 리스트

    • <ol>: 순서가 있는 목록 (1, 2, 3…)
    • <ul>: 순서가 없는 목록 (글머리 기호)
    • <li>: 목록의 각 항목
    • <dl>, <dt>, <dd>: 정의 리스트 (용어와 설명)

  • 테이블

    • <table>: 표 전체 컨테이너
    • <tr>: 행(Row)
    • <th>: 제목 셀(가운데 정렬, 굵게)
    • <td>: 데이터 셀(Cell)
    • 속성: border(테두리), rowspan(행 병합), colspan(열 병합)

4. 이미지와 링크

  • 이미지 <img>

    • 속성: src(파일 경로), width/height(크기), alt(대체 텍스트)
    • 경로 규칙: 같은 폴더(파일명), 상위(../), 하위(폴더명/)
    • <figure>, <figcaption>: 이미지와 캡션을 그룹화하는 시맨틱 태그
      • <figure>: 독립적인 컨텐츠를 표현
      • <figcaption>: 컨텐츠 추가 설명

  • 하이퍼링크 <a>

    • 속성: href(이동할 주소), target(_self: 현재 창, _blank: 새 창)
    • 책갈피 기능: href="#ID"로 설정하고, 도착지 태그에 id="ID"를 부여하여 문서 내 이동 가능

  • 책갈피 링크

    • 시작점 앵커의 설정
      • <a href = “#고유아이디”> 링크 설정된 ‘고유아이디’ 위치로 이동</a>
    • 목적지 앵커의 설정
      • <a id=“고유아이디”> 문서 내 이동할 목적지 </a>

5. 멀티미디어 태그

  • 오디오 <audio> & 비디오 <video>

    • HTML5에서 플러그인 없이 재생 가능
    • 주요 속성: src(경로), controls(제어바 표시), autoplay(자동 재생), loop(반복), preload(로딩 설정), poster(비디오 썸네일)
    • <source> 태그를 사용해 다양한 포맷 호환성 확보 가능

  • 외부 콘텐츠 삽입

    • <iframe>: 웹 페이지 내에 다른 웹 페이지(또는 유튜브 영상) 삽입
    • <embed>, <object>: iframe의 대안 혹은 외부 애플리케이션 파일 포함

6. 블록 요소 vs 인라인 요소

  • 블록 요소 (Block): 한 줄을 모두 차지함 - 줄바꿈 일어남

    • 예: <h1>, <p>, <ul>, <table>, <div> 등
    • <div>: 구역을 나누거나 그룹화할 때 사용하는 컨테이너

  • 인라인 요소 (Inline): 콘텐츠 크기만큼만 차지함 - 줄바꿈 없음

    • 예: <a>, <img>, <span>, <b>, <input> 등
    • <span>: 문장 내 특정 부분을 묶어 스타일을 줄 때 사용

7. 시맨틱 태그

  • 시맨틱 웹(Semantic Web)
    • 기계가 이해할 수 있도록 의미를 가진 태그를 사용하는 웹(Web 3.0)
    • 의미 있는 구조를 표현한다.

7.1. 주요 시맨틱 태그

  • 구조

    • <header>(머리말), <nav>(메뉴), <section>(본문 구역), <article>(독립된 본문), <aside>(사이드바), <footer>(꼬리말)

  • 내용(블록)

    • <figure> : 본문에 삽입하는 사진, 차트, 삽화, 코드 등을 그림으로 표현
    • <details>: 상세 정보를 담는 시맨틱 블록 태그
    • <summary> : <details>로 구성되는 블록의 제목 표현

  • 내용(인라인)

    • <mark>: 중요한 텍스트임을 표시
    • <time> : 텍스트의 내용이 시간임을 표시
    • <meter>: 주어진 범위나 %의 데이터 량 표시
    • <progress>: 작업의 진행 정도 표시

8. 입력 양식 (Form)

  • <form> 태그: 사용자가 입력한 데이터를 서버로 전송

    • 주요 속성
      • name: 스크립트 식별용 이름
      • action: 데이터를 보낼 서버 URL
      • method: 데이터 전송 방식(get/post)
    • 전송 방식
      • GET: URL 뒤에 파라미터 붙여 전송 (보안 취약, 용량 제한)
      • POST: HTTP 헤더에 담아 전송 (보안 우수, 용량 제한 없음)

  • <input> 태그: 다양한 입력 필드 생성

    • 기본 타입: text, password, submit, reset, button, radio(택1), checkbox(다중선택)
    • HTML5 신규 타입: email, url, tel, date, color, number, range 등 (모바일 키패드 자동 변경 및 유효성 검사 지원)
    • 주요 속성: name(서버 식별자), value(값), placeholder(힌트), required(필수), readonly(읽기 전용), autofocus(자동 포커스), autocomplete(자동 완성)

  • 기타 폼 태그

    • <textarea>: 여러 줄 텍스트 입력
    • <select>, <option>: 드롭다운 메뉴
    • <label>: 폼 요소의 이름표 (클릭 시 연결된 input 활성화)
    • <fieldset>, <legend>: 폼 요소 그룹화 및 제목

그래프 뷰

백링크