💅✨Decorate from CSS : box-sizing

Notice

Recent Posts

Recent Comments

Link

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

C-log

💅✨Decorate from CSS : box-sizing 본문

💅CSS/⚡ver.0

💅✨Decorate from CSS : box-sizing

4:Bee 2024. 2. 20. 13:40

728x90

이번 시간에는 box-sizing에대한 포스팅을 할 것이다. 중첩된 margin에 대한 포스팅은 이번 다음 시간에 작성할 예정이다. 우선 코드와 결과물을 살펴보자.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<div id="small">Hello</div>

<div id="large">Hello</div>

</body>

</html>

div {

margin: 10px;

width: 150px;

}

#small {

border: 10px solid black;

}

#large {

border: 30px solid black;

}

이 두 박스 중 어떤 박스가 커보이는가? 당연히 아래에 있는 박스가 훨씬 더 커보일 것이다. 하지만 현재 padding의 영향으로 두 번째 박스가 더 커보일 뿐이지 사실상 해당 element는 동일 한 크기의 사이즈 인것이다. 하지만 이것은 언제나 css를 기준으로 보았을 때 이다. 사용자 입장에서의 해당 박스들의 크기를 맞출 수 있는 방법이 있는데 그것이 바로 box-sizing이다. box-sizing에는 다양한 크기의 기준들이 있는데 우리가 사용할 기준은 아래 코드를 살펴보자.

div {

margin: 10px;

width: 150px;

box-sizing: border-box;

}

#small {

border: 10px solid black;

}

#large {

border: 30px solid black;

}

border-box를 기준으로 box의 크기를 조절하는 것이다. 그리고 결과를 보면 다음과 같다.

이제 우리 육안을 보기에 둘은 같은 크기의 요소들로 보인다. 다만 해당 요소의 크기는 줄어 들었다. 이유는 box-sizing을 통해서 border의 두께 만큼을 감안하고 요소들의 크기를 동일하게 맞췄기 때문이다. box-sizing은 해당 페이지의 가장 큰 기준이다. 그렇다면 해당 기준을 모든 요소에 적용하기 위해서는 아래 코드와 같이 변경하면 된다.

* {

box-sizing: border-box;

}

div {

margin: 10px;

width: 150px;

}

#small {

border: 10px solid black;

}

#large {

border: 30px solid black;

}

이렇게 작성을 하면 모든 웹 페이지에 적용이 될 것이다. 다음 포스팅에서는 margin 겹침/중첩 현상에 관해서 포스팅을 할 것이다.

728x90

저작자표시

'💅CSS > ⚡ver.0' 카테고리의 다른 글

💅✨Decorate from CSS : margin 겹침/중첩(2) (0)	2024.02.20
💅✨Decorate from CSS : margin 겹침/중첩(1) (0)	2024.02.20
💅✨Decorate from CSS : box model (0)	2024.02.20
💅✨Decorate from CSS : inline block (0)	2024.02.19
💅Decorate from CSS : barcket&Emmet (0)	2024.02.19

'💅CSS/⚡ver.0' Related Articles

Comments

C-log

💅✨Decorate from CSS : box-sizing 본문

💅✨Decorate from CSS : box-sizing

'💅CSS > ⚡ver.0' 카테고리의 다른 글

티스토리툴바