css기초이론 - CSS포지셔닝 - 엘리먼트 배치하기 (속성 : position, fixed)
HTML, CSS 2021. 1. 15. 00:46반응형
부모요소 : relative
자식요소 : absolute
좌표 속성 (left, right, top, bottom)은 position속성중 fixed, absolute, relative가 선언된 경우만 사용할수 있음
Semantic UI
Shipping Choose your shipping options
semantic-ui.com
codingworks.cafe24.com/section-works/40/
Class - Google Download
Continue at the stop If you switch to a mobile phone while using your laptop, you do not have to search again for the web page you were reading. With Chrome, you can instantly access open tabs, bookmarks, and recent search results from any device. In this
codingworks.cafe24.com
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous"
/>
<title>[css] position : fixed</title>
<style>
.arrow_up {
display: block;
/* border: 1px solid crimson; */
/* border-radius: 30px; */
color: #222222;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 30px;
/* 좌표가 있어야함 */
position: fixed;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>position: fiexed</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique sunt
quia animi exercitationem, ab odio corrupti iste ea, officia, quam porro
dolorem enim! Incidunt esse porro maiores ratione labore autem molestias
adipisci perspiciatis amet, magni iste eligendi hic beatae modi dolore
earum similique obcaecati repellat officia ad mollitia ducimus deleniti
et. Quis magni, alias, incidunt fugit ipsa laboriosam quisquam, nisi
sequi itaque deleniti cumque tenetur nulla minus earum fugiat! Sint
voluptatum aperiam odio magnam, laudantium ratione doloremque, sed
cumque perspiciatis, provident eveniet? Delectus sed dolorem in
sapiente. Distinctio quaerat, illum animi praesentium nam quibusdam
dolorum magnam consequuntur quam! Iure mollitia corrupti consectetur
distinctio quis laudantium, expedita quisquam unde libero maiores
tenetur voluptatibus. Consectetur numquam, eveniet ab enim perspiciatis
odit fuga sunt nisi veritatis fugiat reprehenderit totam, ratione
voluptatum corporis laborum amet iure corrupti cupiditate aliquid ipsa
quia minima omnis! In, sequi! Mollitia maiores eum nulla blanditiis,
facilis repudiandae corporis magnam sint fugiat natus laudantium velit
distinctio, explicabo pariatur eius. Esse aliquam qui debitis nesciunt
architecto fugit optio natus, iusto voluptatibus odio ea aliquid
repellat modi temporibus quisquam neque itaque magnam odit asperiores
similique illo blanditiis minima soluta in? Adipisci quas asperiores
dolor, nostrum nam sit totam ea tenetur officiis atque neque nulla
debitis delectus magnam tempora, similique numquam dignissimos quaerat!
Id totam necessitatibus cupiditate maiores recusandae sint illum in quas
minus quisquam repellat explicabo distinctio porro, hic labore et nemo
fugiat natus pariatur exercitationem nam magnam temporibus odio. Commodi
ad alias nihil provident modi cum laudantium, eum quibusdam numquam
delectus voluptatum repellendus ipsum sint dolorum veniam molestias at.
Placeat voluptates rem in maxime vitae quod qui deserunt aperiam
repudiandae dolorem quibusdam enim voluptatibus corrupti cum ad
accusamus, commodi, ea non repellat possimus ullam mollitia alias harum.
Possimus molestiae dolorem, excepturi adipisci consectetur vitae!
Reprehenderit a voluptatibus soluta nihil officiis atque maiores
corrupti ab sequi ipsam. Animi nostrum repellendus nesciunt alias qui
similique tempore quas maiores quae odio quis velit quasi, temporibus
deserunt, esse rerum beatae, numquam natus eum maxime dolores harum
recusandae vel consequatur. Eligendi, dicta nisi excepturi illum qui
amet minima nam assumenda eius, voluptatum ullam dolores adipisci
consequatur voluptatem neque quibusdam molestiae labore tempore! Dolorem
exercitationem mollitia sequi, dignissimos alias eos at autem, animi
perferendis omnis soluta quo officiis expedita officia ab tempore! Sit
vel quos cupiditate itaque minus tempore cumque ipsam debitis id
molestias, modi nostrum illo iure. Aperiam, similique soluta corporis,
nobis nam, debitis quisquam dolores temporibus vel magnam ex natus
aliquam. Dignissimos est suscipit labore iure accusantium vel unde
obcaecati dolores ipsam harum distinctio id doloribus repudiandae,
tenetur ea repellendus praesentium accusamus, at quae quas et ullam
similique! Architecto nesciunt sequi molestias, earum perspiciatis odit
ut natus odio molestiae unde illo, ipsa animi error iusto ex explicabo
quae sed! A, tempore necessitatibus iusto impedit non sit! Amet sunt ab,
pariatur modi aut voluptas fugiat velit ipsam, nulla, expedita porro
sint facilis eaque beatae est! Iure ex assumenda explicabo ullam dolorem
sit eveniet expedita modi fugiat illum asperiores tempora, repellat
eligendi ipsum optio libero hic laboriosam voluptates iusto. At
similique autem molestias, sequi dolorum quae soluta dolorem nobis
tenetur delectus repudiandae? Voluptatibus quis illum minus incidunt sit
sapiente ut. Exercitationem eaque blanditiis cupiditate. Nobis, ad eos
magni at nisi, laboriosam aliquam sint assumenda expedita voluptate hic
fugiat vel, amet accusantium id! Sapiente consequuntur, cumque beatae
repellendus unde perspiciatis repellat facilis. At, quos esse quo,
pariatur laudantium iste consequatur excepturi voluptatem reiciendis
consectetur perspiciatis tempora doloribus maiores sit nostrum eveniet
ex laboriosam dolorum repudiandae animi error? Tenetur asperiores odit
atque sapiente hic consequuntur. Harum tenetur ut magnam dolor neque,
quidem aspernatur molestias illum doloremque sed accusantium non
quisquam et praesentium rerum nam ducimus inventore fuga, dolorum hic
cumque cum voluptas omnis quam. Fugiat nam, architecto quam est
inventore, consequuntur perspiciatis ex animi cumque adipisci quas ad
perferendis facere ducimus. Officiis possimus laborum blanditiis
delectus doloribus eaque placeat officia libero! Voluptatem, corporis.
Sit mollitia consequatur ab. Tempora accusamus sapiente eum vitae
aperiam hic odit voluptas corrupti ullam inventore! Perspiciatis sed et
similique voluptas dolore sequi, odit nam, nemo eveniet assumenda
tempore dolor, expedita repellendus ratione? Tempore voluptate sit
ullam, debitis qui eius magni laboriosam quod dolor excepturi quas quis
reprehenderit cumque nam aliquid distinctio deserunt sed. Vel,
reiciendis ipsa temporibus mollitia velit rerum aliquam repellendus,
doloribus incidunt consequatur voluptatum magni libero eaque ipsum
facilis eos voluptatibus quisquam. Eaque ab, repudiandae vero laboriosam
deleniti molestias quae, facere libero labore eveniet similique iusto
commodi quod beatae quia, nemo vel! Officia optio eaque porro itaque
dicta veniam distinctio eveniet laboriosam rerum. Minima aut totam quis
perspiciatis impedit alias, dolore eligendi officiis quia voluptatibus
provident, nulla dolorum dignissimos voluptatem reprehenderit commodi,
porro necessitatibus sit. Quia voluptatem natus corrupti cupiditate
repellendus placeat consectetur molestiae vel quis incidunt mollitia
vitae, in porro numquam molestias eligendi tempora eius assumenda
tenetur voluptate expedita minus ullam officia nemo. Ad est enim
repudiandae nesciunt a doloremque ipsam distinctio, ex ab vel. Minima
modi, magni architecto doloribus voluptate impedit similique atque
facere. Et inventore assumenda dicta incidunt tempore maxime, labore
odio alias iure vitae ipsam pariatur dolore unde, corporis consectetur
obcaecati ad impedit libero soluta voluptatem iusto beatae ullam sed!
Minima illo a ipsa, nostrum quam sequi voluptas facilis, nisi dicta
consequuntur sint consequatur ullam magnam debitis est libero blanditiis
harum laudantium, doloribus repudiandae aliquam perferendis? Aperiam
sint quasi dicta sit voluptas cupiditate fugit id, tempore ea et natus!
Non tempora, animi mollitia nulla adipisci sunt velit officia soluta
voluptates id exercitationem laborum pariatur quasi porro vitae ipsa
dolor obcaecati nam enim deserunt ab molestias molestiae. Tempora,
eaque, impedit voluptate tempore temporibus quas consectetur ea
voluptatibus officiis quis reprehenderit! Incidunt possimus dolore,
aperiam aliquam magnam deserunt magni. Libero nesciunt eaque alias neque
nulla id illum error dolorem eius temporibus velit quis autem, aperiam
iste tempora. Ea distinctio repellendus ab, quasi maiores culpa dolor
hic nulla consequatur veritatis eveniet consequuntur, ex, nostrum
doloremque mollitia illo optio voluptatibus beatae velit magnam!
Necessitatibus deserunt, ad quaerat recusandae minus aperiam quisquam
fugit! Explicabo asperiores animi alias dolorum corporis consequatur
debitis, dolore accusamus mollitia.
</p>
</div>
<a class="arrow_up" href="">
<i class="fa fa-arrow-circle-up" aria-hidden="true"></i>
</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css position: absolute</title>
<style>
body {
margin: 0;
}
div {
width: 50px;
height: 50px;
background-color: dodgerblue;
color: #ffffff;
text-align: center;
line-height: 50px;
border: 2px solid red;
}
.box1 {
/* world position */
position: absolute;
left: 0;
top: 0;
}
.box2 {
position: absolute;
left: 0;
bottom: 0;
}
.box3 {
position: absolute;
right: 0;
top: 0;
}
.box4 {
position: absolute;
right: 0;
bottom: 0;
}
h1 {
color: rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css position: absolute</title>
<style>
body {
margin: 0;
}
div {
width: 50px;
height: 50px;
background-color: dodgerblue;
color: #ffffff;
text-align: center;
line-height: 50px;
border: 2px solid red;
}
.box1 {
/* world position */
position: absolute;
left: 0;
top: 0;
}
.box2 {
position: absolute;
left: 0;
bottom: 0;
}
.box3 {
position: absolute;
right: 0;
top: 0;
}
.box4 {
position: absolute;
right: 0;
bottom: 0;
}
.box5 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
color: rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">4</div>
</body>
</html>
참고
www.youtube.com/watch?v=RyFTd9YJSDs&list=PLv_UUi9AVBVsziY1nF_9LxA6c_oaUdQ99&index=23
반응형
'HTML, CSS' 카테고리의 다른 글
| css기초이론 - css포지셔닝 (position: relative, absolute) (0) | 2021.01.15 |
|---|---|
| css기초이론 - 포지셔닝 엘리먼트 보이고 감추가 (z-index, visibility, opacity, display) (0) | 2021.01.15 |
| css 기초이론 - 박스모델 Box-Model(border, margin, padding) (0) | 2021.01.14 |
| css기초이론 - 레이아웃 스타일(block/inline element) (0) | 2021.01.14 |
| CSS 기초이론 - 배경 제어하기 (background-attachment) (0) | 2021.01.14 |