러닝패스

CSS Box Model 이해하기

무료
핵심 콘텐츠만 선별했어요!
5개 콘텐츠
이 러닝패스가 어떠신가요?
(내 보관함에서 다시 볼 수 있어요)
MS에서 발표한 '가장 많이 사용되는 CSS 속성'의 대다수를 Box 모델 속성들이 차지하고 있습니다. 또한 브라우저는 박스 모델의 속성들을 근거하여 렌더링을 실행합니다. Box 모델을 구성하는 Content, Padding, Border, Margin에 대해 알아보면서 CSS에서 아주 중요한 Box Model을 정복해봅시다.
NOTE
먼저, CSS Box Model의 주요 구성요소를 개괄적으로 살펴봅시다.
Video
CSS 수업 - box model
출처: https://youtu.be/_3xFkIfc-5U
테크주니어 님의 학습노트 외 1개
NOTE
width와 height 프로퍼티는 요소의 너비와 높이를 지정하기 위해 사용되며, 이때 지정되는 요소의 너비와 높이는 컨텐츠 영역을 대상으로 합니다.
Video
CSS Tutorial For Beginners 42 - Width & Height
출처: https://youtu.be/b9lWNg8lwW4
테크주니어 님의 학습노트
NOTE
테두리(Border) 안쪽에 위치하는 요소의 내부 여백 영역으로 padding 프로퍼티 값은 패딩 영역의 두께를 의미합니다.
Video
[CSS] 3분 안에 배우는 padding
출처: https://youtu.be/89_wsvfkATA
서원석 님의 학습노트
NOTE
테두리(Border) 바깥에 위치하는 요소의 외부 여백 영역으로 margin 프로퍼티 값은 마진 영역의 두께를 의미합니다.
Video
[CSS] 2분 안에 배우는 margin
출처: https://youtu.be/610YfTlzuFM
서원석 님의 학습노트
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기