[CSS] 박스모델

Jungwook·2023년 5월 8일
0

HTML / CSS

목록 보기
8/18

박스모델 - 폭, 너비

width: 요소의 가로 너비를 지정한다.
auto: 브라우저가 너비를 계산해서 왼쪽, 오른쪽 너비를 동일하게 만든다. => 요소를 가운데 배치한다.
px, %, em, rem, cm 등을 단위로 사용한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스 모델 - 폭, 너비</title>

<style type="text/css">
	
	div {
		/* width: auto; */ /* block 요소의 width 속성을 auto로 지정하면 100%가 기본값으로 사용된다. */
		/* width: 100%; */
		width: 200px;
		/* height: auto; */ /* block 요소의 height 속성을 auto 지정하면 0이 기본값으로 사용된다. */
		/* height: 0; */
		height: 100px;
		background-color: mediumslateblue;
	}
	
	span {
		/* width: auto; */ /* inline 요소의 width 속성을 auto로 지정하면 0이 기본값으로 사용된다. */
		width: 200px;
		/* height: auto; */ /* inline 요소의 height 속성을 auto로 지정하면 0이 기본값으로 사용된다. */
		height: 100px;
		background-color: chocolate;
	}

</style>

</head>
<body>

	<div></div>
	<span>박스모델 폭, 너비</span>

</body>
</html>

max-width: 부모 요소의 크기와 관계없이 요소의 최대 가로 너비를 지정한다.
min-width: 부모 요소의 크기와 관계없이 요소의 최소 가로 너비를 지정한다.
max-height: 부모 요소의 크기와 관계없이 요소의 최대 세로 너비를 지정한다.
min-height: 부모 요소의 크기와 관계없이 요소의 최소 세로 너비를 지정한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스 모델 - 폭, 너비</title>

<style type="text/css">

	.parent {
		width: 150px;
		height: 300px;
		border: 4px solid tomato;
		margin: 20px;
	}

	.child {
		/* width: auto; */ /* 부모 크기에 따라 가변적 */
		/* width: 100%; */ /* 부모 크기에 따라 가변적 */
		/* width: 300px; */ /* 부모 크기에 상관없이 고정적 */
		/*
			parent class의 width가 200 ~ 400px 이면 꽉차게 보이지만 200px보다 작아지면 child class는 200px을
			유지하고 400px보다 커지면 400px을 유지한다.
		*/
		max-width: 400px;
		min-width: 200px;
		height: 200px;
		background-color: orange;
	}

</style>

</head>
<body>

	<div class="parent">
		<div class="child">
		
		</div>
	</div>

</body>
</html>

박스 모델 - 바깥 여백

margin: 요소의 외부(바깥) 여백을 지정한다. 음수값도 사용할 수 있다.
px, %, em, rem, cm 등을 단위로 사용하고 기본값은 0이다.
auto: 브라우저가 너비를 계산한다.
%: 부모 요소에 대한 비율로 지정된다.

  • margin => 단축 속성, 여러 개별 속성을 한꺼번에 지정할 수 있다.
    margin 위쪽 오른쪽 아래쪽 왼쪽
    margin 위쪽 [왼쪽 오른쪽] 아래쪽
    margin [위쪽 아래쪽][왼쪽 오른쪽]
    margin [위쪽 아래쪽 왼쪽 오른쪽]
  • margin-top, margin-bottom, margin-left, margin-right => 개별 속성
    margin-top: 요소의 외부 위쪽 여백을 지정한다.
    margin-bottom: 요소의 외부 아래쪽 여백을 지정한다.
    margin-left: 요소의 외부 왼쪽 여백을 지정한다.
    margin-right: 요소의 외부 오른쪽 여백을 지정한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스 모델 - 바깥 여백</title>

