1. HTML이란

HyperText Markup Language의 약자로 웹 페이지를 구성하는 마크업 언어입니다. 글자 그대로 프로그래밍 언어가 아니지만 semantic(의미있는) 태그를 적절하게 사용한다면, 다른 사람이 HTML 문서를 접할 때 쉽게 이해하고 개발할 수 있습니다.

2. HTML 구성

HTML은 tag들의 집합, 트리 구조입니다. html 확장자를 사용합니다.

(1) Tag

태그는 부등호로 묶인 HTML의 기본 구성 요소입니다.

html 시작 태그: 문서 전체의 틀을 구성
head 태그: 문서의 메타데이터를 선언
title 태그: 문서의 제목, 브라우저의 탭에 보여짐
body 태그: 문서의 내용을 담는 곳
h1 태그: heading을 의미하며, 크기에 다라 h1부터 h6까지 있음
div 태그: content division을 의미하며, 줄바꿈됨
span 태그: 줄바꿈이 없는 content 컨테이너

• </태그이름>은 해당 태그가 끝났음을 의미
• self-closing tag: 태그 내부에 내용이 없다면, 셀프 클로징이 가능

ex) img src="codestates-logo.png" 와 같이 태그 안에 속성이 담겨있습니다. 여기서는 src 속성이 담겨있습니다. src의 값이 codestate-logo.png로 들어있습니다.

3. Most Used Tags In HTML

div / span / img / a / ul&li / input / textarea / button

해당 태그는 다음을 의미합니다.

division / span / image / link / unordered list & list item / input(text/password, radio, checkbox) / multi-line text / input button

(1) div VS span

• div 태그는 한 줄을 차지합니다.
• span 태그는 컨텐츠 크기만큼 공간을 차지합니다.

tip) Developer console 을 열여서 실행한 HTML을 눈으로 확인할 수 있습니다.

(2) input

type 종류로 text / password / checkbox / radio가 있습니다.

(3) text

palceholder 속성을 이용해서 빈 칸에 문구를 넣을 수 있습니다.

(4) radio

name 속성을 이용해서 그룹화 시켜줍니다. 그리고 value 속성을 이용해서 구분합니다.

(5) checkbox

checked 속성을 이용해서 상자가 체크된 상태로 표현할 수 있습니다. 따로 값을 넣어주진 않고 속성만을 사용합니다.

input type="checkbox" checked