나의 공부 일기

HTML) HTML이 무엇인가? 본문

HTML/정리

HTML) HTML이 무엇인가?

곽병권 2023. 11. 9. 10:43
728x90

HTML 이란

Hyper Text Markup Language의 약자로 웹 페이지를 만들기 위한 표준 마크업 언어를 말합니다.

 

웹 페이지의 구조를 설명하며, 일력의 요소로 구성되어있고,

이 요소들은 브라우저에 콘텐츠를 표시하는 방법을 알립니다.

 

HTML요소는 제목, 단락, 링크 등과 같은 콘텐츠 조각에 레이블을 지정하고,

태그들(<>) 로 이루어져있습니다.

 

 

html문서를 작성할때 비주얼스튜디오코드를 대부분 사용하는데, 

비주얼스튜디오코드의 html파일에서 [ ! ]  를 누른 뒤 탭 키를 누르면

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
</body>
</html>

이렇게 기본적인 html문서의 형식이 나오게 됩니다.

 

  • <!DOCTYPE html>선언으로 이 문수가 HTML5 문서임을 정의합니다.
  • <html>는 HTML페이지의 루트 요소 입니다. 
    • 내부의 lang="en"은 이 html 문서의 언어를 설정해준것입니다.
  • <head>는 HTML페이지에 대한 메타 정보를 포함합니다.
    • <meta> 이는 각 웹페이지의 메타데이터를 정의하고 브라우저에게 페이지 표시 방법을 지시합니다.
      • charset="UTF-8" 을 사용하여 문자 인코딩 방식을 설정했습니다. 
      • 문자 인코딩이란 텍스트를 컴퓨터가 이해할 수 있는 이진 데이터로 변환하는 방법을 지정하는것 입니다.
      • "UTF-8"은 Universal Character Set(유니코드)의 한 형식으로, 거의 모든 언어와 문자를 지원해주며,            이를 통해 웹 페이지는 여러 언어로 작성된 텍스트를 올바르게 표시할 수 있습니다.
    • "name" 속성은 뷰 포트 설정의 목적을 지정합니다. 여기서 "viewport"는 뷰 포트 설정을 의미합니다.
    •  "content" 속성은 뷰포트 설정의 내용을 정의합니다. 여기서 "width=device-width"는 뷰포트의 너비를 기기의 실제 화면 너비와 일치하도록 설정하고, "initial-scale=1.0"은 페이지를 처음 로드할 때 확대/축소 비율을 1로 설정하여 웹 페이지를 기본 크기로 표시하도록 지시합니다. 이렇게 함으로써 모바일 기기에서 페이지가 올바르게 조절되고 사용자 경험이 향상됩니다.
  • <title>는 HTML 페이지의 제목을 지정해줍니다.(브라우저의 제목 표시줄 또는 페이지의 탭에 표시됩니다.)
  • <body>는 문서의 본문을 정의해주며, [표제,단락,이미지,하이퍼링크,표,목록] 등과 같이 보이는 모든 내용을 담습니다.
  • <h1>는 큰 제목을 정의합니다.
    • 이밖에도 <h2>~<h6> 까지 있으며 글자의 크기는 점점 작아집니다.
  • <p>는 제목에 대한 단락을 정의합니다.

 

 

HTML 요소란?

 

시작 태그, 일부 콘텐츠 및 종료 태그로 정의합니다.

< 태그 이름 >  내용 < /태그 이름 > 이런 식으로 정의합니다.

 

HTML요소는 시작 태그에서 종료 태그까지의 모든 것 입니다.

<h1> 여기부터~ /태그까지</h1> 

<p> 여기부터~ /태그까지 </p>

 

일부 HTML 요소에는 닫는태그가 없습니다.ex(<br>, <hr>...)

이러한 요소를 우리는 빈 요소라고 합니다.

 

 

 

여기까지 기본적인 html의 지식에 대해 정리해보았습니다.

 

다음에 추가로 html에 대해 한번 더 추가로 정리해보도록 하겠습니다.

728x90
저작자표시

'HTML > 정리' 카테고리의 다른 글

HTML) HTML속성(Attribute)  (1) 2023.11.13
HTML) HTML태그들  (0) 2023.11.10
'HTML/정리' Related Articles more