<style type="text/css">

	.parent {
		width: 400px;
		height: 200px;
		border: 4px solid tomato;
	}

	.child {
		width: 100px;
		height: 100px;
		border: 4px solid mediumslateblue;
		
		/* 개별 속성 */
		/* margin-top: 20px; */
		/* margin-left: 20px; */
		
		/* 단축 속성 */
		/* margin: 10px 20px 30px 40px; */
		/* margin: 10px 20px 30px; */
		/* margin: 10px 40px; */
		margin: 200px;
		/* margin을 비율로 지정하면 부모 요소의 가로 크기를 기준으로 지정된다. */
		/* margin: 50%; */
	}
	
</style>


</head>
<body>

	<div class="parent">
		<div class="child">
		
		</div>
	</div>
	
</body>
</html>

박스 모델 - 마진 중복(margin collapsing)

마진 중복(병합, collapse): 마진의 특정 값들이 중복되어 합쳐지는 현상
1. 형제 요소들의 margin-top과 margin-bottom이 만났을 때
2. 부모 요소의 margin-top과 자식 요소의 margin-top이 만났을 때
3. 부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 때

마진 중복 계산: 마진 중복 현상이 발생될 때 중복값을 계산하는 방법
1. 둘 다 양수: A(30px), b(10px) => 더 큰 값으로 합쳐진다. => 30px
2. 둘 다 음수: A(-30px), b(-10px) => 더 작은 값으로 합쳐진다. => -30px
3. 양수와 음수: A(-30px), b(10px) => 산수를 한다. => -20px

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스 모델 - 마진 중복(margin collapsing)</title>

<style type="text/css">

	.parent {
		width: 300px;
		height: 100px;
		background-color: cyan;
		margin-top: 50px;
	}

	.child {
		width: 100px;
		height: 100px;
		background-color: tomato;
		margin: 50px;
	}

</style>

</head>
<body>

	<div class="parent">
		<div class="child">1</div>
		<div class="child">2</div>
		<div class="child">3</div>
	</div>

</body>
</html>

박스 모델 - 안쪽 여백

padding: 요소의 내부 여백을 지정한다.
px, %, em, rem, cm 등을 단위로 사용하고 기본값은 0이다.
auto: 브라우저가 너비를 계산한다.
%: 부모 요소에 대한 비율로 지정된다.

  • padding => 단축 속성, 여러 개별 속성을 한꺼번에 지정할 수 있다.
    padding 위쪽 오른쪽 아래쪽 왼쪽
    padding 위쪽 [왼쪽 오른쪽] 아래쪽
    padding [위쪽 아래쪽][왼쪽 오른쪽]
    padding [위쪽 아래쪽 왼쪽 오른쪽]
  • padding-top, padding-bottom, padding-left, padding-right => 개별 속성
    padding-top: 요소의 내부 위쪽 여백을 지정한다.
    padding-bottom: 요소의 내부 아래쪽 여백을 지정한다.
    padding-left: 요소의 내부 왼쪽 여백을 지정한다.
    padding-right: 요소의 내부 오른쪽 여백을 지정한다.

크기 증가: 추가된 padding 값 만큼 요소가 커지는 현상

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스 모델 - 안쪽 여백</title>

<style type="text/css">

	/* padding 포함 140px * 140px => 크기 증가 */
	.box1 {
		width: 100px;
		height: 100px;
		background-color: mediumorchid;
		padding: 20px;
	}
	
	/* padding 포함 140px * 140px => 수동 크기 계산 */
	.box2 {
		width: 60px;
		height: 80px;
		background-color: chocolate;
		padding: 30px 40px;
	}
	
	/* padding 포함 140px * 140px => 자동 크기 계산 */
	.box3 {
		width: 140px;
		height: 140px;
		background-color: hotpink;
		padding: 15px 20px;
		/* box-sizing: border-box; 속성을 지정하면 지정된 padding에 따른 전체 크기가 자동으로 계산된다. */
		box-sizing: border-box;
	}

</style>

</head>
<body>

	<div class="box1">
		Hello world!!!!!
	</div>

	<div class="box2">
		Hello world!!!!!
	</div>

	<div class="box3">
		Hello world!!!!!
	</div>

</body>
</html>

박스 모델 - 외곽 선

