[웹개발][HTML]구조 요소로 공간 만들기

구조 요소? 119 불러? ㅎㅋㅎ (☞ ͡° ͜ʖ ͡°)☞넝담~

구조 요소는 기본적으로 공간을 만드는 것이라고 생각하면 된다. HTML로 구조 요소를 짠 후에, 그 구조 요소를 CSS를 통해 요리 조리 씹고 뜯고 맛 보면서 즐길 수 있다. 상자를 만드는 행위라고 하면 비슷하겠다. 텍스트나 사진, 링크 등등 어떠한 내용이던지 간에 그 내용을 감싸는 상자가 있어야 꾸밀 수 있다.

대표적으로 쓰이는 구조 요소는 두 부류로 나뉘는데, 다음과 같다.

Block element - div

div는 정말 어디서나 누구든지 항상 쓰는 기본적인 block 구조 요소이다. Block 구조 요소이기 때문에, div가 있는 영역은 수평적으로 모두 div의 영역이다.

<div>
	<h1>여보세요 나야 거기 잘 지내니</h1>
</div>

div와 같이 block 구조를 가지는 대표적인 요소들은 다음과 같은 요소들이 있다.

- <p>
- <form>
- <h1> ~ <h6>
- <ol>, <ul>, <li>
...

Inline element - span

span은 div와 같이 정말 어디서나 누구든지 항상 쓰는 기본적인 구조 요소 이지만, 차이점은 바로 span은 inline 요소이다. 그래서 수평적으로 모든 영역을 차지하지 않고, 오직 요소 내의 내용만큼만의 공간을 차지한다.

<span>
	<a href="https://velog.io">Velog Link</a>
</span>

span과 같이 inline 구조를 가지는 대표적인 요소들은 다음과 같은 요소들이 있다.

- <a>
- <button>
- <img>
- <em>
- <strong>
- <i>
- <b>
...

이외에 Semantic Tag가 더 있지만 Semantic Tag는 그 의미가 중요하므로 다음 포스트로 넘기겠다.