다연이네

[days01] max-width(height)와 오버플로우(스크롤바 외) 본문

Web/CSS

[days01] max-width(height)와 오버플로우(스크롤바 외)

　다연　 2020. 12. 3. 20:22
반응형

1. max-width

최대 너비를 지정해서 더이상 커질수 없게 함

<!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: powderblue; /* 높이가 없어서 안보임 */
height: 100px;/* 높이를 강제로 주면 보임 */
/* width암것도 없으면 100% 가 생략된 것 */
/* width: 500px;  */
/* 브라우저 너비를 500px보다 작게 줄이니까 수평 스크롤바 자동 생성*/

max-width: 500px; /* max-width와 width의 차이 : 나중에 레이아웃 잡을 때 많이 모른다 */
/* 최대 너비를 500px로 설정하겠다 => 500보다 작아지면 너비 줄일 수 없음 (스크롤바 없음)*/

}
</style>


</head>
<body>
<h3>요소의 높이/너비</h3>
<div></div>
</body>
</html>

 

 

2. overflow: auto;

<!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>
p{
 background: yellow; 
}
/* :(콜론)이 붙어있는 애 : 가상 클래스 선택자  */
	p:first-child{  /* #p1{ */ 
		max-height: none; /* 기본값 */
	}
	p:last-child{  /* #p2{ */
		max-height: 50px; /* 라인(내용물)과 상관 없이 최대 높이 50px 유지 */
	/* 내용물이 넘침 => 오버플로우  */
	/* overflow: hidden; */ /*숨기자*/
	 overflow: auto;  /* 내용물 넘치면 스크롤바 생성(안넘치면 안생김) */
	/* overflow: scroll; */ /* 넘치든 안넘치든 스크롤바 생성 */
	}
</style>

</head>
<body>

<!--
	(차이점 기억)
	width
	height
 	max-width
	max-height
	min-width
	min-height 
				-->

<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat voluptatem beatae deleniti rerum aliquid officiis magnam vitae praesentium optio quis perspiciatis soluta voluptatibus explicabo! Illum laudantium ullam perferendis incidunt qui!</p>
<p id="p2">Voluptates voluptas accusamus laudantium ea porro quae incidunt quos nesciunt consectetur doloremque quam labore non nostrum distinctio facere ducimus cupiditate nam quibusdam sint quis ipsa aperiam explicabo in quisquam nemo?</p>

</body>
</html>

 

가상 클래스 선택자

p1이 p의 자식인 경우 (조건: 첫번째 자식)

#p1 대신에 p:first-child 처럼 작성해도 된다. (마지막 자식은 p:last-child)

 

#p2{
		max-height: 50px; /* 라인(내용물)과 상관 없이 최대 높이 50px 유지 */
	/* 내용물이 넘침 => 오버플로우  */
	/* overflow: hidden; */ /*숨기자*/
	 overflow: auto;  /* 내용물 넘치면 스크롤바 생성(안넘치면 안생김) */
	/* overflow: scroll; */ /* 넘치든 안넘치든 스크롤바 생성 */
	}

내용물이 넘치는 경우(오버플로우)

1. overflow: hidden (내용물 숨기기)

2. overflow: auto (넘치면 스크롤바 생성)

3. overflow: scroll (안넘쳐도 스크롤바 생성)

 

 

반응형
저작자표시 비영리

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

[days01] 구글 글씨체 사용하기, 외부 아이콘 사용하기  (0) 2020.12.03
[days01] CSS 텍스트: 색상, 정렬, 장식, 변환 등 + 글씨체  (0) 2020.12.03
[days01] 여백(margine)과 패딩(padding) + outline  (0) 2020.12.03
[days01] 테두리 속성 (border-style, border-radius)  (0) 2020.12.03
[days01] CSS 투명도, 박스 위치 지정과 클릭시 맨 위로 이동하는 법, background  (0) 2020.12.03
'Web/CSS' Related Articles more
Comments