반응형
<!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>
<!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>반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] 배경(background) (0) | 2024.03.06 |
|---|---|
| [CSS] 다단(multi column) (0) | 2024.03.06 |
| [CSS] media query (0) | 2024.03.06 |
| flex (0) | 2024.02.19 |
| 포지션 (0) | 2024.02.19 |