UI 공부

HTML 태그

Rocomi 2024. 8. 13. 18:22

HTML에서 중요한 태그들은 웹 페이지의 구조와 콘텐츠를 정의하는 데 사용됩니다. 주요 태그들은 다음과 같습니다.

1. 문서 구조 태그

  • <!DOCTYPE html>: 문서 형식을 선언하는 태그로, HTML5 문서를 표시하는 데 사용됩니다.
  • <html>: 전체 HTML 문서를 감싸는 루트 태그입니다.
  • <head>: 메타데이터(문서 제목, 문자 인코딩, 외부 파일 연결 등)를 포함하는 부분입니다.
  • <title>: 웹 페이지의 제목을 정의하며, 브라우저 탭에 표시됩니다.
  • <body>: 실제 웹 페이지에 표시되는 콘텐츠를 포함하는 태그입니다.

2. 텍스트 관련 태그

  • <h1> ~ <h6>: 제목을 정의하는 태그로, <h1>은 가장 중요한 제목, <h6>은 가장 덜 중요한 제목을 나타냅니다.
  • <p>: 단락을 정의하는 태그입니다.
  • <a>: 하이퍼링크를 정의하는 태그로, href 속성을 사용하여 다른 페이지나 URL로 연결합니다.
  • <span>: 인라인 요소로, 특정 텍스트를 스타일링하거나 구분할 때 사용됩니다.
  • <strong>: 텍스트를 굵게 표시하며, 중요한 텍스트를 나타낼 때 사용됩니다.
  • <em>: 텍스트를 기울임꼴로 표시하며, 강조하고자 하는 텍스트를 나타낼 때 사용됩니다.

3. 멀티미디어 태그

  • <img>: 이미지를 삽입하는 태그로, src 속성을 통해 이미지 파일의 경로를 지정합니다.
  • <audio>: 오디오 파일을 삽입하는 태그로, controls 속성을 사용하여 재생 컨트롤을 표시할 수 있습니다.
  • <video>: 비디오 파일을 삽입하는 태그로, controls 속성을 사용하여 재생 컨트롤을 표시할 수 있습니다.

4. 리스트 태그

  • <ul>: 순서 없는 리스트(불릿 리스트)를 정의하는 태그입니다.
  • <ol>: 순서 있는 리스트(번호 리스트)를 정의하는 태그입니다.
  • <li>: 리스트 항목을 정의하는 태그로, <ul> 또는 <ol> 내에서 사용됩니다.

5. 테이블 태그

  • <table>: 표를 정의하는 태그입니다.
  • <tr>: 테이블의 행을 정의하는 태그입니다.
  • <td>: 테이블의 셀을 정의하는 태그입니다.
  • <th>: 테이블 헤더 셀을 정의하는 태그로, 보통 열 제목에 사용됩니다.

6. 폼 태그

  • <form>: 사용자 입력을 받을 수 있는 폼을 정의하는 태그입니다.
  • <input>: 사용자의 데이터를 입력받는 필드로, type 속성에 따라 텍스트, 비밀번호, 라디오 버튼 등 다양한 형태로 사용할 수 있습니다.
  • <button>: 버튼을 정의하는 태그로, 클릭 시 특정 작업을 수행할 수 있습니다.
  • <label>: 입력 필드의 라벨을 정의하는 태그로, 접근성을 높이는 데 사용됩니다.
  • <textarea>: 여러 줄의 텍스트를 입력받을 수 있는 입력 필드입니다.
  • <select>: 드롭다운 목록을 생성하는 태그로, 여러 옵션 중 하나를 선택할 수 있게 합니다.

7. 기타 태그

  • <div>: 블록 요소로, 웹 페이지의 특정 부분을 그룹화할 때 사용됩니다.
  • <header>: 문서나 섹션의 머리말을 정의하는 태그입니다.
  • <footer>: 문서나 섹션의 바닥글을 정의하는 태그입니다.
  • <section>: 문서의 내용을 주제별로 구분하는 태그입니다.
  • <article>: 독립적으로 구획할 수 있는 콘텐츠를 정의하는 태그입니다.

이 태그들은 HTML 문서에서 가장 기본적이면서도 중요한 역할을 합니다. 각각의 태그는 웹 페이지의 구조를 잡고, 내용을 의미 있게 표현하는 데 필수적입니다.