border: 요소의 테두리 선을 지정한다.
border 선두께 선종류 선색상; => 단축 속성, 선 색상을 생략하면 글자 색에 따른다.

  • border-width => 선의 두께(너비), medium(중간), thin(얇은), thick(두꺼운), 기본값 medium,
    => 단위 px, em, cm 등 단위로 지정
    border-width 위 오른쪽 아래 왼쪽;
    border-width 위 [왼쪽 오른쪽] 아래쪽;
    border-width [위 아래][왼쪽 오른쪽];
    border-width [위 아래 왼쪽 오른쪽];
  • border-style => 선의 종류, 기본값 none
    none => 선 없음
    hidden => 선 없음과 동일(table 요소에서 사용)
    solid => 실선(일반선)
    dotted => 점선
    dashed => 파선
    double => 두 줄선
    groove => 홈이 파여있는 모양의 선
    ridge => 솟은 모양의 선, groove의 반대
    inset => 요소 전체가 들어간 모양의 선
    outset => 요소 전체가 나온 모양의 선
    border-style 위 오른쪽 아래 왼쪽;
    border-style 위 [왼쪽 오른쪽] 아래쪽;
    border-style [위 아래][왼쪽 오른쪽];
    border-style [위 아래 왼쪽 오른쪽];

border-color => 선의 색상, 기본값 black, transparent => 투명한 선(요소의 배경색이 보임)
border-radius => 사각형 모서리를 둥글게 하는 원의 반지름

border-top => 위쪽 선
border-top-width => 위쪽 선의 두께
border-top-style => 위쪽 선의 종류
border-top-color => 위쪽 선의 색상
border-top-left-radius => 위 왼쪽 모서리를 둥글게 처리하는 원의 반지름
border-top-right-radius => 위 오른쪽 모서리를 둥글게 처리하는 원의 반지름

border-bottom => 아래쪽 선
border-bottom-width => 아래쪽 선의 두께
border-bottom-style => 아래쪽 선의 종류
border-bottom-color => 아래쪽 선의 색상
border-bottom-left-radius => 아래 왼쪽 모서리를 둥글게 처리하는 원의 반지름
border-bottom-right-radius => 아래 오른쪽 모서리를 둥글게 처리하는 원의 반지름

border-left => 왼쪽 선
border-left-width => 왼쪽 선의 두께
border-left-style => 왼쪽 선의 종류
border-left-color => 왼쪽 선의 색상

border-right => 오른쪽 선
border-right-width => 오른쪽 선의 두께
border-right-style => 오른쪽 선의 종류
border-right-color => 오른쪽 선의 색상

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>외곽 선</title>

<style type="text/css">

	.box {
		width: 800px;
		height: 200px;
		background-color: orange;
		border: 10px solid blue;
		border-top-right-radius: 150px;
		border-bottom-left-radius: 150px;
	}

</style>

</head>
<body>

	<div class="box"></div>

</body>
</html>

박스 모델 - box-sizing

box-sizing: 요소의 크기 계산 기준을 정한다.

  • content-box
    => 기본값, 크기(width, height)만으로 요소의 크기를 계산한다.
    => 안여백(padding)과 테두리 선(border)이 추가되며 추가된 만큼 전체 크기가 커진다.
  • border-box
    => 크기(width, height)에 안여백(padding)과 테두리 선(border)을 포함해서 요소의 크기를 계산한다.
    => 전체 크기는 유지되고 안여백(padding)과 테두리 선(border)의 크기만큼 요소의 크기가 작아진다.
    개발자 모드(F12)-를 띄워놓고 확인한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>box-sizing</title>

<style type="text/css">

	.box1 {
		width: 200px;
		height: 200px;
		background-color: hotpink;
		border: 10px solid red;
		padding: 40px;
	}

	.box2 {
		width: 200px;
		height: 200px;
		background-color: skyblue;
		border: 10px solid blue;
		padding: 40px;
		box-sizing: border-box;
	}

</style>

</head>
<body>

	<div class="box1"></div>
	<div class="box2"></div>

</body>
</html>

박스 모델 - display

