다연이네

[days03] 1) 오버플로우(overflow) 2) float / clear 본문

Web/CSS

[days03] 1) 오버플로우(overflow) 2) float / clear

　다연　 2020. 12. 7. 13:46
반응형

1) overflow 속성

    너무 커서 영역에 맞지 않는 내용을 제어하는 속성

visible: (기본값)
hidden: 오버플로가 잘리고 나머지 내용은 보이지 않는다. 
scroll: 오버플로가 잘리고 스크롤바 생성
auto: scroll 속성과 유사하지만 필요한 경우에만 스크롤바 추가

주의: height 속성을 지정한 블럭모드 요소에 대해서만 overflow가 작동한다. 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
	div{
		background-color: #eee;
		border: 1px dotted black;
		width: 200px;
		
		/*overflow:visible;
		overflow:hidden;
		overflow:scroll;
		overflow:auto;*/
		
		overflow-x: hideen;
		overflow-y:scroll;
		height: 100px;
	}
</style>
</head>
<body>
	<h3>css overflow 속성: 너무 커서 영역에 맞지 않는 내용을 제어하는 속성</h3>
	

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Temporibus nemo quo voluptate voluptatibus accusantium officiis
saepe repellat labore nulla tempore laborum rerum commodi id reiciendis 
doloremque velit aspernatur harum nam.</div>

</body>
</html>

2. float / clear 속성

 

float 속성

- 정렬을 위해 사용하는 속성

- 일반적인 정렬과는 다르게 float은 다른 애들 위로 떠오른다.

   (아래 파인애플을 보면 사진 주위로 글자들이 흐르는 듯한 배치)

- block 속성에 사용 가능하다.

 

clear 속성

- float 속성을 사용하면 주변으로 컨텐츠가 흐르듯이 배치가 되는데, 이를 해제하기 위해 clear 속성을 사용

- clear 속성이 지정된 영역 이후로는 더 이상 float가 작동하지 않는다.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
img{
	float: right;
}

p{
	text-align: justify;
}
</style>

</head>
<body>
<h3>css - float/clear 속성</h3>
<!-- float: left/right/none(기본값)/inherit -->
<!-- 예) 이미지 주위에 텍스트를 감쌀때 사용하는 float 속성 -->
<p><img src="../images/pineapple.jpg" style="width:170px; height: 170px; margin-left:15px " alt="" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Praesentium blanditiis facilis reprehenderit voluptas placeat
 illum optio numquam est aut repellendus perferendis sit 
 expedita nemo iste iusto nam mollitia non neque.</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Praesentium blanditiis facilis reprehenderit voluptas placeat
 illum optio numquam est aut repellendus perferendis sit 
 expedita nemo iste iusto nam mollitia non neque.</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Praesentium blanditiis facilis reprehenderit voluptas placeat
 illum optio numquam est aut repellendus perferendis sit 
 expedita nemo iste iusto nam mollitia non neque.</p>
</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
.div1{
	border: 3px solid blue;
	float: left; /* 이러는 순간 block모드가 안됨 */
	/* 1. block 모드 깨짐
		2. width=100%였는데 그냥 내용물 자리만큼 잡히게 됨(높이도 마찬가지)
			=>한 층 더 떠있는 것
	 */
	 width: 100px;
	 height: 100px;
}
.div2{
	border: 1px solid red;
	clear: left; /* float 된 애 밑으로 떨어지며 영향받지 않아짐 */
}
</style>
</head>
<body>

<div class="div1">div1</div>
<div class="div2">Lorem ipsum dolor sit amet, 
consectetur adipisicing elit. Nesciunt molestiae 
voluptatem beatae possimus nemo ea iste impedit. 
Dicta atque quidem.</div>


</body>
</html>

 

 

파인애플 이미지가 박스에서 넘쳤다!

 

이미지가 박스에서 넘치는 현상을 막는 방법
첫째)  img와 text를 포함하는 요소 : div 태그에 overflow:auto를 준다
둘째)  (더 좋은 코딩, 새롭고 현대적인 방법) ::after 가상요소선택자  -  더 안전한 방법

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
	div{
		border: 3px solid #4CAF50;
		padding: 5px;
	}
	div>img{
	float: right;
	}
	
	/* 1.
	div{
	overflow: auto;
	}
	*/
	
    /*2.*/
	 div::after{
	content: "";
	clear: both;
	display: table;
	} /* 공식처럼 외우자는 */ 
	
	
	
</style>
</head>
<body>
	<div><img src="../images/pineapple.jpg" style="width:170px; height: 170px;" />
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Libero tenetur laudantium ducimus placeat voluptatibus voluptatum 
        esse illum veniam sint iusto voluptas nemo nulla impedit
        praesentium ut dicta voluptatem possimus laborum!
	</div>
	
	이미지가 박스에서 넘치는 현상을 막는 방법
	첫째) img와 text를 포함하는 요소 : div 태그에 overflow:auto를 준다
	둘째) (더 좋은 코딩, 새롭고 현대적인 방법) ::after 가상요소선택자 
			더 안전한 방법
	
	
</body>
</html>

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
*{
	box-sizing: border-box;
}
.header, .footer{
	background-color: grey;
	color: white;
	padding: 15px;
}
.menu{
	width: 25%;
}
.content{
	width: 75%;
}
.menu ul{
	list-style: none;
	margin: 0;
	padding: 0;
	
}
.menu ul li{
	padding: 8px;
	margin-bottom: 8px;
	background: #33b5e5;
	color: #fff;
}
.menu ul li:hover {
	background: #0099cc;
}

/* 메뉴바를 옆으로 */
.column{
float: left;
padding: 15px;
}

/* footer도 따라 붙은 걸 해결하자  */
.clearfix::after {
	content: "";
	clear: both;
	display: table;
}
	

</style>

</head>
<body>
<!-- .header>h1^.clearfix>.column.menu>ul>li*4^^.column.content>h1+p*2^^.footer>p -->
<div class="header">
	<h1>Seoul</h1>
</div>
<div class="clearfix">
	<div class="column menu">
		<ul>
			<li>Lorem.</li>
			<li>Lorem.</li>
			<li>Lorem.</li>
			<li>Lorem.</li>
		</ul>
	</div>
	<div class="column content">
		<h1>The City</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque architecto temporibus distinctio laudantium illo voluptates natus quisquam beatae odio dignissimos? Fuga laudantium architecto numquam soluta vitae culpa ullam neque eos?</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci nobis quis magni consequuntur architecto natus animi culpa at esse incidunt fugit ipsa laudantium illum quas dicta assumenda nulla? Assumenda aliquid.</p>
	</div>
</div>
<div class="footer">
	<p>Footer</p>
</div>
</body>
</html>
반응형
저작자표시 비영리

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

[days03] 수평, 수직 정렬  (0) 2020.12.07
[days03] 팝업폼(Popup Form)과 반응형 폼(Responsive Form)  (0) 2020.12.07
[days02] 웹페이지 스킨 선택 (샘플)  (0) 2020.12.04
[days02] 메뉴바 디자인하기, 웹페이지 틀 디자인하기  (0) 2020.12.04
[days02] 1) sticky와 2) fixed으로 sticky 효과 내기  (0) 2020.12.04
'Web/CSS' Related Articles more
Comments