Lami
삶이 온통 사람의 길이니
Lami
전체 방문자
오늘
어제
  • 분류 전체보기 (165)
    • Elice (1)
      • 회고록 (1)
    • Git (0)
    • HTML ▪ CSS (4)
    • JavaScript (7)
      • BOJ (2)
      • Programmers (0)
      • Study Note (5)
    • TypeScript (0)
    • React (21)
      • Lecture (19)
      • Study Note (2)
    • Python (44)
      • CodeUp (38)
      • Programmers (0)
      • Study Note (6)
    • Modern Agile (80)
      • Tech Talk (7)
      • TIL (73)
    • 문제해결 (1)
    • 회고록 (5)
    • 도란도란 (2)

블로그 메뉴

  • Github

공지사항

  • 👋 안녕하세요!

인기 글

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Lami
HTML ▪ CSS

box-sizing

box-sizing
HTML ▪ CSS

box-sizing

2021. 11. 3. 10:48

content-box

width와 height 속성이 컨텐츠 영역만 포함하고 있음.

너비 = 콘텐츠 너비

높이 = 콘텐츠 높이

 

border-box

width와 height 속성이 padding과 border를 포함하고 있음.

padding과 border의 크기에 따라 컨텐츠 영역의 크기가 조절됨.

너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비

높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 20px;
            border: 10px solid black;
        }
        .inner {
            width: 100%;
            height: 100%;
            background-color: aquamarine;
        }
        .box1 {
            box-sizing: content-box;
        }
        .box2 {
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <h2>box-sizing: content-box;</h2>
    <h3>너비 = 콘텐츠 너비, 높이 = 콘텐츠 높이</h3>
    <div class="box box1">
        <div class="inner"></div>
    </div>
    <img src="content-box.PNG" alt="">
    <h2>box-sizing: border-box;</h2>
    <h3>너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비, 높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이</h3>
    <div class="box box2">
        <div class="inner"></div>
    </div>
    <img src="border-box.PNG" alt="">
</body>
</html>

 

/* https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing */

'HTML ▪ CSS' 카테고리의 다른 글

CSS Selector  (0) 2022.01.14
BEM  (0) 2021.11.02
defer  (0) 2021.11.01
  • content-box
  • border-box
'HTML ▪ CSS' 카테고리의 다른 글
  • CSS Selector
  • BEM
  • defer
Lami
Lami
성장하는 즐거움을 알아가는 중입니다🌱

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.