퍼블리싱의 모든 것, 인라인요소, 블록 요소, 인라인블록요소

 

CSS 필수 이론 개념 

인라인 요소, 블록 요소, 인라인블록 요소 

 

CSS 기본 무조건 암기.. 인라인블록 요소는 인라인과 블록요소의 두가지 성격을 가지고 있음

인라인(inline) 요소	블록(block) 요소	인라인블록(inline-block) 요소
한줄에 여러개 배치	한줄에 한개만 배치	한줄에 여러개 배치
기본 너비값은 컨텐츠의 너비값	기본 너비값은 100%	기본 너비값은 컨텐츠의 너비값
크기값을 가질 수 없음	크기값을 가질 수 있음	크기값을 가질 수 있음
상하 마진은 가질 수 없음	상하좌우 마진 가질 수 있음	상하 마진은 가질 수 있음

인라인(inline) 요소	span, a, small, big, em, u, s, del, br, q, b, strong, mark, sub, sup, video, audio
블록(block) 요소	div, table, figure, figcaption, caption, header, nav, footer, section, article, aside, p, blockquote, ul, ol, li, td, th, form, hr, h1~h6
인라인블록(inline-block) 요소	img, input 태그들, button, textarea, fontawesome, select, 대부분의 font icon 태그, video, audio, iframe

+ positon:absolute 또는 position:fixed를 주면 모든 요소는 인라인 블록 요소로 display 속성이 변경됨

inline 요소 와 block 요소 실습 

a 태그와 div 태그 비교  

 

inline-block 요소 실습

img 태그 가로폭, margin 값도 적용됨

 

 

인라인요소 블록요소 변환

display 속성에 주로 사용하는 값 : block, inline-block, inline, none, flex

 

 

display 를 block으로 주면 한줄씩 영역 위치가됨

 

 

 

display : inline-block으로 주면 가로값, 마진값 적용되서 디테일하게 디자인 가능