공부하는 반백수

자유로운 삶을 위한 준비 ☆


IT·인터넷/html·css·js

HTML block & inline 블록과 인라인

자유로운 수짱 2020. 7. 21. 06:57

HTML element 는 기본 디폴트 값이 있다.

block element 와 inline element 로 구분된다.

 

[BLOCK]

블록요소는 한 줄에서 전체 너비 값을 가진다.

자주 사용되는 태그는

<div> <ul> <li> <h1>~<h6> <p> <header> <footer> <nav> <video> <table> <dt> <dd> <dl> <section> <article> <fieldset> <address> <aside>

 

[INLINE]

인라인요소는 내용만큼의 너비 값을 가진다.

자주 사용되는 태그는

<a> <b> <br> <button> <em> <i> <img> <input> <label> <select> <span> <strong> <textarea>

 

[주의]

블록요소는 블록 요소를 담을 수 있지만, 인라인 요소는 블록 요소를 담을 수 없다.

 

가능

<div>  <p></p>  </div>

<div>  <span></span>  </div>

 

불가능

<span>  <div></div>  </span>

<i>  <p></p>  </i>

 

 

전체적인 레이아웃을 만드는 태그는 대부분 블록 요소

세부 항목을 구성하는 요소는 인라인 요소로 이루어진 듯하다.

 

[추가]

inline 요소를 block 요소처럼 사용할 수 있도록 inline-block 이라는 css 속성을 사용할 수 있다.

inline-block 을 사용하면 inline 요소에도 너비와 높이를 설정할 수 있게 된다.