(44) [CSS] 2일 레이아웃과 포지셔닝

overflow

요소의 박스에 콘텐츠가 넘칠 때 표현 방법을 지정한다. 속성값은 하나 또는 두개를 지정할 수 있으며, 두개를 지정한 경우 첫번째 값은 overflow-x 두번째 값은 overflow-y를 지정한다. 하나를 지정한 경우 양 축 모두 지정한다.

visivle	넘치는 콘텐츠를 자르지 않고 요소의 박스를 넘어 표시한다.(기본값)
hidden	넘치는 콘텐츠를 자르고 보이지 않게한다.
scroll	넘치는 콘첸츠를 자르며, 항상 스크롤바를 표시한다.
auto	넘치지 않으면 스크롤바가 보이지 않으며 넘치면 콘첸츠를 자르지만 스크롤바가 표시된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
	width: 150px;
	height: 150px;
	padding: 10px;
	margin: 50px;
	border:2px dotted gray;
}

.visible{
	overflow: visible;
}

.hidden{
	overflow: hidden;
}

.scroll{
	overflow: scroll;
}

.auto{
	overflow: auto;
}


</style>

</head>
<body>

<h3>overflow : 요소의 박스에 콘텐츠가 넘칠 때 표현방법을 지정</h3>

<div class="box">
    <h3>default</h3>
    html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
</div>

<div class="box visible">
    <h3>visible</h3>
    html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
</div>

<div class="box hidden">
    <h3>hidden</h3>
    html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
</div>

<div class="box scroll">
    <h3>scroll</h3>
    html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
</div>

<div class="box auto">
    <h3>auto</h3>
    html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
</div>

</body>
</html>

resize

요소의 크기를 조정할 수 있는지 여부와 방향을 결정한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
	width: 150px;
	height: 150px;
	padding: 10px;
	margin: 30px;
	border:2px dotted gray;

	overflow: hidden; /*div가 resize가 가능하도록 하기 위해서는 hidden또는 auto*/
}

.ta{width: 150px; height: 150px; padding: 10px; margin: 50px;}

.b{resize: both;}
.h{resize: horizontal;}
.v{resize: vertical;}


.n{resize: none;}



</style>

</head>
<body>

<h3>resize : 요소의 크기를 조정할 수 있는지 여부와 방향을 결정</h3>

<div class="box"><h3>default</h3></div>
<div class="box b"><h3>both</h3></div>
<div class="box h"><h3>horizontal</h3></div>
<div class="box v"><h3>vertical</h3></div>

<textarea class="ta">default</textarea>
<textarea class="ta n">none</textarea>

</body>
</html>

opacity

요소의 불투명도를 설정한다. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대이다.

0: 요소가 완전히 투명해 보이지 않음 0보다 크고 1보다 적은 값 : 요소가 반추명해 뒤의 값을 볼 수 있음. 값이 작을수록 잘 안보임 1:기본값 불투명함

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
	width: 150px;
	height: 150px;
	padding: 10px;
	margin: 30px;
	border:2px dotted gray;
	background: orange;
}

.light{opacity: 0.2;}
.medium{opacity: 0.5;}
.heavy{opacity: 0.9;}


</style>

</head>
<body>

<h3>opacity : 오패서티는 요소의 불투명도를 설정. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도</h3>

<div class="box">기본값</div>
<div class="box light">배경 위로 겨우 볼 수 있음</div>
<div class="box medium">배경 위로 조금 더 잘 보임</div>
<div class="box heavy">배경 위로 뚜렷하게 보임</div>

</body>
</html>

margin

요소의 네 방향 바깥 여백 영역을 설정하며,'여백'은 한개에서 네개까지 설정 가능하다.

padding

요소의 네 방향 안쪽 여백 영역을 설정하며, '여백'은 한 개에서 네 개까지 설정 가능하다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
	width: 200px;
	border:2px dotted gray;
}

