728x90
반응형
float 속성
float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줍니다.
이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됩니다.
다음 예제는 이미지와 글자를 함께 출력하는 예제입니다.
예제
<style>
img { float: left; margin-right: 20px; }
</style>
clear 속성
clear 속성은 float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해 줍니다.
컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어집니다.
예제
<style>
.left { background-color: #FF8C00; width: 150px; height: 50px; float: left; }
.right { background-color: #9932CC; width: 150px; height: 50px; float: right; }
</style>따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여, 이후에 등장하는 요소들이 더는 flaot 속성에 영향을 받지 않도록 설정해줘야 합니다.
예제
<style>
.left { background-color: #FF8C00; width: 150px; height: 50px; float: left; }
.right { background-color: #9932CC; width: 150px; height: 50px; float: right; }
p { clear: both; }
</style>
overflow 속성
float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면, 해당 요소의 일부가 밖으로 흘러넘치게 됩니다.
이때 overflow 속성값을 auto로 설정하면, 컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을 만큼 커지게 됩니다.
예제
<style>
div { border: 3px solid #73AD21; padding: 5px;}
img { float: left; }
.good { overflow: auto; }
</style>
float 속성을 이용한 레이아웃
현재 웹 페이지의 레이아웃은 대부분 float 속성을 이용하여 작성되고 있습니다.
다음 예제는 float 속성을 이용해 작성된 레이아웃을 보여줍니다.
예제
<style>
div.page { border: 3px solid #CD5C5C; overflow: auto; }
h2 { text-align: center; }
header{ border: 3px solid #FFD700; }
nav { border: 3px solid #FF1493; width: 150px; float: left; }
section { border: 3px solid #00BFFF; margin-left: 156px; }
footer{ border: 3px solid #00FA9A; }
</style>
CSS float 속성
| float | HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 설정함. |
| clear | float 속성이 적용된 후 나타나는 요소들이 더 이상 float 속성에 영향을 받지 않도록 설정함. |
| overflow | 내용(content)의 크기가 해당 요소를 감싸고 있는 컨테이너 요소보다 클 때 어떻게 처리할지를 설정함. |
| overflow-x | 내용(content)의 크기가 해당 요소의 수평 방향 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함. |
| overflow-y | 내용(content)의 크기가 해당 요소의 수직 방향 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함. |
https://www.tcpschool.com/css/css_position_float
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
<style>
#round{
border:1px solid #ccc;
border-radius: 80%;
box-shadow: 5px 5px 30px 2px #000;
}
</style>
</head>
<body>
<img src = "bear.jpg">
<img id ="round" src="bear.jpg">
</body>
</html>2.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 2</title>
<style>
section {
width: 800px;
margin: 0 auto;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.0em;
}
p {
line-height: 20px;
font-size: 12px;
}
footer {
width: 100%;
height: 50px;
background-color: #222;
clear: left;
}
footer > p {
color: #fff;
font-size: 0.9em;
text-align: center;
line-height: 50px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
article {
width: 350px;
height: 200px;
margin: 10px;
padding: 10px;
border: 1px dotted #ccc;
float: left;
}
footer {
clear: both;
}
</style>
</head>
<body>
<section>
<h2>강아지 용품 준비하기</h2>
<article class="at1">
<h3>강아지 집 </h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</article>
<article class="at2">
<h3>강아지 먹이 </h3>
<p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.</p>
</article>
<article class="at3">
<h3>밥그릇, 물병 </h3>
<p>밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다.물병은 대롱이 달린 것으로 선택하세요. 밥그릇에 물을 주게 되면 입 주변에 털이 모두 젖기 때문에 비위생적이므로 대롱을 통해서 물을 먹을 수 있는 물병을 마련하시는 것이 좋습니다.</p>
</article>
<article class="at4">
<h3>이름표, 목줄</h3>
<p>강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에 걸어주도록 하세요. 그리고 방울이 달린 목걸이를 하고자 하실 때는 신중하셔야 합니다. 움직일 때마다 방울이 딸랑 거리면 신경이 예민한 강아지들에게는 좋지 않은 영향을 끼칠 수 있기 때문입니다.</p>
</article>
<footer>
<p>boxmodel 연습하기</p>
</footer>
</section>
</div>
</body>
</html>3.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 3</title>
<style>
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
float: left;
margin-right: 0;
}
nav ul li a {
display: block;
padding: 10px 20px;
background-color: #ccc;
color: black;
text-decoration: none;
}
nav ul li a:hover {
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>
</nav>
</body>
</html>4.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>연습문제4</title>
<style>
* {
margin: 10px;
padding: 0px;
box-sizing: border-box;
}
#containier {
width: 700px;
}
.title {
margin-top: 20px;
padding-left: 10px;
margin-bottom: 0px;
}
.subtitle {
margin-top: 0px;
padding-left: 10px;
}
ul {
list-style: none;
}
li {
border: 1px solid #ccc;
width: 155px;
margin: 10px;
margin-left: 0px;
margin-top: 10px;
margin-bottom: 30px;
padding: 0px;
line-height: 15px;
height: 35px;
float: left;
text-align: justify;
}
.sub {
width: 155px;
margin: 0px;
padding: 5px;
float: left;
margin-right: 10px;
}
.gallery li {
background-color: rgb(221, 170, 169);
}
.gallery li + li {
background-color: rgb(170, 187, 203);
}
.gallery li + li + li {
background-color: rgb(238, 187, 170);
}
.gallery li + li + li + li {
background-color: rgb(170, 170, 120);
}
h3{
font-weight: border;
font-size: larger;
}
</style>
</head>
</head>
<body>
<h1 class="title">나의 아름다운 정원</h1>
<p class="subtitle">사람들이 선호하는 꽃들은 어떤 것들일까..<br>
아마 스스로에게<b>자신감을 북돋워 주는</b>표정 있는 꽃들 일 것이다.</p>
<div id="containier">
<ul class="gallery">
<li><h3>튜울립</h3></li>
<li><h3>제비꽃</h3></li>
<li><h3>호박꽃</h3></li>
<li><h3 >해바라기</h3></li>
</ul>
<div>
<p class="sub">너무 화려하지 않으며 고귀한 느낌을 가지고 있다. 붉은 색이 단연 으뜸이며 한 송이만 있어도 빼어나다.</p>
<p class="sub">드물게 푸른색을 띠고 있으며 작지만 시원해 보이는 어린 꽃이라고 할 수 있다. 여럿이 함께 았을 때 더욱 아름답다.</p>
<p class="sub">색도 모양도 화려하며 이름과 걸맞지 않게 아름다운 꼬층로 매우 완숙한 이미지를 풍기는 꽃이다.</p>
<p class="sub">태양만 바라보는 일편단심의 꽃으로 얼구이 큰 편에 속하며 송이가 적어야 제격이다.</p>
</div>
</div>
</body>
</html>
728x90
반응형
'HTML' 카테고리의 다른 글
| HTML(button)_2024-07-09 (0) | 2024.07.09 |
|---|---|
| HTML(Background)_2024-07-08 (0) | 2024.07.09 |
| HTML(CSS연습문제)_2024-07-05 (2) | 2024.07.05 |
| HTML(link_태그의 rel 속성)_2024-07-04 (0) | 2024.07.04 |
| HTML(iframe)_2024-07-03 (2) | 2024.07.03 |
