2. HTML display별 태그정리(block, inline, inline-block)

HTML Display별 태그정리

• block
• inline
• inline-block
  

1. block 태그의 종류

• 기본값이 block인 태그들입니다.

• width, height값을 통해 크기를 지정할 수 있습니다.

• 별도의 값을 주지않을 경우 width는 한줄 전체를 사용합니다

---

1.1 Layout 태그들

태그 이름	설명
<header>	• html layout 태그중 하나로 상단영역에 위치합니다. • 사이트 이름, 문서 대표제목, 로고등을 포함합니다.
<nav>	• 다른 페이지 또는 현재 페이지 내부로의 이동을 위한 링크들이 모여습니다. • 보통 카테고리, 메뉴들의 집합을 표현할때 사용합니다.
<section>	• html layout 태그중 하나로 header 태그와 footer 태그 사이에 위치합니다. • 여러 article을 포함하며 본문을 표현하는 영역입니다.
<article>	• section 내부에 위치하며 컨텐츠의 제목,내용을 포함합니다.
<aside>	• html layout 태그중 하나로 header 태그와 footer 태그 사이에 위치합니다. • 보조 메뉴, 광고 등 본문(section)과 상관없는 내용을 표시합니다.
<footer>	• html layout 태그중 하나로 하단영역에 위치합니다. • 저작권, 저자의 이름, 연락처 등을 표시합니다.

---

1.2 Heading 태그

태그 이름	설명
<h1> ~ <h6>	• heading 태그로 보통 제목을 표현하는데 사용됩니다. • h1 -> h6태그로 갈수록 크기는 줄어듭니다. • h1 태그는 가장 중요한 제목에만 한번 사용합니다. • 이외의 태그들은 몇번을 사용해도 상관없습니다.

---

1.3 Lists 태그들

태그 이름	설명
<ul>	• 순서가 필요없는 리스트를 표현할때 사용합니다. • 리스트 내부의 아이템들을 li태그를 사용합니다.
<ol>	• 순서가 필요한 리스트를 표현할때 사용합니다. • 리스트 내부의 아이템들을 li태그를 사용합니다.
<li>	• 내부의 아이템이 무엇인지에 대해 설명합니다.
<dl>	• 사람 또는 사물등의 단어를 설명하는 리스트에서 사용합니다. • 리스트 내부의 아이템들을 dt 또는 dd태그를 사용합니다.
<dt>	• 단어의 이름을 정의합니다.
<dd>	• 단어에 대해 설명합니다.

---

1.4 자주쓰는 기타 block 태그

태그 이름	설명
<div>	• 영역을 나눌때 사용하는 태그입니다.
<p>	• 문단 또는 문장을 나눌때 사용합니다. • 문장을 작성핼 때 p태그에 작성합니다. 줄바꾸기 기능
<form>	• 사용자가 입력한 데이터를 서버로 전송하기 위해 사용합니다

---

1.5 그 외 block 속성을 가진 태그들

<address>, <blockquote>, <canvas>, <fieldset>, <figcaption>, <figure>, <hr>, <main>, <noscript>, <pre>
, <table>, <tfoot>, <video>

---

2. inline 태그의 종류

• 기본값이 inline인 태그들입니다
• 별도의 width, height값을 설정해도 무시합니다.
• 태그 내부에 내용만큼, 즉 필요한 최소 길이만큼만 공간을 차지합니다.
• nline 요소들은 생성시 줄바꿈없이 이전 요소 바로 뒤에서 가로로 배치됩니다.

2.1 자주쓰는 inline 태그

태그 이름	설명
<span>	• inline요소들을 그룹화하거나 영역을 나눌때 사용하는 태그입니다.
<a>	• 링크를 통해 다른페이지, 문서 등을 연결해주는 태그입니다.
<img>	• 이미지를 삽입하는 태그로 지정한 이미지경로를 통해 이미지를 불러옵니다.
<button>	• 클릭할 수 있는 버튼을 생성하는 태그입니다.
<br>	• 줄바꿈할때 사용합니다.
<input>	• 사용자로부터 입력을 받을 때 사용하며 form태그 내부에서 많이 쓰입니다.
<script>	• javascript와 같은 스크립트 코드를 정의할때 사용합니다.

---

2.2 그 외 inline 속성을 가진 태그들

<abbr>, <acronym>, <b>, <bdo>, <big>, <cite>, <code>, <dfn>, <em>, <i>, <kbd>
, <label>, <map>, <object>, <output>, <q>, <samp>, <select>, <small>, <strong>
, <sub>, <sup>, <textarea>, <time>, <tt>, <var>

---

3. inline-block

• block 속성과 linine 속성을 모두 가지고 있는 형태로입니다.
• block 속성처럼 width를 설정할 수 있으며 요소들이 순차적으로 가로로 배치됩니다.