728x90
반응형
09_inline.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
@import "../css/09_inline.css";
</style>
</head>
<body>
<section class="content1">
<img src="../img/2.jpg">
<img src="../img/1.jpg">
<img src="../img/3.jpg">
</section>
<section class="content2">
<img src="../img/2.jpg">
<img src="../img/1.jpg">
<img src="../img/3.jpg">
</section>
</body>
</html>09_inline.css
@CHARSET "UTF-8";
.content1 img{
border: 2px solid black;
border-radius: 10px;
box-shadow: 5px 5px 3px #ccc;
}
.content2 img{
display:block; /*inline: 가로배치, block:세로배치*/
margin:10px 5px;
border:2px solid black;
border-radius:10px;
box-shadow:5px 5px 3px #ccc;
}
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch04-11. relative (0) | 2017.08.28 |
|---|---|
| [CSS] ch04-10. static (0) | 2017.08.28 |
| [CSS] ch04-08. div (0) | 2017.08.24 |
| [CSS] ch04-07. block (0) | 2017.08.24 |
| [CSS] ch04-06. boxshadow (0) | 2017.08.24 |