[HTML] HTML 문서의 틀(head,body tag) & Meta Data

티스토리 뷰

컴퓨터공학 및 코딩/HTML,CSS

[HTML] HTML 문서의 틀(head,body tag) & Meta Data

CoShin 2020. 5. 12. 00:41

1. html tag

<!DOCTYPE html>  	//브라우저에게 HTML5 파일임을 알린다.

<html lang="en">    // HTML의 모든 내용은 HTML tag의 자식 요소로 사용한다. lang 속성을 이용하여 언어를 설정해준다

...

</html>

참고 : 언어를 표현하기 위한 약어는 ISO 639-1 을 따른다.

한국어는 kr이 아닌 ko임에 주의!

https://ko.wikipedia.org/wiki/ISO_639-1_%EC%BD%94%EB%93%9C_%EB%AA%A9%EB%A1%9D

ISO 639-1 코드 목록 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. ISO 639는 언어 분류를 위해 사용되는 표준화된 명명법이다. 각 언어는 2글자(639-1) 및 3글자(639-2, 639-3)로 할당된다. 어족 ISO 언어 이름 네이티브 이름 639-1 639-2/T 639-2/B 639-3 Northwest Caucasian Abkhazian аҧсуа бызшәа, аҧсшәа ab abk abk abk Afro-Asiatic Afar Afaraf aa aar aar aar In

ko.wikipedia.org

2. head tag & body tag

- html 문서에는 head tag 와 head tag는 한 번씩만 들어가야 한다.

- head tag 에는 문서의 정보가 들어간다.

- body tag 에는 문서의 구조가 들어간다.

<!DOCTYPE html>
<html lang="ko">

    <head>
	문서의 정보
    </head>

    <body>
        문서의 구조
    </body>

</html>

(1) head tag

<title> : 문서의 제목
<meta> : 기타 정보
<style> : 스타일 직접 입력
<link> : 외부의 파일을 연결

<!DOCTYPE html>
<html lang="ko">

    <head>
	    <title> 문서의 제목 </title>
        <meta charset="UTF-8">
        <style>
        	body{
                  margin:0;
                  padding:0;
                }
        </style>
        <link rel="stylesheet" href=./"main.css">
    </head>

    <body>
        문서의 구조
    </body>

</html>

3. Meta tag

https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta

: 문서 레벨 메타데이터 요소

HTML meta 요소는 base, link, script, style, title과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.

developer.mozilla.org

(1) charset : 문자 인코딩 방식을 지정, 일반적으로 UTF-8 사용

<meta charset="UTF-8">

(2) content : http-equiv 또는 name 속성 중 어떤 것이 사용되느냐에 따라 해당 속성의 값을 갖습니다.

(3) http-equiv : HTTP 헤더의 이름을 값으로 가질 수 있다. 이 속성의 값으로 서버나 사용자 에이전트의 작동박식을 변경할 수 있는 지시를 정의 할 수 있다.

※ 인터넷 익스프럴러를 지원한다면 다음과 같은 코드를 추가해준다.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

(4) name / content : 기타 정보를 담을 수 있다, name="정보의 종류" content="정보의 내용"

- author 와 description 은 작성자와 페이지의 요약을 나타낸다.

- viewport를 통하여 랜더링 할 영역을 지정하여 반응형을 지원 할 수 있다.

<meta name="author" content="coshin">
<meta name="description" content="page of coshin">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

(5) base : link tag에서 연결 할 기본 폴더를 지정한다.

4. link tag

https://developer.mozilla.org/ko/docs/Web/HTML/Element/link

: 외부 리소스 연결 요소

HTML link 요소는 현재 문서와 외부 리소스의 관계를 명시합니다.

developer.mozilla.org

- link 태그는 rel속성을 필수적으로 갖는다.

- href 태그를 이용하여 절대경로/상대경로를 지정하여 연결할 파일을 지정 할 수 있다.

'컴퓨터공학 및 코딩 > HTML,CSS' 카테고리의 다른 글

[HTML] Block & Inline 요소 (0)	2020.05.11

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

코딩하는 신학생 인스타그램

TAG more

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

글 보관함

코딩하는 신학생의 넋두리

티스토리 뷰