float 속성 연습
● h1 블록이나 인라인 요소들은 가로 사이즈 없이 float 해도 크기가 자동으로 잡힙니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>float 속성 연습</title>
<style type="text/css">
* {margin:0; padding=0; }
li { list-style-type:none; }
body { font-size:10px "나눔고딕", nanumgodic; color:#333; }
h1 { font:bold 36px "나눔고딕", nanumgodic; background:#F0EFEF; padding:10px 100px; letter-spacing:3px; text-align:center; }
.intro { padding:10px; font-size:120%; text-align:center; }
.gallery li { float:left; width:250px; text-align:center; }
h2 { font:bold 30px "나눔고딕", nanumgodic; width:200px; height:100px; margin-left; padding-top:13px; color:#fff; text-align:center; }
.necklace h2 { background:#c00; }
.ring h2 { background:#248; }
.braclet h2 { background:#880; }
.cuffs h2 { background:#555; }
.gallery li p { padding:10px; text-align:justify; }
</style>
</head>
<body>
<h1>새로운 SS18 액세서리</h1>
<div id="container">
<p class="intro">J-LAND를 만나보세요. 아마 스스로에게 <strong>자신감을 북돋워 주는</strong> 표정있는 주얼리일 것입니다. </p>
<ul class="gallery">
<li class="necklace">
<h2>COINS 목걸이</h2>
<p>Coins 롱 목걸이</p>
<p>행운의 부적에서 영감을 받아 탄생한 매력적인 코인 장식을 선보입니다. 골든 브래스로 제작된 이 롱 목걸이는 장식이 매달려 있는 체인이 움직일 때마다 자유분방한 느낌을 선사합니다.
</p> </li>
<li class="ring">
<h2>COINS 반지</h2>
<p>Coins golden 브래스 반지</p>
<p>장인 정신이 깃든 해머드 효과로 완성된 우아한 golden 브래스는 행운의 부적에서 영감을 받아 탄생한 이 coin 반지를 한층 더 매력적인 아이템으로 만듭니다.
</p></li>
<li class="braclet">
<h2>Golden 팔찌</h2>
<p>Messages “LOVE” 팔찌</p>
<p>이번 시즌, 아이코닉 끌로에 Messages "Love” 브레이슬릿은 우아한 dark ruby 에나멜로 한층 풍성하게 장식되었습니다. </p></li>
<li class="cuffs">
<h2>Golden cuffs</h2>
<p>golden 브래스 걸 커프스</p>
<p>이 우아한 커프스는 과감한 디자인에 유쾌한 감성이 조화를 이룹니다. 위아래로 물결치는 듯한 가늘고 둥근 라인으로 ‘CHLOÉ girls’이라고 놓인 알파벳이 우아하게 손목을 감싸줍니다.</p></li>
</ul>
</div>
</body>
</html>
<예제>
● float를 쓰는 것은 float된 박스의 옆 공간 중에서 왼쪽에 붙인다는 뜻입니다. 계속 가로로 나열해야 하는 박스들은 맨 마지막 것을 제외하고는 모두 float:left; 여야 합니다.
'코딩배우기' 카테고리의 다른 글
| css 기본 문법, 선택자 (0) | 2018.05.12 |
|---|---|
| CSS3, box-shadow 예제 (0) | 2018.05.09 |
| 테이블(Table) 표만드는 요소 (0) | 2018.05.05 |
| stroke dashed line 응용하기 (0) | 2018.05.04 |
| CSS 테두리 속성 (0) | 2018.05.03 |
