HTML

HTML이란

wlals5855 2024. 7. 26. 12:09
HyperTextMarkup Language = 웹페이지를 만들기 위한 표준 마크업 언어

  • HyperText: 문서를 서로 '연결'해 주는 링크
  • Markup: 문서나 데이터의 텍스 내에 특정 태그나 코드를 삽입하여
    그 형식이나 구조, 스타일을 웹 브라우저에 지정하는 방식

태그(<>): 웹 브라우저가 각 부분을 구별하여 인식하기 위해 붙이는 꼬리표

 

웹문서 확장자: html

 

HTML 문서 기본 구조
  • Visual Studio Code의 'Emmet(에밋)' 기능: 웹 문서의 태그를 자동으로 입력해 주는 플러그인 기능

 단축키: !입력 후 Tap 버튼 클릭

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

 

<!DOCTYPE html>

  • <!DOCTYPE> 선언: 문서 유형을 지정
  • 모든 HTML 문서는 '문서 유형 선어 <!DOCTYPE html>으로 시작
  • HTML에서는 영어 대소 문자 구별 X
  • 문서유형 강조하는 <!DOCtTYPE html>은 주로 대문자 사용

 

<html>~<html>:HTML요소(HTML Element)

  • 웹 문서의 시작과 끝을 나타내는 태그
  • 웹 브라우저가 <html> 태그를 만나면 </html>까지 소스를 읽어 화면에 표시된다.

<head></head>: Head 요소(Head Element)

  • 문서의 메타데이터(metadata)를 포함
  • 웹 브라우저가 웹 문서를해서하는 데 필요한 정보를 입력하는 태그
  • 화면데 표시되지 않는다.
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
  • <meta> 태그
    메타 정보: 데이터에 관한 데이터
      ex) 자동타의 메타 정보: 차종, 회사, 가격, 연비

 

<body>~</body>: Body 요소(Body Element)

  • 실제로 웹 브라우저 화면에 나타나는 내용이다.
HTML Comments
  • 주석(Comments)은 브라우저에 표시되지 않지만 HTML소스 코드를 문서화하는데 도움이된다.
  • 시작 태그에는 느낌표(!)가 있지만 끝 태그에는 없다.
  • 주석은 브라우저에 표시되지 않지만 HTML 소스 코드를 문서화하는데 도움이된다.