블록/인라인 구조에 대해 알아보자!

블록/인라인 구조...?

블록구조와 인라인구조는 각각의 특성이 있는데 이번 시간에 알아봅시다!

::블록구조
태그 한개가 화면상에 보이는 한 줄을 모두 차지하게 되며 여러 블록구조 태그를 사용할시 블록을 쌓듯이 계속 아래로 쌓여갑니다.

::인라인구조
태그 한개가 한줄에 모두 표현되며 여러 인라인구조 태그를 사용할시 오른쪽 방향으로 계속해서 쌓여갑니다.

인라인 구조	블록 구조
a	address
abbr	article
acronym	aside
b	noscript
bdo	form
big	div
br	h1~6
button	header
em	section
img	table
input	ul
label	ol
script	hr
select	figure
span	figcaption
textarea	fieldset
strong	blockquote
code	canvas
object	footer
small	audio

---

블록구조/인라인구조 예시

간단한 예제를 통해 인라인 구조와 블록 구조에 대해 알아봅시다~~~~!!

block 사용 예시

<div 태그 : 나는 블록!>

<div 태그 : 나는 블록!>

inline 사용 예시

<span : 나는 인라인!> <span : 나는 인라인!>

예시용 HTML 코드보기

<div style="color: #fff;">
    <div style="background-color: rgb(68, 59, 96);
                padding: 12px;
                border-radius: 15px;">
        <div>block 사용 예시</div>
        <div style="background-color: rgb(33, 27, 50);
                    border-radius: 15px;
                    padding: 10px;">
            <div><div 태그 : 나는 블록!></div>
            <div><div 태그 : 나는 블록!></div>
        </div>
    </div>
    <div style="margin: 10px 0px 10px; background-color: #6645ea;
                padding: 12px;
                height: 50%;
                border-radius: 15px;">
        <div>inline 사용 예시</div>
        <div style="background-color: #472abb;
                    border-radius: 15px;
                    padding: 10px;">
            <span><span : 나는 인라인!></span>
            <span><span : 나는 인라인!></span>
        </div>
    </div>
</div>