반응형

border [top, right, bottom, left] 값을 설정할 때 테두리 영역에 대해서 정리한 글이다.

 

추가로, 아래 값에 따라 영역의 범위가 달라진다.

[box-sizing: content-box;] - 기본 설정값으로 padding, border 영역을 제외한 크기를 width, height로가짐

[box-sizing: border-box;] - padding 또는 border 영역을 포함하여 width, height를 결정

출처 : [CSS] Box-Sizing 속성 설정하기, 레이어 크기 결정 방식 선택

 

.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>

 

 

 

 

 

 

 

 

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기