Notice
Recent Posts
Recent Comments
Link
| ์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 |
Tags
- ์ธ๋ผ์ธ
- ์ฝ๋ฉํ ์คํธ
- Em
- carousel slider
- VSCODE๋จ์ถํค
- html ํ๊ทธ
- ์ ๊ฐ์ฐ์ฐ์
- ํฉ๊ณ ์๊ณ ๋ฆฌ์ฆ
- js
- ์ธ๋ผ์ธ๋ธ๋ก
- inline
- TAG
- ์๋ฐ์คํฌ๋ฆฝํธ
- ์๊ณ ๋ฆฌ์ฆ
- HTML
- object
- scss
- layout
- ํ๋ก๊ทธ๋๋จธ์ค ์ฝ๋ฉํ ์คํธ
- string
- vscode
- css
- ํ๋ก๊ทธ๋๋จธ์ค
- float
- input
- ๋ฌธ์์ด
- @mixin
- javascript
- SASS
- ::before
Archives
- Today
- Total
Outputor
position : sticky ๋ณธ๋ฌธ
position : sticky
- Edge ์ด์์์ ์ฌ์ฉ๊ฐ๋ฅํจ
- position : sticky ๋ ์คํฌ๋กค์ด ๋์ด์ ์ด ์์๊ฐ ํ๋ฉด์ ๋์ค๋ฉด ๊ณ ์ ์ํจ๋ค๋ ํน์ฑ์ด ์์
- ์คํฌ๋กค์ ํ ๋งํ ๋ถ๋ชจ ๋ฐ์ค๊ฐ ์์ด์ผํจ
- top ๋ฑ ์ขํ์์ฑ๊ณผ ํจ๊ป ์จ์ผ ์ ๋๋ก ๋ณด์
- ๋ถ๋ชจ ๋ฐ์ค๋ฅผ ๋์ด์ ์คํฌ๋กค ๋๋ฉด ์ด๋ฏธ์ง๋ ๊ฐ์ด ์ฌ๋ผ์ง
๋๋ณด๊ธฐ
์ฝ๋
<!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>Document</title>
<style>
body {
margin: 0;
background-color: #eee;
}
p {
margin: 0;
}
.inner {
width: 40%;
min-width: 630px;
height: 3000px;
margin: auto;
}
.sticky-box {
width: 100%;
height: 1500px;
margin-top: 800px;
}
.clearfx::after {
content: '';
clear: both;
display: block;
}
.float--left {
float: left;
}
.float--right {
float: right;
}
.text {
width: 210px;
box-sizing: border-box;
}
.text1,
.text2,
.text3 {
margin-top: 300px;
padding-left: 20px;
}
img {
width: 400px;
position: sticky;
top: 200px;
}
</style>
</head>
<body>
<div class="inner">
<div class="sticky-box clearfx">
<div class="text float--left">
<p class="text1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas asperiores deleniti
fuga qui voluptate. Dicta, magnam blanditiis nam nisi cumque quis omnis, mollitia vero
corrupti eius in ab veritatis porro.
</p>
<p class="text2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas asperiores deleniti
fuga qui voluptate. Dicta, magnam blanditiis nam nisi cumque quis omnis, mollitia vero
corrupti eius in ab veritatis porro.
</p>
<p class="text3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas asperiores deleniti
fuga qui voluptate. Dicta, magnam blanditiis nam nisi cumque quis omnis, mollitia vero
corrupti eius in ab veritatis porro.
</p>
</div>
<img class="float--right" src="./images/appletv.jpg" alt="img" />
</div>
</div>
</body>
</html>'๐จ CSS ๐ป' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| 3D ์ ๋๋ฉ์ด์ (0) | 2022.01.25 |
|---|---|
| Grid (0) | 2022.01.17 |
| transform, @keyframes animation (0) | 2022.01.14 |
| Pseudo-element (0) | 2022.01.06 |
| CSS ๋ฎ์ด์ฐ๊ธฐ, ์ข์ ์ฝ๋ ์์น (0) | 2022.01.06 |
'๐จ CSS ๐ป' Related Articles
more
