HTML이란?
- Hypertext Markup Language
- 정적 언어로 웹의 튼튼한 구조(Semantic)를 만들때 사용
- 요소(Element), 속성(Attribute) 을 이용하여 구성
요소 (Element)
- 요소는 가독성을 위하여 소문자로 작성
- Opening tag, Closing tag, Content 를 통틀어 지칭
- 요소는 Nesting이 가능하다
- 블록 레벨 요소(Block-level elements) 와 인라인 요소(Inline elements)
- 빈 요소(Empty elements) 는 단일 태그(Single tag)를 사용 (Opening tag)
속성 (Attribute)
- 태그 뒤에 스페이스를 두고 작성
- 속성과 속성간에도 스페이스를 두고 작성
- 속성 이름 다음엔 = 을 작성
- 속성 이름에 대한 값을 작성, 값은 따옴표로 감싸서 작성
- 따옴표 작성시엔 큰/작은 따옴표로 시작했다면 마무리도 같은 따옴표로 작성
- rel = “icon” href = “/경로/파일명.ico” 와 같이 사용한다
전역 속성 (Global attributes)
- 모든 요소에서 공통으로 사용 가능한 속성 (일부 효과 없는 경우 있음)
- 비표준 요소
<foo>와 같은 경우에도 사용 가능 - 대표적으로 title, class, id, lang, style 등이 있다
그 외
- accesskey, contenteditable, data- *,
- dir, draggable, dropzone, hidden, tabindex 등
문서의 구조(Anatomy)
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
29
30
31
32
33
34
35
36
유효한 문서 형식을 나타내는 문장
<!DOCTYPE html>
전체 페이지의 콘텐츠를 포함하는 기본 요소
<html></html>
유저에게는 보이지 않는 노출 될 키워드, 홈페이지 설명, CSS 등을 포함
<head></head>
head 안에는?
<title></title> 브라우저의 탭에 보여지는 부분
<link></link>
속성 rel = 값 "stylesheet", "icon"... ,
속성 href = 값 "경로",
속성 media
<style></style> 스타일의 내부 작성시 이용
<script></script>
defer
속성 src = 값 "경로",
JS 내용을 그대로 작성
<meta></meta> charset="UTF-8" 문자 인코딩 방식
<meta></meta>
name ="author", "description", "keywords", "viewport","X-UA-Compatible"
content = "이름" , "페이지 설명", "키워드", "화면 정의", "IE=edge"
<meta property="og:type" content="website"> Open Graph
<meta property="twitter:card" content="summary"> Twitter Card
<meta property="twitter:title" content="">
<body></body>
텍스트, 이미지, 비디오, 오디오, 게임 등 페이지에 표시되는 모든 콘텐츠를 포함
공백
- 하나 이상의 공백은 하나의 공백으로 인식
블럭요소 & 인라인 요소
- 블럭 요소
- 가로를 다 사용하는 요소(줄바꿈이 일어난다)
- 높이와 너비를 가질 수 있다
- 인라인 요소
- 높이와 너비를 지정할 수 없다
- 콘텐츠의 영역만을 넓이로 가진다
- 가로 한 줄을 다 차지하지 않는다
- text-align이 적용된다
- line-height로 줄의 높낮이를 조절한다
블럭 요소
1
2
3
4
5
6
<address>, <article>, <aside>, <blockquote>,
<canvas>, <dd>, <div>, <dl>, <fieldset>,
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>,
<header>, <hgroup>, <hr>, <noscript>, <ol>,
<output>, <p>, <pre>, <section>, <table>, <ul>
<figure>, <footer>, <form>,
인라인 요소
1
2
3
4
5
6
<a>, <abbr>, <acronym>, <audio>, <b>, <bdo>, <big>,
<br/>, <button>, <cite>, <code>, <dfn>, <em>,
<figcaption>, <i>, <img>, <input>, <kbd>, <label>,
<map>, <object>, <q>, <samp>, <small>, <script>,
<select>, <span>, <strong>, <sub>, <sup>,
<textarea>, <tt>, <var>, <video>