๊ธฐ์กด์ ์๋ ๊ณ์ฐ๊ธฐ์์ ํ์คํ ๋ฆฌ๋ฅผ ๋ณด์ฌ์ฃผ๊ณ ์ถ๋ค๋ ์๊ฐ์ด ๋ค์ด์
์ด๋ฐ์ ๋ฐ ์๋๋ฅผ ํด๋ณด์๋ค
๐ค ์๋ก์ด ํ์คํ ๋ฆฌ๊ฐ ์์ผ ๋ ์คํฌ๋กค์ด ํ๋จ์ ๊ณ ์ ๋์ผ๋ฉด ์ข๊ฒ ์!
์ด๊ฑธ ๋ง๋ค๊ธฐ ์ํด์ ์ฐ์ ์คํฌ๋กค์ด y์ ์๊ฒจ์ผ๋ผ์
overflow-y: auto๋ฅผ ํด์ฃผ๊ณ ์คํฌ๋กค ํ๋จ์ ๊ณ ์ ํ๋๊ฑธ ์ฐพ๋ค
์ด ๋ธ๋ก๊ทธ๋ฅผ ๋ณด๊ณ display๋ฅผ ๋ฃ์ด์ผ ๋๋๊ตฌ๋ ๋ฅผ ๊นจ๋ฌ์!
๊ทธ๋์ display:flex ๋ฃ๊ณ wrap-reverse, row-reverse ์ผ๋ก
์๋ก๊ณ ์นจํด๋ ์คํฌ๋กค์ด ํ๋จ์ ๊ณ ์ ๋๊ฒ ํ์๋ค.
<!--display ์์ history ์ current ๊ฐ์ผ๋ก ๊ตฌ๋ถ-->
<div class="display">
<div class="history">
<span>123+12=135</span>
<span>234-12=222</span>
<span>12,345*123=1,518,435</span>
<span>147-14=133</span>
<span>159+15=174</span>
<span>11/10=1.1</span>
</div>
<div class="current">
<p>123-12 =</p>
<p>111</p>
</div>
</div>
/* history ์คํฌ๋กค ํ๋จ ๊ณ ์ ์ํด ๋ฃ์ ์ฝ๋ */
overflow-y: auto;
display:flex;
flex-direction: row;
flex-wrap: wrap-reverse;
--------------
/* - ์คํฌ๋กค y์ถ์ผ๋ก ๋ง๋ค๊ธฐ
- history์ ์๋ ์ปจํ
์ธ ๋ค flex ๋ก ์ ๋ ฌ
- ๊ฐ๋ก์ ๋ ฌ๋ก ํด์ผ span ๋ค์ด ์์ ๋ถ์ ๊ฒ
- wrap-reverse ๋ก ํด์ ํ๋จ๋ถํฐ ์์์ด๋ผ๊ณ ์๋ ค์ค์
์ถํ์ ์ง์ง history๊ฐ ์์ผ๋๋ html ์ฝ๋ ์ ์์์ ์์ด๊ฒ ํด์ผ๋จ */
๐ค ๋ค๋ฅธ os์์ ๋ณผ ๋๋ mac os ์ฒ๋ผ ๊น๋ํ ์คํฌ๋กค ๋๋์ด์์ผ๋ฉด ์ข๊ฒ ๋ค
์์ ๊ฐ์ ์๊ฐ์ด ๋ค์ด์ ์๋ ์์๋ค์ ์ฌ์ฉํด ์คํฌ๋กค๋ฐ์ ๋ฐฐ๊ฒฝ์๊ณผ ๋ชจ์์ ๋ณ๊ฒฝํ๋ค.
::-webkit-scrollbar
: ์คํฌ๋กค ๋ฐ ์ ์ฒด
::-webkit-scrollbar-thumb
: ์คํฌ๋กค ๋ฐ ๋ง๋ ๋ถ๋ถ
::-webkit-scrollbar-track
: ์คํฌ๋กค ๋ฐ ๋ฐฐ๊ฒฝ(?)
๐ค ํ์คํ ๋ฆฌ ๋ด์ญ๋ค์ ๊ตฌ๋ถํ ์ ์๋ ๊ตฌ๋ถ์ ์ด ์์ด์ผ ํ ํ ๋ฐ,,,
์ด๊ฑฐ๋ ์ง์ง javascript๋ก ๊ฐ๋จํ๊ฒ ๊ตฌํ ๊ฐ๋ฅํ์ง๋ง
์ง๊ธ์ css๋ง ์ฌ์ฉํด์ ๊ณ์ฐ๊ธฐ๋ฅผ ๋ง๋๋๊ฑฐ๋๊น! (๋ผ๋ ๋ณ๋ช
)
ํ์คํ ๋ฆฌ ๋ด์ญ๋ค์ด ์์ผํ
๋ฐ ๊ทธ๋ค์ ๊ตฌ๋ถํ๊ธฐ ์ํด์
๊ฐ span ๋ค์ ,
๋ฅผ ๋ถ์ฌ๋ผ๋ฅผ ํ๊ธฐ ์ํด ::after
๋ฅผ ์ฌ์ฉํ๋ค.
(์์ ๋ถ์ด๋ ค๋ฉด ::before
์ ์ฌ์ฉํ๋ฉด ๋จ)
๊ทธ๋ ๊ฒ ๋ฃ์ ,
์ ์์ด ํ์์ด์ฌ์ ์ฒ๋จ์ ์ซ์์ ์ฐํ๋ ์ฝค๋ง๋ ๋น์ทํด ๊ตฌ๋ถ์ด ์ด๋ ค์ ๋ค๐คข
๊ทธ๋ ์คํฐ๋์ ์๋ฆ๋์ ์์ด๋์ด๋ก ์ปฌ๋ฌ๋ฅผ ๋ฃ๊ณ , ์ถํ์ ;
์ด๊ฒ ์ข๊ฒ ๋ค๋ ์๊ฐ์ด ๋ค์ด์ ๋ณ๊ฒฝใ
.display .history>span::after{
content:';';
margin-right:0.5rem;
color:#1886FF;
}
๐ค ์คํฌ๋กค ์์ญ ์๋จ์ blur ๋๋์ ์ค์ ๋ ๋๊ธฐ๋ ๋๋์ ์์ ๊ณ ์ถ์๋ฐ,,
์ด๊ฒ ์ ๋ง ์ค๋๊ฑธ๋ ธ๋ค..๐ญ๐ญ
์ฒ์์๋ absolute
์ฐ๊ธฐ ์ซ์ด์ ๊ทธ๊ฑฐ ๋ง๊ณ ๋ค๋ฅธ๊ฑฐ!! ๋ฅผ ์ฐพ๋ค๊ฐ
๊ฒฐ๊ตญ ๋์์จ position: absolute
,,ใ
,,
๊ทผ๋ฐ ์ด๊ฑธ ์ด๋์ ๋์ฐ์ง??? ์๊ฐํ๋ค๊ฐ ์ ๋ง๋ค ::after
๊ทธ๋ฐ๋ฐ ์๊พธ width ๊ฐ ์๋ง๊ฑฐ๋ ์์น๊ฐ ์๋ง๊ฑฐ๋,,
๋๋์ฒด ์ด์ ๊ฐ ๋ญ์ง ํ๊ณ ์์ ๋ ์คํฐ๋ ๋ค๋ฅธ๋ถ์ด ์ค๋ช
ํด์ฃผ์๋ ๊ฑธ ๋ฃ๊ณ
์ ๋ง๋ค relative
!!
absolute
์ฐ๋๋ฐ๋ relative
๊ฐ ๊ฐ์ด ์ฐ์ฌ์ผ ๋๋ค๋ ๊ฑธ ์๊ณ ์์๋ค.
์ค๋์ผ๋ก ๋ ์ ์์ ๊ฒ ๊ฐ์ ๋๋์ด๋๊น
( position: absolute
๋ฅผ ์ฐ๊ธฐ ์ํด์๋ ์ด๋๋ฅผ ๊ธฐ์ค์ผ๋ก ๋์ธ์ง๋ฅผ ์๋ ค์ค์ผ ํ๊ธฐ ๋๋ฌธ์ ๊ธฐ์ค์ ์ก์ position: relative
๋ฅผ ๊ธฐ์ค ์์์ ๋ฃ์ด์ค์ผ ํ๋ค.)
๊ทธ๋ ๊ฒ ๋ฃ์ด์ค css
(์๋ซ๋ถ๋ถ์๋ ::after ์ฌ์ฉํด์ ๋ฃ์ด์ฃผ์๋ค)
.display::before {
content:'';
display: flex;
width:300px;
height:1rem;
top:15px;
right:26px;
position:absolute;
background: linear-gradient(to top, #eeeeee50, #eeeeee10, #eeeeee);
}
๋ฒํผ์ hover ์ active๋ ์ถ๊ฐํ๋ค