학습자료
ofcourse 바로가기
HTML 기본구조
<!docutype html>
<head>
코드
</head>
<body>
코드
</body>html 버전 선언
<!docutype html>
해당 문서가 html5 버전으로 작성되었음을 선언한다.
head 태그
<head>
태그는 문서의 머리를 나타내는 태그이다, 브라우저 화면에 직접적으로 보이지 않으며, 숨은 데이터를 정의하는 태그들이 선언된다. 주석은 <!--주석내용--> 처럼 작성한다.
head 태그 내부에 자주 사용되는 태그
<title>제목</title>
웹페이지의 제목을 지정하는 태그이다. 웹페이지 본문에는 보이지 않으며, 브라우저의 탭 등에서 확인 할 수 있다. 유저에게 문서의 제목을 알리는 용도 뿐만 아니라, 검색 엔진 등에서 가장 크게 보여지는 텍스트이므로 페이지의 특성을 드러내는 제목을 작성하는 것이 중요하다.
<meta>
태그는 웹 페이지의 보이지 않는 정보를 제공하는데 쓰이는 태그이다. 페이지의 설명 요약, 핵심 키워드, 제작자, 크롤링 정책 등 수많은 정보를 제공할 수 있다. 닫는 태그가 없는 태그로, 태그의 속성을 통해 정보를 제공한다.
seo
SEO는 Search Engine Optimization의 약자로, 검색 엔진 최적화를 의미한다.
<meta /> 태그를 이용하여 description, keywords, author, subject, classification 등의 정보를 표기할 수 있으며,
검색 엔진은 이런 정보를 적극적으로 활용한다.
<meta name="description" content="문서에 대한 설명">
<meta name="subject" content="문서에 대한 제목">
<meta name="keywords" content="문서에 대한 핵심어">IE Edge
Internet Explorer(IE) 10 이하 버전은 문서를 읽을 때 쿼크모드 혹은 IE7모드를 사용해서 웹페이지를 표시한다. 사용자가 최근 브라우저를 사용하고 있어도 웹페이지가 적절하게 렌더링되지 않을 수 있는데, 이 때 <meta> 태그를 이용하여 최신 엔진으로 페이지를 렌더링 하도록 설정할 수 있다.
<meta http-equiv="X-UA-Compatible" content="IE-Edge">Chrome Frame
IE에서 크롬의 엔진을 사용하게 하는 크롬 프레임이라는 플러그인이 있는데, 이 플러그인이 설치되어 있을 때 사용하게 하려면 다음과 같이 작성한다.
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">한글 인코딩
최신 IDE(통합 개발 환경)을 사용한다면 , 기본적으로 인코딩 방식이 UTF-8 (한글)로 설정이 되어있다. 하지만 Windows 운영체제는 기본 인코딩값이 여전이 euc-kr 방식이기 때문에 UTF-8로 인코딩 되었음을 선언해야 한다.
<meta charset="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>등이 있으며, 차후 다룬다.
