[CSS] 박스모델(BoxModel) 관련 속성

박스모델(BoxModel)

: 문장 또는 이미지를 출력하기 위해 태그를 사용하여 생성한 사각형 모양의 영역

출처: http://www.tcpschool.com/css/css_boxmodel_boxmodel

margin

: 박스모델과 박스모델 간격 관련 스타일 속성

테두리와 이웃하는 요소 사이의 간격이다. 마진은 눈에 보이지 않는다.
→ margin-top, margin-right, margin-bottom, margin-left
속성값 : px(절대값 - 고정크기), %(상대값 - 유동크기)

border :내용와 패딩 주변을 감싸는 테두리

border-style

: 박스모델 외곽선의 모양 관련 스타일 속성
→ border-style-top,border-style-right, border-style-bottom, border-style-left

속성값 : nono(기본), solid(실선), dotted(점선), double(이중선)

border-width

: 박스모델 외곽선의 굵기 관련 스타일 속성
→ border-width-top,border-width-right, border-width-bottom, border-width-left

속성값 : px, 키워드(thin, medium, thick 등)

border-color

: 박스모델 외곽선의 색 관련 스타일 속성
→ border-color-top,border-color-right, border-color-bottom, border-color-left

속성값 : 색에 관련된 것들

border

: 박스모델 외곽선 관련 모든 스타일 속성값 설정이 가능하다.

padding

: 박스모델 외곽선과 콘텐츠(Content) 영역의 간격 관련 스타일 속성

내용과 테두리 사이의 간격이다. 패딩은 눈에 보이지 않는다.
속성값 : px(절대값 - 고정크기), %(상대값 - 유동크기)

width

: 박스모델 폭 관련 스타일 속성

속성값 : px(절대값 - 고정크기), %(상대값 - 유동크기)

height

: 박스모델 높이 관련 스타일 속성

속성값 : px(절대값 - 고정크기), %(상대값 - 유동크기)
→ 박스모델의 높이를 변경할 경우 태그내용은 박스모델 위를 기준으로 출력된다.
→ 박스모델의 높이보다 태그내용이 큰 경우 박스모델의 높이는 자동으로 변경된다.

vertical-align

: 세로 방향 정렬 관련 스타일 속성 - 높이 변경시에만 사용한다.

속성값 : top(기본값), bottom, middle 등

<title>CSS</title>
<style type="text/css">

div {
	/* margin */
	margin-top: 15px;
	margin-right: 15px;
	margin-bottom: 15px;
	margin-left: 15px; 
	
	margin: 15px 15px 15px 15px; /* top right bottom left */ 
	margin: 15px 15px; /* top&bottom right&left  */ 
	margin: 15px; /* top&right&bottom&left */  
	
	
	/* border-style */
	border-style: solid;
	/* border-width */ 
	border-width: 2px;
	/* border-color */ 
	border-color: red;
	/* border */
	border: solid 2px red;
	
	/* padding */
	padding: 10px;
}  

.size1 {
	width: 400px;
	height: 50px; 
	vertical-align: middle; 
}

.size2 {
	width: 50%;
	height: 50px;
} 
</style> 


</head>
<body>
	<h1>박스모델 관련 스타일 속성</h1>
	<hr>
	<div class="size1">Box Model-1</div>
	<div class="size2">Box Model-2</div>
</body>
</html>

border-radius

: 박스모델 외곽선 모서리 관련 스타일 속성

박스모델 외곽선 모서리에 원을 그려 둥글게 표현한다. (테두리를 둥글게 만든다)
속성값 : px, %

<title>CSS</title>
<style type="text/css">
div {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	margin: 10px 30px;
	background: green; 
}

.radius1 { border-radius: 10px; }
.radius2 { border-radius: 30px; }
.radius3 { border-radius: 50%; }
/* 원하는 모서리만 둥글게 표현하는 것도 가능 */
.radius4 {
	border-top-left-radius: 20px;
	border-top-right-radius: 20px; 
}
.radius5 {
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px; 
}

/* 가로/세로 : 타원 */ 
.radius6 {
	border-radius: 30px/10px;  
}
</style>
</head>
<body>
	<h1>박스모델 관련 스타일 속성</h1>
	<hr>
	<div class="radius1"></div>
	<div class="radius2"></div>
	<div class="radius3"></div>
	<div class="radius4"></div>
	<div class="radius5"></div>
	<div class="radius6"></div>	
</body>
</html>

box-shadow

: 박스모델 그림자 관련 스타일 속성

속성값 : 가로 세로 범짐 확장
inset 속성값을 사용하여 박스모델 내부로 그림자 효과를 제공할 수 있다.

