width, hegiht 미지정 -> width: 100%, height: auto;
width, hegiht 미지정 -> width: 100%, height: auto;
width, hegiht 미지정 -> width: 100%, height: auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04-01_block-level</title>
<style type="text/css">
h2 {
border: 2px solid red;
}
p {
border: 2px solid gold;
border-radius: 20px;
background-color: yellow;
font-size: 20px;
padding: 30px;
}
.content {
border: 2px solid blue;
border-radius: 20px;
width: 300px;
height: 200px;
text-align: center;
background-color: skyblue;
}
a, img, span {
border: 2px solid green;
/* width: 300px; */
}
span {
font-size: 40px;
font-weight: bold;
}
</style>
</head>
<body>
<!--
# block level 요소
- 항상 새로운 라인에서 시작.
- width, height, margin, padding 속성 지정 가능.
- block level 요소 안에 inline 요소 사용 가능.
# inline level 요소
- Content 의 너비만큼 가로폭 차지.
- inline 요소 안에 block level 요소 포함불가.
-->
<h2>block level 요소</h2>
<p>width, hegiht 미지정 -> width: 100%, height: auto;</p>
<div class="content">
<span>width: 300px; height: 100px;</span>
</div>
<br>
<h2><span>inline</span> level 요소</h2>
<a href="#">link 1</a>
<a href="#">link 2</a>
<img src="../../image/img/img_submit.gif"/>
<img src="../../image/img/img_submit.gif"/>
</body>
</html>