[CSS] ch04-09. inline

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;
}