- HTML은 웹 페이지를 구성하는 마크업 언어로 웹 페이지의 뼈대가 되는 언어
- HTML은 구조를 표현하는 언어이기 때문에 HTML의 구조를 잘 짜놓으면, 자바스크립트로 개발을 할 때 더욱 직관적인 코드를 작성 가능!
- 의미있는(Semantic) 태그를 적절하게 사용한다면, 다른 사람이 HTML 문서를 접할 때 쉽게 이해 가능!
HTML은 tag들의 집합
- Tag : 부등호(<>)로 묶인 HTML의 기본 구성 요소 ex)
<html></html>
Tree Structure
- HTML은 트리구조로 구성된다.
<html>
<head>
<title>I’m title!</title>
</head>
<body>
<h1>I’m headline!</h1>
<div>
l’m content!
<span>I’m span!<span>`
</div>
</body>
</html>위의 html문서는 아래와 같은 트리구조로 설명할 수 있다.
- html
- head
- title : I’m Title
- body
- h1 : I’m headline!
- div : I’m content!
- span : I’m span!
- head
Self-Closing Tag
태그 내부에 컨텐츠가 없는 경우 <tag/>와 같이 작성 가능
<img src=”img.png” />자주 사용되는 HTML tag
| Tag | 내용 |
|---|---|
<div> | Division |
<span> | Span |
<img> | Image |
<a> | Link |
<ul>&<li> | Unordered List & List Item |
<input> | Input(Text, Radio, Checkbox) |
<textarea> | Multi-line Text Input |
<button> | Button |
Semantic Tag
HTML에서는 div에 id나 class를 통해 요소를 구분할 수도 있지만 semantic tag를 사용해 웹페이지의 요소들을 정의할 수 있다. semantic tag의 사용을 통해 검색에 쉽게 노출될 수 있고 구조가 한눈에 들어 오기 때문에 유지보수가 용이해 진다.
✅ semantic tag 종류
<article><aside><figcaption><figure><footer><header><main><mark><nav><section><summary>등
Inline Tag와 Block Tag
✅ 인라인 태그
- 인라인 태그는 자신의 내용과 앞/뒤 태그의 내용을 같은 라인에 출력
- 구성 요소 역할
- 컨텐츠의 크기가 태그의 크기
- 대표 인라인 태그 :
<span> - 종류 :
<a>,<b>,<button>,<img>,<input>,<lable>등
✅ 블럭 태그
- 블럭 태그는 자신의 내용과 앞/뒤 태그의 내용을 다른 라인에 출력
- 컨텐츠의 크기와 상관없이 한 줄을 독점(너비 100%, 높이는 컨텐츠의 크기에 따라 변화)
- 구조 역할
- 대표 블럭 태그 :
<div> - 종류 :
<article>,<header>,<form>,<section>등
<div>Div는 한 줄을 차한다.</div>
<div>한</div>
<div>줄</div>
<span>span은 공간만큼 차지한다.</span>
<span> 공간1</span><span> 공간2</span>
태그 중첩 규칙
- 블럭 태그는 자식 태그로 블럭/인라인 태그를 모두 가질 수 있다. (블럭태그
는 자식으로 인라인 태그만 가능)
- 인라인 태그는 자식으로 인라인 태그만 가질 수 있다.
✅ 참고 사이트
https://developer.mozilla.org/ko/docs/Web/HTML/Inline_elements
콰삭칩을 그리워하는 개발자 입니다.