Float는 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법입니다. 또한 레이아웃을 잡을 때도 사용하는 기능이기 때문에 꽤 중요합니다.
<!doctype html>
<html>
<head>
<style>
img{
width:300px;
float:left;
margin:20px;
}
p{
border:1px solid gray;
}
</style>
</head>
<body>
<img src="sample.mt.jpg" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita
</p>
<p style="clear:both;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita
</p>
</body>
</html>
float는 본문에 이미지를 삽입하기 위한 코드
태그에 float:left를 주게되면 이미지를 피해서 흘러가게 된다
이미지를 피해가지 않겠으면 하는 element에게는 clear:both라는 효과를 준다 left right를 구분하기 싫으면 both라고 한다
float를 활용한 holy grail layout
<!doctype html>
<html>
<head>
<style>
*{
box-sizing:border-box;
}
.container{
width:540px;
border:1px solid gray;
margin:auto;
}
header{
border-bottom: 1px solid gray;
}
nav{
float:left;
width:120px;
border-right:1px solid gray;
}
article{
float:left;
width:300px;
border-left:1px solid gray;
border-right:1px solid gray;
margin-left:-1px;
}
aside{
float:left;
width:120px;
border-left:1px solid gray;
margin-left:-1px;
}
footer{
clear:both;
border-top:1px solid gray;
text-align: center;
padding:20px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>
CSS
</h1>
</header>
<nav>
<ul>
<li>position</li>
<li>float</li>
<li>flex</li>
</ul>
</nav>
<article>
<h2>float</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit quae earum enim ab distinctio corrupti eius reprehenderit non, rerum ut nisi autem cum sint perferendis eum id velit, molestias nesciunt. Ullam dignissimos consequuntur explicabo id voluptas vel deleniti nesciunt veritatis iusto commodi, laudantium cumque vero deserunt laboriosam. Ea, quia est?
</article>
<aside>
ad
</aside>
<footer>
copyleft
</footer>
</div>
</body>
</html>
태그들을 semantic 태그들로 감싸준다 nav article aside footer 등
nav에 float효과를 주고 article에도 float 효과를 주면된다
article에 width값을 300 픽셀을 준다
ad도 article처럼 하려면 aside에 float:left값을 준다
footer에서 float 효과를 지우려면 clear:both;라고 쓴다
선을 주려면 border-top:1px solid gray text-align:center padding:20px을 준다
nav가 길어지면 선이 끊기지않게하기 위해서 nav의 오른쪽에 border-right:1px solid gray를 주고
article의 왼쪽에도 border-left값을 준다
nav 오른쪽의 선과 article 왼쪽의 선이 겹치면서 두꺼워진다 article에 margin-left:-1px을 준다
줄이면 화면이 깨지는데 container라는 class값을 가진 div태그를 만들고 article을 container에 넣으면 된다
container의 크기를 고정시키면 화면의 크기와는 상관없이 글씨가 고정된다
box model에서는 기본적으로 테두리를 포함해서 계산한다 box를 포함해서 측정하는 효과가 box-sizing이다
모든 엘리먼트에 대해서 박스를 선택할때는 box가 아니라 테두리를 기준으로 한다 box-sizing:border-box;라고 하면된다
container를 화면 가운데에 놓고 싶다면 margin:auto를 주면된다
'웹(Web) > CSS' 카테고리의 다른 글
| 배경(background) (0) | 2021.04.15 |
|---|---|
| 다단 (0) | 2021.04.15 |
| media query (0) | 2021.04.15 |
| Flex (0) | 2021.04.15 |
| 포지션 (0) | 2021.04.15 |
댓글