[8일차] 인라인, 블록요소

박스의 구성

 

4가지 박스모델

 

HTML의 박스는 4가지 요소로 구성되어있다.

 

콘텐츠(content) : 콘텐츠가 표시되는 영역.  width와 height로 크기를 설정할수있다.

패딩(padding) : 콘텐츠와 테두리 사이의 영역. padding으로 크기를 설정할수있다.

보더(border) : 콘텐츠와 패딩을 둘러싸는 영역. border로 크기, 모양, 색깔을 설정할수있다.

마진(margin) : 가장 바깥쪽 영역.  margin으로 크기를 설정할수있다.

 

 

 

박스의 유형

 

1. 블록 박스

2. 인라인 박스

(hidden) 인라인 블록

<div> 안녕 </div>
<span>안녕</span>

빨강 = 블록 /  노랑 = 인라인

 

div = 블록

span = 인라인

 

블록박스

• 남는 공간을 margin으로 다채움. 
• width와 height로 크기를 설정할수있음
• 패딩과 보더 마진 모두사용가능

 

인라인 박스

• 컨텐츠 넓이만큼만 차지함.
• width와 height로 크기를 설정할수 없음.
• 패딩과 보더는 자유롭게 쓸수있지만, 마진은 좌우설정에만 사용가능.

 

인라인블록

• 블록 속성 + 인라인 속성 섞은 느낌.
• 블록 처럼 width, height 설정가능
• 새로운 줄에서 시작X , 인라인처럼 같은 라인에 배치 됨.

 

 

Block 요소들

 

<address>연락처 정보

<article>단락 콘텐츠

<aside>부가 콘텐츠

<blockquote>긴("블록")  인용구

<details>상세 정보 위젯

<dialog>대화상자

<dd>설명 목록의 정의 설명

<div>문서의 분할

<dl>설명 목록

<dt>설명 목록의 정의

<fieldset>필드 집합의 라벨

<figcaption>그림 설명

<figure>미디어 콘텐츠 그룹과 설명

 (<figcaption>을 참고하세요)

<footer>페이지나 구역의 푸터

<form>입력 폼

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>1~6단계 제목

<header>페이지나 구역의 헤더

<hgroup>헤더 정보 그룹

<hr>수평선(구분선)

<li>목록의 항목

<main>문서에서 하나 뿐인 중심 콘텐츠

<nav>탐색 링크를 포함

<ol>정렬된 목록

p>문단

<pre>미리 서식 적용한 글

<section>웹 페이지의 구역

<table>표

<ul>정렬되지 않은 목록

 

Inline 요소들 - 조금 추림

 

<a>

<abbr>

<audio>
<br>

<button>

<cite>
<code>
<data>
<datalist>

<dfn>
<em>

<embed>

<i>

<iframe>

<img>
<input>
<label>
<map>

<mark>

<noscript>
<object>
<output>
<picture>

<script>
<select>
<span>

<sub>
<svg>

<teplate>
<textarea>

<var>
<video>
<wbr>