<body>
<h2>Practice</h2>
<a href="http://www.google.com">Go to google</a> <br /><br />
<!-- img -> self closing tag -->
<img src="1.png" , width="520" , height="300" /> <br />
<div> </div>
<div> </div>
<div ></div>
</body>div {
height: 150px;
width: 150px;
background-color: pink;
}
배경색을 핑크로 설정한 결과다.
얼핏보면 한 덩어리로 보일 수 있지만 block 형태라 개별적인 존재다.
address, blockquote, 거의 모든 요소가 block 형태! (block은 옆에 아무것도 올 수 없음)
(div 요소들이 개별적으로 나뉘어져 있는 것을 확인할 수 있음)
span은 inline 형태임.
a, image, code 등이 inline에 속함!
(inline 요소는 거의 없음, 옆에 다른 항목이 올 수 있다)
block을 inline으로 or inline을 block으로 바꾸는 것이 가능할까? → 가능함!
span {
display: block;
background-color: aqua;
}
display를 사용해 inline 형태인 span이 block으로 변경함
(block → 높이, 너비 oo)
div {
height: 150px;
width: 150px;
display: inline;
background-color: pink;
}그런데 div를 inline으로 바꾼 결과는 달랐다.
inline인 요소는 높이와 너비를 가질 수 없기 때문 !
(inline → 높이, 너비 xx)
console.log("불꽃남자 정대만"); 🏀❤