728x90
SASS grid 부분 해결
@mixin setGridPosition($col-1, $col-2, $row-1, $row-2){
grid-column: #{$col-1} / #{$col-2} ;
grid-row: #{$row-1} / #{$row-2} ;
}
애니메이션 구현 부분 테스트
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="0" class="container">
<span><img src="./img-1.jpeg" alt=""></span>
<span><img src="./img-2.jpeg" alt=""></span>
<span><img src="./img-3.jpeg" alt=""></span>
</section>
<section id="1" class="container">
<span><img src="./img-1.jpeg" alt=""></span>
<span><img src="./img-2.jpeg" alt=""></span>
<span><img src="./img-3.jpeg" alt=""></span>
</section>
<section id="2" class="container">
<span><img src="./img-1.jpeg" alt=""></span>
<span><img src="./img-2.jpeg" alt=""></span>
<span><img src="./img-3.jpeg" alt=""></span>
</section>
<section id="3" class="container">
<span><img src="./img-1.jpeg" alt=""></span>
<span><img src="./img-2.jpeg" alt=""></span>
<span><img src="./img-3.jpeg" alt=""></span>
</section>
<section id="4" class="container">
<span><img src="./img-1.jpeg" alt=""></span>
<span><img src="./img-2.jpeg" alt=""></span>
<span><img src="./img-3.jpeg" alt=""></span>
</section>
<script src="app.js"></script>
</body>
</html>*{
box-sizing: border-box;
}
html, body{
margin: 0; padding: 0;
}
section{
width: 100%; height: 100vh;
grid-gap: 5px;
overflow: hidden;
display: none;
}
section span{
width: 200px; height: 300px;
background: #333; color: #fff;
font-size: 5rem;
/* display: inline-block; */
}
section span img{
max-width: 100%; height: 100%;
object-fit: cover;
object-position: center;
border-radius: 15px;
}
.active{
display: flex;
justify-content: center;
align-items: center;
}
/* section.active span{
display: inline-block;
} */
section.active span:nth-child(1){
animation: fade 3s linear 0s forwards;
}
section.active span:nth-child(2){
animation: fade 3s linear .5s forwards;
}
section.active span:nth-child(3){
animation: fade 3s linear 1s forwards;
}
@keyframes fade{
0%{
opacity: 0;
transform: translateY(80px);
}
10%{
opacity: .2;
transform: translateY(40px);
}
20%{
opacity: .4;
transform: translateY(0px);
}
30%{
opacity: .6;
transform: translateY(0px);
}
40%{
opacity: .8;
transform: translateY(0px);
}
50%{
opacity: 1;
transform: translateY(0px);
}
60%{
opacity: 1;
transform: translateY(0px);
}
70%{
opacity: 1;
transform: translateY(0px);
}
80%{
opacity: 1;
transform: translateY(0px);
}
90%{
opacity: .5;
transform: translateY(-40px);
}
100%{
opacity: 0;
transform: translateY(-80px);
}
}
@keyframes fadeOut{
from{
opacity: 1;
transform: translateY(0px);
}
to{
opacity: 0;
transform: translateY(-70px);
}
}
@keyframes fadeIn{
from{
opacity: 0;
transform: translateY(70px);
}
to{
opacity: 1;
transform: translateY(0px);
}
}const sections = document.querySelectorAll('section')
let index = 0
sections[index].classList.add('active')
setInterval(function(){
index++
if(index > sections.length - 1) index = 0
const activeSection = document.querySelector('section.active')
if(activeSection) activeSection.classList.remove('active')
sections[index].classList.add('active')
}, 4000)
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="0" class="container hide">
1
<span>1</span>
<span>1</span>
<span>1</span>
</section>
<section id="1" class="container hide">
2
<span>2</span>
<span>2</span>
<span>2</span>
</section>
<section id="2" class="container hide">
3
<span>3</span>
<span>3</span>
<span>3</span>
</section>
<section id="3" class="container hide">
4
<span>4</span>
<span>4</span>
<span>4</span>
</section>
<section id="4" class="container hide">
5
<span>5</span>
<span>5</span>
<span>5</span>
</section>
<script src="app.js"></script>
</body>
</html>*{
box-sizing: border-box;
}
html, body{
margin: 0; padding: 0;
}
section{
width: 100%; height: 100vh;
display: flex;
justify-content: center;
align-items: center;
/* border: 3px solid #333; */
grid-gap: 5px;
overflow: hidden;
}
section span{
width: 200px; height: 300px;
background: #333; color: #fff;
font-size: 5rem;
display: inline-block;
}
.hide{
display: none;
}
.fadeIn{
animation: fadeIn .5s linear forwards;
}
.fadeOut{
animation: fadeOut .5s linear forwards;
}
@keyframes fadeOut{
from{
opacity: 1;
transform: translateY(0px);
}
to{
opacity: 0;
transform: translateY(-70px);
}
}
@keyframes fadeIn{
from{
opacity: 0;
transform: translateY(70px);
}
to{
opacity: 1;
transform: translateY(0px);
}
}const sections = document.querySelectorAll('section')
let sectionNum = 0
const length = sections.length
const firstBlock = sections[sectionNum]
const firstImgs = sections[sectionNum].querySelectorAll('span')
for(let img of firstImgs){
img.classList.add('fadeIn')
// setTimeout(function(){
// img.classList.add('fadeOut')
// }, 1000)
}
firstBlock.classList.remove('hide')
setInterval(function(){
console.log((sectionNum)% length, (sectionNum+1)% length)
const prevBlock = sections[(sectionNum)% length]
const prevImgs = prevBlock.querySelectorAll('span')
const nextBlock = sections[(sectionNum+1)% length]
const nextImgs = nextBlock.querySelectorAll('span')
for(let img of prevImgs){
img.classList.remove('fadeIn')
img.classList.add('fadeOut')
}
setTimeout(function(){
prevBlock.classList.add('hide') // 사라지는 섹션
nextBlock.classList.remove('hide') // 나타나는 섹션
for(let img of nextImgs){
img.classList.remove('fadeOut')
img.classList.add('fadeIn')
}
}, 500) // fade out 애니메이션이 0.5초동안 동작하므로 그 이후에 이미지를 사라지게 함
sectionNum++
if(sectionNum > length - 1) sectionNum = 0
}, 2000) // 2초마다 한번씩 이미지가 나타나고 사라짐
실제 코드
<!DOCTYPE html>
<html lang="en" class="hide-scrollbar">
<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>design practice</title>
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.2.0/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="first">
<header>
<a href="#">
<i class="ri-pinterest-fill"></i>
Pinterest
</a>
<nav>
<ul>
<li><a href="#">소개</a></li>
<li><a href="#">비지니스</a></li>
<li><a href="#">언론</a></li>
</ul>
</nav>
<div class="gnb-btns">
<button>로그인</button>
<button>가입하기</button>
</div>
</header>
<main>
<div class="banner-img-container">
<figure>
<img src="https://i.pinimg.com/236x/51/97/90/5197905f29a3bf796150506e12cb234c.jpg" alt="">
</figure>
<figure>
<img src="https://i.pinimg.com/236x/51/97/90/5197905f29a3bf796150506e12cb234c.jpg" alt="">
</figure>
<figure>
<img src="https://i.pinimg.com/236x/51/97/90/5197905f29a3bf796150506e12cb234c.jpg" alt="">
</figure>
<figure>
<img src="https://i.pinimg.com/236x/51/97/90/5197905f29a3bf796150506e12cb234c.jpg" alt="">
</figure>
<figure>
<img src="https://i.pinimg.com/236x/51/97/90/5197905f29a3bf796150506e12cb234c.jpg" alt="">
</figure>
<figure>
<img src="https://i.pinimg.com/236x/51/97/90/5197905f29a3bf796150506e12cb234c.jpg" alt="">
</figure>
<figure>
<img src="https://i.pinimg.com/236x/51/97/90/5197905f29a3bf796150506e12cb234c.jpg" alt="">
</figure>
<figure>
<img src="https://i.pinimg.com/236x/51/97/90/5197905f29a3bf796150506e12cb234c.jpg" alt="">
</figure>
<figure>
<img src="https://i.pinimg.com/236x/51/97/90/5197905f29a3bf796150506e12cb234c.jpg" alt="">
</figure>
<figure>
<img src="https://i.pinimg.com/236x/51/97/90/5197905f29a3bf796150506e12cb234c.jpg" alt="">
</figure>
<figure>
<img src="https://i.pinimg.com/236x/51/97/90/5197905f29a3bf796150506e12cb234c.jpg" alt="">
</figure>
<figure>
<img src="https://i.pinimg.com/236x/51/97/90/5197905f29a3bf796150506e12cb234c.jpg" alt="">
</figure>
<figure>
<img src="https://i.pinimg.com/236x/51/97/90/5197905f29a3bf796150506e12cb234c.jpg" alt="">
</figure>
<figure>
<img src="https://i.pinimg.com/236x/51/97/90/5197905f29a3bf796150506e12cb234c.jpg" alt="">
</figure>
</div>
</main>
<footer>
<a href="#">
방식은 다음과 같습니다
<i class="ri-arrow-down-s-line"></i>
</a>
<span>
<i class="ri-arrow-down-s-line"></i>
</span>
</footer>
</section>
<section class="second">
<article class="main-img">
<figure>
<img src="https://s.pinimg.com/webapp/center-77497603.png" alt="">
</figure>
<figure>
<img src="https://s.pinimg.com/webapp/left-511a9304.png" alt="">
</figure>
<figure>
<img src="https://s.pinimg.com/webapp/topRight-d0230035.png" alt="">
</figure>
<figure>
<img src="https://s.pinimg.com/webapp/right-88044782.png" alt="">
</figure>
</article>
<article class="main-text">
<h1>아이디어 검색</h1>
<p>어떤 것을 시도해 보고 싶으세요? '닭고기로 만드는 간단한 저녁 메뉴'와 같이 관심 있는 내용을 검색하고 결과를 확인해 보세요.</p>
<button>탐색</button>
</article>
</section>
<section class="third">
<article class="main-text">
<h1>좋아하는 아이디어를 저장하세요.</h1>
<p>나중에 다시 볼 수 있도록 좋아하는 콘텐츠를 수집하세요.</p>
<button>탐색</button>
</article>
<article class="main-img">
<figure>
<img src="https://cdn.aitimes.com/news/photo/202210/147215_155199_1614.jpg" alt="">
<figcaption>집분위기 바꾸기: 양치식물</figcaption>
</figure>
<figure>
<img src="data:image/jpeg;base64,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" alt="">
<figcaption>스칸디나비아풍 침실</figcaption>
</figure>
<figure>
<img src="data:image/jpeg;base64,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" alt="">
<figcaption>꿈의 테크</figcaption>
</figure>
<figure>
<img src="data:image/jpeg;base64,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" alt="">
<figcaption>멋진 음료 서빙</figcaption>
</figure>
<figure>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSuAVSh0jmWvZK3aOjEwOtMqFJOmXwhvGG3HA&usqp=CAU" alt="">
<figcaption>화장실 업그레이드</figcaption>
</figure>
</article>
</section>
<section class="fourth">
<article class="main-img">
<figure>
<img src="https://s.pinimg.com/webapp/shop-bd0c8a04.png" alt="section-4-img">
</figure>
<figure>
<img src="https://s.pinimg.com/webapp/creator-pin-img-491ebb56.png" alt="section-4-img">
<figcaption>
Scout the City<br>
팔로워 56,700명
</figcaption>
</figure>
<figure>
<img src="https://s.pinimg.com/webapp/creator-avatar-d7a05622.png" alt="">
</figure>
</article>
<article class="main-text">
<h1>구매하고, 만들고, 시도하고, 실행하세요.</h1>
<p>무엇보다도 Pinterest에서는 전 세계 사람들의 아이디어와 새로운 것을 발견할 수 있습니다.</p>
<button>탐색</button>
</article>
</section>
<section class="fifth">
<h1>Section Five</h1>
</section>
</body>
</html>/* Global Variale */
:root{
/* colors */
--brand-color: #cc0000;
--first-color: #111111;
--second-bg-color: rgb(255, 253, 146);
--second-color: rgb(195, 25, 82);
--third-bg-color: rgb(218, 255, 246);
--third-color: rgb(0, 107, 108);
--fourth-color: rgb(195, 47, 0);
--fourth-bg-color: rgb(255, 226, 235);
--white-color: #fff;
/* text-size */
--main-title: 3.5rem;
--sub-title: 1.5rem;
--middle-title: 2.5rem;
}
/* BASE STYLE */
*{
box-sizing: border-box;
margin: 0; padding: 0;
}
@supports (scroll-snap-align: start) {
html {
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
overflow-y: scroll;
}
}
.hide-scrollbar{
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera*/
}
h1, p{
margin-bottom: 1rem;
}
h1{
font-size: var(--main-title);
}
p{
font-size: var(--sub-title);
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
img{
display: block;
object-fit: cover;
object-position: center;
width: 100%; height: 100%; /* 이미지 사이즈를 컨테이너에 맞춤 */
}
button{
border: none; outline: none;
border-radius: 1.5rem;
min-width: 6rem; height: 3rem;
font-size: 1rem;
text-align: center;
font-weight: bold;
cursor: pointer;
}
/* Common section style */
section {
width: 100%; height: 100vh; /* vw 는 세로스크롤바가 생기면 스크롤바 너비까지 포함하므로 가로스크롤바가 생겨버림 */
scroll-snap-align: start;
overflow: hidden;
}
section.second,
section.third,
section.fourth {
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-items: center;
align-items: center;
}
.main-img{
width: 100%; height: 100vh; /* 컨테이너를 브라우저의 우측 절반을 차지하도록 함 */
}
.main-text{
text-align: center;
padding: 2rem; /* min-width 주는 이유는 퍼센트로 주는 경우 브라우저 너비가 줄어들면 컨텐츠도 같이 줄어드는데 일정너비 이하로 줄어들지 못하게 제한함 */
}
figure{
overflow: hidden;
cursor: pointer;
}
/* 1번째 섹션 */
section.first{
background-color: #fff;
color: #000;
display: grid;
grid-template-rows: 80px 1fr 60px;
}
section.first header{
display: grid;
grid-template-columns: 1fr 300px 200px;
align-content: center;
justify-content: end;
width: 100%;
}
section.first header > a{
display: flex;
align-items: center;
padding-left: 1.5rem;
color: var(--brand-color);
font-size: 1.2rem;
font-weight: bold;
}
section.first header > a i{
font-size: 2.5rem;
}
section.first header nav ul{
display: flex;
justify-content: space-evenly;
align-items: center;
height: 100%;
}
section.first header nav ul li a{
color: var(--first-color);
font-weight: bold;
}
section.first header nav ul li a:hover{
text-decoration: underline;
}
section.first header .gnb-btns{
text-align: right;
padding-right: 1rem;
}
section.first header .gnb-btns button:nth-child(1){
background-color: var(--brand-color);
min-width: initial;
width: 4rem; height: 2.5rem;
color: #fff;
}
section.first header .gnb-btns button:nth-child(1){
height: 2.5rem;
}
section.first main{
display: flex;
}
section.first main .banner-img-container{
width: 98%;
/* border: 1px solid red; */
display: grid;
grid-template-columns: repeat(7, 236px);
grid-template-rows: repeat(2, 350px);
grid-gap: 20px;
/* grid-auto-flow: column; */
justify-content: center;
overflow: hidden;
position:relative;
margin-top: auto;
margin-left: auto; margin-right: auto;
}
section.first main .banner-img-container::after{ /* before 는 레이어가 뒷면에 after 는 레이어가 앞쪽에 만들어짐 */
content: '';
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 100%;
box-shadow: inset 0 -50px 100px #fff;
}
section.first main .banner-img-container figure{
border-radius: 1rem;
}
section.first main .banner-img-container figure:nth-child(7n+1),
section.first main .banner-img-container figure:nth-child(7n){
position: relative;
top: 200px;
}
section.first main .banner-img-container figure:nth-child(7n+2),
section.first main .banner-img-container figure:nth-child(7n+6){
position: relative;
top: 350px;
}
section.first main .banner-img-container figure:nth-child(7n+3),
section.first main .banner-img-container figure:nth-child(7n+5){
position: relative;
top: 425px;
}
section.first main .banner-img-container figure:nth-child(7n+4){
position: relative;
top: 585px;
}
section.first footer{
box-shadow: 0 -5rem 5rem #fff;
background-color: var(--second-bg-color);
display: flex;
justify-content: center;
position: relative;
}
section.first footer a{
color: var(--first-color);
font-weight: bold;
display: flex;
align-items: center;
}
section.first footer a i{
font-size: var(--sub-title);
}
section.first footer span{
width: 50px; height: 50px;
position: absolute;
top: 0px; left: 50%;
transform: translate(-50%, 0);
line-height: 50px;
border-radius: 50%;
z-index: 3;
font-size: 3rem;
background-color: var(--third-color);
color: var(--white-color);
text-align: center;
animation: vibrate 2s infinite linear;
}
/* 애니메이션 */
section.first main .banner-img-container figure:nth-child(7n+1){
animation: fadeOut .3s ease-in-out 1s forwards;
}
section.first main .banner-img-container figure:nth-child(7n+2){
animation: fadeOut .3s ease-in-out 1.3s forwards;
}
section.first main .banner-img-container figure:nth-child(7n+3){
animation: fadeOut .3s ease-in-out 1.6s forwards;
}
section.first main .banner-img-container figure:nth-child(7n+4){
animation: fadeOut .3s ease-in-out 1.9s forwards;
}
section.first main .banner-img-container figure:nth-child(7n+5){
animation: fadeOut .3s ease-in-out 2.2s forwards;
}
section.first main .banner-img-container figure:nth-child(7n+6){
animation: fadeOut .3s ease-in-out 2.5s forwards;
}
section.first main .banner-img-container figure:nth-child(7n){
animation: fadeOut .3s ease-in-out 2.8s forwards;
}
/* 좌측 이미지에 max-width 를 주고, 우측 텍스트에 min-width 주니까 */
/* 텍스트가 이미지를 밀어내는 효과가 난다 */
/* 2번째 섹션 */
section.second{
background-color: var(--second-bg-color);
}
section.second .main-text{
color: var(--second-color);
width: 50%; min-width: 500px;
}
section.second .main-text button{
background-color: var(--second-color);
color: var(--second-bg-color);
}
section.second .main-img{
display: grid;
grid-template-columns: repeat(30, 1fr);
grid-template-rows: repeat(30, 1fr);
/* 브라우저 너비가 줄어들면 함께 줄어듬 */
max-width: 700px; /* 퍼센트로 주면 그리드 셀의 너비가 브라우저 너비에 따라 달라져서 아이템 크기가 변함 */
align-self: start;
justify-self: start;
}
section.second .main-img figure:nth-child(1){
grid-column: 16 / 29;
grid-row: 9 / 23;
z-index: 1;
border-radius: 4rem;
}
section.second .main-img figure:nth-child(2){
grid-column: 10 / 19;
grid-row: 11 / 20;
border-radius: 3rem;
}
section.second .main-img figure:nth-child(3){
grid-column: 24 / 31;
grid-row: 7 / 13;
border-radius: 2.5rem;
}
section.second .main-img figure:nth-child(4){
grid-column: 25 / 31;
grid-row: 18 / 25;
border-radius: 2.5rem;
}
/* 3번째 섹션 */
section.third{
background-color: var(--third-bg-color);
}
section.third .main-text{
color: var(--third-color);
max-width: 1000px;
}
section.third .main-text button{
background-color: var(--third-color);
color: var(--third-bg-color);
}
section.third .main-img{
display: grid;
grid-template-columns: repeat(30, 1fr);
grid-template-rows: repeat(30, 1fr);
width: 700px; /* 퍼센트로 주면 그리드 셀의 너비가 브라우저 너비에 따라 달라져서 아이템 크기가 변함 */
align-self: start;
justify-self: start;
}
section.third .main-img figure:nth-child(1) {
grid-column: 1 / 17;
grid-row: 7 / 20;
font-size: var(--main-title);
border-radius: 4rem;
}
section.third .main-img figure:nth-child(2) {
grid-column: 19 / 29;
grid-row: 7 / 14;
font-size: var(--sub-title);
border-radius: 3rem;
}
section.third .main-img figure:nth-child(3) {
grid-column: 18 / 26;
grid-row: 15 / 21;
border-radius: 2.5rem;
}
section.third .main-img figure:nth-child(4) {
grid-column: 6 / 15;
grid-row: 21 / 28;
font-size: var(--sub-title);
border-radius: 3rem;
}
section.third .main-img figure:nth-child(5) {
grid-column: 17 / 27;
grid-row: 22 / 29;
font-size: var(--sub-title);
border-radius: 3rem;
}
section.third .main-img figure{
position: relative;
}
section.third .main-img figure figcaption{
position: absolute;
left: 2rem; bottom: 2rem;
color: var(--white-color);
}
/* 4번째 섹션 */
section.fourth{
background-color: var(--fourth-bg-color);
}
section.fourth .main-img{
position: relative;
}
section.fourth .main-img figure:nth-child(2){
position: absolute;
bottom: 96px; left: 84px;
width: 215px;
}
section.fourth .main-img figure:nth-child(2) img,
section.fourth .main-img figure:nth-child(3) img{
height: 100%;
}
section.fourth .main-img figure:nth-child(3){
position: absolute;
left: 47px;
bottom: 101px;
width: 96px;
}
section.fourth .main-img figure figcaption{
color: var(--white-color); font-weight: 600;
text-align: right;
padding-right: 2.5rem;
padding-top: .5rem;
}
section.fourth .main-img img:nth-child(1){
max-width: 100%;
height: 100vh;
}
section.fourth .main-text{
color: var(--fourth-color);
width: 50%;
min-width: 500px; /* 텍스트는 계속 보이고 사진이 밀리는 효과 */
}
section.fourth .main-text button{
background-color: var(--fourth-color);
color: var(--fourth-bg-color);
}
/* 5번째 섹션 */
section:nth-child(5){
background-color: #fff;
color: #000;
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 768px){
}
@media screen and (max-width: 480px){
}
@keyframes fadeOut{
from{
opacity: 1;
transform: translateY(0px);
}
to{
opacity: 0;
transform: translateY(-30px);
}
}
@keyframes fadeIn{
from{
opacity: 0;
transform: translateY(30px);
}
to{
opacity: 1;
transform: translateY(0px);
}
}
@keyframes vibrate {
0%{
transform: translateY(0px);
}
25%{
transform: translateY(10px);
}
50%{
transform: translateY(20px);
}
75%{
transform: translateY(10px);
}
100%{
transform: translateY(0px);
}
}728x90
'프론트엔드 > HTML & CSS 연습과제 해답' 카테고리의 다른 글
| 부트스트랩 연습과제 (2) (0) | 2023.07.14 |
|---|---|
| 부트스트랩 연습과제 (1) (0) | 2023.07.14 |
| 4. 박스모델 연습과제 해답 - 텍스트 애니메이션 효과 (0) | 2023.06.22 |
| 8. 폼 요소의 종류 연습과제 해답 (0) | 2023.06.21 |
| 5. HTML5 섹셔닝 (시맨틱 태그) 연습과제 해답 (0) | 2023.06.20 |