HTML 기본 개념

◆HTML 기본 구조

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>

◆html 버전 선언

<!DOCTYPE html>

해당 문서가 html5 버전으로 작성되었음을 선언한다.

◆head 태그

<head>

태그는 문서의 머리를 나타내는 태그이다, 브라우저 화면에 직접적으로 보이지 않으며, 숨은 데이터를 정의하는 태그들이 선언된다. 주석은  처럼 작성한다.

◆head 태그 내부에 자주 사용되는 태그

<title>제목</title>

웹페이지의 제목을 지정하는 태그이다. 웹페이지 본문에는 보이지 않으며, 브라우저의 탭 등에서 확인 할 수 있다. 유저에게 문서의 제목을 알리는 용도 뿐만 아니라, 검색 엔진 등에서 가장 크게 보여지는 텍스트이므로 페이지의 특성을 드러내는 제목을 작성하는 것이 중요하다.

<meta>

태그는 웹 페이지의 보이지 않는 정보를 제공하는데 쓰이는 태그이다. 페이지의 설명 요약, 핵심 키워드, 제작자, 크롤링 정책 등 수많은 정보를 제공할 수 있다. 닫는 태그가 없는 태그로, 태그의 속성을 통해 정보를 제공한다.

●seo

<meta name="description" content="문서에 대한 설명"> 
<meta name="subject" content="문서에 대한 제목"> 
<meta name="keywords" content="문서에 대한 핵심어">

SEO는 Search Engine Optimization의 약자로, 검색 엔진 최적화를 의미한다.
<meta /> 태그를 이용하여 description, keywords, author, subject, classification 등의 정보를 표기할 수 있으며, 검색 엔진은 이런 정보를 적극적으로 활용한다.

●IE Edge

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

Internet Explorer(IE) 10 이하 버전은 문서를 읽을 때 쿼크모드 혹은 IE7모드를 사용해서 웹페이지를 표시한다. 사용자가 최근 브라우저를 사용하고 있어도 웹페이지가 적절하게 렌더링되지 않을 수 있는데, 이 때 <meta> 태그를 이용하여 최신 엔진으로 페이지를 렌더링 하도록 설정할 수 있다.

●Chrome Frame

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

IE에서 크롬의 엔진을 사용하게 하는 크롬 프레임이라는 플러그인이 있는데, 이 플러그인이 설치되어 있을 때 사용하게 하려면 다음과 같이 작성한다.

●한글 인코딩

<meta charset="utf-8">

최신 IDE(통합 개발 환경)을 사용한다면 , 기본적으로 인코딩 방식이 UTF-8 (한글)로 설정이 되어있다. 하지만 Windows 운영체제는 기본 인코딩값이 여전이 euc-kr 방식이기 때문에 UTF-8로 인코딩 되었음을 선언해야 한다.

●XHTML의 경우

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

●반응형 웹을 위한 viewport

viewport는 스마트기기 상에서, 최초에 페이지를 로딩할 때 확대정도, 최대 확대비율, 최소 확대비율등을 다루는 meta data에 속하는 속성이다. 차후 다룬다.

<link>

CSS를 별도의 파일로 저장 후 HTMl 문서 내에서 불러올 수 있다(Import방식). 여러 웹페이지에서 공통적인 CSS를 참조 할 때 편하다. 문서별로 규격과 스타일의 분리를 위해 CSS를 별도의 파일로 분리하여 <link>태그로 불러오는것이 좋다.

<link rel="stylesheet" href="경로.css" type="text/css">

<style>

CSS를 문서내부에 기술한다(Embedded방식). 주석은 /* 주석내용 */ 처럼 작성한다.

●CSS embedded 방식, import 방식

css(style)를 head 태그안의

<style></style>

태그 내부에 기술하면 embedded 방식이고 ,

<h1 style="color:red">

이런식으로 html 태그안에서 style이라는 속성을 주고 그안에 css코드를 기술한다면 in-line 방식이다.
위와 마찬가지로 <link>태그로 별도의 css파일을 불러올 경우 import방식 이다.

<script></script>

스크립트를 정의하는 공간으로, 차후 다룬다.

◆body 태그

<body>

태그는 문서의 몸통을 나타내는 태그이다.

<head>

태그와는 대조적이며, 브라우저화면에 보이는 것들이 주로 들어간다.

◆body 태그에 자주 사용되는 태그

<br>
<div>
<p> 
<span> 
<form> 
<h1> 
<a> 
<img> 
<table> 
<ul> 
<li> 
<nav>

저작자표시 비영리

'HTML, CSS, Layout, Grid' 카테고리의 다른 글

반응형웹의 가변 그리드 , max 와 min (0)	2021.09.09
반응형 웹의 미디어 쿼리 (Media Query) 와 Viewport (0)	2021.09.09
CSS 자주 사용하는 속성 (0)	2021.09.09
CSS 정의 및 적용법 (0)	2021.09.09
HTML 태그 정리 (0)	2021.09.09