HTML 과 친해지기 (2)

유수종·2025년 1월 22일

프론트엔드 스터디

목록 보기
2/12

저번시간에서 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 파일을 생성한 뒤 !+Enter 커맨드를 입력하면 기본적인 HTML 구조가 생성됩니다.

  • DOCTYPE : 문서의 타입을 의미
  • html : html 문서의 시작과 끝을 정의
    (lang은 html 문서의 언어를 의미. 한국어는 "ko")
  • head : 웹페이지의 보이지 않는 부분의 정보를 담당
    ( eg. title 태그 ...)
  • body : 웹페이지의 실제 문서 내용을 담당
  • <!-- 주석 --> : 주석은 꺾쇠 안에 !-- 를 사이에 넣어서 작성합니다.
  • ctrl+/ : 선택한 부분을 주석처리 합니다.
    (윈도우 커맨드 한정이며 VS code 환경 이외에도 지원되는지는 모르겠습니다)

0개의 댓글