태그의 속성 (블록속성과 인라인속성)

블록속성과 인라인속성 태그

▶블록이란? 블록 방식에서는 HTML 요소가 브라우저 화면에 표시될 때 전체 행을 차지하여 앞 뒤로 자동 줄바꿈이 일어난다.

인라인(inline) : 문자를 꾸미는 서식 관련 태그 多	블록(block) : 보통 레이아웃에 관한 태그 多
<span>, <a>, <img>, <input>, <textarea>, <br>, <button>, <select>, <option>, <script> 등	<div>, <p>, <h1~6>, <form>, <table>, <ul>, <ol>, <li>, <video>, <header>, <footer>, <section>, <table>, <form>, <address>, <fieldset>, 시멘틱 태그 등

▶인라인이란? 인라인 방식에서는 HTML 요소를 브라우저 화면에 수평 방향으로 표시하고 줄 바꿈이 일어나지 않는다.

속성의 특징

▶인라인(inline) 방식의 특징

⑴ 수평 방향으로 요소가 배치되며 줄 바꿈이 적용되지 않는다.

⑵ 박스의 크기를 설정하는 width와 height 속성이 적용되지 않는다. = 가로/세로 값 부여X

⑶ 상하단 마진인 margin-top과 margin-bottom 속성이 적용되지 않는다. = 좌/우측만 부여가능

 

▶블록(block) 방식의 특징

⑴ 해당 요소의 앞 뒤에 자동 줄 바꿈이 일어나 새로운 줄에 요소가 표시된다. = 수직방향으로 요소배치

⑵ 박스의 크기를 설정하는 width와 height 속성이 적용

⑶ 모든 마진 설정이 가능

※단, 일부요소는 (address, h1~6, p 등) 블록요소를 포함 할 수 없다.

 

▶인라인 블록(inline-block) 방식의 특징

⑴ 인라인 방식에서와 같이 요소가 수평 방향으로 배치되고, 줄 바꿈은 일어나지 않는다.

⑵ 블록 방식에서와 같이 박스의 크기 설정이 가능

⑶ 블록 방식에서와 같이 모든 마진 설정이 가능

▶인라인 블록 태그의 종류 : <img>, <input>, <button>, <textarea>, <select>, <video>

 

▶차이

⑴ 인라인 요소 안에는 인라인 요소만 포함 할 수 있다.

⑵ 블록 요소는 블록과 인라인 모두를 포함 할 수 있다.

⑶ 인라인 블록 요소는 기본 인라인 요소이기 때문에 기본 너비가 콘텐츠의 너비값만 차지한다.