P-Language/HTML

Web page 구성 기본tag

hannah_tianlan 2020. 4. 14. 07:06

1. 문서 형식 정의 tag (해당 버전: HTML 5)

출력할 웹 페이지의 형식을 브라우저에게 전달. 

 

<!DOCTYPE html>

 

2. html tag

html 태그는 모든 HTML 요소의 부모 요소. 웹페이지에 단 하나만 존재. 

모든 요소는 html 요소 내부에 기술해야 함 , <!DOCTYPE>는 예외. 

 

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>문서 제목</title>
  </head>
  <body>
    화면에 표시할 모든 콘텐츠는 이곳에 기술한다.
  </body>
</html>

 

■html은 글로벌 어트리뷰트를 지원 (lang 어트리뷰트 사용)

예) 한국어

 

<html lang="ko">

 

3. head tag

메타데이터를 포함하기 위한 요소. 웹페이지에 단 하나만 존재.

※메타데이터는 HTML 문서의 title, style, link, script에 대한 데이터로 화면에 표시되지 않음.

head요소에는 메타데이터 이외의 화면에 표시되는 일체의 요소를 포함 불가.

 

3.1 title tag

문서의 제목을 정의. 브라우저의 탭에 표시됨.

 

3.2 style tag

style 정보를 정의.

 

 <style>
      body {
        background-color: yellow;
        color: blue;
      }
    </style>

 

3.3 link tag

외부 리소스와의 연계 정보를 정의. html과 외부css파일 연계에 주로 사용.

 

<link rel="stylesheet" href="style.css">

 

3.4 script tag

client-side JavaScript를 정의함.

 

<script>
      document.addEventListener('click', function () {
        alert('Clicked!');
      });
    </script>

 

※ 결과물에서 클릭하면 PPU 뜸. coment : Clicked.

※ src 어트리뷰트를 사용시 외부 JavaScript 파일 로드 가능.

 

<script src="main.js"></script>

 

3.5 meta tag

description, keywords, author, 기타 메타데이터 정의에 사용.

브라저, 검색엔진등에 의해 사용됨.

 

3.5.1 브라우저가 사용할 문자셋을 정의 : charset

 

<meta charset="utf-8">

 

3.5.2 SEO(검색엔진 최적화)를 위해 검색엔진이 사용할 keywords 정의

 

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

 

3.5.3 웹페이지의 설명을 정의 : description

 

<meta name="description" content="Web tutorials on HTML and CSS">

 

3.5.4 웹페이지의 저자를 명기 : author

 

<meta name="author" content="hannah">

 

3.5.5 웹페이지를 30초마다 갱신 : refresh

 

<meta http-equiv="refresh" content="30">

 

4. body tag

HTML 문서의 내용을 나타냄. 메타데이터를 제외한 웹페이지 구성하는 대부분 요소가 body 내에 기술.