---------예제 풀어본거---------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
.clear { clear:both; }
a { display:block; color:#fff; text-decoration:none; }
.left {float: left; margin-right: 20px;}
.right {float: right; }
header { position:fixed; left:0; right:0; top:0; height:70px; background:rgb(77, 170, 199); z-index: 100;}
header p { text-align:center; line-height:70px;}
section { width:100%; margin-top:100px; padding-left: 20px; padding-right: 20px;}
section img { width:300px;}
section p {font-size: 14px;}
aside {position:absolute; right:50px; top:300px; z-index:10; width: 300px; height:150px; background: rgba(255, 0, 0, 0.8);}
aside a {float: right; margin: 10px 10px 0 0; }
aside p {padding-top:40px; text-align:center; color:white; font-size: 16px;}
footer { position: fixed; left:0; right:0; bottom:0; height:70px; margin-top: 100px; z-index: 100; background: pink; }
footer p { text-align: center; line-height: 70px;}
</style>
</head>
<body>
<header>
<p>여기는 헤더 부분</p>
</header>
<div class="clear"></div>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum, justo vehicula scelerisque malesuada, est dui vehicula sem, id vehicula orci ligula vel ex. Nam sit amet nisi ipsum. Mauris maximus finibus fringilla. Mauris quis commodo elit. Integer mattis sit amet magna in sollicitudin. Donec fringilla ligula sapien, et fermentum sem maximus vitae. Sed porta tempor efficitur. Cras dignissim ligula id leo euismod vulputate.</p>
<br>
<p> Suspendisse quis interdum orci, in gravida odio. Cras ante ex, consequat et finibus pharetra, dignissim nec dui. Aenean ullamcorper lectus ac ipsum convallis, a blandit sapien pulvinar. Vivamus volutpat eget urna eu condimentum. Praesent at sem diam. Suspendisse non pulvinar lorem. Praesent faucibus eros sed elit lobortis lobortis. Praesent eget metus purus. Integer enim enim, dictum ac venenatis at, tempor ut sapien.</p>
<br>
<img src="./imgs/photo1.jpg" alt="이미지" class="left">
<p>Curabitur vel commodo augue. Donec sed viverra mi, id porta magna. Sed ultricies lectus vel tellus sodales pretium. Aenean fermentum libero at lorem vestibulum, non auctor ex imperdiet. Vestibulum bibendum neque congue mauris euismod molestie. Aenean a lacinia tortor, vel euismod ante. Fusce non consectetur turpis, sit amet tristique enim. Nulla metus justo, finibus vel consectetur sit amet, dapibus quis dolor. Suspendisse fermentum bibendum sapien, vitae sodales ante hendrerit at. Fusce porta fringilla molestie. Integer commodo eros ac arcu ornare, ac viverra nibh finibus.</p>
<br>
<p>Etiam eros turpis, rhoncus eget orci at, ultricies posuere augue. Phasellus sit amet malesuada nisi, sit amet condimentum risus. Praesent elit turpis, rhoncus at porta a, mollis ac turpis. Donec egestas felis felis, et ultrices neque gravida eget. Sed justo tellus, pretium nec congue blandit, tempus quis arcu. Morbi sed tempus leo. Proin est velit, sodales ut convallis ac, blandit at nisl. Phasellus a accumsan odio. Nunc auctor, ex id tristique gravida, tortor est sodales leo, quis tincidunt magna lorem et turpis. Suspendisse sodales condimentum vestibulum. Curabitur a lorem nec erat varius sodales. Suspendisse commodo scelerisque neque eu dictum. Vestibulum consequat velit ex, et condimentum quam tincidunt a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed at felis augue.</p>
<br>
<p>Vestibulum at augue vel ante condimentum sodales. Integer id euismod ligula. Sed a enim eros. Ut bibendum nulla vel viverra fermentum. Nulla nec laoreet tellus. Nulla vitae rutrum tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis pharetra lectus ex, quis feugiat nisi ullamcorper nec. Proin rhoncus ultricies semper. Vivamus volutpat faucibus imperdiet.</p>
<br>
<p> Suspendisse quis interdum orci, in gravida odio. Cras ante ex, consequat et finibus pharetra, dignissim nec dui. Aenean ullamcorper lectus ac ipsum convallis, a blandit sapien pulvinar. Vivamus volutpat eget urna eu condimentum. Praesent at sem diam. Suspendisse non pulvinar lorem. Praesent faucibus eros sed elit lobortis lobortis. Praesent eget metus purus. Integer enim enim, dictum ac venenatis at, tempor ut sapien.</p>
<br>
<p>Curabitur vel commodo augue. Donec sed viverra mi, id porta magna. Sed ultricies lectus vel tellus sodales pretium. Aenean fermentum libero at lorem vestibulum, non auctor ex imperdiet. Vestibulum bibendum neque congue mauris euismod molestie. Aenean a lacinia tortor, vel euismod ante. Fusce non consectetur turpis, sit amet tristique enim. Nulla metus justo, finibus vel consectetur sit amet, dapibus quis dolor. Suspendisse fermentum bibendum sapien, vitae sodales ante hendrerit at. Fusce porta fringilla molestie. Integer commodo eros ac arcu ornare, ac viverra nibh finibus.</p>
<br>
<p>Etiam eros turpis, rhoncus eget orci at, ultricies posuere augue. Phasellus sit amet malesuada nisi, sit amet condimentum risus. Praesent elit turpis, rhoncus at porta a, mollis ac turpis. Donec egestas felis felis, et ultrices neque gravida eget. Sed justo tellus, pretium nec congue blandit, tempus quis arcu. Morbi sed tempus leo. Proin est velit, sodales ut convallis ac, blandit at nisl. Phasellus a accumsan odio. Nunc auctor, ex id tristique gravida, tortor est sodales leo, quis tincidunt magna lorem et turpis. Suspendisse sodales condimentum vestibulum. Curabitur a lorem nec erat varius sodales. Suspendisse commodo scelerisque neque eu dictum. Vestibulum consequat velit ex, et condimentum quam tincidunt a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed at felis augue.</p>
</section>
<aside>
<a href="#">X</a>
<div class="clear"></div>
<p>여기는 플로팅 박스</p>
</aside>
<footer>
<p>여기는 푸터</p>
</footer>
</body>
</html>
'Coding' 카테고리의 다른 글
| CSS 선수학습(7) (0) | 2021.07.16 |
|---|---|
| CSS 선수학습(6) (0) | 2021.07.15 |
| CSS 선수학습(4) (0) | 2021.07.14 |
| CSS 선수학습(3) (0) | 2021.07.13 |
| CSS 선수학습(2) (0) | 2021.07.12 |