본문 바로가기
클라이언트/HTML

HTML알아보기

by 취코배 2023. 3. 10.
반응형

HTML은 웹 페이지를 만들 때 가장 기본적으로 사용되는 마크업 언어입니다. 이번에는 HTML에 대해 간단히 알아보고, 어떻게 사용하는지에 대해 알려드리겠습니다.

 

HTML이란?

HTML이란 무엇인가? HTML은 HyperText Markup Language의 약자로, 웹 페이지를 만들 때 사용되는 마크업 언어입니다. HTML은 문서의 구조를 정의하고, 각 요소가 어떤 의미를 가지는지를 나타냅니다. 이를 통해 검색 엔진이나 웹 브라우저가 웹 페이지를 이해하고 구성하는 데 도움이 됩니다.

HTML 문서 구조 HTML 문서는 다음과 같은 구조를 가집니다.

 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
</head>
<body>
문서 내용
</body>
</html>
 
코드 설명
  • <!DOCTYPE html>: 현재 문서가 HTML5 문서임을 선언합니다.
  • <html>: HTML 문서의 시작을 나타냅니다.
  • <head>: 웹 페이지의 제목, 스타일시트, 스크립트 등의 정보가 들어갑니다.
  • <meta charset="UTF-8">: 문서의 문자 인코딩 방식을 설정합니다.
  • <title>: 웹 페이지의 제목을 나타냅니다.
  • <body>: 웹 페이지의 내용이 들어갑니다.

HTML 태그 HTML 문서는 태그들의 집합으로 이루어집니다. 태그는 '<'와 '>'로 묶인 키워드이며, 시작 태그와 종료 태그가 쌍으로 구성됩니다. 예를 들어, <p>태그는 문단을 시작하고, </p>태그는 문단을 종료합니다.

 

HTML의 다양한 태그

HTML(HyperText Markup Language)은 웹 페이지를 만들기 위해 사용되는 마크업 언어입니다. HTML은 다양한 태그(tag)를 제공하여 웹 페이지의 구조, 콘텐츠, 스타일 등을 정의할 수 있습니다. 이제 HTML의 대표적인 태그들을 설명해보겠습니다.

  1. <html> : HTML 문서의 시작과 끝을 나타내는 태그입니다.
  2. <head> : 웹 페이지의 메타데이터를 포함하는 태그입니다. 제목, 스타일 시트, 문자 인코딩 등의 정보를 담을 수 있습니다.
  3. <title> : 웹 페이지의 제목을 지정하는 태그입니다.
  4. <body> : 웹 페이지의 콘텐츠를 담는 태그입니다. 텍스트, 이미지, 비디오 등의 요소를 포함할 수 있습니다.
  5. <h1>~<h6> : 제목을 나타내는 태그입니다. <h1>이 가장 큰 제목을 나타내며, <h6>이 가장 작은 제목을 나타냅니다.
  6. <p> : 단락을 나타내는 태그입니다. 일반적으로 텍스트를 담습니다.
  7. <a> : 하이퍼링크를 만드는 태그입니다. href 속성을 사용하여 링크 주소를 지정할 수 있습니다.
  8. <img> : 이미지를 삽입하는 태그입니다. src 속성을 사용하여 이미지 주소를 지정할 수 있습니다.
  9. <ul> : 순서 없는 리스트를 만드는 태그입니다. <li> 태그를 사용하여 각 항목을 나열할 수 있습니다.
  10. <ol> : 순서 있는 리스트를 만드는 태그입니다. <li> 태그를 사용하여 각 항목을 나열할 수 있습니다.
  11. <table> : 표를 만드는 태그입니다. <tr> 태그를 사용하여 행을 만들고, <td> 태그를 사용하여 셀을 만듭니다.
  12. <form> : 입력 양식을 만드는 태그입니다. <input> 태그를 사용하여 텍스트 상자, 라디오 버튼, 체크박스 등을 만들 수 있습니다.
  13. <div> : 웹 페이지의 레이아웃을 나누는 태그입니다. CSS와 함께 사용하여 웹 페이지의 스타일을 조정할 수 있습니다.
  14. <span> : 인라인 요소를 묶어 스타일을 적용할 때 사용하는 태그입니다. <div>와 비슷하지만, <span>은 작은 범위에 적용됩니다.
  15. <footer> : 웹 페이지의 바닥글을 담는 태그입니다. 저작권 정보, 연락처 등이 포함됩니다.
  16. <header> : 웹 페이지의 머리글을 담는 태그입니다. 일반적으로 로고,메뉴, 검색 폼 등이 포함됩니다. 16. <footer> : 웹 페이지의 바닥글을 담는 태그입니다. 저작권 정보, 연락처 등이 포함됩니다.
  17. <nav> : 웹 페이지의 주요 탐색 요소를 담는 태그입니다. 메뉴, 링크, 버튼 등을 포함할 수 있습니다.
  18. <article> : 독립적인 콘텐츠 블록을 나타내는 태그입니다. 뉴스 기사, 블로그 게시물 등의 글이 포함됩니다.
  19. <section> : 콘텐츠의 섹션을 나누는 태그입니다. <div>와 유사하지만, <section>은 주제나 콘텐츠의 논리적인 그룹을 나타냅니다.
  20. <aside> : 웹 페이지의 주요 내용과는 관련이 적은 보조 콘텐츠를 담는 태그입니다. 사이드바, 광고, 작은 기사 등이 포함됩니다.

이 외에도 HTML은 다양한 태그를 제공하고 있으며, 이를 적절하게 조합하여 웹 페이지를 구성할 수 있습니다.

 

 

반응형
저작자표시 비영리 변경금지 (새창열림)

댓글

티스토리툴바