728x90
반응형
05_id.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>id 클래스</title> <!--클래스는 중복될 수 있지만 id값은 중복될 수 없다.-->
<style>
@import "../css/05_id.css";
</style>
</head>
<body>
<div id="title">
<h2>YOANDORA</h2>
</div>
<div id="pic1">
<img src="../img/05_1.jpg">
</div>
<div id="pic2">
<img src="../img/05_2.jpg">
</div>
<div id="pic3">
<img src="../img/05_3.jpg">
</div>
</body>
</html>
05_id.css
@CHARSET "UTF-8";
#title{
float: left;
margin-left: 10px;
width:200px;
height:110px;
background-color:orange;
border:1px solid black; /*/선의굵기/선의모양:실선/선의색깔/ */
text-align:center; /*텍스트 가운데 정렬*/
}
#pic1{
clear: both;
float: left; /*왼쪽으로 플로팅*/
margin-left: 10px; /*왼쪽여백 10px*/
width:200px; /*너비 200px*/
height:110px; /*높이 110px*/
}
#pic2{
clear:both; /*이전 요소와 줄 바꿔서 표시*/
float:left;
margin-left:10px;
margin-top:20px;
height:120px;
}
#pic3{
float:left;
margin-left:10px;
margin-top:20px;
width:200px;
height:110px;
}
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch01-07.child (0) | 2017.08.22 |
|---|---|
| [CSS] ch01-06. descendant (0) | 2017.08.22 |
| [CSS] ch01-04.Class (클래스) (0) | 2017.08.22 |
| [CSS] ch01-03. 각종 태그 (tag) (0) | 2017.08.22 |
| [CSS] ch01-02. 리스트 스타일 (list style) (0) | 2017.08.22 |