20190502/cssWidthHeight.html

<!doctype html> <!-- cssWidthHeight.html -->
<html>
  <head>
    <meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>CSS Width Height 실습</title>
    <style>
			.div1 {background:lightgray; width:300px; height:200px; border:1px solid black;}
      .img1 {background:beige; width:300px; height:200px; border:1px solid blue;}
      .wh1 {background:beige; max-width:500px; height:200px; border:1px solid red;}
      .wh2 {background:beige; max-width:500px; height:200px; border:1px solid blue;}
    </style>
  </head>
  <body>
		<p>width 300px * height 200px</p>
    <div class="div1">
      <img class="img1" src="http://usrcheat.github.io/Images/2/lobster.png">
    </div>
    <p>div=width300px*height200px</p>
		<div class="div1">
			<div class="wh1">
				화면(max-width 500px*200px)
			</div>
		</div>
		<p>width 300px*height200px</p>
		<div class="wh2">
			화면(max-width:500px*200px)
		</div>
  </body>
</html>