14th DAY
포지션 absolute, , relative, fixed, sticky와 응용
<!DOCTYPE html>
<html lang="en">
<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>2022.06.03. position 01</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
height: 100px;
background: rgba(255, 0, 0, 0.3);
text-align: center;
line-height: 100px;
color: #fff;
}
/* position: relative; 좌표를 가지는 position상태로 만들어준다.
position의 floating이나 w의 변화가 없다. */
/* div로 선택자를 잡는 일 거진 없다. */
/* relative를 줘도 변형은 없다. */
.position-relative div {
position: relative;
top: 100px;
left: 100px;
/* 마진과는 다른 느낌 */
width: 100px;
}
/* position: absolute;의 기준을 부모요소의 position:relative, absolte, fixed로 기준을
만들어 줄 수 있다. */
.position-absolute {
position: relative;
margin: 0 0 100vh 0;
}
/* position: absolute;는 뜬다, 쪼그라든다, 기준점이 업어져서 body를 기준으로 포개진다.
block의 속성을 가지게 된다. */
.position-absolute span {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
/* 스판은 인라인요소라서 원래는 와이드가 안 먹지만, 포지션을 줘서 먹히는 거 같음 */
/* position: relative;와 다르게 뜨고, 쪼그라든다.
색이 바뀐 이유는 color의 0.3이 5개가 겹쳐서 1이 넘어서 색이 진해짐 */
}
.position-absolute span:nth-child(1) {
top: 20px;
left: 20px;
}
.position-absolute span:nth-child(2) {
top: 40px;
left: 40px;
z-index: 999;
/* z-index로 흐름의 순서를 바꿔줄 수 있다. 정수를 쓴다.
부모의 z-index를 역전하지 못한다.
999로 하면 맨 위로 올라옴
-1이 되면 맨 아래로 내려감 */
}
.position-absolute span:nth-child(3) {
top: 60px;
left: 60px;
}
.position-absolute span:nth-child(4) {
top: 80px;
left: 80px;
}
.position-absolute span:nth-child(5) {
top: 100px;
left: 100px;
}
/* position:fixed; 기준이 없다.(viexport를 기준으로 한다.)
스크롤바가 생기지 않는다.*/
.position-fixed {
position: fixed;
top: 30px;
right: 30px;
}
.position-sticky {
position: sticky;
top: 0;
left: 0;
background: #333;
color: #fff;
line-height: 100px;
}
</style>
</head>
<body>
<header class="position-sticky">
header
</header>
<section class="position-relative">
<div class="box">01</div>
<div class="box">02</div>
<div class="box">03</div>
<div class="box">04</div>
<div class="box">05</div>
</section>
<section class="position-absolute">
<span class="box">01</span>
<span class="box">02</span>
<span class="box">03</span>
<span class="box">04</span>
<span class="box">05</span>
<button class="position-fixed">FIXED</button>
</section>
</html><absolute, , relative, fixed>
<!DOCTYPE html>
<html lang="en">
<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>2022.06.03. position 02</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.sticky {
position: sticky;
top: 0;
left: 0;
height: 100vh;
color: #fff;
text-align: center;
line-height: 100vh;
}
header {
background: #f00;
}
main {
background: #ff0;
}
footer {
background: #00f;
}
.container {
display: flex;
}
.container figure {
flex: 1;
line-height: 1.4;
}
.container figure:nth-child(2) {
background: #333;
height: 100vh;
}
</style>
</head>
<body>
<header class="sticky">
header
</header>
<main class="sticky">
main
</main>
<section class="sticky">
<div class="container">
<figure>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur odio tenetur ea recusandae
reprehenderit nesciunt fugit facilis illum similique modi amet doloremque porro, odit, adipisci quis
velit? Eligendi unde quos ducimus facere adipisci, cum natus delectus tenetur voluptatem earum tempore
itaque perferendis nemo laboriosam illo, error veniam commodi quibusdam deleniti rem repellat cumque.
Atque facilis voluptates aperiam consequatur praesentium unde laborum asperiores, tenetur pariatur? Est
quaerat, placeat sit consectetur similique repellendus ea recusandae vitae fuga omnis veritatis at
alias, odio eveniet eligendi? Pariatur dolorum nisi, vero, illum nobis sit, autem consectetur laboriosam
eaque voluptatem dignissimos at ab possimus neque hic.
</figure>
<figure>
</figure>
</div>
</section>
<footer class="sticky">
footer
</footer>
</html><stick>
<!DOCTYPE html>
<html lang="en">
<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>2022.06.03. position 03</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/position03.css">
<script src="../js/jquery-1.12.4.min.js"></script>
<script src="../js/position03.js"></script>
</head>
<body>
<header>
<h1>
<img src="../img/mango.png" alt="">
</h1>
<i class="xi-bars"></i>
</header>
<section id="section01" class="sticky section01">
<figure>
<img src="../img/visual.jpg" alt="">
</figure>
<figure class="abs">
<img src="../img/mango.png" alt="">
</figure>
</section>
<section id="section02" class="sticky section02">
<h2>#MANGOGIRLS</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio eligendi, odit consequatur mollitia<br />
architecto ullam ratione. Modi placeat corporis minus laudantium facere quo, <br />at vel explicabo
delectus,
corrupti fugit veritatis.
</p>
<div class="container">
<figure>
<img src="../img/insta01.jpg" alt="">
</figure>
<figure>
<img src="../img/insta02.jpg" alt="">
</figure>
<figure>
<img src="../img/insta03.jpg" alt="">
</figure>
<figure>
<img src="../img/insta04.jpg" alt="">
</figure>
</div>
</section>
<section id="section03" class="sticky section03">
<div class="container">
<figure class="left"></figure>
<figure class="right"></figure>
</section>
<section id="section04" class="sticky section04">
<div class="container">
<figure class="left">
<h2>We inspire the world<br />
by sharing our<br />
passion for<br />
Mediterranean style<br />
and culture
</h2>
<p>
We inspire the world by sharing our passion for Mediterranean style and culture.<br />
The water that bathes our coasts, the warmth of its light and the joy of our people.<br />
At MANGO, we want to share the best of the Mediterranean essence we have<br />
cultivated for over 35 years. The taste for a slow life and an appreciation for detail,<br />
which we translate from our collections into timeless designs that are committed to<br />
the environment. A natural and contemporary style that also unites us through the<br />
enjoyment of culture in all its forms.
</p>
<a href="">Discover more</a>
</figure>
<figure class="right"></figure>
</section>
<section id="section05" class="sticky section05">
<div class="container">
<figure class="left"></figure>
<figure class="right">
<h2>We inspire the world<br />
by sharing our<br />
passion for<br />
Mediterranean style<br />
and culture
</h2>
<p>
We inspire the world by sharing our passion for Mediterranean style and culture.<br />
The water that bathes our coasts, the warmth of its light and the joy of our people.<br />
At MANGO, we want to share the best of the Mediterranean essence we have<br />
cultivated for over 35 years. The taste for a slow life and an appreciation for detail,<br />
which we translate from our collections into timeless designs that are committed to<br />
the environment. A natural and contemporary style that also unites us through the<br />
enjoyment of culture in all its forms.
</p>
</figure>
</div>
</section>
<section id="section06" class="sticky section06">
<div class="container">
<figure class="left"></figure>
<figure class="right"></figure>
</div>
</section>
<footer class="sticky">
<div class="container">
<figure class="left"></figure>
<figure class="right">
<div class="box">
<img src="../img/mango-w.png" alt="">
</div>
<ul class="customer">
<li><a href="">Help</a></li>
<li><a href="">Shops</a></li>
<li><a href="">Apps</a></li>
<li><a href="">Company</a></li>
<li><a href="">Press</a></li>
<li><a href="">Site map</a></li>
</ul>
<div class="sns">
<a href=""><i class="xi-kakaotal"></i></a>
<a href=""><i class="xi-instagram"></i></a>
<a href=""><i class="xi-github"></i></a>
</div>
<address>
© 2021 MANGO All rights reserved Privacy PolicyTerms & Conditions
</address>
</figure>
</div>
</footer>
<div class="cover">
<ul>
<li><a href="#section01">section01</a></li>
<li><a href="#section02">section02</a></li>
<li><a href="#section03">section03</a></li>
<li><a href="#section04">section04</a></li>
<li><a href="#section05">section05</a></li>
<li><a href="#section06">section06</a></li>
</ul>
</div>
</body>
</html><sticky 응용>
부모의 z인덱스를 넘어갈 수 없음
position / display
display: none;
슬라이드에서 중요함
다단메뉴에서도 중요함->애니메이션이 안 붙음
그러나 제이쿼리에서는 애니메이션이 붙음
부모레벨에 none이 있으면 밑에 있는 것도 다 없앤다.=상속됨
display: block;
나타나라는 의미와 박스가 되라는 의미를 가지고 있음
display:inline;
나타나라는 의미
좌우 패딩마진만 들어감
패딩은 백그라운드가 보임
(글자, 그림)
dislpay:inline-block;
나타나라는 의미
인라인(가로로 배열한다. 4px정도 벌어져있음)의 개념+블록이기도 함(와이드 하이트 패딩 마진 쌉가능)
text-align으로 중앙배열해줌=글자처럼 취급되기 때문에
position:static
포지션이 아니게 한다.=포지션의 특징을 가지지 않는다.
다단메뉴의 ul 떠있는 것들이 반응형으로 가면, 떠있으면 안되기 때문에 absolute를 static으로 바꿈
position:static
'수업내용' 카테고리의 다른 글
| [HTML, CSS] ::before와 ::after란 가상요소 선택자(pseudo element) (0) | 2022.07.31 |
|---|---|
| [HTML, CSS] position, hover, ::before&after (0) | 2022.07.31 |
| [HTML, CSS] 선택자 씹고 뜯고 맛보고 즐기고(하)_2022.06.02.THU (1) | 2022.06.02 |
| [HTML, CSS] 선택자 씹고 뜯고 맛보고 즐기고(중)_2022.06.02.THU (0) | 2022.06.02 |
| [HTML, CSS] 선택자 씹고 뜯고 맛보고 즐기고(상)_2022.06.02.THU (0) | 2022.06.02 |
