테스트 사이트 - 개발 중인 베타 버전입니다

box-sizing css는 좋네요

· 7년 전 · 1471 · 5

직관적이고 계산안해도 되고.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 5개

정말이네요!@@ 좋은 요소 알려주셔서 감사합니다
7년 전
http://ko.learnlayout.com/box-sizing.html
궁금해서 찾아보았습니다 ㅎ
이렇게 테두리가 안쪽으로 생기는걸 뜻하나요?ㅎ
보통 div 내부에 패딩을 주게 되면 본의 아니게 길이와 높이가 커(!)지는 상황이 발생하는데, 그럼 따로 계산을 해서 스타일시트가 길어지는데, 그걸 없이 편리하게 처리할 수 있게 해주는 것 같아요.

아, 저 링크 예전에 자주 이용했었던 링크네요. 오래전 css3에 관심이 많았을때...
해당 사이트에서 프로그래머로서 궁금했던 것들을 많이 해소받았었네요. : )

읽었을텐데, 잊고 있었군요. 그당시에는 별로 관심을 두지 않았던 요소이지만, 지금 보니, 왜 필요한 강의였나 알겠군요. ㅎㅎ
내가 원하는 것은 500px인데, box-sizing 적용하지 않으면 커져버리고 적용하면 딱맞게 500px이... : )
(내부 패딩의 수치변화에 상관없이... )

[http://sir.kr/data/editor/1806/92fe54d1b1784bd7838ca6e618d918ca_1529172590_4722.jpg]

<style>
.simple {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
/*-webkit-box-sizing: border-box;*/
/*-moz-box-sizing: border-box;*/
/*box-sizing: border-box;*/
}

.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>

개발자는 레이어 class에
box-sizing: border-box;
이거 한 줄만 추가해주는 정도만 알아도... 좋을 듯하네요
물론 bs4에서는 기본으로 해줄 것 같지만...
이렇게 하나 배워갑니다

게시글 목록

번호 제목
1717252
1717247
1717243
1717237
1717225
1717214
1717208
1717203
1717189
1717183
1717177
1717172
1717163
1717162
1717156
1717154
1717153
1717141
1717140
1717138
1717113
1717111
1717105
1717099
1717085
1717076
1717072
1717065
1717062
1717050