display porperty(inline, block, inline-block)

• 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>, ::before, ::after 등 

 

개발자 도구를 이용하여 각 태그의 display 기본 값을 확인 할 수 있다.

---

inline요소 특징

 

높이와 넓이가 없다. (컨텐츠 영역만큼 자동으로 잡히게 됨) 
--> 위아래에 margin을 갖을 수 없다.
--> padding은 가질 수있다.( 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지는 않는다.)

 

inline-block 요소
높이, margin 가질 수 있고 또 옆에 요소가 올 수있다.
but,문제가많다. 
---> default값에 요소 사이에 빈 공간이있다.
--->반응형 디자인을 지원하지 않는다. (창크기에 영향을 받는다.)  

 

------> flex-box 활용하기 https://coding-jjorep.tistory.com/33

 

중앙정렬

block요소 중앙정렬

 margin: 0 auto;

 

Inline, inline-block요소 중앙정렬

 text-align: center; line-height