<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 개발자모드 키는 법 : F12 or 오른쪽 마우스_검사 -->
<style>
/* display : block
기본값이 무조건 한 줄을 차지하고 있는 요소
width, height 설정이 가능 (p태그)
display : inline
내가 담은 컨텐츠만큼만 크기로 가지는 요소
width, height 설정이 불가능 (span태그)
*/
p, span {
width: 200px;
height: 200px;
}
p {
background-color: lightpink;
}
span {
background-color: lightblue;
}
</style>
</head>
<body>
<p>p태그입니다.</p>
<p>p태그입니다.</p>
<p>p태그입니다.</p>
<span>span태그입니다.</span>
<span>span태그입니다.</span>
<span>span태그입니다.</span>
</body>
</html>
댓글