2023. 6. 24. 18:49ㆍ기술 창고/CSS
같은 영역에 서로 다른 타입의 태그 및 내용을 같은 영역을 공유하고 싶다면 float 옵션을 사용합니다.
예를 들어 글 내용 도중에 사진 이미지가 같이 포함이 되어 있고 같은 영역에 배치되어 사용되고 싶다면 이럴 때 float 특성을 사용합니다.
기본적으로 서로 다른 태그를 사용하게 되면 각각의 사용되어 보여지는 display 영역이 다르기 때문에 한 라인씩 해당 태그가 배치되어 보여집니다.
float 옵션을 적용하면 같은 display를 공유하게 되면서 적절하게 배치되어 마치 한 라인에 같이 보여지는 것처럼 보일 수 있습니다.
예시 코드
<div class="cat">
<h2>CatCSS</h2>
<img src="cat.jpeg" alt="cat in a box" />
<p class="first-paragraph">Nap all day cat dog hate mouse eat string barf pillow no baths hate everything but kitty
poochy. Sleep on keyboard
toy
mouse squeak roll over. Mesmerizing birds. Poop on grasses licks paws destroy couch intently sniff hand. The dog
smells
bad gnaw.</p>
</div>
-----------------------------------------------
img{
float: left;
}
float CSS 는 방향에 따른 여러 옵션을 가집니다.
left 로 지정했다면, 왼쪽에 내용이 배치되고 다른 내용이 해당 왼쪽으로 float 된 내용을 감싸는 형태로 배치되게 됩니다.
흔히 신문을 보면 확실히 내용을 알 수 있을 것입니다.
하지만 감싸는 형태가 아닌 형태를 원할 수도 있습니다.
예를 들어 footer 태그로 하단에 올 내용들을 삽입하게 되었을 때 이 내용은 기존처럼 float 형태로 다른 내용을 감싸는 형태로 되어서는 안됩니다.
이럴 때 float 옵션의 영향, 즉 감싸지지 않도록 할 때 clear 옵션을 사용합니다.
예시 코드
<div class="cat">
<h2>CatCSS</h2>
<img src="cat.jpeg" alt="cat in a box" />
<p class="first-paragraph">Nap all day cat dog hate mouse eat string barf pillow no baths hate everything but kitty
poochy. Sleep on keyboard
toy
mouse squeak roll over. Mesmerizing birds. Poop on grasses licks paws destroy couch intently sniff hand. The dog
smells
bad gnaw.</p>
</div>
<footer>
Copyright This is the footer
</footer>
-----------------------------------------------
img{
float: left;
}
footer{
clear: left;
}
감싸지는 형태가 되지않아야 하는 태그에 clear 옵션을 사용합니다.
위의 예시 코드를 보면 img 태그에 float left 속성이 적용되었으니 왼쪽으로 배치되고 감싸지는 형태가 되는데
이것을 clear left 옵션을 적용하여 left에 배치되어 감싸지는 스타일을 방지하도록 합니다.
그러면 기존처럼 새로운 display 영역으로 넘어가서 보여지게 될 것입니다.
만약 float left 옵션과 float right 옵션이 붙은 내용들이 모두 있다면 clear both 속성을 지정하여 기존 배치로 넘어가게 합니다.
예시 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Float</title>
<style>
div {
display: inline-block;
width: 40%;
}
img{
float: left;
}
p {
font-size: 2em;
}
.cat {
background-color: aquamarine;
float: left;
}
.dog {
background-color: coral;
float: right;
}
footer {
text-align: center;
background-color: blueviolet;
clear: both;
}
</style>
</head>
<body>
<div class="cat">
<h2>CatCSS</h2>
<img src="cat.jpeg" alt="cat in a box" />
<p class="first-paragraph">Nap all day cat dog hate mouse eat string barf pillow no baths hate everything but kitty
poochy. Sleep on keyboard
toy
mouse squeak roll over. Mesmerizing birds. Poop on grasses licks paws destroy couch intently sniff hand. The dog
smells
bad gnaw.</p>
</div>
<div class="dog">
<h2>DogCSS</h2>
<img src="dog.jpeg" alt="dogs in a box" />
<p class="second-paragraph">Heckin good boys and girls long woofer big ol wow very biscit long woofer heck what a
nice
floof, long doggo noodle
horse vvv very taste wow. Very taste wow many pats aqua doggo he made many woofs pupperino, puggo doing me a
frighten.</p>
</div>
<footer>Copyright. This is the footer</footer>
</body>
</html>
'기술 창고 > CSS' 카테고리의 다른 글
| [CSS] 반응형 CSS - Media Queries (0) | 2023.06.24 |
|---|---|
| [CSS] 반응형(Responsive) 웹 사이트 만드는 방법 (0) | 2023.06.24 |
| [CSS] CSS Display (0) | 2023.06.23 |
| [CSS] CSS 위치 지정 (0) | 2023.06.22 |
| [CSS] CSS Selector 결합 (0) | 2023.06.22 |