.orange{background: #f60;}
.yellow{background: #ff0;}
.green{background: #0f0;}

.h{height: 100px;}
.p{padding: 1px;}
.m{margin: 20px;}
.b{border: 1px solid rgba(0,0,0,0);}

</style>
</head>
<body>

<h3>마진 겹침(마진 상쇄) 현상</h3>
<pre>
 - top 및 bottom 마진은 가장 큰 한 마진으로 결합(combine, 상쇄(collapsed))된다.
 - 마진 겹침은 어떤 두 개 이상 블록 요소의 상하 마진이 겹칠 때 어느 한 쪽의 값만 적용
 - 마진 겹침은 인접한 두 박스가 온전한 block-level 요소일 경우에 발생한다.
 - 마진 값이 0이더라도 겹칩은 적용된다.
 - 좌우 마진은 겹치더라도 상쇄되지 않는다.
 - 마진 겹침이 일어나는 경우
   인접 형제의 상하 마진이 겹칠 때, 빈 요소(height가 0인경우)의 상하 마진이 겹칠 때, 부모 박스와 첫 번째(마지막) 자식 박스의 상단(하단) 마진이 겹칠 때
 - 마진 겹침은 인접한 두 박스가 온전한 block-level 요소일 경우에만 적용
 - 마진 겹침을 막으려면 부모 박스 상단(하단)에 padding 또는 border 값을 주어 벽을 만들어주는 것이 안전
</pre>

<!-- 좌우는 모두 margin이 적용되지만 상하는 한번만 margin이 적용 됨 -->
<div class="box">
	<div class="orange m">
		<div class="yellow m">
			<div class="green m h">A</div>
		</div>
	</div>
</div>
<hr>

<!-- padding으로 문제 해결 -->
<div class="box">
	<div class="orange m p">
		<div class="yellow m p">
			<div  class="green m h p">B</div>
		</div>
	</div>
</div>
<hr>

<!-- border로 문제 해결 -->
<div class="box">
	<div class="orange m b">
		<div class="yellow m b">
			<div  class="green m h b">C</div>
		</div>
	</div>
</div>
<hr>

<!-- display: inline-block; 으로 문제 해결 -->
<div class="box" style="display: inline-block;">
	<div class="orange m" style="display: inline-block;">
		<div class="yellow m" style="display: inline-block;">
			<div  class="green m h" style="display: inline-block;">D</div>
		</div>
	</div>
</div>
<hr>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
	width: 100px;
	height: 50px;
	border:3px dotted gray;
}

.m1{margin-bottom: 30px;}
.m2{margin-bottom: 15px;}
.m3{margin-top: 15px;}


</style>
</head>
<body>

<h3>마진 겹칩(마진 상쇄) 현상</h3>

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

<!-- 이런 경우에는 첫번째 margin-bottom을 조정하거나, inline-block으로 설정 한다.  -->
<div class="box m2"></div>
<div class="box m3"></div>
<hr>

</body>
</html>

flaot

해당 요소를 자신을 감싸고 있는 컨테이너의 왼쪽이나 오른쪽에 배치하도록 설정

clear 속성 : 설정된 float 속성을 해제 한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{box-sizing: border-box;}
.p-box{margin-top: 20px;}
.box{width: 50px;height: 50px; padding: 10px;
	border: 3px solid gray;
	text-align: center;
}
	
.left{float: left;}

.clear:after{
	content:'';
	display:block;
	clear:both;
}





</style>

</head>
<body>

<h3>float 해제</h3>

<div class="p-box">
	<div class="box left">A</div>
	<div class="box left">B</div>
</div>

<div class="p-box">
	<div class="box left">C</div>
	<div class="box left">D</div>
</div>
<div style="clear: both;"></div>
<hr>

<p> 부모에 강제로 height 속성을 주면 float 속성이 해제. 반응형시 자동 높이 불가. </p>
<div class="p-box" style="height: 55px;">
	<div class="box left">A</div>
	<div class="box left">B</div>
</div>
<div class="p-box" style="height: 55px;">
	<div class="box left">C</div>
	<div class="box left">D</div>
</div>
<hr>

<p> clear:both;는 margin-top이 적용되지 않는다. </p>
<div class="p-box">
	<div class="box left">A</div>
	<div class="box left">B</div>
</div>

<div class="p-box" style="clear:both; margin-top: 20px;">
	<div class="box left">C</div>
	<div class="box left">D</div>
</div>
<div style="clear: both;"></div>
<hr>

<p> float된 요소의 부모태그에 overflow:hidden으로 float 해제 </p>
<div class="p-box" style="overflow: hidden;">
	<div class="box left">A</div>
	<div class="box left">B</div>
</div>

<div class="p-box" style="overflow: hidden;">
	<div class="box left">C</div>
	<div class="box left">D</div>
</div>
<hr>

<p> float된 요소의 부모태그에 가상요소를 만들고 해당 요소에 clear:both를 지정(권장) </p>
<div class="p-box clear">
	<div class="box left">A</div>
	<div class="box left">B</div>
</div>

<div class="p-box clear" style="margin-top: 20px;">
	<div class="box left">C</div>
	<div class="box left">D</div>
</div>
<hr>

</body>
</html>

Position

문서 상에 요소를 배치하는 방법을 지정한다.

static	일반적인 문서 흐름에 따라 배치 (기본값, 위치 지정 불가)
relative	일반적인 문서 흐름에 따라 배치하며, 위치를 지정할 수 있다.
absolute	문서의 일반적인 흐름을 따르지 않고, 페이지 레이아웃에 공간도 배정하지 않는다.
fixed	문서의 일반적인 프름을 따르지 않고, 페이지 레이아웃에 공간도 배정하지 않는다. 스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치함.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box{
	width: 150px; height: 150px;
	margin: 30px;
	border: 3px dotted gray;
	background: orange;
}

.relative-box{
	position:relative;
	left:50px;
	top:50px;
	background: #333;
	color: #eee;
	font-weight: bold;
	text-align: center;
	line-height: 150px;
}


</style>

</head>
<body>

<h3>position:relative - 일반적인 문서 흐름에 따라 배치하며, 위치를 지정할 수 있다.</h3>

<div class="box"><div class="relative-box">parent-div</div></div>
<div class="relative-box">parent-body</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
	width: 150px;
	height: 150px;
	margin: 50px 0 0 300px;
	border: 3px dotted gray;
	background: orange;
	
	position: relative;
}

.absolute-box {
	position: absolute;
	left: 50px;
	top: 50px;
	/*
		부모의 포지션이 static이면 기준점은 body이고 
		부모의 포지션이 relative이면 기준점은 부모이다. 
	*/
	
	
	width: 150px;
	height: 150px; background : #333;
	color: #eee;
	font-weight: bold;
	text-align: center;
	line-height: 150px;
	background: #333;
}
</style>

</head>
<body>

	<h3>position:absolute - 요소가 문서의 일반적인 흐름을 따르지 않고, 페이지 레이아웃에 공간도
		배정하지 않는다.</h3>

	<div class="box"> 
		<div class="absolute-box">parent-div</div>
		<!--absolute-box parent-div의 기준점 body  -->
	</div>
	<div class="absolute-box">parent-body</div>
	<p>HTML, CSS, Javascript</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

.box{
	width: 100%; height: 1500px; background: yellow;
}

.fixed-box{
	width: 150px; height: 150px;
	
	position: fixed;
	left: 100px;
	top: 200px;
	
	border: 3px dashed gray;
	background: orange;
	color: #ccc;
	font-weight: bold; text-align: center; line-height: 150px;
}


</style>

</head>
<body>

<h3>position:fixed </h3>
<div class="box">
    요소가 문서의 일반적인 흐름을 따르지 않고, 페이지 레이아웃에 공간도 배정하지 않는다.<br>
    부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표 프로퍼티(top, bottom, left, right)을
    사용하여 위치를 이동시킨다.<br>
    스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.
</div>

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

</body>
</html>

'💻 > CSS' 카테고리의 다른 글

(45) [CSS] 3일 반응형 웹(Responsive Web) (1)	2024.04.18
(45) [CSS] 3일 레이아웃과 포지셔닝 - Grid (0)	2024.04.18
(44) [CSS] 2일 레이아웃과 포지셔닝 - flex (0)	2024.04.17
(43) [CSS] 1일 텍스트 및 배경 관련 스타일 (0)	2024.04.16
(43) [CSS] 1일 CSS 기초 (0)	2024.04.16

Power Up!

(44) [CSS] 2일 레이아웃과 포지셔닝

overflow

resize

opacity

margin

padding

flaot

Position

'💻 > CSS' 카테고리의 다른 글

티스토리툴바

(44) [CSS] 2일 레이아웃과 포지셔닝

overflow

resize

opacity

margin

padding

flaot

Position

'💻 > CSS' 카테고리의 다른 글

관련글

티스토리툴바