<title>CSS</title>
<style type="text/css">
div {
	width: 200px;
	height: 100px;
	border: 1px solid black;
	background: green;
	margin: 50px;
}
.shadow1 { 
	box-shadow: 10px 10px 5px 5px black; /*가로 세로 범짐 확장*/
}
/* 박스모델 내부로 그림자 효과 제공 */
.shadow2 {
	box-shadow: 10px 10px 5px 5px black inset; 
}
</style>
</head>
<body>
	<h1>박스모델 관련 스타일 속성</h1>
	<hr>
	<div class="shadow1"></div>
	<div class="shadow2"></div>
</body>

박스모델 배치 관련 스타일 속성

박스모델은 블럭 레벨의 박스모델과 인라인 레벨의 박스모델로 구분하여 브라우저에 자동 배치된다.

블럭 레벨의 박스모델은 하나의 라인을 모두 사용한다. 다른 박스모델과 라인을 같이 사용하지 않는다.
ex) div, h1~h6, ul, ol, li, p, table, tr, form 태그 등
인라인 레벨의 박스모델은 하나의 라인을 다른 박스모델과 같이 사용한다.
ex) span, img, a, input, select, textarea, label, button 태그 등

블럭 레벨의 박스모델의 후손으로 모든 박스모델 배치가 가능하다.
하지만 인라인 레벨의 박스모델의 후손으로는 블럭레벨의 박스모델 배치가 불가능하다.

<title>CSS</title>
<style type="text/css">
p {
	width: 500px;
	padding: 10px;
	border: 1px solid black;
}

.acc {
	color: red;
	font-weight: bold;
} 
</style>
</head>
<body>
	<h1>박스모델 배치 관련 스타일 속성</h1>
	<hr>
	<h3>예약방법</h3>
	<p>펜션 예약의 가장 빠른 방법은 호스트(<span class="acc">010-1234-5678</span>)와 
	직접 연락하거나 <span class="acc">문자</span>를 남기는 것입니다.
	전화와 문자는 개인부담입니다.
	<img alt="펜션이미지" src="images/1.jpg"></p>
</body>

기본적으로 블럭 레벨의 박스모델은 하나의 라인에 박스모델이 하나만 출력되고, 인라인 레벨의 박스모델은 하나의 라인에 박스모델이 여러개 출력된다. 하지만 CSS를 통해 블럭레벨이라고 하더라도 인라인 레벨처럼 출력할 수 있고, 인라인레벨도 블럭라벨처럼 출력할 수 있다.

display

: 박스모델 배치 관련 스타일 속성

속성값
- none: 박스모델 미배치
- block: 블럭 레벨로 배치
- inline: 인라인 레벨로 배치 - 폭과 높이, margin,padding 등 적용 불가능
- inline-block: 인라인 레벨로 배치 - 폭과 높이,margin,padding 등 적용 가능
- table, table-row, table-cell

<title>CSS</title>
<style type="text/css">
ul li {
	list-style-type: none; 
	font-size: 25px;
	margin: 20px;
	display: inline; /* margin 적용 불가능 */
	display: inline-block; /* margin 적용 가능 */
}

img {
	margin: 20px;
	display: block;
} 
</style>
</head>
<body>
	<h1>박스모델 배치 관련 스타일 속성</h1>
	<hr>
	<!-- 블럭 레벨의 박스모델은 하나의 라인에 박스모델이 하나만 출력된다. -->
	<ul>
		<li>회사소개</li>
		<li>제품소개</li>
		<li>장바구니</li>
		<li>구매내역</li>
		<li>제품후기</li>
	</ul>
	<hr>
	<!-- 인라인 레벨의 박스모델은 하나의 라인에 박스모델이 여러개 출력된다. -->
	<img alt="펜션 이미지1" src="images/1.jpg">
	<img alt="펜션 이미지2" src="images/2.jpg">
	<img alt="펜션 이미지3" src="images/3.jpg">
</body>

display 속성값을 [none]으로 설정한 경우 박스모델이 출력되지 않는다. 출력은 되지만 눈에 보이지 않게 하기 위해서는 visibility 속성을 이용하면 된다.

visibility

: 박스모델 출력 관련 스타일 속성
→ 속성값 : visible(보임 처리 - 기본), hidden(숨김 처리)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
div {
	margin: 20px;
	padding: 10px;
	border: 2px solid red;
	text-align: center;
}

/*display 속성값을 [none]으로 설정한 경우 박스모델 미출력 */
.on { display: inline; }
.off { display: none; }  

