CSS
CSS 레이아웃 스타일2
코딩어린이지만포기하지않겠어
2023. 5. 18. 17:28
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position</title>
<style>
p{
width: 500px;
height: 300px;
background-color: #eee;
border: 1px solid #ccc;
overflow: hidden;
}
#static{
/* 기본값 */
position: static;
}
#relative-1{
position: relative;
}
#relative-2{
position: relative;
/* 왼쪽에서 100px 떨어지게 */
left: 100px;
/* 위에서 -50px 떨어지게(음수 위로 이동) */
top: -50px;
}
#fixed{
position: fixed;
width: 100px;
height: 100px;
background-color: #222;
/* 오른쪽에서 30px 떨어지게 */
right: 30px;
/* 위에서 30px 떨어지게 */
top: 30px;
}
#outer{
/*relative를 기준으로 자리를 잡는다.
relative가없다면 body를 기준으로 잡음*/
position: relative;
}
#fires{
width: 300px;
height: 300px;
background-color: yellow;
}
#second{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 50px;
left: 50px;
}
#third{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<h2>포지셔닝</h2>
CSS를 이용해서 여러 요소를 적절하게 배치하는 것
<div id='outer'>
<p id='fires'>
</p>
<p id='second'>
</p>
<p id='third'>
</p>
</div>
<p id='static'>Pariatur et velit culpa tempor officia mollit. Cupidatat elit elit officia aute voluptate. Quis Lorem ea laboris do irure duis. Ea adipisicing do velit tempor Lorem irure id incididunt ad elit culpa fugiat cillum enim. Mollit in est deserunt est tempor deserunt esse.
Reprehenderit dolor exercitation duis labore dolor deserunt. Occaecat sit esse nisi excepteur mollit veniam. Esse enim ex enim ipsum in nostrud est cillum sunt. Minim quis adipisicing laborum nisi minim velit pariatur duis cillum exercitation ex nisi.
Adipisicing ea elit fugiat ut. Adipisicing est reprehenderit amet incididunt. Aliqua anim duis nulla aute deserunt do duis cupidatat incididunt velit. Id Lorem enim eiusmod do excepteur cillum magna nulla magna. Incididunt labore elit veniam culpa incididunt commodo qui laborum Lorem commodo aliqua elit nostrud et. Aliquip occaecat officia tempor velit eu tempor qui esse esse duis anim.</p>
<p>
Quis Lorem exercitation esse enim deserunt voluptate proident ipsum commodo pariatur.
</p>
<p>
Nulla esse esse culpa cupidatat culpa aliqua ad incididunt cillum pariatur.
</p>
<p>
Nulla esse esse culpa cupidatat culpa aliqua ad incididunt cillum pariatur.
</p>
<p id='relative-1'>Dolore mollit velit sit ad proident consectetur eiusmod ut commodo deserunt dolor deserunt reprehenderit qui. Excepteur et sit occaecat excepteur eiusmod esse ea est est aliquip consequat. Velit pariatur amet enim veniam sint ad fugiat ea ipsum sit reprehenderit. Anim proident cillum do magna aliqua. Deserunt ipsum velit do eiusmod mollit eu est laboris quis cupidatat fugiat aute. Cupidatat cillum veniam aute ea amet et exercitation magna sit ea tempor mollit officia sit. Eu tempor adipisicing ullamco laborum mollit aliqua reprehenderit.
Pariatur et irure sit sint ad officia eiusmod ullamco pariatur nulla. Sunt irure sunt voluptate eiusmod velit consequat est ut. Do laboris deserunt id deserunt. Nisi do veniam labore ut aute laboris mollit et cillum tempor nostrud culpa exercitation ex.
Excepteur do veniam quis ipsum sit irure excepteur laborum anim esse qui tempor esse consectetur. Reprehenderit qui voluptate esse ullamco laboris magna exercitation. Nisi incididunt deserunt minim in cupidatat commodo duis do dolore aliquip ad incididunt laborum Lorem. Quis aute eiusmod et aute magna voluptate irure amet ut officia.</p>
<p id='relative-2'>Laborum id non laborum velit cupidatat deserunt nisi amet occaecat tempor commodo non proident Lorem. Magna eu culpa labore eu dolore duis in duis cupidatat laborum tempor ut. Quis enim magna incididunt elit id occaecat est non mollit culpa laborum sunt ipsum. Occaecat elit sunt nulla culpa non ullamco exercitation quis in cillum consectetur incididunt. Consequat ea anim mollit elit velit velit sint duis consequat occaecat officia irure. Duis mollit excepteur ipsum voluptate id consectetur culpa Lorem. Dolore consectetur aute commodo ad quis enim aliqua mollit ad.
Lorem amet culpa ex culpa. Tempor aliqua sint in labore est nostrud cillum sunt ut incididunt anim. Deserunt laborum occaecat exercitation occaecat culpa laborum minim reprehenderit incididunt adipisicing id ipsum. Ipsum sint cupidatat eu fugiat et anim voluptate ad ad est qui. Esse anim id commodo occaecat cillum culpa anim irure exercitation anim commodo esse ut qui. Exercitation do Lorem ea laborum laboris sit amet cupidatat.
Do amet aute mollit qui exercitation anim proident. Labore ut ex ut elit do elit eu sint ex id. Deserunt in laboris eu ut reprehenderit.</p>
<p id='fixed'></p>
</body>
</html>