display: 요소의 박스 타입을 설정한다.

  • block => 블록 요소(div 등) => 내용이 없어도 크기를 가질 수 있다. => 자동으로 줄이 변경된다.
  • inline => 인라인 요소(span 등) => 내용이 있어도 크기를 가질 수 없다. => 자동으로 줄이 변경되지 않는다.
  • inline-block => 인라인 블록 요소(input 등) => lnline 요소인데 크기를 가질 수 있다.
  • none => 요소의 박스 타입이 없음 => 요소가 화면에서 사라짐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display</title>

<style type="text/css">

	span {
		width: 100px;
		height: 100px;
		background-color: chocolate;
		/* inline 요소를 block 요소로 변경하면 크기를 가지게 되므로 내용이 없어도 보인다. */
		display: block;
	}

	div {
		width: 100px;
		height: 100px;
		background-color: yellowgreen;
		/* block 요소를 inline 요소로 변경하면 크기를 가질 수 없게 되므로 내용이 있어야 보인다. */
		display: inline;
	}
	
	input {
		width: 100px;
		height: 30px;
		background-color: hotpink;
		margin: 3px 0px;
		padding: 10px;
		display: inline-block;
	}

	form > input:nth-child(2) {
		display: none;
	}
	
</style>

</head>
<body>

	<span></span>
	<div>블록 요소가 인라인 요소로 변경되면 내용이 있어야 보인다.</div>

	<form>
		<input type="text" value="1"/>
		<input type="text" value="2"/>
		<input type="text" value="3"/>
		<input type="hidden" value="4"/>
		<input type="text" value="5"/>
	</form>

</body>
</html>

박스 모델 - overflow

overflow: 요소의 크기 이상으로 내용(자식 요소)이 넘쳤을 때 보여지는 방식을 제어한다.

  • visible: 기본값, 넘친 내용을 부모 외부에 표시한다.
  • hidden: 넘친 내용을 표시하지 않는다.
  • scroll: 가로, 세로 스크로 바를 표시한다. 내용이 넘치지 않아도 스크롤 바가 표시된다.
  • auto: 넘치는 경우에만 스크롤 바를 표시한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow</title>

<style type="text/css">

	.parent {
		width: 300px;
		height: 250px;
		border: 4px solid blue;
		overflow: auto; /*overflow: 요소의 크기 이상으로 내용(자식 요소)이 넘쳤을 때 보여지는 방식을 제어한다.*/
	}
	
	.child {
		width: 100px;
		height: 100px;
		border: 4px solid red;
		background-color: yellowgreen;
		font-size: 40px;
		
		/* 텍스트 가로, 세로 가운데 정렬 */
		display: flex;
		justify-content: center; /* 수평 가운데 정렬 */
		align-items: center; /* 수직 가운데 정렬 */
	}

</style>

</head>
<body>

	<div class="parent">
		<div class="child">1</div>
		<div class="child">2</div>
		<div class="child">3</div>
	</div>

</body>
</html>

박스 모델 - 투명도

opacity: 요소의 투명도를 지정한다. 0부터 1 사이의 실수를 지정하며 기본값은 1이다.
1.0 => 100% 불투명도, 완전 불투명
0.5 => 50% 불투명도, 반투명
0.0 => 0% 불투명도, 완전 투명

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>투명도</title>

<style type="text/css">

	.parent {
		width: 300px;
		height: 250px;
		background-color: hotpink;
	}
	
	.parent .child {
		width: 100px;
		height: 100px;
		background-color: yellowgreen;
		font-size: 40px;
		opacity: 0.5;  /*투명도 지정*/
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	/* .parent .child:first-child { */
	.parent .child:nth-child(1) {
		/* display: none; */ /* 사라져서 존재하지 않는다. */
		opacity: 0; /* 존재하지만 보이지 않는다. */
	}
	
</style>

</head>
<body>

	<div class="parent">
		<div class="child">123</div>
		<div class="child">456</div>
	</div>

</body>
</html>

0개의 댓글

관련 채용 정보