웹페이지를 구성하는 기본 태그

Back-end Developer·2022년 8월 18일
0

HTML5

목록 보기
4/10

1. 문서 형식 정의 tag

  • 출력할 웹 페이지의 형식을 브라우저에게 전달
  • 문서의 최상위에 위치, 대소문자 구분 X
// html5 기준
<!DOCTYPE html>

2. html tag

  • 모든 HTML 요소의 부모 요소
  • <!DOCTYPE> 제외한 모든 요소는 html 요소 내부에 기술
  • 글로벌 어트리뷰트 지원, 특히 lang 많이 사용
  • 웹페이지에 단 하나만 존재
<html lang="ko"></html>

3. head tag

  • 메타데이터(HTML 문서의 title, style, link, script)를 포함하기 위한 요소
  • 메타데이터 이외의 화면에 표시되는 요소 포함 불가
  • 웹페이지에 단 하나만 존재
<head>
  <title>문서 제목</title>
  <style>
    h1 {
      color: white;
    }
  </style>
  <link rel="stylesheet" href="style.css"></link>
  <script src="main.js"></script>
  <meta charset="utf-8">
  <meta name="keywords" content="HTML, CSS, JS">
  <meta name="description" content="Web tutorials">
  <meta name="author" content="John">
  <meta http-equiv="refresh">
</head>

3-1. title tag

  • 브라우저의 탭에 표시되는 문서의 제목 정의

3-2. style tag

  • HTML 문서를 위한 style 정보 정의
  • 외부 리소스(html, css 파일)과의 연계 정보 정의

3-4. script tag

  • 클라이언트 측에서 수행되는 JavaScript 정의
  • src 어트리뷰트로 외부 JS 파일 로드 가능

3-5. meta tag

  • 브라우저, 검색엔진에 사용되는 메타데이터 정의(description, keywords, author 등)
  • 메타데이터
    • charset : 브라우저가 사용할 문자셋 정의
    • keywords : SEO를 위해 검색 엔진이 사용할 keywords 정의
    • description : 웹페이지의 설명 정의
    • author : 웹페이지의 저자 정의
    • refresh : 웹페이지를 Refresh

4. body tag

  • HTML 문서의 내용을 나타냄
  • 메타데이터를 제외한 웹페이지를 구성하는 대부분의 요소
  • 웹페이지에 단 하나만 존재
<body>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</body>


👨‍🏫 참고

https://poiemaweb.com/html5-tag-basic

profile
TIL & Project Retrospective

0개의 댓글