10. display 속성
페이지 정보
작성자 관리자 댓글 0건 조회 2,737회 작성일 22-01-06 23:18본문
10. display 속성
실습 : display.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>display 속성</title>
</head>
<body>
<header>
<h1>스타일시트 연습</h1>
</header>
<img src="https://www.kunsan.ac.kr/upload_data/board_data/BBS_0000021/thumbnail/164082752513095.jpg" width="138" height="82">
<img src="https://www.kunsan.ac.kr/upload_data/board_data/BBS_0000021/thumbnail/164067604084759.jpg" width="138" height="82">
<img src="https://www.kunsan.ac.kr/upload_data/board_data/BBS_0000021/thumbnail/164032845376415.jpg" width="138" height="82" >
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
</ul>
<div class="inline">div 1</div>
<div class="inline">div 2</div>
<div class="block">div 3</div>
</body>
</html>
스타일을 추가한다.
<style>
img{
display:block;
border-radius:10px;
margin:10px;
box-shadow:5px 5px 3px #aaa;
}
</style>
스타일을 수정한다.
<style>
img{
display:block;
border-radius:10px;
margin:10px;
box-shadow:5px 5px 3px #aaa;
}
li{
display:inline;
}
.inline{
visibility:hidden;
}
</style>
