반응형
border [top, right, bottom, left] 값을 설정할 때 테두리 영역에 대해서 정리한 글이다.
추가로, 아래 값에 따라 영역의 범위가 달라진다.
[box-sizing: content-box;] - 기본 설정값으로 padding, border 영역을 제외한 크기를 width, height로가짐
[box-sizing: border-box;] - padding 또는 border 영역을 포함하여 width, height를 결정
.divWrap {
width: 700px;
font-size: 13px;
margin: 0 auto;
padding: 1rem;
border-top: 30px solid #f00;
border-right: 30px solid #0f0;
border-bottom: 30px solid #ff0;
border-left: 30px solid #0ff;
}
.divWrap .innerWrap {
margin: 0 1rem;
padding: 1rem;
border: 1px solid #ccc;
text-align: center;
box-sizing: content-box;
}
.divWrap .innerWrap .innerBox {
display: inline-block;
margin-left: auto;
width: 100px;
height: 100px;
}
.divWrap .innerWrap .innerBox.nt {
border-right: 30px solid #0f0;
border-bottom: 30px solid #ff0;
border-left: 30px solid #0ff;
}
.divWrap .innerWrap .innerBox.nr {
border-top: 30px solid #f00;
border-bottom: 30px solid #ff0;
border-left: 30px solid #0ff;
}
.divWrap .innerWrap .innerBox.nb {
border-top: 30px solid #f00;
border-right: 30px solid #0f0;
border-left: 30px solid #0ff;
}
.divWrap .innerWrap .innerBox.nl {
border-top: 30px solid #f00;
border-right: 30px solid #0f0;
border-bottom: 30px solid #ff0;
}
.cBox {
box-sizing: content-box;
}
.bBox {
box-sizing: border-box;
}
.tac {
text-align: center;
}
.bLine {
border-bottom: 1px solid #ccc;
margin: 3rem 0 3rem 0;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>border 모서리 값 정리</title>
</head>
<body>
<p>[box-sizing: content-box;] - 기본 설정값으로 padding, border 영역을 제외한 크기를 width, height로가짐</p>
<p>[box-sizing: border-box;] - padding 또는 border 영역을 포함하여 width, height를 결정</p>
<p>출처 : <a href="https://webisfree.com/2016-01-10/[css]-box-sizing-%EC%86%8D%EC%84%B1-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-%EB%A0%88%EC%9D%B4%EC%96%B4-%ED%81%AC%EA%B8%B0-%EA%B2%B0%EC%A0%95-%EB%B0%A9%EC%8B%9D-%EC%84%A0%ED%83%9D" target="_blank">[CSS] Box-Sizing 속성 설정하기, 레이어 크기 결정 방식 선택</a></p>
<p class="bLine"></p>
<p class="tac">1. [box-sizing: content-box;]</p>
<div class="divWrap cBox">
border 모서리는 top, right, bottom, left 값에 따라 대각선으로 채워 진다.<br /><br />
단, 한쪽값이없으면 해당 부분의 border 값은 사라진다.<br /><br />
<div class="innerWrap cBox">
<div class="innerBox nt cBox"><p>top 없음.</p></div>
</div>
<br />
<div class="innerWrap">
<div class="innerBox nr cBox"><p>right 없음.</p></div>
</div>
<br />
<div class="innerWrap">
<div class="innerBox nb cBox"><p>bottom 없음.</p></div>
</div>
<br />
<div class="innerWrap">
<div class="innerBox nl cBox"><p>left 없음.</p></div>
</div>
</div>
<p class="bLine"></p>
<p class="tac">2. [box-sizing: border-box;]</p>
<div class="divWrap bBox">
border 모서리는 top, right, bottom, left 값에 따라 대각선으로 채워 진다.<br /><br />
<strike>단, 한쪽값이없으면 해당 부분의 border 값은 사라진다.</strike>[box-sizing: border-box;] 일 경우에는 사라지지 않는다.<br /><br />
<div class="innerWrap bBox">
<div class="innerBox nt bBox"><p>top 없음.</p></div>
</div>
<br />
<div class="innerWrap bBox">
<div class="innerBox nr bBox"><p>right 없음.</p></div>
</div>
<br />
<div class="innerWrap bBox">
<div class="innerBox nb bBox"><p>bottom 없음.</p></div>
</div>
<br />
<div class="innerWrap bBox">
<div class="innerBox nl bBox"><p>left 없음.</p></div>
</div>
</div>
</body>
</html>
'개발(Dev) > HTML-CSS-JS' 카테고리의 다른 글
스킨 테스트용 글입니다. (0) | 2020.09.09 |
---|---|
티스토리 각주 사용방법 (8) | 2019.07.05 |
클립보드 복사기능 [clipboard.js] 사용방법 (2) | 2018.10.05 |
말줄임(ellipsis) 두줄이상에 적용하는 방법 (0) | 2018.05.09 |
모바일 가로모드 일때 폰트크기 자동조정 중지하는 방법 (0) | 2017.12.20 |
최근댓글