Published on

[1] 기초 웹 입문 가이드: HTML5 기초

Authors
  • avatar
    Name
    Gecko Baem
    Twitter

HTML(HyperText Markup Language) 은 웹 페이지의 구조를 정의하는 마크업 언어이다. 텍스트, 이미지, 링크 등 웹 페이지의 구성 요소를 표현하고, 웹 브라우저가 이를 해석하여 화면에 표시한다. 웹을 제작하기 위해서는 당연하게 알고 있어야 할 사항이다.

본 문서에서는 HTML에 대한 문법과 태그를 위주로 다룬다.

1. HTML 기본 구조

HTML은 다음과 같은 구조로 이루어진다.

<!DOCTYPE html>
<html>
<head>
    <title>페이지 제목</title>
    <meta charset="UTF-8">  </head>
<body>
    </body>
</html>
  • <!DOCTYPE html>: HTML5 문서임을 선언한다.
  • <html>: HTML 문서의 시작과 끝을 나타낸다.
  • <head>: 웹 페이지의 메타 정보(제목, 문자 인코딩 등)를 포함한다.
  • <body>: 웹 페이지에 실제로 표시되는 콘텐츠를 포함한다.

2. HTML 태그

HTML 태그는 웹 페이지의 구성 요소를 정의하는 데 사용된다. 시작 태그(<태그명>)와 종료 태그(</태그명>)로 이루어지며, 콘텐츠를 감싸는 형태로 사용된다.

주요 HTML 태그:

  • 콘텐츠 관련 태그:
    • <h1> - <h6>: 제목 (Heading) - 중요도에 따라 1부터 6까지 레벨을 지정한다.
    • <p>: 단락 (Paragraph)
    • <br>: 줄 바꿈 (Line Break)
    • <hr>: 수평선 (Horizontal Rule)
    • <strong>, <em>: 강조 (Strong, Emphasis)
    • <ul>, <ol>, <li>: 목록 (Unordered List, Ordered List, List Item)
    • <img>: 이미지 (Image) - src 속성으로 이미지 파일 경로를 지정하고, alt 속성으로 대체 텍스트를 제공한다.
    • <a>: 링크 (Link) - href 속성으로 링크 주소를 지정한다.
  • 폼 관련 태그:
    • <form>: 폼 (Form) - 데이터를 서버로 제출하는 데 사용된다.
    • <input>: 입력 필드 (Input Field) - 다양한 유형(type 속성)의 입력 필드를 생성한다.
    • <textarea>: 여러 줄 텍스트 입력 (Textarea)
    • <button>: 버튼 (Button)
    • <label>: 레이블 (Label) - 입력 필드와 연결되어 사용성을 높인다.
    • <select>, <option>: 드롭다운 목록 (Select, Option)
  • 테이블 관련 태그:
    • <table>: 표 (Table)
    • <tr>: 행 (Table Row)
    • <th>: 헤더 셀 (Table Header Cell)
    • <td>: 데이터 셀 (Table Data Cell)
  • 기타 태그:
    • <div>: 영역 나누기 (Division) - 레이아웃을 구성하는 데 사용된다.
    • <span>: 텍스트 일부 스타일링 (Span) - 특정 텍스트 부분에 스타일을 적용할 때 사용된다.
    • <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>: 시맨틱 태그 (Semantic Tag) - 웹 페이지의 의미 있는 영역을 정의한다.

3. HTML 속성

HTML 속성은 태그의 추가 정보를 제공하는 데 사용된다. 시작 태그 안에 속성명="값" 형태로 작성된다.

주요 HTML 속성:

  • id: 고유 식별자 - 자바스크립트나 CSS에서 특정 요소를 선택할 때 사용된다.
  • class: 클래스 이름 - 여러 요소에 동일한 스타일을 적용할 때 사용된다.
  • style: 인라인 스타일 - 요소에 직접 스타일을 지정할 때 사용된다.
  • title: 툴팁 텍스트 - 마우스를 올렸을 때 표시되는 추가 정보를 제공한다.

더 알아보기

View on GitHub