display property에 대해 알아보자 display는 그 안에 속성 값들은 화면이 렌더링 되었을때
어떠한 특정 영역이 표시되며 그 성질을 부여하는 것이 property이다
그 중 많이 사용되는 것이 inline과 block이다
크게 html 태그들은 block과 inline 요소로 나뉘어진다
또한 inline-block이라는 두가지의 옵션을 합친 property도 존재한다
test{
display : block;
display : inline;
display : inline-block;
}
block
block요소들을 가지는 html의 태그들은
<address>, <article>, <aside>, <blockgquote>, <canvas>,
<dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>,
<table>, <pre>, <ul>, <p>, <ol>, <video> 등이 있다.
block의 속성을 가지고 있는 애들은 한 영역을 차지 하는 박스 형태를 가지는 성질이다.
즉 그렇기 때문에 기본적으로 block은 width 100%가 된다 물론 width와 height를 설정 할 수는 있다 ^^
게다가 margin과 padding을 지정 할 수도 있다
inline
inline요소들을 가지는 html 태그들은
<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>,
<em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite> 등이 있다.
inline은 주로 텍스트를 주입 할 때에 많이 사용된다
그렇기 때문에 block처럼 width 값이 100%가 아닌 컨텐츠 영역 만큼 자동으로 잡힌다
(ex: 글의 영역 만큼 잡힌다)
높이 또한 마찬가지이며 라인이 새롭게 추가 되는 형태가 아니다!
게다가 width와 height를 명시 할 수 없으며 margin은 위아래엔 적용이 되지 않는다
inline-block
그럼 이 혼종같은 inline-block은 무엇일까?
inline-block은 말 그대로 inline의 특징과 block의 특징을 모두 가진 요소이다!
그 특징으로는
첫번째 줄바꿈이 이루어지지 않는다 (inline의 옵션)
두번째 width와 height를 지정할 수 있다 (blcok의 옵션)
세번째 만약 width와 height를 지정하지 않을 경우 컨텐츠의 영역만큼 잡힌다 (inline의 옵션)
