• HTML 구조
  • DTD(Document Type Definition) 선언
  • meta
    • 비표준 IE 조건부 주석문
    • 언어 인코딩 설정
    • 타이틀
    • 모바일 최적화 환경 설정
    • 검색 엔진 최적화 SEO (Search Engine Optimization)
    • MIME Type (Multipurpose Internet Mail Extensions)
  • HTML 목록(Ordered List, Unordered List, Definition List)
  • HTML 폼
  • HTML5 MARKUP

HTML 구조

<html>
<head>
<!-- HTML5 이전에 사용되던 코드 -->
<!-- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> -->
<!-- HTML5에서는 아래와 같이 단축된 코드를 사용한다. -->
<meta charset="UTF-8">
<title>웹 문서의 제목</title>
</head>
<body></body>
</html>

HTML5 DTD 선언

<!DOCTYPE html>
  <html lang="ko-KR" dir="ltr">
  <html>
    <head>...</head>
  </html>
  • 문서 유형 정의(DTD, Document Type Definition)를 문서 최상단에 입력하여 웹 브라우저에게 현재 문서가 웹 표준 문서임을 알린다. (표준 모드로 동작)
  • lang : 언어 설정. 여러번 사용 가능하며, 스크린 리더기가 해당 lang에 맞게 읽는다
  • dir : 문서를 읽는 방향 설정 (생략 가능)
  • ltr: Left to Right (왼쪽에서 오른쪽-기본값)
  • rtl: Right to Left (오른쪽에서 왼쪽)
  • DTD 위에 주석이 올 경우 발생하는 문제점: DTD 위에 코드 또는 주석이 존재할 경우 올바르지 않은 DTD로 간주하여 웹 브라우저는 비표준 모드로 동작하게 됨을 알 수 있다. 고로 DTD 위에는 어떤 텍스트, 주석, 코드 등을 사용하지 않는 것이 좋다
  • DTD 없는 문서는 쿼크 모드(Quirks mode) 비표준으로 인식. ie5.0이전 브라우저 인식

비표준 IE 조건부 주석문

  • IE6 ~ IE9 까지만 해석 가능
  • 특정 조건에서 주석이 아니라, 코드문으로 해석됨
  • CSS 브라우저 핵이 아닌, 필터링 방법에 사용. IE 브라우저라면? 코드로 해석해서 처리
<!--[if IE 6]><html lang="ko-KR" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="ko-KR" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="ko-KR" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="ko-KR" class="ie9"><![endif]-->
<!--[if !IE]><!--><html lang="ko-KR"><!--<![endif]-->

meta

  • meta 요소는 브라우저 또는 검색 로봇에 정보를 전달
<head>
   <!-- 비표준 IE 호환성 보기 모드 설정 -->
   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
   <!-- 언어 인코딩 설정 -->
   <meta charset="UTF-8">
   <title> 웹페이지 제목 </title>
   <!-- 모바일 최적화 환경 설정 -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- 검색엔진 최적화 SEO -->
   <meta name="description" content="프론트엔드 개발을 위한 코딩 가이드입니다.">
   <meta name="keywords" content="프론트엔드,개발,html,css,javascript,sass,접근성">
   <meta name="author" content="제작자">
   <!-- 외부 스타일 문서 파일을 호출(링크, 연결) -->
   <link rel="stylesheet" href="./css/style.css">
 </head>

비표준 IE 호환성 보기 모드 설정

<meta http-equiv="X-UA-Compatible" content="IE=Edge">
  • 사용자가 사용하는 IE 브라우저 버전으로 렌더링. (이 코드를 쓰지 않으면 IE7로 랜더링.)
  • http-equiv 서버의 셋팅 값. 클라이언트 셋팅 값
  • X 미지수 X. 비표준을 나타내며, IE 브라우저 때문에 사용 ‘X’를 사용한다. ‘X’를 쓰지 않으면 사용자 브라우저가 IE9, 10, 11을 사용해도 IE7모드로 동작하게 된다

언어 인코딩 설정

<meta charset="UTF-8">
  • EUC-KR 한국 전용 (다른 언어 인식 못함)
  • UTF-8 유니코드 8bit (모든 언어 인식)

title

<title> 웹페이지 제목 </title>
  • 웹브라우저의 제목줄에 표시
  • SEO(검색 엔진 최적화, Search Engine Optimization) 용이
  • 웹접근성 측면에서 좋으며, 스크린 리더가 제일 먼저 읽는다
  • 유니크하게 작성 예) 공지사항 게시물의 제목이 들어가면 제일 좋다 (한 사이트에 2번이상 나오면 좋지 않다)

모바일 최적화 환경 설정

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • 데스크탑, 모바일, 모바일 패드 등 최적화

검색 엔진 최적화 SEO(Search Engine Optimization)

<meta name="description" content="프론트엔드 개발을 위한 코딩 가이드입니다.">
<meta name="keywords" content="프론트엔드,개발,html,css,javascript,sass,접근성">
<meta name="author" content="제작자">
  • description 200 ~ 300자 내외 작성
  • keywords 10개 내외 작성

MIME Type (Multipurpose Internet Mail Extensions)

<style type="text/css"> ... </style>
<script type="text/javascript"> ... </script>
  • type 생략 가능