[1분 코딩] CSS 레이아웃 핵심

728x90

** 해당 유튜브 강좌를 보고 학습한 결과를 포스팅으로 남깁니다.

1. block, inline, inline-block, none

display: block => '박스'라고 생각하면 됨. 부모의 크기에서 컨텐츠가 포함된 해당 박스라인 꽉 채움	display: inline => 컨텐츠 크기 자체만을 차지
div, section : 엘리먼트 출력하자마자 줄바꿈	a, span, img : 텍스트만큼 출력 후 줄바꿈 없이 나란히 붙음

inline은 박스가 아니기 때문에 원래가 크기 조정이 불가능하다!

block은 박스이므로 크기 조정이 가능하다.

⭐️그러므로 보통의 레이아웃은 2단, 3단 등 컬럼(제목박스, 글박스, 이미지박스... etc)으로 이루어지고,

display 속성이 block인 element들로 레이아웃을 짠다고 보면 된다!!! : div, section, article, header, nav, footer ...⭐️

그런데 inline이 아닌 inline-block 으로 지정하니,

인라인은 유지하는 대신에, 크기 조정이 가능해졌다. 말그대로 inline + block 속성이 된 것!

(display:none; 으로 하면 안보이게 된다. <= 이 경우, 메뉴를 껐다 켰다 할때 많이 쓰게 된다.)

728x90