/* visibility의 속성값을 [hidden]으로 설정한 경우 박스모델을 출력하되 눈에 보이지 않음 */
.show { visibility: visible; }
.hide { visibility: hidden; }
</style>
</head>
<body>
	<h1>박스모델 배치 관련 스타일 속성</h1>
	<hr>
	<div>
		<img alt="펜션 이미지1" src="images/1.jpg" class="on">
		<img alt="펜션 이미지2" src="images/2.jpg" class="off">
		<img alt="펜션 이미지3" src="images/3.jpg" class="on">
	</div>
	<div>
		<img alt="펜션 이미지1" src="images/1.jpg" class="show">
		<img alt="펜션 이미지2" src="images/2.jpg" class="hide">
		<img alt="펜션 이미지3" src="images/3.jpg" class="show">
	</div>
</body>
</html>

dispaly 속성값을 none으로 한 경우 박스모델을 출력하지 않는 것이지만
visibility의 hidden 속성은 출력은 하되, 눈에는 보이지 않는 것이다.

float

: 컨테이너에 위치한 아이템 역할의 박스모델을 왼쪽 또는 오른쪽 위치부터 차례대로 배치하는 스타일 속성
→ 속성값 : none(기본값), left, right
→ float 스타일이 적용된 박스모델 다음에 위치한 박스모델에도 스타일이 적용된다.

clear

: float 스타일로 설정된 배치 관련 스타일을 초기화 처리하기 위한 스타일 속성
즉, clear 속성은 float이 더이상 주변 요소의 배치에 영향을 미치지 않도록 해제하는 속성이다.
→ 속성값 : left, right, both(왼쪽 오른쪽 다 초기화 시킬 경우 사용)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
/* 다른 박스모델을 출력하기 위한 영역을 제공하는 컨테이너 역할의 박스모델 */
#container {
	width: 800px;
	/* min-height : 박스모델의 최소 높이를 설정하기 위한 스타일 속성 */
	min-height: 600px;
	border: 1px solid red;
}

/* 컨테이너 영역에 출력될 아이템 역할의 박스모델 */  
.box {
	width: 200px;
	height: 200px;
	margin: 20px;
	border: 1px solid green;
	/* display: inline-block; */
	
	float: left; 
}

p {
	clear: both;
}

</style>
</head>
<body>
	<h1>박스모델 배치 관련 스타일 속성</h1>
	<hr>
	<div id="container">
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<p>안녕하세요.</p>
	</div>
</body>
</html>

컨테이너 역할의 박스모델에 display 속성값을 [flex]로 설정하는 경우,
Flex Container로 처리되어 아이템 역할의 박스모델을 한쪽방향으로 일정한 간격으로 자동 배치한다.

flex-direction

: Flex Container에서 Flex Item을 배치하는 방향을 설정하는 스타일 속성

→ 속성값

row : 아이템이 좌에서 우로 흐른다 - 기본값
column : 아이템이 세로방향(상에서 하)으로 흐른다
row-reverse : 아이템이 우에서 좌로 흐른다
cloumn-reverse : 아이템이 세로방향(하에서 상)으로 흐른다

flex-wrap

: Flex Container에서 Flex Item 배치의 줄바꿈 처리에 대한 스타일 속성
→ 속성값 : nowrap(기본값 - 줄바꿈 처리 X), wrap(아래로 줄바꿈 처리), wrap-reverse(위로 줄바꿈 처리)

flex-flow : flex-direction과 flex-wrap을 동시에 설정하는 스타일 속성

justify-content

: Flex Container에서 Flex Item을 정렬하기 위한 스타일 속성. 메인축 방향으로 아이템들을 정렬한다.

속성값)

flex-start(기본값) : 아이템들을 시작점으로 정렬
flex-end : 아이템들을 끝점으로 정렬
center : 아이템들을 가운데로 정렬
space-between : 아이템들 사이에 균일한 간격 생성
space-around : 아이템들의 둘레에 균일한 간격 생성
space-evenly : 아이템들의 사이와 양 끝에 균일한 간격을 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
/* 다른 박스모델을 출력하기 위한 영역을 제공하는 컨테이너 역할의 박스모델 */
#container {
	width: 800px;
	min-height: 600px;
	border: 1px solid red;
	display : flex; 
	/*flex-direction: row;
	flex-wrap: wrap;*/
	flex-flow: row wrap;  
	
	justify-content: space-around; 
}

/* 컨테이너 영역에 출력될 아이템 역할의 박스모델 */  
.box {
	width: 200px;
	height: 200px;
	margin: 20px;
	border: 1px solid green;
}
</style>
</head>
<body>
	<h1>박스모델 배치 관련 스타일 속성</h1>
	<hr>
	<div id="container">
		<div class="box">A</div>
		<div class="box">B</div>
		<div class="box">C</div>
		<div class="box">D</div>
		<div class="box">E</div>
		<div class="box">F</div>
	</div>
