HTML이란?
- HTML 은 Hyper Text Markup Language의 약자로 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드다.
- HTML은 프로그래밍 언어가 아닌 마크업 정보를 정의하는 마크업 언어로 문서의 구조나 서식을 포함한다.
- 요소들로 이루어져 있으며 요소는 시작 태그, 내용, 끝 태그로 이루어져 있다.
- HTML editor로는 주로 VS Code, vim, Xcode 등을 사용한다.
- DOCTYPE 선언은 HTML 문서에서 가장 먼저 선언돼야 한다.
DOCTYPE 선언은 HTML 태그는 아니지만, 선언된 페이지의 HTML 버전이 무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문이다.
HTML Tag
Tag란
- HTML을 기술하기 위하여 사용하는 명령어의 집합을 태그(Tag)라고 한다.
태그는 기본적으로 여는 태그와 닫는 태그로 구성된다.
닫는 태그 없이 사용하는 태그도 존재한다.
ex) <br>
Tag의 형식
- 태그는 컨텐츠를 감싸서 그 정보의 성격과 의미를 정의한다.
- 속성은 태그의 부가적인 정보가 들어온다.
<tag명 속성명1="속성값1" 속성명2="속성값2"> 컨텐츠 </tag명>
Tag 종류
HTML 기본 구조
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
- 최상위 태그로 <html>을 사용한다.
- <head>: 문서를 설명하는 태그로 제목, 키워드같은 정보를 포함한다.
- <meta>: 문서에 대한 정보를 포함한다.
- <title>: 문서의 제목을 정의, 제목 표시줄에 제목을 출력해 검색엔진에서 중요한 정보로 취급된다.
- <body>: 문서의 내용을 포함한다.
- <a>: 문서에서 문서로 이동하는 수단.
속성으로는 링크이름과 연결되어 있는 리소스의 주소를 표시하는 href 등이 있다. 희스토리
ex) <a href="URL" ~ >링크 이름</a>
- <p>: 문단을 구분할 때 사용한다. 문단과 문단 사이에 공백라인이 들어간다.
- <br>: HTML에서는 enter와 같은 개행문자를 무시하기에 줄바꿈을 위해 사용한다.
-  : HTML에서는 스페이스로 공백을 한칸까지만 만들 수 있기에 더 많은 공백을 위해  를 사용
- <img>: 이미지를 표현하기 위한 태그. 속성으로는 이미지의 위치(url)을 기술하는 src ,
http:// 또는 https:// - 절대경로 URL로 지정한다. path/to/image/file: 상대경로로 지정한다.
이미지 크기를 지정하는 width, height 등이 있다.
- <ul>: 순서가 없는 리스트, 하위 항목을 표시할때는 <li>로 표현
- <ol>: 순서가 있는 리스트, 하위 항목을 표시할때는 <li>로 표현
- <iframe>: 페이지 안에 페이지를 삽입하는 방법.
속성으로는 불러올 페이지의 URL을 기술하는 src
- <table>: 데이터를 표로 표현하는 방법, 데이터 구조화에 사용.
<th>는 테이블 행, 열의 머리말, 데이터 그룹의 제목에 해당.
<tr>은 테이블의 행을 표현.
<td>는 표의 내용, 셀을 표현.
속성으로는 열을 병합하는 colspan과 행을 병합하는 rowspan이 있다.
- <h1 ~ h6>는 제목을 표현하는 방법으로
h1
h2...
h6
일수록 작다.
- <strong>은 글자를 두껍게 표기하는 방법.
- <i>는 글자를 기울임으로 표기하는 방법.
- <ins>는 밑줄을 표시하는 방법.
<del>은 취소선을 표시하는 방법.- 이스케이핑: HTML코드 예를 들어<br>태그를 줄바꿈의 용도가 아니라 화면에 표시하기 위한 방법.
ex) '<'는 <, '>'는 >, '&'는 &, "는 "로 표현한다.
