TIL - Box model

소밍·2022년 4월 6일

Box Model CSS TIL 마진겹침 블록 박스 인라인 박스

0

TIL

목록 보기

9/17

📌 박스의 유형

1. 블록 박스

양옆으로 공간 100% 사용 ; 수직 정렬
width, height 속성 사용하여 스타일 건트롤 가능
padding, margin, border 이용하여 스타일 컨트롤 가능

2. 인라인 박스

컨텐츠 박스만큼의 크기 가짐 ; 수평 정렬
width, height 속성 사용할 수 없음
padding, border 사용할 수 있지만 margin은 좌우만 조절 가능

3. 인라인 블록 박스

inline 처럼 수평 정렬 가능
block 처럼 width, height, margin, padding, border 지정 가능.

📌 박스의 유형 결정하는 속성 : display

1. 외부 디스플레이 타입

외부의 다른 형제, 부모 박스들과의 배치에 영향을 미침

div{ display:inline }

div{ display:block }

div{ display:inline-block }

2. 내부 디스플레이 타입

flex : 내부 자식 요소들의 위치를 부모 컨테이너 요소안에서 X축 혹은 Y축의 단방향으로 설정
grid : 내부 자식 요소들의 위치를 부모 컨테이너 요소안에서 X축과 Y축을 모두 이용해 배치

📌 마진 겹침 현상 (margin collapsing)

'인접하는' 블럭요소 '상하단' 마진 겹치는 것 (좌우는 X)
큰 값을 가진 margin 값으로 겹친다.

마진겹침 해결 방법

📌 대체 css 박스 모델

표준 css 박스 모델에서 요소의 크기는 컨텐츠 박스 + 보더 박스 +패딩값을 모두 더해 정해짐
대체 박스 모델을 사용하여 width값과 height 값으로 박스 크기 정해짐/

box-sizing

<head>
<style>
        * {margin: 0;}
        h1 {
            width: 100px;
            height: 30px;
            border: 3px solid #228B22;
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <h1></h1>
</body>

생각이 길면 용기는 사라진다.

이전 포스트

TIL - CSS

다음 포스트

TIL - declarations

0개의 댓글