HTML - 기본 구조, 태그

프론트엔드 개발/HTML CSS

HTML - 기본 구조, 태그

snowman95 2021. 5. 26. 00:50

728x90

기본 구조

<!DOCTYPE html> : 현재 문서는 HTML5 문서임을 명시
<html>          : HTML 문서의 root 요소를 정의
  <head>        : HTML 문서의 metadata 정의
    <title>     : HTML 문서의 제목 정의 (= 웹 브라우저 툴바표시,즐겨찾기 제목,검색엔진 결과제목)
    </title>
  </head>
  
  <body>        : 웹 브라우저 통해 보이는 내용
    <h1> </h1>  : 제목(heading)
    <p> </p>    : 단락(paragraph)
  </body>
</html>

<html> 태그

HTML 문서의 시작과 끝을 알린다.

<html lang="ko">

HTML 문서에서 사용할 언어 지정한다.
검색 사이트에서 특정 언어로 제한하여 검색할 때 이것을 참고함.

<html lang="ko">          : HTML 문서에서 사용할 언어 지정.

<head> 태그

이 영역의 내용은 대부분 화면에 나타나지 않음.
웹 브라우저에게 필요한 정보 알려주는 용도

<meta> 태그

웹 문서와 관련된 정보 지정할 때 사용
<meta charset="UTF-8">
화면에 글자 표시할 때 어떤 인코딩 사용할지 지정
웹 서버는 영어가 Default 이므로, 한국어 표시할 때 지정해주어야 함.
<meta name="keywords" content="문서 키워드">
<meta name="description" content="문서 설명">
<meta name="author" content="제작자">
검색 엔진에서 참고하는 문서 키워드, 설명, 제작자 정보 등 입력가능

<title> 태그

웹 문서의 제목
검색 엔진, 방문자가 어떤 문서인지 유추가능
즐겨찾기 추가 시 제목이 이것으로 들어감

<body> 태그

웹 브라우저에 표시할 내용 입력

HTML 파일 생성

.html 확장자를 붙여서 파일 생성한다.

VS Code 에서 !만 치면 기본 구조를 자동 완성 해준다.

HTML 시맨틱 태그

이름만 봐도 의미 알 수 있어서 시맨틱(의마가 통하는) 태그라고 한다.
반드시 사용할 필요는 없지만, 구조가 정확히 나눠지고 정확한 정보 전달을 할 수 있다.

종류

<header> 헤더 영역
주로 검색 창, 사이트 메뉴 등을 삽입한다.
사이트 전체의 헤더 영역도 있고, 특정 영역의 헤더 영역도 존재하며
<head>와는 완전히 다른 것임.
<nav> 내비게이션 영역
주로 다른 문서로 연결하는 링크를 만든다.
어느 영역에든 포함가능, 독립적으로 써도 된다.
<nav>를 여러 개 사용시 id속성 지정하여 다른 스타일 적용 가능하다.
<main> 본문 영역
웹 문서에서 핵심이 되는 본문을 담는 곳이다.
웹 페이지마다 다르게 보여지는 내용으로 구성한다. 웹 문서마다 단 1번사용 가능
<article> 독립적 콘텐츠
블로그 포스트처럼 독립된 콘텐츠를 쓸 때 사용
<section> 콘텐츠 영역
콘텐츠를 묶는 용도로 사용한다.
단순히 스타일 적용을 위해 묶는 거라면, <div> 태그를 사용한다.
<aside> 사이드 바 영역
본문 내용 외에 왼/오른/아래 영역에 사이드 바 만들 수 있다.
<div>
div는 divison의 줄임말으로, 옛날에 시멘틱 태그 없을 때 영역 구분용으로 사용해왔다.
소스를 묶어서 스타일 적용을 시켜주는 용도로 사용된다.
<div id=" ">
<div class=" ">
※ id는 문서 내 1번만 사용가능, class는 여러 번 사용 가능함
저 id, class 명으로 css 스타일 적용해주는 것임.

저작자표시 동일조건