본문 바로가기
Front-end/Css

[CSS] 높이, 너비 사이즈

by sky-j 2023. 7. 7.
반응형

높이(height)/너비(width)

너비부분에 주로 적용하는 속성.

★ max- : 확대될 수 있는 상한 설정
★ min- : 축소될 수 있는 하한 설정
※ 예) max-with: 100px; -> 100px까지만 확대됨.

 

max_min_sizing.html

웹 이미지

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>max, min 사이즈</title>
<style type="text/css">
	.d1 {
		max-width: 600px;
		height: 100px;
		background-color: skyblue;
	}
	.d2 {
		min-width: 600px;
		height: 100px;
		background-color: skyblue;
	}
</style>
</head>
<body>
	<div class='d1'>최대 너비</div><br>	
	<div class='d2'>최소 너비</div>
</body>
</html>
반응형

'Front-end > Css' 카테고리의 다른 글

[CSS] 링크버튼, 박스그림자(box-shadow)  (0) 2023.07.07
[CSS] 글자효과(color, text-align, text-decoration..)  (0) 2023.07.07
[CSS] 여백(margin, padding)  (0) 2023.07.06
[CSS] 테투리(경계선)  (0) 2023.07.06
[CSS] 배경  (0) 2023.07.06