HTML이란?
HyperText Markup Language의 약자로
웹페이지의 틀을 만드는 마크업 언어이다.
Tag란?
HTML은 tag들의 집합으로 tag는 부등호(<>)로 묶인 HTML의 기본 구성 요소 이다.
<!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <h1>Hello world</h1> <div>Contents here <span>Here too</span> </div> </body> </html>기본적으로 tag들은 쌍을 이루며 parents와 child를 가진것을 볼 수 있다.
이것을 'tree structure'이라 한다.
- div 태그는 한 줄을 차지한다.
- span 태그는 컨텐츠의 크기만큼 공간을 차지한다.
Self-closing Tag
tag 내부에 내용이 없다면, 아래와 같이 표현 가능하다.
<img src="image.png"></img> <img src="image.png" /> <img src="image.png">
링크 삽입 tag
현재 창에서 열기
<a href="https://naver.com">NAVER</a>새창에서 열기
<a href="https://naver.com" target="_blank">NAVER</a>
리스트 tag
ul (unordered list) 정렬되지 않은 리스트
ol (ordered list) 정렬된 리스트, 앞에 넘버링이 생긴다.
li (list item) 리스트 아이템으로 ul,ol 아래에 들어간다.
dl (definition list) 정의 리스트, 용어를 설명하는 목록
dt (definition term) 정의 용어, 용어의 제목으로 dl 아래에 들어간다.
dd (definition description) 정의 설명, 용어 설명하는데 사용하며 dt아래에 들어간다.
입력폼
input
<div> <input type="radio" name="choice" value="a">enter A <input type="radio" name="choice" value="b">enter B </div> <div> ID <input type="text" placeholder="ID here"> Password <input type="password" placeholder="password here"> </div> <div> <input type="checkbox"> remember ID </div>textarea
<textarea></textarea>
- input과는 다르게 텍스트 줄바꿈이 가능하다.
button
<button>log in</button>
