[HTML] 시작하기 ⁺. ⊹˚₊ ₊·(੭ · ˕ · )੭‧*

https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started

HTML 시작하기 - Web 개발 학습하기 | MDN

위 사이트의 내용을 정리한 포스팅임.

 

가끔 프로그래밍 언어에 HTML이 포함된 글을 보면, 

HTML은 프로그래밍 언어가 아니야!!!!!! 라고 쓰인 댓글을 99.3%의 확률로 발견할 수 있다. HTML은 언어이긴 하지만, 프로그래밍 언어는 아니기 때문이다. 

HTML은 "마크업 언어"로, 구조화를 위한 언어라고 생각하면 된다.

 

Elements: 요소

HTML은 elements로 구성된다.

elements = 태그 + 내용

<태그>내용</태그>

 

Elements의 구조

 

- Opening tag: <태그>

- Content: 태그 사이에 들어가는 실제 내용

- Closing tag: </태그>

 

ex.

<em> All eyes on me </em>

---

All eyes on me

---

Nesting elements: 포함된 요소

요소 안에 다른 요소가 포함될 수 있다. 

<p>My cat is <strong>very</strong> grumpy.</p>

---

My cat is very grumpy.

---

이때 주의해야 할 점은, 괄호([ ])처럼 중첩된 구조로 사용해야 한다는 것이다. ([)] 이런 식의 꼬인 구조로는 사용하면 안된다

 

Elements의 종류

1. Block-level Elements: 블록 요소

한 줄을 차지하며, 다른 요소들 위아래로 배치된다. 화면의 전체 너비를 차지하고, 다른 요소들이 그 아래로 내려간다.

ex) <div>, <p>, <h1>~<h6>, <ul>, <ol>, <table>

<div>
  <h1>제목</h1>
  <p>이것은 블록 요소 문단입니다.</p>
</div>

---

제목

이것은 블록 요소 문단입니다.

---

 

2. Inline Elements: 인라인 요소

블록 요소와 달리, 한 줄 안에서 다른 요소들과 함께 배치되며 그 내용의 너비만큼만 공간을 차지한다. 항상 블록요소 내에 포함된다.

ex) <span>, <a>, <strong>, <img>, <em>

<p>이것은 <strong>굵게</strong> 표시된 텍스트입니다.</p>

---

이것은 굵게 표시된 텍스트입니다.

---

 

3. Empty Elements: 빈 요소

내용이 없고, 닫는 태그가 필요 없는 요소이다. 스스로 닫히거나 단일 태그로 사용된다.

ex) <img>, <br>, <input>

<img src="image.jpg" alt="이미지 설명">

 

<em>first</em>
<em>second</em>
<em>third</em>

<p>fourth</p>
<p>fifth</p>
<p>sixth</p>

---

first second third

fourth

fifth

sixth

---

위 예시를 보면, 인라인은 줄바꿈이 없지만 블록은 줄바꿈이 포함된다는 걸 알 수 있다.