HTML의 모든 태그들은 특성에 따라 기본표시값(Default Display Value)를 갖는다. 이는 화면에 어떻게 표시되느냐를 구분해 둔 값라고 할 수 있는데, 블록레벨태그(Block-Level Elements)와 인라인 레벨 태그(Inline-Level Elements)의 두가지로 나뉜다. 블록(Block) 태그와 인라인(Inline) 태그의 차이점과 사용방법에 대해서 설명한다
블록(Block) 태그와 인라인(Inline) 태그의 차이점
블록 태그는 항상 전체 너비를 차지하는 덩어리 태그로, 앞뒤로 오는 테그에 줄바꿈이 생긴다.
인라인 태그는 자신의 크기만큼난 차지하는 태그(여는 태그와 닫는 태그로 쌓은 부분만 차지하는 태그)로 줄바꿈이 생기지 않는다.
인라인 태그 (Inline Tag)
– 자신의 내용과 앞뒤 태그의 내용을 같은 라인에 출력하는 태그
– 구성 요소 역할을 한다.(출력 내용 역할)
– 내용물의 크기가 태그의 영역이 된다.
대표적인 inline 태그
<span>, Span
– 사용자 정의 영역을 표현
– 정해진 역할이 없음
– 인라인 태그+CSS, Javascript
기타 인라인 태그 종류
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br/>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <small>, <script>, <select>, <span>, <strong>, <sub>, <sup>, <textarea>, <tt>, <var>
inline 태그 예시
블록 태그 (Block Tag)
– 자신의 내용과 앞뒤 태그의 내용을 다른 라인에 출력하는 태그
– 자신의 내용만으로 한 라인을 독점해서 출력하는 태그(*)
– 영역(구조)을 만들때 사용 > 컨테이너 역할 > 레이아웃 구성(틀 만들기)
– 내용물의 크기와 상관없이 너비는 항상 100%, 높이는 내용물의 크기에 맞춰 변화
대표적인 block 태그
<div>, Division
– 사용자 정의 영역을 표현
– 정해진 역할이 없음
– 블록태그 +CSS, Javascript
기타 블록 태그 종류
<address>, <article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <ul>, <video>
block 태그 사용 예시
태그 중첩 규칙
1. 블록 태그는 자식으로 또다른 블럭 태그 or 인라인 태그를 가질 수 있다.
2. 인라인태그는 자식으로 또다른 인라인태그만 올 수 있다.(블럭태그는 올 수 없다.)
3. 예외] 블록 태그 중 <p>태그는 자식으로 인라인 태그만 가질 수 있다.
