HTML 이란?
Hypertext Markup Language
- 하이퍼텍스트를 가장 중요한 특징으로 하는 마크업이라는 형식을 가진 언어
- 웹을 이루는 가장 기초적인 구성 요소
- 웹 페이지를 만들기 위한 표준 마크업 언어
( 웹 페이지에 표시되는 글, 이미지 외에 다양한 콘텐츠를 표시하기 위함 )
Hypertext = link
웹 페이지를 다른 페이지로 연결하는 링크, 링크는 웹의 근본적인 속성
HTML 구성요소
- 태그 (tag)
어떤 표시를 하기위해 붙은 꼬리표. 웹문서를 구성하는 명령어. 정보를 정의 하는 형식 보통 꺾새 안에있는 것들이 태그 이다. 요소(Elements)의 일부로 시작 태그와 종료 태그 두종류가 있다. 시작 태그는 요소를 시작하는 것을 알리고 종료 태그는 요소를 끝내는 것을 알려준다. 일부 태그 중에는종료 태그가 없는 것도 있다. 열리는 태그가 있으면 닫히는태그가 있어야 한다. 닫히는 태그가 필요없는 경우도 있다.특정 영역이 정보로써 어떤 가치가 있음을 검색 엔진에 알려준다. 태그의 역할은 태그 사이에 있는 데이터의 정보 중요도를 나타낸다.
ex)
일반적인 태그 ＜p＞＜/p＞
닫히는 태그가 없는경우 ＜br /＞, ＜hr /＞, ＜img /＞
- 요소 (Element)
HTML에서 요소는 시작태그와 종료태그, 그 사이의 내용 (속성 속성값 포함)으로 구성이 된다. 이 요소는 블록요소와 인라인 요소 두가지로 나뉜다. 이 두가지는레이아웃을 결정짓는 핵심적인 역할을 한다.
ex)
<p class="content"> 내용도 요소에 포함. </p>-
빈 요소 (Empty Element) : 위에 태그 설명에서 쓰여진 ＜br /＞, ＜hr /＞ 은 빈요소라고도 할수있다. 내용없이 어떤 구조적인 기능만 하게끔 만들어진 요소이다. 뒤에 /는 생략이 가능하다. ( XHTML에선 필수 )
-
블록 요소 (Block Element) : 블록 요소는 모든 인라인 요소를 포함할 수 있고 다른 블록 요소도 일부 포함 할 수 있다. 기본적으로 너비와 높이를 가질 수 있고 직사각형의 형태가 된다. 세로로 쌓이게 되고 줄바꿈이 이루어지며 margin,padding 값을 가질수 있다.
ex) 시멘틱 태그, h1~h6, div, list, p 태그 등
- 인라인 요소 (Inline Element) : 인라인 요소는 항상 블록 요소 안에 포함되어 있으며 인라인 요소안에 다른 인라인요소가 포함될 수 있으나 블록 요소는 포함할수 없다. 기본적으로 요소가 끝나는 지점까지 넓이를 가지게 된다. 너비와 높이값을 가질 수 없다. 가지게 될라면 dispaly: block; 속성을 써줘야 한다.
인라인요소는 line-height로 높낮이 조절이 되며 text-align으로 정렬시킬수 있다. 가로로 쌓이며 줄바꿈이 없다.
ex) a, span, strong, sub 등
- 속성 (attribute)
태그를 보조하는 명령어 태그 안쪽에서 작동한다. 속성은 열고 닫는 태그와 빈 태그에서 모두 사용 된다. 속성은 태그의 문법 명령어가 다루지 못하는 명령들을 보조적으로 담당한다. 제목이나 문단의 글씨 크기 배경색 등을 바꾸는 CSS 효과를 담당하는 것도 속성이다.
ex) style, width, height, alt 등
- 속성값 (Attribute Values)
속성뒤에 ""안에 넣어줄 내용들을 속성값이라고 한다. 속성 태그로 기본 태그의 성질을 구체적이고 온전하게 드러내 주고 꾸며 주는 요소의 완성을 결정 짓는 값
HTML 문서 기본 구조
- 독타입 (Doctype)
독타입(Doctype)은 HTML문서의 맨 처음에 명시하는 부분으로 문서의 버전에 관한 정보를 나타낸다. ＜!DOCTYPE html＞은 이 문서가 HTML5 라는 것을 명시한다. 독타입은 문서 처음에 반드시 작성을 해야한다.
<!DOCTYPE html>
- HTML (html)
문서의 시작과 끝을 알리는 태그 시작 ＜html＞ 끝 ＜/html＞ 해당 웹 문서가 HTML 언어로 작성된 문서임을 브라우저에게 알리는 역할
lang속성으로 문서의 언어를 설정할 수 있다.
<html lang="ko">
</html>- 헤드 (head)
헤드(head)는 '문서의 메타데이터 집합'이다. '문서의 메타데이터 집합'은
웹 페이지에는 직접적으로 보이지 않는 정보이다. 예를 들어, 이 페이지의 제목이나 검색엔진에 노출이 될 지 안될지, 이페이지에 대한 소개글, css파일과 js파일을 연결하는 것들도 ＜head＞에서 이뤄진다.
- title : 문서의 제목이나 이름을 나타낸다. 안에는 텍스트만 넣을 수 있으며, 문서내에 한번만 사용한다. 브라우저 창 제목에 나타나며 검색엔진에서는 검색된 페이지의 이름으로 나타난다. title 내용은 적절하고 명료하게 넣어야 한다.
( title에는 웬만하면 특수문자를 안쓰는 것이 좋다. )
<tilte>이것은 제목입니다.</title>- mata : 메타에서 담을 수 있는 종류는 여러 종류가 있다. 대표적으로 페이지의 인코딩 방식이나 검색엔진에 관한 정보들 다른 브라우저들과의 크로스 브라우징, 반응형, CSS / JS 문서 연결 등등
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<script src="js/index.js"></script>
<meta name="Keywords" content="키워드의 나열">
<meta name="robots" content="noindex, nofollow">- 바디 (body)
바디(body) 태그는 브라우저 화면에 보이는 것들이 주로 들어간다. 해당 HTML 문서의 텍스트,하이퍼링크,이미지,리스트 등과 같은 모든 콘텐츠를 포함하는 영역을 정의할 때 사용한다. HTML 문서에는 단 하나의 ＜body＞만 존재할 수 있다.
<body>
</body>주석 (comment)
주석은 브라우저에서 표시되지 않지만, 문서 정리에 도움을 준다.
HTML의 여러 라인을 한 번에 주석 처리가 가능함으로, 오류 검색을 위한 디버깅에 아주 좋다.
<!-- 이것은 주석 입니다. -->