마크업/Html & Css
[1분 코딩] CSS 레이아웃 핵심
Rainbow🌈Coder
2022. 3. 26. 23:41
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; 으로 하면 안보이게 된다. <= 이 경우, 메뉴를 껐다 켰다 할때 많이 쓰게 된다.)
2. css의 박스 모델
728x90