<!DOCTYPE html>
<html lang="ko">
<head>
<title> display </title>
<style>
#mydiv{
background-color: chartreuse;
position: absolute;
left: 30px;
top: 380px;
width: 200px;
height: 146px;
overflow: scroll;
--display: block;
visibility: visible ;
}
p {color: red;}
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block; width: 100px; height: 100px;}
</style>
</head>
<body>
<h3>CSS Layout - The display Property</h3>
<iframe src="16_layout.html" frameborder="0" width="200" height="150"></iframe>
<hr>
<textarea cols="50" rows="10"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut orci sapien. Proin commodo felis purus, sed placerat magna porttitor eget. Phasellus maximus, nibh vitae pulvinar eleifend, ante purus finibus justo, in vulputate dui augue id libero. Integer feugiat accumsan mauris ac aliquet. Aliquam sed consequat orci, sed facilisis metus. Pellentesque scelerisque et eros sed mollis. Etiam nec porta ipsum. Aliquam sit amet dignissim ex. Praesent ac est varius nulla semper viverra. Etiam at metus lobortis, tempus elit lacinia, congue nisi. Integer ut maximus libero. Maecenas vel enim tincidunt, pretium mauris at, mattis massa. Sed auctor, velit tincidunt cursus mollis, turpis nisl facilisis lorem, id elementum mi purus vitae leo. Aliquam interdum arcu eget ultricies pharetra. Integer rhoncus tortor vitae congue sagittis.</textarea>
<hr>
<div id="mydiv">
Aenean in auctor felis. Phasellus vitae lorem eget lacus tincidunt feugiat. Nunc ultricies, mi in pulvinar cursus, mauris turpis consectetur erat, ut egestas sapien odio ac lacus. Phasellus dapibus nunc sed eros congue, sit amet porta urna euismod. Maecenas pharetra sit amet lectus et vulputate. Pellentesque quis dictum justo. Morbi finibus aliquam sagittis. Sed sed dolor eget metus placerat tristique eget sed magna. Nam eget mattis neque, a dapibus erat. Donec et lacinia libero. Praesent quis velit pellentesque, sollicitudin est vitae, luctus dolor. Ut blandit neque eget dolor commodo aliquet. Etiam fermentum convallis metus. Duis quis ante ut felis laoreet sagittis porttitor ut erat.
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h3>display 세부속성</h3>
<div style="display: none;">무궁화</div>
<div style="background-color: tomato; width: 300px; height: 300px;">오필승</div>
<div style="background-color: wheat;">코리아</div>
<p style="background-color: blue;">대한민국</p>
<header style="background-color: brown;">무궁화</header>
<section style="background-color: cornflowerblue;">아이티윌</section>
<hr>
<span style="background-color: aquamarine; width: 300px; height: 300px;">개나리</span>
<span style="background-color: cadetblue;">진달래</span>
<h1>The display Property</h1>
<h2>display: none:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex1">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
<h2>display: inline:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex2">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
<h2>display: block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex3">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
<h2>display: inline-block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex4">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
</body>
</html>
