바닐라 JavaScript 만 사용하여 본문의 특정 섹션으로 스크롤 할 때 탐색 모음에서 목록 요소의 배경을 변경하고 싶습니다 ... ViewPort를 확인하는 기능을 만들었지 만 각 HTML 요소에 대한 리스너를 넣는 데 어려움이 있습니다. 컬렉션. 누구든지 도울 수 있습니까?
/* VARIABLES */
const newSectionBtn = document.getElementById("new-section");
const main = document.getElementById("main");
const backBtn = document.getElementById("back");
let allLists = document.getElementsByTagName("li");
let allSections = document.getElementsByTagName("section");
let n = 4;
/* FUNCTIONS */
function duplicate(num) {
const newSection = document.createElement("section");
const newDiv = document.createElement("div");
const heading = document.createElement("h2");
const p1 = document.createElement("p");
const p2 = document.createElement("p");
newSection.appendChild(newDiv);
newDiv.appendChild(heading);
newDiv.appendChild(p1);
newDiv.appendChild(p2);
newSection.setAttribute("id", "section" + num);
newSection.setAttribute("data-nav", "Section" + " " + num);
newDiv.setAttribute("class", "landing__container");
heading.textContent = "Section" + " " + num;
p1.textContent =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.";
p2.textContent =
"Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.";
return newSection;
}
/* LISTENERS */
newSectionBtn.addEventListener("click", () => {
newSectionBtn.insertAdjacentHTML("beforebegin", "<li> Section" + " " + n + "</li>");
main.appendChild(duplicate(n));
main.lastElementChild.scrollIntoView({
behavior: "smooth"
});
n++;
});
backBtn.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
/*
*
* CSS written based on SMACSS architecture.
* To learn more, visit: http://smacss.com/
*
* For simplicity, no reset or normalize is added.
* To learn more, visit: https://css-tricks.com/reboot-resets-reasoning/
*
*/
/* ---- Base Rules ---- */
body {
background: rgb(136, 203, 171);
background: linear-gradient(0deg, rgba(136, 203, 171, 1) 0%, rgba(0, 13, 60, 1) 100%);
margin: 0;
font-family: "Merriweather", serif;
color: #fff;
}
/* Typeography General*/
h1 {
font-family: "Fira Sans", sans-serif;
font-size: 3em;
margin: 2em 1rem;
}
@media only screen and (min-width: 35em) {
h1 {
font-size: 7em;
margin: 2em 4rem 1em;
}
}
h2 {
border-bottom: 1px solid #cc1;
font-family: "Oxygen", Sans-Serif;
font-size: 3em;
color: #fff;
}
p {
line-height: 1.6em;
color: #eee;
}
/* ---- Layout Rules ---- */
main {
margin: 10vh 1em 10vh;
}
.main-hero {
min-height: 40vh;
padding-top: 3em;
}
section {
position: relative;
min-height: 80vh;
}
/* ---- Module Rules ---- */
/* Navigation Styles*/
.navbar__menu ul {
padding-left: 0;
margin: 0;
text-align: right;
}
.navbar__menu li {
display: inline-block;
}
.navbar__menu .menu__link {
display: block;
padding: 1em;
font-weight: bold;
text-decoration: none;
color: #000;
}
.navbar__menu .menu__link:hover {
background: #333;
color: #fff;
transition: ease 0.3s all;
}
/* Header Styles */
.page__header {
background: #fff;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
}
/* Footer Styles */
.page__footer {
background: #000;
padding: 3em;
color: #fff;
}
.page__footer p {
color: #fff;
}
/* ---- Theme Rules ---- */
/* Landing Container Styles */
.landing__container {
padding: 1em;
text-align: left;
}
@media only screen and (min-width: 35em) {
.landing__container {
max-width: 50em;
padding: 4em;
}
}
section:nth-of-type(even) .landing__container {
margin-right: 0;
margin-left: auto;
text-align: right;
}
/* Background Circles */
/* Note that background circles are created with psuedo elements before and after */
/* Circles appear to be random do to use of :nth-of-type psuedo class */
section:nth-of-type(odd) .landing__container::before {
content: "";
background: rgba(255, 255, 255, 0.187);
position: absolute;
z-index: -5;
width: 20vh;
height: 20vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(even) .landing__container::before {
content: "";
background: rgb(255, 255, 255);
background: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
position: absolute;
top: 3em;
right: 3em;
z-index: -5;
width: 10vh;
height: 10vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(3n) .landing__container::after {
content: "";
background: rgb(255, 255, 255);
background: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
position: absolute;
right: 0;
bottom: 0;
z-index: -5;
width: 10vh;
height: 10vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(3n + 1) .landing__container::after {
content: "";
background: rgb(255, 255, 255);
background: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
position: absolute;
right: 20vw;
bottom: -5em;
z-index: -5;
width: 15vh;
height: 15vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
/* ---- Theme State Rules ---- */
/* Section Active Styles */
/* Note: your-active-class class is applied through javascript. You should update the class here and in the index.html to what you set in your javascript file. */
section.your-active-class {
background: rgb(0, 0, 0);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
}
section.your-active-class .landing__container::before {
opacity: 1;
animation: rotate 4s linear 0s infinite forwards;
}
section.your-active-class .landing__container::after {
opacity: 1;
animation: rotate 5s linear 0s infinite forwards reverse;
}
/* Section Active Styles Keyframe Animations */
@keyframes rotate {
from {
transform: rotate(0deg) translate(-1em) rotate(0deg);
}
to {
transform: rotate(360deg) translate(-1em) rotate(-360deg);
}
}
/* MY STYLES */
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
background-color: #00c3c7;
border-radius: 8px;
position: fixed;
top: 0px;
width: 95%;
min-height: 100px;
z-index: 10000;
}
li {
padding: 10px;
list-style-type: none;
background-color: cadetblue;
border-radius: 8px;
align-self: center;
}
li:hover {
cursor: pointer;
}
.active {
background-color: darkred;
font-size: 100px;
}
JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Manipulating the DOM</title>
<!-- Load Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:900|Merriweather&display=swap" rel="stylesheet" />
<!-- Load Styles -->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- HTML Follows BEM naming conventions
IDs are only used for sections to connect menu achors to sections -->
<header class="page__header">
<nav class="navbar__menu">
<!-- Navigation starts as empty UL that will be populated with JS -->
<ul id="navbar__list"></ul>
</nav>
</header>
<main id="main">
<header class="main__hero">
<nav>
<ul class="flex-container">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li id="new-section">NEW SECTION</li>
<li id="back">BACK TO TOP</li>
</ul>
</nav>
<h1>Landing Page</h1>
</header>
<!-- Each Section has an ID (used for the anchor) and
a data attribute that will populate the li node.
Adding more sections will automatically populate nav.
The first section is set to active class by default -->
<section id="section1" data-nav="Section 1" class="your-active-class">
<div class="landing__container">
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed
convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor
lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.
</p>
<p>
Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
tortor, eget elementum tortor mollis non.
</p>
</div>
</section>
<section id="section2" data-nav="Section 2">
<div class="landing__container">
<h2>Section 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed
convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor
lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.
</p>
<p>
Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
tortor, eget elementum tortor mollis non.
</p>
</div>
</section>
<section id="section3" data-nav="Section 3">
<div class="landing__container">
<h2>Section 3</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed
convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor
lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.
</p>
<p>
Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
tortor, eget elementum tortor mollis non.
</p>
</div>
</section>
</main>
<footer class="page__footer">
<p>© Udacity</p>
</footer>
<script src="/js/app.js"></script>
</body>
</html>
다음과 같이 할 수 있습니다.
참조isInViewport
기능 작동 방식에 대한 링크를 읽으십시오 .
여러 요소에서 작업하기 위해 추가 한 각 부분에 대해. if 부분은 무언가를 할 때 조건을 부여합니다.
var isInViewport = function(elem) {
var distance = elem.getBoundingClientRect();
return (
distance.top >= 0 &&
distance.left >= 0 &&
distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
distance.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
// read the link on how above code works
window.addEventListener('scroll', function(event) {
// add event on scroll
var findMe = document.querySelectorAll('h2');
var li = document.querySelectorAll('li');
// on scroll fetch H2 and li elements, on scroll in order to get new dynamically added with button
findMe.forEach(element => {
//for each h2
if (isInViewport(element)) {
//if in Viewport
li.forEach(li => {
li.style.color = 'white';
})
//set all li styles to none in order to remove before added
li.forEach(li => {
//for each li
if (li.innerHTML.trim() === element.innerHTML.trim()) {
//if li text is same as curent element in viport text
li.style.color = 'red';
//add style
}
})
}
});
}, false);
어떤 이유로 섹션 또는 div 래핑에는 작동하지 않으며 내용이 포함 된 요소에서 작동합니다.
따라서 H2 요소를 대상으로하고 조건을 만들어야합니다.
예:
/* VARIABLES */
const newSectionBtn = document.getElementById("new-section");
const main = document.getElementById("main");
const backBtn = document.getElementById("back");
let allLists = document.getElementsByTagName("li");
let allSections = document.getElementsByTagName("section");
let n = 4;
/* FUNCTIONS */
function duplicate(num) {
const newSection = document.createElement("section");
const newDiv = document.createElement("div");
const heading = document.createElement("h2");
const p1 = document.createElement("p");
const p2 = document.createElement("p");
newSection.appendChild(newDiv);
newDiv.appendChild(heading);
newDiv.appendChild(p1);
newDiv.appendChild(p2);
newSection.setAttribute("id", "section" + num);
newSection.setAttribute("data-nav", "Section" + " " + num);
newDiv.setAttribute("class", "landing__container");
heading.textContent = "Section" + " " + num;
p1.textContent =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.";
p2.textContent =
"Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.";
return newSection;
}
/* LISTENERS */
newSectionBtn.addEventListener("click", () => {
newSectionBtn.insertAdjacentHTML("beforebegin", "<li> Section" + " " + n + "</li>");
main.appendChild(duplicate(n));
main.lastElementChild.scrollIntoView({
behavior: "smooth"
});
n++;
});
backBtn.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
var isInViewport = function(elem) {
var distance = elem.getBoundingClientRect();
return (
distance.top >= 0 &&
distance.left >= 0 &&
distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
distance.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
window.addEventListener('scroll', function(event) {
var findMe = document.querySelectorAll('h2');
var li = document.querySelectorAll('li');
findMe.forEach(element => {
if (isInViewport(element)) {
li.forEach(li => {
li.style.color = 'white';
})
li.forEach(li => {
if (li.innerHTML.trim() === element.innerHTML.trim()) {
li.style.color = 'red';
}
})
}
});
}, false);
/*
*
* CSS written based on SMACSS architecture.
* To learn more, visit: http://smacss.com/
*
* For simplicity, no reset or normalize is added.
* To learn more, visit: https://css-tricks.com/reboot-resets-reasoning/
*
*/
/* ---- Base Rules ---- */
body {
background: rgb(136, 203, 171);
background: linear-gradient(0deg, rgba(136, 203, 171, 1) 0%, rgba(0, 13, 60, 1) 100%);
margin: 0;
font-family: "Merriweather", serif;
color: #fff;
}
/* Typeography General*/
h1 {
font-family: "Fira Sans", sans-serif;
font-size: 3em;
margin: 2em 1rem;
}
@media only screen and (min-width: 35em) {
h1 {
font-size: 7em;
margin: 2em 4rem 1em;
}
}
h2 {
border-bottom: 1px solid #cc1;
font-family: "Oxygen", Sans-Serif;
font-size: 3em;
color: #fff;
}
p {
line-height: 1.6em;
color: #eee;
}
/* ---- Layout Rules ---- */
main {
margin: 10vh 1em 10vh;
}
.main-hero {
min-height: 40vh;
padding-top: 3em;
}
section {
position: relative;
min-height: 80vh;
}
/* ---- Module Rules ---- */
/* Navigation Styles*/
.navbar__menu ul {
padding-left: 0;
margin: 0;
text-align: right;
}
.navbar__menu li {
display: inline-block;
}
.navbar__menu .menu__link {
display: block;
padding: 1em;
font-weight: bold;
text-decoration: none;
color: #000;
}
.navbar__menu .menu__link:hover {
background: #333;
color: #fff;
transition: ease 0.3s all;
}
/* Header Styles */
.page__header {
background: #fff;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
}
/* Footer Styles */
.page__footer {
background: #000;
padding: 3em;
color: #fff;
}
.page__footer p {
color: #fff;
}
/* ---- Theme Rules ---- */
/* Landing Container Styles */
.landing__container {
padding: 1em;
text-align: left;
}
@media only screen and (min-width: 35em) {
.landing__container {
max-width: 50em;
padding: 4em;
}
}
section:nth-of-type(even) .landing__container {
margin-right: 0;
margin-left: auto;
text-align: right;
}
/* Background Circles */
/* Note that background circles are created with psuedo elements before and after */
/* Circles appear to be random do to use of :nth-of-type psuedo class */
section:nth-of-type(odd) .landing__container::before {
content: "";
background: rgba(255, 255, 255, 0.187);
position: absolute;
z-index: -5;
width: 20vh;
height: 20vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(even) .landing__container::before {
content: "";
background: rgb(255, 255, 255);
background: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
position: absolute;
top: 3em;
right: 3em;
z-index: -5;
width: 10vh;
height: 10vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(3n) .landing__container::after {
content: "";
background: rgb(255, 255, 255);
background: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
position: absolute;
right: 0;
bottom: 0;
z-index: -5;
width: 10vh;
height: 10vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(3n + 1) .landing__container::after {
content: "";
background: rgb(255, 255, 255);
background: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
position: absolute;
right: 20vw;
bottom: -5em;
z-index: -5;
width: 15vh;
height: 15vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
/* ---- Theme State Rules ---- */
/* Section Active Styles */
/* Note: your-active-class class is applied through javascript. You should update the class here and in the index.html to what you set in your javascript file. */
section.your-active-class {
background: rgb(0, 0, 0);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
}
section.your-active-class .landing__container::before {
opacity: 1;
animation: rotate 4s linear 0s infinite forwards;
}
section.your-active-class .landing__container::after {
opacity: 1;
animation: rotate 5s linear 0s infinite forwards reverse;
}
/* Section Active Styles Keyframe Animations */
@keyframes rotate {
from {
transform: rotate(0deg) translate(-1em) rotate(0deg);
}
to {
transform: rotate(360deg) translate(-1em) rotate(-360deg);
}
}
/* MY STYLES */
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
background-color: #00c3c7;
border-radius: 8px;
position: fixed;
top: 0px;
width: 95%;
min-height: 100px;
z-index: 10000;
}
li {
padding: 10px;
list-style-type: none;
background-color: cadetblue;
border-radius: 8px;
align-self: center;
}
li:hover {
cursor: pointer;
}
.active {
background-color: darkred;
font-size: 100px;
}
JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Manipulating the DOM</title>
<!-- Load Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:900|Merriweather&display=swap" rel="stylesheet" />
<!-- Load Styles -->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- HTML Follows BEM naming conventions
IDs are only used for sections to connect menu achors to sections -->
<header class="page__header">
<nav class="navbar__menu">
<!-- Navigation starts as empty UL that will be populated with JS -->
<ul id="navbar__list"></ul>
</nav>
</header>
<main id="main">
<header class="main__hero">
<nav>
<ul class="flex-container">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li id="new-section">NEW SECTION</li>
<li id="back">BACK TO TOP</li>
</ul>
</nav>
<h1>Landing Page</h1>
</header>
<!-- Each Section has an ID (used for the anchor) and
a data attribute that will populate the li node.
Adding more sections will automatically populate nav.
The first section is set to active class by default -->
<section id="section1" data-nav="Section 1" class="your-active-class">
<div class="landing__container">
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed
convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor
lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.
</p>
<p>
Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
tortor, eget elementum tortor mollis non.
</p>
</div>
</section>
<section id="section2" data-nav="Section 2">
<div class="landing__container">
<h2>Section 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed
convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor
lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.
</p>
<p>
Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
tortor, eget elementum tortor mollis non.
</p>
</div>
</section>
<section id="section3" data-nav="Section 3">
<div class="landing__container">
<h2>Section 3</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed
convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor
lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.
</p>
<p>
Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor
tortor, eget elementum tortor mollis non.
</p>
</div>
</section>
</main>
<footer class="page__footer">
<p>© Udacity</p>
</footer>
<script src="/js/app.js"></script>
</body>
</html>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다