-
글쓴이글
-
2022년 4월 24일 02:54 #32395
한지수참가자질문 1. 응용 문제로 내주신 프로그레스바 만들고 있는데요. 아무리 해도 프로그레스바가 늘어나지 않는데 어디가 잘못된 건지 못찾겠습니다ㅠㅠ
//html
<!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" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link href="main.css" rel="stylesheet" />
<title>Document</title>
</head>
<body>
<div class="barcontainer">
<div class="progressbar"></div>
</div>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<span class="badge bg-dark">Dark 🔄</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div style="padding: 120px 30px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget dui in
ipsum hendrerit commodo at at nunc. Nulla facilisi. Nam convallis, elit et
venenatis aliquet, felis elit aliquam ipsum, id dignissim lectus tortor
eget nibh. Donec efficitur at velit nec rutrum. Aenean mi diam, tincidunt
finibus posuere sed, ultrices a augue. Fusce et aliquam massa, eu
venenatis mi. Quisque malesuada vitae urna ut dictum. Proin sagittis massa
mauris, sit amet cursus turpis lobortis interdum. Nunc feugiat, metus
tincidunt dictum malesuada, lacus eros suscipit purus, eget pharetra
tortor magna ac purus. Phasellus ac pharetra purus. Nullam ornare ut neque
a posuere. Vivamus ante erat, auctor dignissim dignissim ac, dignissim ut
lectus. Vestibulum vel purus tellus. Phasellus sit amet volutpat est, et
efficitur leo. Pellentesque pulvinar metus eu risus lacinia, et egestas
augue mattis. Aliquam eget dolor ut ipsum bibendum iaculis. Donec tellus
orci, mattis in urna a, ultricies facilisis enim. Ut lobortis neque non
elementum sagittis. Aenean convallis enim vitae quam accumsan, ut pulvinar
mauris dapibus. Mauris magna arcu, rhoncus vitae bibendum ac, dapibus at
velit. Curabitur dignissim odio quis mi tempor scelerisque. Integer
finibus sed elit maximus euismod. Aenean nec sapien nec tortor luctus
sagittis. Cras consequat lacinia nisl vestibulum euismod. Vivamus in
pharetra est. Ut id ligula ut magna laoreet ultricies. Curabitur rutrum
bibendum tortor, et egestas mauris varius id. Aliquam at nibh convallis,
molestie ipsum eget, pretium ante. Interdum et malesuada fames ac ante
ipsum primis in faucibus. Sed suscipit neque aliquet augue lacinia, eget
rhoncus risus iaculis. Aenean egestas efficitur maximus. Vestibulum metus
libero, vulputate vitae dui at, cursus euismod orci. Nulla facilisi.
Vestibulum hendrerit pulvinar dapibus. Sed nec mauris eu ipsum pretium
imperdiet. In sit amet egestas orci, quis hendrerit velit. Nulla eget nunc
metus. Pellentesque aliquet tellus vel massa pretium tincidunt. Etiam
malesuada nibh neque, aliquam hendrerit massa viverra at. Vestibulum eu
auctor dolor. Nam vitae dolor at ligula efficitur posuere vitae eu massa.
Vestibulum nec rutrum risus. Vestibulum non metus sodales, sodales enim
in, facilisis dolor. Nunc ut euismod lorem. Pellentesque tristique ligula
sed risus cursus finibus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Nunc ullamcorper enim
pretium libero convallis tempor. Morbi dictum consectetur lobortis. Nulla
ultrices, leo in porta placerat, est elit tincidunt orci, sit amet
condimentum odio nibh quis magna. Curabitur congue tempus mi ac malesuada.
Cras gravida facilisis viverra. Donec id sem ut nisl rhoncus placerat.
Morbi sit amet tristique metus, in consequat ligula. Sed imperdiet risus
sit amet sapien congue dictum. Aenean tristique sapien at augue viverra,
eget pharetra quam tincidunt. Ut feugiat pulvinar libero, et consequat
felis aliquet vel. Nunc efficitur rhoncus tortor et tempus. Donec
consequat ante in magna finibus feugiat. Nam vitae dolor at ligula
efficitur posuere vitae eu massa. Vestibulum nec rutrum risus. Vestibulum
non metus sodales, sodales enim in, facilisis dolor. Nunc ut euismod
lorem. Pellentesque tristique ligula sed risus cursus finibus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Nunc ullamcorper enim pretium libero convallis tempor.
Morbi dictum consectetur lobortis. Nulla ultrices, leo in porta placerat,
est elit tincidunt orci, sit amet condimentum odio nibh quis magna.
Curabitur congue tempus mi ac malesuada. Cras gravida facilisis viverra.
Donec id sem ut nisl rhoncus placerat. Morbi sit amet tristique metus, in
consequat ligula. Sed imperdiet risus sit amet sapien congue dictum.
Aenean tristique sapien at augue viverra, eget pharetra quam tincidunt. Ut
feugiat pulvinar libero, et consequat felis aliquet vel. Nunc efficitur
rhoncus tortor et tempus. Donec consequat ante in magna finibus feugiat.
Nam vitae dolor at ligula efficitur posuere vitae eu massa. Vestibulum nec
rutrum risus. Vestibulum non metus sodales, sodales enim in, facilisis
dolor. Nunc ut euismod lorem. Pellentesque tristique ligula sed risus
cursus finibus. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Nunc ullamcorper enim pretium libero
convallis tempor. Morbi dictum consectetur lobortis. Nulla ultrices, leo
in porta placerat, est elit tincidunt orci, sit amet condimentum odio nibh
quis magna. Curabitur congue tempus mi ac malesuada. Cras gravida
facilisis viverra. Donec id sem ut nisl rhoncus placerat. Morbi sit amet
tristique metus, in consequat ligula. Sed imperdiet risus sit amet sapien
congue dictum. Aenean tristique sapien at augue viverra, eget pharetra
quam tincidunt. Ut feugiat pulvinar libero, et consequat felis aliquet
vel. Nunc efficitur rhoncus tortor et tempus. Donec consequat ante in
magna finibus feugiat. Nam vitae dolor at ligula efficitur posuere vitae
eu massa. Vestibulum nec rutrum risus. Vestibulum non metus sodales,
sodales enim in, facilisis dolor. Nunc ut euismod lorem. Pellentesque
tristique ligula sed risus cursus finibus. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Nunc
ullamcorper enim pretium libero convallis tempor. Morbi dictum consectetur
lobortis. Nulla ultrices, leo in porta placerat, est elit tincidunt orci,
sit amet condimentum odio nibh quis magna. Curabitur congue tempus mi ac
malesuada. Cras gravida facilisis viverra. Donec id sem ut nisl rhoncus
placerat. Morbi sit amet tristique metus, in consequat ligula. Sed
imperdiet risus sit amet sapien congue dictum. Aenean tristique sapien at
augue viverra, eget pharetra quam tincidunt. Ut feugiat pulvinar libero,
et consequat felis aliquet vel. Nunc efficitur rhoncus tortor et tempus.
Donec consequat ante in magna finibus feugiat. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Proin eget dui in ipsum hendrerit commodo at
at nunc. Nulla facilisi. Nam convallis, elit et venenatis aliquet, felis
elit aliquam ipsum, id dignissim lectus tortor eget nibh. Donec efficitur
at velit nec rutrum. Aenean mi diam, tincidunt finibus posuere sed,
ultrices a augue. Fusce et aliquam massa, eu venenatis mi. Quisque
malesuada vitae urna ut dictum. Proin sagittis massa mauris, sit amet
cursus turpis lobortis interdum. Nunc feugiat, metus tincidunt dictum
malesuada, lacus eros suscipit purus, eget pharetra tortor magna ac purus.
Phasellus ac pharetra purus. Nullam ornare ut neque a posuere. Vivamus
ante erat, auctor dignissim dignissim ac, dignissim ut lectus. Vestibulum
vel purus tellus. Phasellus sit amet volutpat est, et efficitur leo.
Pellentesque pulvinar metus eu risus lacinia, et egestas augue mattis.
Aliquam eget dolor ut ipsum bibendum iaculis. Donec tellus orci, mattis in
urna a, ultricies facilisis enim. Ut lobortis neque non elementum
sagittis. Aenean convallis enim vitae quam accumsan, ut pulvinar mauris
dapibus. Mauris magna arcu, rhoncus vitae bibendum ac, dapibus at velit.
Curabitur dignissim odio quis mi tempor scelerisque. Integer finibus sed
elit maximus euismod. Aenean nec sapien nec tortor luctus sagittis. Cras
consequat lacinia nisl vestibulum euismod. Vivamus in pharetra est. Ut id
ligula ut magna laoreet ultricies. Curabitur rutrum bibendum tortor, et
egestas mauris varius id. Aliquam at nibh convallis, molestie ipsum eget,
pretium ante. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Sed suscipit neque aliquet augue lacinia, eget rhoncus risus
iaculis. Aenean egestas efficitur maximus. Vestibulum metus libero,
vulputate vitae dui at, cursus euismod orci. Nulla facilisi. Vestibulum
hendrerit pulvinar dapibus. Sed nec mauris eu ipsum pretium imperdiet. In
sit amet egestas orci, quis hendrerit velit. Nulla eget nunc metus.
Pellentesque aliquet tellus vel massa pretium tincidunt. Etiam malesuada
nibh neque, aliquam hendrerit massa viverra at. Vestibulum eu auctor
dolor. Nam vitae dolor at ligula efficitur posuere vitae eu massa.
Vestibulum nec rutrum risus. Vestibulum non metus sodales, sodales enim
in, facilisis dolor. Nunc ut euismod lorem. Pellentesque tristique ligula
sed risus cursus finibus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Nunc ullamcorper enim
pretium libero convallis tempor. Morbi dictum consectetur lobortis. Nulla
ultrices, leo in porta placerat, est elit tincidunt orci, sit amet
condimentum odio nibh quis magna. Curabitur congue tempus mi ac malesuada.
Cras gravida facilisis viverra. Donec id sem ut nisl rhoncus placerat.
Morbi sit amet tristique metus, in consequat ligula. Sed imperdiet risus
sit amet sapien congue dictum. Aenean tristique sapien at augue viverra,
eget pharetra quam tincidunt. Ut feugiat pulvinar libero, et consequat
felis aliquet vel. Nunc efficitur rhoncus tortor et tempus. Donec
consequat ante in magna finibus feugiat. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Proin eget dui in ipsum hendrerit commodo at
at nunc. Nulla facilisi. Nam convallis, elit et venenatis aliquet, felis
elit aliquam ipsum, id dignissim lectus tortor eget nibh. Donec efficitur
at velit nec rutrum. Aenean mi diam, tincidunt finibus posuere sed,
ultrices a augue. Fusce et aliquam massa, eu venenatis mi. Quisque
malesuada vitae urna ut dictum. Proin sagittis massa mauris, sit amet
cursus turpis lobortis interdum. Nunc feugiat, metus tincidunt dictum
malesuada, lacus eros suscipit purus, eget pharetra tortor magna ac purus.
Phasellus ac pharetra purus. Nullam ornare ut neque a posuere. Vivamus
ante erat, auctor dignissim dignissim ac, dignissim ut lectus. Vestibulum
vel purus tellus. Phasellus sit amet volutpat est, et efficitur leo.
Pellentesque pulvinar metus eu risus lacinia, et egestas augue mattis.
Aliquam eget dolor ut ipsum bibendum iaculis. Donec tellus orci, mattis in
urna a, ultricies facilisis enim. Ut lobortis neque non elementum
sagittis. Aenean convallis enim vitae quam accumsan, ut pulvinar mauris
dapibus. Mauris magna arcu, rhoncus vitae bibendum ac, dapibus at velit.
Curabitur dignissim odio quis mi tempor scelerisque. Integer finibus sed
elit maximus euismod. Aenean nec sapien nec tortor luctus sagittis. Cras
consequat lacinia nisl vestibulum euismod. Vivamus in pharetra est. Ut id
ligula ut magna laoreet ultricies. Curabitur rutrum bibendum tortor, et
egestas mauris varius id. Aliquam at nibh convallis, molestie ipsum eget,
pretium ante. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Sed suscipit neque aliquet augue lacinia, eget rhoncus risus
iaculis. Aenean egestas efficitur maximus. Vestibulum metus libero,
vulputate vitae dui at, cursus euismod orci. Nulla facilisi. Vestibulum
hendrerit pulvinar dapibus. Sed nec mauris eu ipsum pretium imperdiet. In
sit amet egestas orci, quis hendrerit velit. Nulla eget nunc metus.
Pellentesque aliquet tellus vel massa pretium tincidunt. Etiam malesuada
nibh neque, aliquam hendrerit massa viverra at. Vestibulum eu auctor
dolor. Nam vitae dolor at ligula efficitur posuere vitae eu massa.
Vestibulum nec rutrum risus. Vestibulum non metus sodales, sodales enim
in, facilisis dolor. Nunc ut euismod lorem. Pellentesque tristique ligula
sed risus cursus finibus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Nunc ullamcorper enim
pretium libero convallis tempor. Morbi dictum consectetur lobortis. Nulla
ultrices, leo in porta placerat, est elit tincidunt orci, sit amet
condimentum odio nibh quis magna. Curabitur congue tempus mi ac malesuada.
Cras gravida facilisis viverra. Donec id sem ut nisl rhoncus placerat.
Morbi sit amet tristique metus, in consequat ligula. Sed imperdiet risus
sit amet sapien congue dictum. Aenean tristique sapien at augue viverra,
eget pharetra quam tincidunt. Ut feugiat pulvinar libero, et consequat
felis aliquet vel. Nunc efficitur rhoncus tortor et tempus. Donec
consequat ante in magna finibus feugiat. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Proin eget dui in ipsum hendrerit commodo at
at nunc. Nulla facilisi. Nam convallis, elit et venenatis aliquet, felis
elit aliquam ipsum, id dignissim lectus tortor eget nibh. Donec efficitur
at velit nec rutrum. Aenean mi diam, tincidunt finibus posuere sed,
ultrices a augue. Fusce et aliquam massa, eu venenatis mi. Quisque
malesuada vitae urna ut dictum. Proin sagittis massa mauris, sit amet
cursus turpis lobortis interdum. Nunc feugiat, metus tincidunt dictum
malesuada, lacus eros suscipit purus, eget pharetra tortor magna ac purus.
Phasellus ac pharetra purus. Nullam ornare ut neque a posuere. Vivamus
ante erat, auctor dignissim dignissim ac, dignissim ut lectus. Vestibulum
vel purus tellus. Phasellus sit amet volutpat est, et efficitur leo.
Pellentesque pulvinar metus eu risus lacinia, et egestas augue mattis.
Aliquam eget dolor ut ipsum bibendum iaculis. Donec tellus orci, mattis in
urna a, ultricies facilisis enim. Ut lobortis neque non elementum
sagittis. Aenean convallis enim vitae quam accumsan, ut pulvinar mauris
dapibus. Mauris magna arcu, rhoncus vitae bibendum ac, dapibus at velit.
Curabitur dignissim odio quis mi tempor scelerisque. Integer finibus sed
elit maximus euismod. Aenean nec sapien nec tortor luctus sagittis. Cras
consequat lacinia nisl vestibulum euismod. Vivamus in pharetra est. Ut id
ligula ut magna laoreet ultricies. Curabitur rutrum bibendum tortor, et
egestas mauris varius id. Aliquam at nibh convallis, molestie ipsum eget,
pretium ante. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Sed suscipit neque aliquet augue lacinia, eget rhoncus risus
iaculis. Aenean egestas efficitur maximus. Vestibulum metus libero,
vulputate vitae dui at, cursus euismod orci. Nulla facilisi. Vestibulum
hendrerit pulvinar dapibus. Sed nec mauris eu ipsum pretium imperdiet. In
sit amet egestas orci, quis hendrerit velit. Nulla eget nunc metus.
Pellentesque aliquet tellus vel massa pretium tincidunt. Etiam malesuada
nibh neque, aliquam hendrerit massa viverra at. Vestibulum eu auctor
dolor. Nam vitae dolor at ligula efficitur posuere vitae eu massa.
Vestibulum nec rutrum risus. Vestibulum non metus sodales, sodales enim
in, facilisis dolor. Nunc ut euismod lorem. Pellentesque tristique ligula
sed risus cursus finibus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Nunc ullamcorper enim
pretium libero convallis tempor. Morbi dictum consectetur lobortis. Nulla
ultrices, leo in porta placerat, est elit tincidunt orci, sit amet
condimentum odio nibh quis magna. Curabitur congue tempus mi ac malesuada.
Cras gravida facilisis viverra. Donec id sem ut nisl rhoncus placerat.
Morbi sit amet tristique metus, in consequat ligula. Sed imperdiet risus
sit amet sapien congue dictum. Aenean tristique sapien at augue viverra,
eget pharetra quam tincidunt. Ut feugiat pulvinar libero, et consequat
felis aliquet vel. Nunc efficitur rhoncus tortor et tempus. Donec
consequat ante in magna finibus feugiat. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Proin eget dui in ipsum hendrerit commodo at
at nunc. Nulla facilisi. Nam convallis, elit et venenatis aliquet, felis
elit aliquam ipsum, id dignissim lectus tortor eget nibh. Donec efficitur
at velit nec rutrum. Aenean mi diam, tincidunt finibus posuere sed,
ultrices a augue. Fusce et aliquam massa, eu venenatis mi. Quisque
malesuada vitae urna ut dictum. Proin sagittis massa mauris, sit amet
cursus turpis lobortis interdum. Nunc feugiat, metus tincidunt dictum
malesuada, lacus eros suscipit purus, eget pharetra tortor magna ac purus.
Phasellus ac pharetra purus. Nullam ornare ut neque a posuere. Vivamus
ante erat, auctor dignissim dignissim ac, dignissim ut lectus. Vestibulum
vel purus tellus. Phasellus sit amet volutpat est, et efficitur leo.
Pellentesque pulvinar metus eu risus lacinia, et egestas augue mattis.
Aliquam eget dolor ut ipsum bibendum iaculis. Donec tellus orci, mattis in
urna a, ultricies facilisis enim. Ut lobortis neque non elementum
sagittis. Aenean convallis enim vitae quam accumsan, ut pulvinar mauris
dapibus. Mauris magna arcu, rhoncus vitae bibendum ac, dapibus at velit.
Curabitur dignissim odio quis mi tempor scelerisque. Integer finibus sed
elit maximus euismod. Aenean nec sapien nec tortor luctus sagittis. Cras
consequat lacinia nisl vestibulum euismod. Vivamus in pharetra est. Ut id
ligula ut magna laoreet ultricies. Curabitur rutrum bibendum tortor, et
egestas mauris varius id. Aliquam at nibh convallis, molestie ipsum eget,
pretium ante. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Sed suscipit neque aliquet augue lacinia, eget rhoncus risus
iaculis. Aenean egestas efficitur maximus. Vestibulum metus libero,
vulputate vitae dui at, cursus euismod orci. Nulla facilisi. Vestibulum
hendrerit pulvinar dapibus. Sed nec mauris eu ipsum pretium imperdiet. In
sit amet egestas orci, quis hendrerit velit. Nulla eget nunc metus.
Pellentesque aliquet tellus vel massa pretium tincidunt. Etiam malesuada
nibh neque, aliquam hendrerit massa viverra at. Vestibulum eu auctor
dolor. Nam vitae dolor at ligula efficitur posuere vitae eu massa.
Vestibulum nec rutrum risus. Vestibulum non metus sodales, sodales enim
in, facilisis dolor. Nunc ut euismod lorem. Pellentesque tristique ligula
sed risus cursus finibus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Nunc ullamcorper enim
pretium libero convallis tempor. Morbi dictum consectetur lobortis. Nulla
ultrices, leo in porta placerat, est elit tincidunt orci, sit amet
condimentum odio nibh quis magna. Curabitur congue tempus mi ac malesuada.
Cras gravida facilisis viverra. Donec id sem ut nisl rhoncus placerat.
Morbi sit amet tristique metus, in consequat ligula. Sed imperdiet risus
sit amet sapien congue dictum. Aenean tristique sapien at augue viverra,
eget pharetra quam tincidunt. Ut feugiat pulvinar libero, et consequat
felis aliquet vel. Nunc efficitur rhoncus tortor et tempus. Donec
consequat ante in magna finibus feugiat. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Proin eget dui in ipsum hendrerit commodo at
at nunc. Nulla facilisi. Nam convallis, elit et venenatis aliquet, felis
elit aliquam ipsum, id dignissim lectus tortor eget nibh. Donec efficitur
at velit nec rutrum. Aenean mi diam, tincidunt finibus posuere sed,
ultrices a augue. Fusce et aliquam massa, eu venenatis mi. Quisque
malesuada vitae urna ut dictum. Proin sagittis massa mauris, sit amet
cursus turpis lobortis interdum. Nunc feugiat, metus tincidunt dictum
malesuada, lacus eros suscipit purus, eget pharetra tortor magna ac purus.
Phasellus ac pharetra purus. Nullam ornare ut neque a posuere. Vivamus
ante erat, auctor dignissim dignissim ac, dignissim ut lectus. Vestibulum
vel purus tellus. Phasellus sit amet volutpat est, et efficitur leo.
Pellentesque pulvinar metus eu risus lacinia, et egestas augue mattis.
Aliquam eget dolor ut ipsum bibendum iaculis. Donec tellus orci, mattis in
urna a, ultricies facilisis enim. Ut lobortis neque non elementum
sagittis. Aenean convallis enim vitae quam accumsan, ut pulvinar mauris
dapibus. Mauris magna arcu, rhoncus vitae bibendum ac, dapibus at velit.
Curabitur dignissim odio quis mi tempor scelerisque. Integer finibus sed
elit maximus euismod. Aenean nec sapien nec tortor luctus sagittis. Cras
consequat lacinia nisl vestibulum euismod. Vivamus in pharetra est. Ut id
ligula ut magna laoreet ultricies. Curabitur rutrum bibendum tortor, et
egestas mauris varius id. Aliquam at nibh convallis, molestie ipsum eget,
pretium ante. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Sed suscipit neque aliquet augue lacinia, eget rhoncus risus
iaculis. Aenean egestas efficitur maximus. Vestibulum metus libero,
vulputate vitae dui at, cursus euismod orci. Nulla facilisi. Vestibulum
hendrerit pulvinar dapibus. Sed nec mauris eu ipsum pretium imperdiet. In
sit amet egestas orci, quis hendrerit velit. Nulla eget nunc metus.
Pellentesque aliquet tellus vel massa pretium tincidunt. Etiam malesuada
nibh neque, aliquam hendrerit massa viverra at. Vestibulum eu auctor
dolor. Nam vitae dolor at ligula efficitur posuere vitae eu massa.
Vestibulum nec rutrum risus. Vestibulum non metus sodales, sodales enim
in, facilisis dolor. Nunc ut euismod lorem. Pellentesque tristique ligula
sed risus cursus finibus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Nunc ullamcorper enim
pretium libero convallis tempor. Morbi dictum consectetur lobortis. Nulla
ultrices, leo in porta placerat, est elit tincidunt orci, sit amet
condimentum odio nibh quis magna. Curabitur congue tempus mi ac malesuada.
Cras gravida facilisis viverra. Donec id sem ut nisl rhoncus placerat.
Morbi sit amet tristique metus, in consequat ligula. Sed imperdiet risus
sit amet sapien congue dictum. Aenean tristique sapien at augue viverra,
eget pharetra quam tincidunt. Ut feugiat pulvinar libero, et consequat
felis aliquet vel. Nunc efficitur rhoncus tortor et tempus. Donec
consequat ante in magna finibus feugiat. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Proin eget dui in ipsum hendrerit commodo at
at nunc. Nulla facilisi. Nam convallis, elit et venenatis aliquet, felis
elit aliquam ipsum, id dignissim lectus tortor eget nibh. Donec efficitur
at velit nec rutrum. Aenean mi diam, tincidunt finibus posuere sed,
ultrices a augue. Fusce et aliquam massa, eu venenatis mi. Quisque
malesuada vitae urna ut dictum. Proin sagittis massa mauris, sit amet
cursus turpis lobortis interdum. Nunc feugiat, metus tincidunt dictum
malesuada, lacus eros suscipit purus, eget pharetra tortor magna ac purus.
Phasellus ac pharetra purus. Nullam ornare ut neque a posuere. Vivamus
ante erat, auctor dignissim dignissim ac, dignissim ut lectus. Vestibulum
vel purus tellus. Phasellus sit amet volutpat est, et efficitur leo.
Pellentesque pulvinar metus eu risus lacinia, et egestas augue mattis.
Aliquam eget dolor ut ipsum bibendum iaculis. Donec tellus orci, mattis in
urna a, ultricies facilisis enim. Ut lobortis neque non elementum
sagittis. Aenean convallis enim vitae quam accumsan, ut pulvinar mauris
dapibus. Mauris magna arcu, rhoncus vitae bibendum ac, dapibus at velit.
Curabitur dignissim odio quis mi tempor scelerisque. Integer finibus sed
elit maximus euismod. Aenean nec sapien nec tortor luctus sagittis. Cras
consequat lacinia nisl vestibulum euismod. Vivamus in pharetra est. Ut id
ligula ut magna laoreet ultricies. Curabitur rutrum bibendum tortor, et
egestas mauris varius id. Aliquam at nibh convallis, molestie ipsum eget,
pretium ante. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Sed suscipit neque aliquet augue lacinia, eget rhoncus risus
iaculis. Aenean egestas efficitur maximus. Vestibulum metus libero,
vulputate vitae dui at, cursus euismod orci. Nulla facilisi. Vestibulum
hendrerit pulvinar dapibus. Sed nec mauris eu ipsum pretium imperdiet. In
sit amet egestas orci, quis hendrerit velit. Nulla eget nunc metus.
Pellentesque aliquet tellus vel massa pretium tincidunt. Etiam malesuada
nibh neque, aliquam hendrerit massa viverra at. Vestibulum eu auctor
dolor. Nam vitae dolor at ligula efficitur posuere vitae eu massa.
Vestibulum nec rutrum risus. Vestibulum non metus sodales, sodales enim
in, facilisis dolor. Nunc ut euismod lorem. Pellentesque tristique ligula
sed risus cursus finibus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Nunc ullamcorper enim
pretium libero convallis tempor. Morbi dictum consectetur lobortis. Nulla
ultrices, leo in porta placerat, est elit tincidunt orci, sit amet
condimentum odio nibh quis magna. Curabitur congue tempus mi ac malesuada.
Cras gravida facilisis viverra. Donec id sem ut nisl rhoncus placerat.
Morbi sit amet tristique metus, in consequat ligula. Sed imperdiet risus
sit amet sapien congue dictum. Aenean tristique sapien at augue viverra,
eget pharetra quam tincidunt. Ut feugiat pulvinar libero, et consequat
felis aliquet vel. Nunc efficitur rhoncus tortor et tempus. Donec
consequat ante in magna finibus feugiat. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Proin eget dui in ipsum hendrerit commodo at
at nunc. Nulla facilisi. Nam convallis, elit et venenatis aliquet, felis
elit aliquam ipsum, id dignissim lectus tortor eget nibh. Donec efficitur
at velit nec rutrum. Aenean mi diam, tincidunt finibus posuere sed,
ultrices a augue. Fusce et aliquam massa, eu venenatis mi. Quisque
malesuada vitae urna ut dictum. Proin sagittis massa mauris, sit amet
cursus turpis lobortis interdum. Nunc feugiat, metus tincidunt dictum
malesuada, lacus eros suscipit purus, eget pharetra tortor magna ac purus.
Phasellus ac pharetra purus. Nullam ornare ut neque a posuere. Vivamus
ante erat, auctor dignissim dignissim ac, dignissim ut lectus. Vestibulum
vel purus tellus. Phasellus sit amet volutpat est, et efficitur leo.
Pellentesque pulvinar metus eu risus lacinia, et egestas augue mattis.
Aliquam eget dolor ut ipsum bibendum iaculis. Donec tellus orci, mattis in
urna a, ultricies facilisis enim. Ut lobortis neque non elementum
sagittis. Aenean convallis enim vitae quam accumsan, ut pulvinar mauris
dapibus. Mauris magna arcu, rhoncus vitae bibendum ac, dapibus at velit.
Curabitur dignissim odio quis mi tempor scelerisque. Integer finibus sed
elit maximus euismod. Aenean nec sapien nec tortor luctus sagittis. Cras
consequat lacinia nisl vestibulum euismod. Vivamus in pharetra est. Ut id
ligula ut magna laoreet ultricies. Curabitur rutrum bibendum tortor, et
egestas mauris varius id. Aliquam at nibh convallis, molestie ipsum eget,
pretium ante. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Sed suscipit neque aliquet augue lacinia, eget rhoncus risus
iaculis. Aenean egestas efficitur maximus. Vestibulum metus libero,
vulputate vitae dui at, cursus euismod orci. Nulla facilisi. Vestibulum
hendrerit pulvinar dapibus. Sed nec mauris eu ipsum pretium imperdiet. In
sit amet egestas orci, quis hendrerit velit. Nulla eget nunc metus.
Pellentesque aliquet tellus vel massa pretium tincidunt. Etiam malesuada
nibh neque, aliquam hendrerit massa viverra at. Vestibulum eu auctor
dolor. Nam vitae dolor at ligula efficitur posuere vitae eu massa.
Vestibulum nec rutrum risus. Vestibulum non metus sodales, sodales enim
in, facilisis dolor. Nunc ut euismod lorem. Pellentesque tristique ligula
sed risus cursus finibus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Nunc ullamcorper enim
pretium libero convallis tempor. Morbi dictum consectetur lobortis. Nulla
ultrices, leo in porta placerat, est elit tincidunt orci, sit amet
condimentum odio nibh quis magna. Curabitur congue tempus mi ac malesuada.
Cras gravida facilisis viverra. Donec id sem ut nisl rhoncus placerat.
Morbi sit amet tristique metus, in consequat ligula. Sed imperdiet risus
sit amet sapien congue dictum. Aenean tristique sapien at augue viverra,
eget pharetra quam tincidunt. Ut feugiat pulvinar libero, et consequat
felis aliquet vel. Nunc efficitur rhoncus tortor et tempus. Donec
consequat ante in magna finibus feugiat.
</div>
<script>
window.addEventListener("scroll", function (e) {
var 내스크롤양 = window.scrollY;
var 윈도우실제높이 = document.querySelector("html").scrollHeight;
var 눈에보이는윈도우높이 = document.querySelector("html").clientHeight;
if (내스크롤양 + 눈에보이는윈도우높이 > 윈도우실제높이 - 5) {
e.stopPropagation();
alert("페이지 끝");
}
});window.addEventListener("scroll", function () {
var 내스크롤양 = window.scrollY;
var 윈도우실제높이 = document.querySelector("html").scrollHeight;
var 눈에보이는윈도우높이 = document.querySelector("html").clientHeight;
const currentpercent =
내스크롤양 / (윈도우실제높이 - 눈에보이는윈도우높이) * 100;
document.querySelector(".progressbar").style.width =
currentpercent + "%";
});
</script>
</body>
</html>//css
.barcontainer {
position: relative;
width: 100%;
height: 10px;
background: #cccccc;
}.progressbar {
position: absolute;
background-color: #4caf50;
width: 0;
height: 10px;
}.navbar {
position: fixed;
width: 100%;
z-index: 1;
}.navbar-brand {
font-size: 30px;
transition: all 1s;
}.dark {
background-color: black;
color: white;
}.black-bg {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.5);
z-index: 5;
padding: 30px;
visibility: hidden;
opacity: 0;
transition: all 700ms;
}
.white-bg {
background: white;
border-radius: 5px;
padding: 30px;
}.alert-box {
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
}질문 2. 화면 맨 아래로 스크롤 시 alert()가 여러 번 안 뜨게 하는 법 구글링 해서 찾은 걸로 아래와 같이 e.stopPropagation();을 넣었는데 여전히 alert()가 두번세번 뜹니다. 넣는 위치를 잘못한 걸까요 아니면 이 함수 말고 다른 걸 써야할까요?
window.addEventListener("scroll", function (e) {
var 내스크롤양 = window.scrollY;
var 윈도우실제높이 = document.querySelector("html").scrollHeight;
var 눈에보이는윈도우높이 = document.querySelector("html").clientHeight;
if (내스크롤양 + 눈에보이는윈도우높이 > 윈도우실제높이 - 5) {
e.stopPropagation();
alert("페이지 끝");
}
});2022년 4월 24일 09:39 #32401
codingapple키 마스터프로그레스바에 position : fixed를 줘봅시다
e.stopPropagation은 내윗요소로 이벤트가 퍼지는걸 막아주는 코드일 뿐이라 해결책은 안될듯 합니다 다른 방법을 찾아봅시다
2022년 4월 24일 11:06 #32409
한지수참가자답변 감사합니다!
프로그레스바는 알려주신 방법으로 잘 해결했습니다!!
화면 맨 아래로 스크롤 시 alert() 여러 번 안 뜨게 하는 법 다른 방법 구글링해서 찾은 것(?) 같은데요.
두 가지 방법을 찾은 것 같습니다.
일단 실행은 잘되는데 혹시 어쩌다 얻어걸린 건 아닌지 궁금해서요... 맞는 방법인지 봐주실 수 있을까요?
방법 1. 변수 f=true 선언 후 스크롤 내리면 f=false 되도록 하는 방법
var f = true;
window.addEventListener("scroll", function () {
var 내스크롤양 = window.scrollY;
var 윈도우실제높이 = document.querySelector("html").scrollHeight;
var 눈에보이는윈도우높이 = document.querySelector("html").clientHeight;
if (내스크롤양 + 눈에보이는윈도우높이 > 윈도우실제높이 - 1) {
alert("페이지 끝");
f = false;
}
});방법2. jQuery 의 unbind()함수 활용하여 $(window).unbind('scroll') 넣기
window.addEventListener("scroll", function () {
var 내스크롤양 = window.scrollY;
var 윈도우실제높이 = document.querySelector("html").scrollHeight;
var 눈에보이는윈도우높이 = document.querySelector("html").clientHeight;if (내스크롤양 + 눈에보이는윈도우높이 > 윈도우실제높이 - 1) {
alert("페이지 끝");
$(window).unbind("scroll");
}
}); -
글쓴이글
- 답변은 로그인 후 가능합니다.