HTML Refernce
2020. 10. 13. 12:06ㆍHTML
HTML
HTML( HyperText Markup Language )은 웹 페이지를 만들기 위한 언어입니다.
- HT = HyperText : 문서와 문서를 연결
- M = Markup : 마크업, 태그
- L = Language : 언어
- HTML이란? 문서와 문서로 연결된 태그 언어를 말합니다.
태그(Tag)
태그는 정보를 정의하는 방식을 의미합니다.
- 태그는 열린태그와 닫는태그가 있습니다.
- 닫는태그에는 "/" 있어야 합니다.
- 닫는태그가 필요 없는 것도 있습니다. (일반 적인 태그는 태그 처럼 시작하면 태그 처럼 닫아주어야 합니다. 하지만 br 등의 일부 태그는 /br 처럼 닫지 않는 경우가 있는데, 이를 닫는 태그가 없는 태그라 합니다. <br>,<img>,<meta>,<link>,<input>,<hr> 등의 태그는 닫는 태그가 없는데, 그 이유는 태그 내부에 넣을 값이 없기 때문입니다.)
- HTML5에서는 "/"가 생략이 가능합니다.
블록 요소/인라인 요소(Block/Inline)
블록 요소는 박스, 인라인 요소는 텍스트를 의미합니다.
- 블록 엘리먼트(Block Element)
- 독립된 박스 영영으로, 한 줄에 하나에 블록요소만 표현 할 수 있습니다.
- 블록요소에는 블록요소 인라인요소를 포함 할 수 있습니다.
- <div>,<p>,<h1>~<h6>,<ul>,<li>
- 인라인 엘리먼트(Inline Element)
- 독립된 텍스트 영역으로 , 한 줄에 여러개의 인라인요소를 표현 할 수 있습니다.
- 인라인요소에는 블록요소가 포함 될 수 없지만, 인라인요소는 포함 할 수 있습니다.
- <span>,<a>,<strong>,<em>,<img>
DTD (Document type Declaration) 선언
웹 페이지를 제작하기 위해서는 웹 문서 형식 유형을 설정하여야 합니다.
- 독타입을 설정하지 않거나 잘못 설정하면 브라우저에 따라 화면이 다르게 나오거나 렌더링이 달라지기 떄문에 독타입을 설정해야 합니다.
- <!-- HTML5 -->
- <!DOCTYPE HTML>
- <!-- HTML 4.01 Strict -->
- http://www.w3.org/TR/html4/strict.dtd">
- <!-- HTML 4.01 Transitional -->
- http://www.w3.org/TR/html4/loose.dtd">
- <!-- HTML 4.01 Frameset -->
- http://www.w3.org/TR/html4/frameset.dtd">
- <!-- XHTML 1.0 Strict -->
- http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <!-- XHTML 1.0 Transitional -->
- http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!-- XHTML 1.0 Frameset -->
- http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
언어 속성 설정
컨텐츠의 언어를 인식하고 언어 정보를 추출하는데 사용합니다. 미리 언어를 설정하면 효율성이 더 좋아집니다.
- <!-- HTML5 -->
- <html lang="ko">
- <!-- HTML4 -->
- <html lang="ko" xml:lang="ko" xmlns= "http://www.w3.org/1999/xhtml">
문서 정보 설정
웹 문서의 필요한 정보를 제공합니다.
- <!--html5 언어설정-->
- <meta charset="UTF-8">
- <!--html4 언어설정-->
- <meta http-equiv="Content-Language" content="text/html; charset=UTF-8">
- <!--웹 문서에 대한 제작자 설정-->
- <meta name="author" content="kimkyoungmin">
- <!--웹 문서에 대한 설명 설정-->
- <meta name="description" content="사이트 설명">
- <!--웹 문서에 대한 키워드 설정-->
- <meta name="keywords" content="키워드">
'HTML' 카테고리의 다른 글
| HTML Description (0) | 2020.10.13 |
|---|