HTML이란?
Hyper Text Markup Language의 약자로
문서에서의 글자색, 글자크기, 배경색, 하이퍼링크 등,, 웹페이지 구조를 설명해주는 언어이다.
건축에 비유하면 건축물의 구조로 된다고 보면 된다.
HTML의 구조
HTML은 head태그와 body태그로 구성되어있다.
head 태그
HTML문서에 대한 정보가 담겨있는 태그로 제목이나 저장방식, 브라우저의 크기 등,, 우리 눈에 보이지 않는 요소들을 가지고 있다.- title: HTML 문서의 제목
- style: HTML 문서의 style 정보 정의
- link: 외부 사이트 링크의 정보 정의
- script: Javascript를 정의
- meta: 페이지 설명, 키워드, 저자, 화면 크기등의 정보
body 태그
HTML문서의 내용을 담는 태그
웹페이지를 구성하는 요소들의 대부분이 포함된다.
HTML의 문법
- 요소
HTML에는 < >(opening tag)와 < />(closing tag) 사이에 내용으로 구성된다.
내용을 알맞게 써도 내용을 닫지 않는다면 웹 페이지에는 내용을 표시 할 수가 없다.
- 중첩
tag안에 tag가 들어올 수 있고, 또 그 tag안에 다른 tag가 들어올 수 있다.
이러한 관계를 부모자식 관계라고한다.
위 사진 처럼 부모자식 관계를 더 나아가 상위, 하위 요소라고도 부를 수 있을 만큼 많은 태그들이 서로 구조할 수 있다. HTML에서는 들여쓰기와 이러한 관계들이 가장 중요하다.
- 빈 요소
내용이 없고 속성만 가지고 있는 요소를 일컫는다.
br, hr, img, input, link, meta,,등이 존재한다.
이러한 tag들은 closing tag와 내용이 없어도 속성으로만 사용이 가능하다.
하지만 '나는 안전하게 열고 닫는 걸 같이 한다.' 라는 의미로 < />를 사용할 수 있다.
- 속성
기본구조는 <태그 속성="값">내용</태그>가 된다.
태그이름이 나오고 그 뒤에 각 태그들이 갖는 속성을 알맞게 넣은 뒤 그 속성에 대한 값을 넣어주면 된다. 태그 다음에 속성을 입력할 때 한 칸을 띄어야 한다.
- 주석
주석은 코드에 대한 내용을 개발자에게 전달 할 때 사용된다.
쉽게 얘기해서 코드에대한 코멘트이지만 웹페이지에는 표시가 안되는 것이다.
이렇게 기호를 직접 기입하여 쓸 수도 있지만 단축기로'ctrl+/'를 사용하면 매우 편리하다.
