본문으로 바로 가기

퍼블리싱 연습실

화면은 하나, 카드의 공간은 둘

넓은 창에서 본문 카드와 사이드바 카드를 동시에 비교하세요.

본문 / 넓은 공간

격자와 원으로 만든 레이아웃 학습용 이미지

CSS 박스

패딩과 테두리가 차지하는 크기를 계산합니다. 같은 카드를 넓은 본문과 좁은 사이드바에 놓습니다.

확인 과제 보기

확인 과제

card-slot의 너비를 확인하고 30rem 전후에서 이미지와 글의 배치가 달라지는지 관찰하세요.