</body>
</html>

박스모델이 중첩되어 출력되도록 만들어 주기 위해서 position 속성을 사용한다.

position : 박스모델 배치 관련 스타일 속성

HTML 문서 상에서 요소가 배치되는 방식을 결정한다.
속성값
- static(기본값) : 박스모델 자동 배치 - 박스모델의 중첩 배치가 불가능하다.
- relative : 박스모델을 자동 배치한 이후에 top 속성과 left 속성을 사용하여 박스모델을 이동하여 배치하며, 박스모델의 중첩 배치가 가능하다.
  - top : 세로 방향(Y)의 이동 관련 스타일 속성 - 단위 : px, %
  - left : 가로 방향(X)의 이동 관련 스타일 속성 - 단위 : px, %
- absolute : 박스모델을 배치하기 전에 top 속성과 left 속성을 사용하여 박스모델을 이동하여 배치하며, 박스모델의 중첩 배치가 가능하다.
- fixed : absolute와 동일한 속성이지만, absolute와 다르게 스크롤을 제공하지 않는다.

position 속성을 이용하면 박스모델을 겹치게 놓을 수 있는데,박스모델이 중첩될 경우 박스모델이 배치되는 순서에 의해 중첩 배치된다. 이때 z-index 속성을 사용해 박스모델들의 배치 순서를 변경할 수 있다.

z-index

: 박스모델 배치 순서 관련 스타일 속성
→ 속성값 : 정수값. 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려간다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
div {
	width: 400px;
	height: 200px;
	margin: 10px;
	border: 1px solid black;
}
#red {
	background: red;
	position: absolute;
	top: 100px;
	left: 200px;
	z-index: 3;
}

#green {
	background: green;
	position: absolute;
	top: 200px;
	left: 400px;
	z-index: 100;
}
 
#blue {
	background: blue;
	position: absolute;
	top: 300px;
	left: 300px;
	z-index: 1;
}

</style>
</head>
<body>
	<h1>박스모델 배치 관련 스타일 속성</h1>
	<hr>
	<div id="red"></div>
	<div id="green"></div>
	<div id="blue"></div>
</body>
</html>

저작자표시

'학원 > 복기' 카테고리의 다른 글

[CSS] 트렌지션 효과(Transition Effect) (0)	2023.06.01
[CSS] 테이블 관련 스타일 속성 / 박스모델 변형 관련 스타일 속성 (0)	2023.06.01
[CSS] 배경 관련 스타일 속성 (0)	2023.05.30
[CSS] 글자, 공백, 문장 관련 스타일 속성 (0)	2023.05.30
[CSS] 선택자(Selector) (0)	2023.05.28

개뿌

[CSS] 박스모델(BoxModel) 관련 속성

박스모델(BoxModel)

: 문장 또는 이미지를 출력하기 위해 태그를 사용하여 생성한 사각형 모양의 영역

margin

border :내용와 패딩 주변을 감싸는 테두리

border-style

border-width

border-color

border

padding

width

height

vertical-align

border-radius

box-shadow

박스모델 배치 관련 스타일 속성

display

visibility

float

clear

position : 박스모델 배치 관련 스타일 속성

position 속성을 이용하면 박스모델을 겹치게 놓을 수 있는데,박스모델이 중첩될 경우 박스모델이 배치되는 순서에 의해 중첩 배치된다. 이때 z-index 속성을 사용해 박스모델들의 배치 순서를 변경할 수 있다.

z-index

'학원 > 복기' 카테고리의 다른 글

티스토리툴바

[CSS] 박스모델(BoxModel) 관련 속성

박스모델(BoxModel)

: 문장 또는 이미지를 출력하기 위해 태그를 사용하여 생성한 사각형 모양의 영역

margin

border :내용와 패딩 주변을 감싸는 테두리

border-style

border-width

border-color

border

padding

width

height

vertical-align

border-radius

box-shadow

박스모델 배치 관련 스타일 속성

display

visibility

float

clear

position : 박스모델 배치 관련 스타일 속성

position 속성을 이용하면 박스모델을 겹치게 놓을 수 있는데,박스모델이 중첩될 경우 박스모델이 배치되는 순서에 의해 중첩 배치된다. 이때 z-index 속성을 사용해 박스모델들의 배치 순서를 변경할 수 있다.z-index

'학원 > 복기' 카테고리의 다른 글

'학원/복기' Related Articles

티스토리툴바

position 속성을 이용하면 박스모델을 겹치게 놓을 수 있는데,박스모델이 중첩될 경우 박스모델이 배치되는 순서에 의해 중첩 배치된다. 이때 z-index 속성을 사용해 박스모델들의 배치 순서를 변경할 수 있다.

z-index