5-3. 레이아웃 연습
CSS의 float 속성을 이용하면 이미지 갤러리를 쉽게 만들 수 있습니다.
<style>
* { margin:0; padding: 0; }
#box { width:800px; margin:0 auto; }
#box h3 {
border-bottom: solid 1px black;
padding-bottom: 5px;
margin: 20px 0;
}
#box ul {
float: left;
list-style-type: none;
border: solid 1px #cccccc;
margin: 20px 15px;
}
#box li:nth-child(2) { padding: 10px; text-align: center; }
#box img { width: 230px; }
</style>
<body>
<div id="box">
<h3> 꽃 갤러리</h3>
<ul>
<li><img src="img/flower1.jpg"></li>
<li>꽃 1</li>
</ul>
<ul>
<li><img src="img/flower2.jpg"></li>
<li>꽃 2</li>
</ul>
<ul>
<li><img src="img/flower3.jpg"></li>
<li>꽃 3</li>
</ul>
<ul>
<li><img src="img/flower4.jpg"></li>
<li>꽃 4</li>
</ul>
<ul>
<li><img src="img/flower5.jpg"></li>
<li>꽃 5</li>
</ul>
<ul>
<li><img src="img/flower6.jpg"></li>
<li>꽃 6</li>
</ul>
</div>
</body>
ex5-6.html의 실행 결과
다음은 사이트 맵을 만드는 데 float 속성을 사용한 예입니다.
<style>
* { margin: 0; padding: 0; }
li { list-style-type: none; }
#sitemap {
height: 250px;
background-color: purple;
color: white;
}
#sitemap .box { width: 800px; margin: 0 auto; /* border: solid 1px red; */ }
#sitemap .menus {
float: left;
margin: 50px 40px;
/* border: solid 1px blue; */
}
#sitemap li { margin-top: 10px; }
</style>
<body>
<div id="sitemap">
<div class="box">
<div class="menus">
<h3>회사 소개</h3>
<ul>
<li>인사말</li>
<li>회사 연혁</li>
<li>조직도</li>
<li>찾아오시는 길</li>
</ul>
</div>
<div class="menus">
<h3>상품 소개</h3>
<ul>
<li>상품 1</li>
<li>상품 2</li>
<li>상품 3</li>
<li>상품 4</li>
</ul>
</div>
<div class="menus">
<h3>고객 센터</h3>
<ul>
<li>공지사항</li>
<li>고객 문의</li>
<li>자주 묻는 질문</li>
</ul>
</div>
<div class="menus">
<h3>매장 안내</h3>
<ul>
<li>매장 검색</li>
<li>매장 가입 문의</li>
<li>매장 지도</li>
</ul>
</div>
</div> <!-- box -->
</div> <!-- sitemap -->
</body>
ex5-7.html의 실행 결과
다음 예는 float 속성을 이용하여 작성한 열대어 상품 목록입니다.
<style>
* { margin: 0; padding: 0; }
li { list-style-type: none; }
#fish { width: 1000px; margin: 0 auto; }
#fish h2 { margin: 30px 0; }
#fish ul {
width: 310px; height: 350px;
float: left;
margin-right: 20px;
border: solid 1px #cccccc;
}
#fish img {
width: 270px;
padding:20px;
border-bottom: solid 1px #cccccc;
}
#fish li:nth-child(2) {
padding: 10px;
font-size: 23px;
font-weight: bold;
}
#fish li:nth-child(3) {
font-size: 16px;
padding: 0 10px;
color: blue;
}
#fish li:nth-child(4) { padding: 10px; }
#fish li:nth-child(4) span:first-child { float: left; color: orange; }
#fish li:nth-child(4) span:last-child { float: right; }
</style>
<body>
<div id="fish">
<h2>열대어 상품</h2>
<ul>
<li><img src="img/fish1.png"></li>
<li>열대어</li>
<li>화려한 빛깔의 물고기</li>
<li><span>10,000원</span><span>재고 : 3</span></li>
</ul>
<ul>
<li><img src="img/fish2.png"></li>
<li>열대어</li>
<li>화려한 빛깔의 물고기</li>
<li><span>10,000원</span><span>재고 : 3</span></li>
</ul>
<ul>
<li><img src="img/fish3.png"></li>
<li>열대어</li>
<li>화려한 빛깔의 물고기</li>
<li><span>10,000원</span><span>재고 : 3</span></li>
</ul>
</div>
</body>
ex5-8.html의 실행 결과
