[2주차 TIL] HTML

2024. 12. 16. 09:54KnockOn Bootcamp (녹온 부트캠프 3기)

HTML 문서의 구조

HTML 문서는 DOCTYPE 선언으로 시작합니다. 이는 웹 브라우저에게 이 문서가 HTML5 문서임을 알려주는 역할을 합니다.

<!DOCTYPE html>
<html>
<head>
  <title>제목</title>
</head>
<body>
  <h1>h1</h1>
</body>
</html>


기본적인 HTML 태그들

  • <html>: HTML 문서의 시작과 끝을 나타냅니다.
  • <head>: 웹 페이지의 메타 정보를 담는 곳입니다. <title>, <style>, <meta>, <link>, <script> 등의 태그를 포함할 수 있습니다.
  • <title>: 웹 페이지의 제목을 설정합니다. 브라우저의 탭에 표시됩니다.
  • <body>: 웹 페이지의 본문을 나타내는 부분입니다. 웹 브라우저에 실제로 표시되는 내용을 담습니다.
  • <h1> ~ <h6>: 제목을 나타내는 태그입니다. <h1>이 가장 큰 제목이며, <h6>까지 숫자가 커질수록 글자 크기가 작아집니다.
  • <p>: 문단을 나타내는 태그입니다. 텍스트를 담는 데 사용됩니다.
  • <a>: 하이퍼링크를 만드는 태그입니다. href 속성에 링크할 URL을 지정합니다.
  • <img>: 이미지를 삽입하는 태그입니다. src 속성에 이미지 파일의 경로를 지정합니다.
  • <div>: 구역이나 섹션을 만드는 태그입니다. CSS와 함께 사용하여 웹 페이지의 레이아웃을 디자인합니다.
  • <span>: 인라인 요소를 그룹화하는 태그입니다. 텍스트 또는 다른 인라인 요소에 스타일을 적용하기 위해 사용합니다.
  • <table>: 테이블을 생성하는 태그입니다. <tr>, <td>, <th> 등의 태그와 함께 사용합니다.
    • <tr>: 테이블의 행을 정의합니다.
    • <td>: 테이블의 데이터 셀을 정의합니다.
    • <th>: 테이블의 헤더 셀을 정의합니다.
  • <ul>과 <ol>: 목록을 만드는 태그입니다. <li> 태그와 함께 사용합니다. <ul>은 순서가 없는 목록을, <ol>은 순서가 있는 목록을 만듭니다.
  • <li>: 목록의 항목을 정의하는 태그입니다.
  • <form>: 사용자 입력을 위한 HTML 양식을 만드는 태그입니다. <input>, <textarea>, <button> 등의 태그와 함께 사용합니다.
  • <input>: 사용자 입력을 받는 필드를 만드는 태그입니다. type 속성을 이용해 다양한 종류의 입력 필드를 만들 수 있습니다.