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

box-sizing css는 좋네요

· 7년 전 · 1470 · 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에서는 기본으로 해줄 것 같지만...
이렇게 하나 배워갑니다

게시글 목록

번호 제목
1717629
1717626
1717625
1717621
1717619
1717611
1717610
1717609
1717607
1717601
1717598
1717591
1717590
1717583
1717575
1717572
1717568
1717566
1717549
1717545
1717533
1717512
1717511
1717508
1717495
1717479
1717473
1717470
1717463
1717452