display 속성
display CSS 속성은 요소를 block혹은 inline 요소로 처리할 때 사용합니다. html태그는 기본적인 display 속성을 가지고 있습니다.
block요소인 태그들
<address>, <article>, <aside>, <blockgquote>,
<canvas>, <dd>, <div>, <dl>, <hr>, <header>,
<form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>,
<table>, <pre>, <ul>, <p>, <ol>, <video>...inline요소인 태그들
<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>,
<input>, <sub>, <br>, <code>, <em>, <small>,
<tt>, <map>, <textarea>, <label>, <sup>, <q>,
<button>, <cite>...
이러한 기본 요소특성을 display속성을 통해 바꿔줄 수 있습니다.
block, inline, inline-block
1. display : block;
- 영역을 길게 다 차지하기 때문에 옆에 다른 요소가 올 수 없습니다.
- width와 height 값 을 지정 할 수 있습니다.
- margin과 padding을 지정 할 수 있습니다.
2. display : inline;
- 요소 크기 만큼의 영역을 차지합니다.
- width와 height 값 을 지정 할 수 없습니다.
- padding-top, padding-bottom값을 지정하면 영역이 늘어나지만 다른 요소에 영향을 끼치지 않습니다.(튀어나감)
- margin-top, nargin-bottom값을 지정해도 적용이 안됩니다.
3. display : inline-block;
- inline과 block의 특징을 모두 가지고 있습니다.
- 옆에 다른 요소가 올 수 있습니다.
- width와 height 값을 지정 할 수 있습니다.
- width와 height 값을 지정하지 않으면 요소 크기만큼의 영역을 차지합니다.
