DOCTYPE(DTD, 버전 지정)
DOCTYPE은 마크업 언어에서 문서 형식을 정의합니다. 이는 웹 브라우저에 우리가 제공할 HTML 문서를 어떤 HTML 버전의 해석 방식으로 구조화하면 되는지를 알려줍니다. (HTML은 크게 1, 2, 3, 4 , X-, 5 버전이 있습니다)
현재의 표준 모드는 HTML5입니다
<!-- HTML 5 -->
<!-- XHTML 1.0 Transitional -->
TITLE
HTML 문서의 제목을 정의
웹 브라우저 상에서 탭 부분에 나타나집니다.
<head>
<title>티스토리</title> </head>META(웹 페이지의 정보)
HTML 문서에 관한 정보를 입력하는 곳입니다
표시방식(인코딩), 제작자, 내용, 키워드 등을 입력합니다
<head>
<meta charset="UTF-8">
<meta name="author" content="홍길동">
<meta name="description" content="우리 사이트가 최고!">
</head>
charset
- 문자인코딩 방식
- UTF-8, EUC-KR 등
name
- 검색엔진 등에 제공하기 위한 정보의 종류(메타 데이터)
- author(제작자), description(사이트에 대한 설명), keywords, viewport 등
content
- name이나 http-equiv 속성의 값을 제공
LINK(CSS 불러오기)
외부 문서를 연결할 때 사용합니다
특히 HTML 외부에서 작성된 css문서를 불어와 연결할 때 사용합니다
<head>
<link rel="stylesheet" href="./css/main.css">
<link rel="icon" href="./favicon.png">
</head>
rel(필수)
- 현재 문서와 외부 문서와의 관계를 지정
- stylesheet, icon 등
href
- 외부 문서의 위치(경로)를 지정
STYLE
css를 외부 문서에 작성하는 것이 아닌 HTML문서 내부에 작성할 때 사용
<style> img { width: 100px; height: 200px; } p { font-size: 20px; font-weight: bold; } </style>
SCRIPT
HTML 문서에서 js문서를 불러올 때 사용합니다
<!-- 불러오기 -->
<script src="./js/main.js"></script>
<!-- 작성하기 -->
<script>
function windowOnClickHandler(event) {
console.log(event);
}
window.addEventListener('click', windowOnClickHandler);
</script>
'Tech Memo' 카테고리의 다른 글
| 페이스북 공유 페이지 만들기 (0) | 2019.08.08 |
|---|---|
| css 공부 노트 (0) | 2019.07.09 |
| 웹에서 사용하는 이미지 (0) | 2019.05.23 |
| 웹표준과 웹 접근성 (0) | 2019.05.23 |
| 빠르게 훑어보는 웹 개발 트렌트 (0) | 2019.05.12 |