WEB/CSS

[CSS] ch04-09. inline

밍글링글링 2017. 8. 28.
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

댓글