ํŽ˜์ด์ง€ ๋‚ด ์šฐ์ธก ํ€ต๋ฐฐ๋„ˆ ๋งŒ๋“ค๊ธฐ
ยท
html, css
๋žœ๋”ฉ ์ž‘์—…์„ ํ•˜๋ฉด ํ•„์š”ํ•œ ์šฐ์ธก ํ€ต๋ฐฐ๋„ˆ .quick_pos { position: relative; top: 100px; min-width: 1100px; width: 100%; } .quick_pos .quick { position: absolute; top: 100px; left: 50%; z-index: 60; margin-left: 650px; } .quick_pos .quick.fixed { position: fixed; } @media all and (max-width: 1660px) { .quick_pos { display: none; } } $(window).scroll(function () { let quickPos = $('.quick_pos').offset().top; let winPos..
css keyframes์„ ์ด์šฉํ•œ ์ค„์–ด๋“œ๋Š” progressbar
ยท
html, css
css๋ฅผ ์ด์šฉํ•œ progressbar ํ‚คํ”„๋ ˆ์ž„ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ด์šฉํ•˜์—ฌ ๊ธธ์ด์†์„ฑ์œผ๋กœ css ํšจ๊ณผ๋ฅผ ์ค€๋‹ค. ๊ฒ€์ •๋ฐ”ํƒ•์ด ์ „์ฒด์ด๋ฉฐ ๋ถ‰์€ ์ƒ‰์ด ์‹œ๊ฐ„์— ๋”ฐ๋ผ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ๋กœ ์ค„์–ด๋“ ๋‹ค. HTML CSS .progress { position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 80px; background-color: #000; } .progress .bar { position: absolute; top: 2px; left: 2px; width: calc(100% - 4px); height: calc(100% - 4px); background-color: #ff0b7b; transform-origin: left; animation: scal..
css wave effect
ยท
html, css
https://jsfiddle.net/n6fug4ac/ Edit fiddle - JSFiddle jsfiddle.net css์™€ ์ด๋ฏธ์ง€๋ฅผ ์ด์šฉํ•˜์—ฌ ์›จ์ด๋ธŒ ํšจ๊ณผ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ถœ์ฒ˜ : https://www.modoogong.com/promotion/ROCKETPASS
display flex ๋ฅผ ์ด์šฉํ•œ footer ํ™”๋ฉด ๋ฐ”๋‹ฅ์— ๋ถ™์ด๊ธฐ
ยท
html, css
์‚ฌ์ดํŠธ ์„ค๊ณ„ ํ•  ๋•Œ ๋ถ€์กฑํ•œ ์ปจํ…์ธ ๋กœ footer๊ฐ€ ์˜ฌ๋ผ์™€ ์—ฌ๋ฐฑ์ด ๋ณด์ด๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋Š”๋ฐ ์ด๋•Œ display flex ์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉดํ•˜๋‹จ์— footer๋ฅผ ๋ถ™์ด๋„๋ก ํ•ด๋ณธ๋‹ค . ํ—ค๋” ๋ฉ”์ธ ํ‘ธํ„ฐ #wrap { display: flex; flex-direction: column; min-height: 100vh; } #header { flex: 0 0 auto; } #main { flex: 1 1 auto; } #footer { flex: 0 0 auto; } .item{ flex: 1 1 auto /* ์ฆ๊ฐ€๋„ˆ๋น„ ๊ฐ์†Œ๋„ˆ๋น„ ๊ธฐ๋ณธ๋„ˆ๋น„ */ } ์ด๋Ÿฐ ์ฝ”๋“œ๋ธ”๋Ÿญ ํ…Œ๋งˆ๊ฐ€ ์ด์˜์ง€ ์•Š๋‹ค ... ๋‚˜์ค‘์— ์ˆ˜์ •ํ•ด์•ผ๊ฒ ๋”ฐ . ์ฐธ๊ณ  https://heropy.blog/2018/11/24/css-flexible-box/ htt..
button ๊ณผ a ๋งํฌ ์“ฐ์ž„ ์ฐจ์ด
ยท
html, css
button link ํ‚ค๋ณด๋“œ "์ŠคํŽ˜์ด์Šค"์™€ "์—”ํ„ฐ"๋กœ ๋™์ž‘ ํผ์„ ์ „์†กํ•˜๊ฑฐ๋‚˜ ์ทจ์†Œํ•  ๋•Œ ํŒ์—…(๋ชจ๋‹ฌ)์„ ์—ด๋•Œ ๋˜๋Š” ํŒ์—…๋ฉ”๋‰ด๋ฅผ ์—ด๋•Œ ๋™์˜์ƒ์„ ํ”Œ๋ ˆ์ด ํ• ๋•Œ ๋‚ด์šฉ์˜ ์ผ๋ถ€๋งŒ ๋ณ€๊ฒฝ๋  ๋•Œ ๋™์ž‘์„ ์œ„ํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•„์š” ๋งˆ์šฐ์Šค ์˜ค๋ฅธ์ชฝ ๋ฒ„ํŠผ์— ๋ณ„๋‹ค๋ฅธ ๊ธฐ๋Šฅ ์—†์Œ ํ‚ค๋ณด๋“œ "์—”ํ„ฐ"๋กœ ๋™์ž‘ ๋ธŒ๋ผ์šฐ์ €์˜ redraw/refresh ์ผ์–ด๋‚จ ๋‹ค๋ฅธ ๋ฌธ์„œ๋กœ ๋งํฌํ•˜๊ฑฐ๋‚˜, ๊ฐ™์€ ๋ฌธ์„œ๋‚ด ๋‹ค๋ฅธ anchor๋กœ ์ด๋™ํ•  ๋•Œ ์ƒˆ์ฐฝ์œผ๋กœ ํŽ˜์ด์ง€๋ฅผ ์—ด ๋•Œ href ์†์„ฑ์— ๋”ฐ๋ผ ํŽ˜์ด์ง€ ์ด๋™ ๋งˆ์šฐ์Šค ์˜ค๋ฅธ์ชฝ ๋ฒ„ํŠผ์— ์—ฌ๋Ÿฌ ๊ธฐ๋Šฅ ์žˆ์Œ 1023labs.com/posts/web-accessibility-btn/
css ๋ณ„๋น›๋‚ด๋ฆฌ๋Š” ํšจ๊ณผ ๋Š๋‚Œ
ยท
html, css
https://jsfiddle.net/y6398bgw/ Edit fiddle - JSFiddle - Code Playground jsfiddle.net https://jsfiddle.net/a7mdypo6/ Edit fiddle - JSFiddle - Code Playground jsfiddle.net ์ถœ์ฒ˜: https://go3.etoos.com/lecture/promotion/2020/02/moei/ http://247.etoos.com/cont/repeaterRegularClass.do
css ์–ด์›Œ๋“œ ๋ฐ˜์ง ํšจ๊ณผ
ยท
html, css
https://jsfiddle.net/qrfb5nj1/ Edit fiddle - JSFiddle - Code Playground jsfiddle.net ํšจ๊ณผ๋ฅผ ์ฃผ๊ณ ์ž ํ•˜๋Š” ์ด๋ฏธ์ง€ ์˜์—ญ์ด ๋น„์–ด์žˆ๋Š” png ํŒŒ์ผ์ด ํ•„์š”ํ•˜๋‹ค. ๊ทธ ๋’ค์— ์ดํŽ™ํŠธ ํšจ๊ณผ๋ฅผ ์ฃผ๋Š” ๊ฒƒ ์ถœ์ฒ˜)https://www.etoos.com/teacher/event/2020/02/lmk_25/default.asp
css ๋งํ’์„  ๋งŒ๋“ค์–ด์ฃผ๋Š” ์‚ฌ์ดํŠธ
ยท
html, css
https://leaverou.github.io/bubbly/ Bubbly — CSS speech bubbles made easy projects.verou.me ๋งํ’์„  ๋ชจ์–‘์œผ๋กœ ๊ตฌํ˜„ํ•ด์ฃผ๋Š” ์‚ฌ์ดํŠธ ํŽธ๋ฆฌํ•จ ๋ฒˆ์™ธ๋กœ ํˆดํŒ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์•„๋ž˜ ๊ธ€์—์„œ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. https://ranidiant.tistory.com/entry/ํˆดํŒ-๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํˆดํŒ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ https://atomiks.github.io/tippyjs/ Tippy.js - Tooltip, Popover, Dropdown, and Menu Library The complete tooltip, popover, dropdown, and menu solution for the web atomiks.github.io https://popper.j..
๋ž˜๋‹ˆ
'html, css' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๊ธ€ ๋ชฉ๋ก (2 Page)