HTML 태그 5편 (div, span)

9. Group tag(그룹태그)

- 그룹태그는 div, span 요소가 있음. 블록요소 div요소로 그룹지으며 인라인 요소는 span을 사용한다. 

- 웹사이트 제작시 콘텐츠를 논리적으로 분류하지 않음

- 작성하였을 시, 브라우저 상에 변화없음

■ div

<h2>div 태그 사용 예시</h2>
<div>
    <div>
        <h1>사이트 로고</h1>
        <h2>전체 메뉴</h2>
    </div><!-- top -->
    <div>
        <ul>
            <li>메뉴1</li>
            <li>메뉴2</li>
            <li>메뉴3</li>
            <li>메뉴4</li>
        </ul>
    </div><!-- content -->
    <div>
        <h2>사이트 로고</h2>
        <p>사이트 주소 및 저작권 표시</p>
    </div><!-- footer -->
</div><!-- 전체 -->

■ span

<h2>span 태그 사용 예시</h2>
<p>제 이름은 <span>대한민국</span>입니다.</p>

★ 블록 VS 인라인 개념정리 ★

- block (블록) : 브라우저 상에서 줄바꿈 되어 표시되는 블록 요소

<h2>block</h2>
<p>내용1</p>
<p>내용2</p>
<p>내용3</p>

EX) 블록 태그 예시

 - h1 ~ h6

 - p

 - ol li , ul li

 - dl dt dd

 - div

- inline(인라인) : 브라우저에서 줄바꿈 되지 않고 한 줄로 나오는 요소는 인라인 요소

<h2>inline</h2>
<a href="#">링크</a>
<input type="text" />

EX) 인라인 태그 예시

 - a

 - img

 - input

 - select

 - button

 - textarea

★ 작성 규칙(완전 중요!) ★

(1) 표현 가능 예시

1) 블록 안에 블록

<블록>

<블록></블록>

</블록>

2) 블록 안에 인라인

<블록>

<인라인></인라인>

</블록>

3) 인라인 안에 인라인

<인라인>

<인라인></인라인>

</인라인>

(2) 표현 불가능 예시

1) 인라인 안에 블록 ==> 표현 불가능!!

<인라인>

<블록></블록>

</인라인>

================================

블록와 인라인 요소를 아는 것은 굉장히 아주 많이 중요한 겁니다. 

나중에 스타일(CSS) 하게 되면 블록과 인라인이 어떻게 움직여지는지 한번 보도록 할께요^^ 

2018/07/08 - [IT/HTML] - HTML 태그 4편(form tag - 양식태그)