html&css공부하기
이번글은 float , border 복습을 하겠습니다. ^^
자주자주 복습하시다보면 더 쉽게 이해할 수 있어요..
<html>
<head>
<title></title>
<style type="text/css">
*{margin:0; padding:0;}
#wrap{width:550px; height:250px; background:pink; border:5px dashed gray; margin:10px;}
h2{text-align:center; padding:10px;}
h3{padding-bottom:3px;}
.box1{width:260px; height:160px; background:lightgreen; float:left; margin-left:10px; }
.box2{width:260px; height:160px; background:yellow; float:right; margin-right:10px;}
#wrap:after{dispaly:block; clear:both;}
</style>
</head>
<body>
<div id="wrap">
<h2>애국가</h2>
<div class="box1">
<h3>1절</h3>
동해물과백두산이 마르고 닳도록<br>
하나님이 보우하사 우리나라만세<br>
무궁화 삼천리 화려강산<br>
대한 사람 대한으로 길이 보전하리<br>
</div>
<div class="box2">
<h3>2절</h3>
남산 위에 저 소나무 철갑을 두른 듯<br>
바람서리 불변함은 우리 기상일세<br>
무궁화 삼천리 화려강산<br>
대한 사람 대한으로 길이 보전하세<br>
</div>
</div>
</body>
</html>
결과입니다.
사이트를 만드는 그날까지 !!! 우리모두 퐈이야!!!
float, border // it개발자 스터디공간
'웹표준 > HTML5 & CSS3' 카테고리의 다른 글
| html&css공부_article (0) | 2015.04.28 |
|---|---|
| html&css공부 <nav>만들기 (0) | 2015.03.19 |
| html&css공부하기 [float,clear] (0) | 2015.03.12 |
| html&css공부하기 _ [dt, dd을 이용한 예제] (0) | 2015.03.11 |
| HTML&CSS공부하기 [padding, margin] (0) | 2015.03.10 |