■ 1월 12일 - 1일차
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
<style>
body, h1, h2, h3, h4, p{
margin: 0;
}
img{
width: 100%; height: 100%; object-fit: cover; display: block;
}
nav{
height: 100px;
padding: 0 50px; box-sizing: border-box;
display: flex; justify-content: space-between;
align-items: center;
}
nav .left{
display: flex; gap: 50px; align-items: center;
}
nav .left .logo{
font-size: 38px;
}
nav .left .menu{
display: flex;
height: 100%;
}
nav .left .menu p{
padding: 0 20px; align-content: center;
}
nav .left .menu .title{
font-weight: 600;
}
nav .right{
display: flex; gap: 10px; align-items: center;
}
nav .right .search{
border: 1px solid #000;
padding: 8px 10px; display: flex; width: 200px;
justify-content: space-between;
}
nav .right .search i{
font-size: 20px;
}
.bar{
height: 45px; background-color: black; color: #fff;
padding: 0 50px;
display: flex; justify-content: space-between; align-items: center;
}
.img-box{
height: 80vh;
}
section{
padding: 50px; box-sizing: border-box;
}
.s1{
display: flex;
height: 80vh;
}
.s1 > div{
width: 50%;
height: 100%;
}
.s1 .right{
display: flex; flex-wrap: wrap;
}
.s1 .right img{
height: 50%;
}
.s1 .right img:not(:nth-child(1)){
width: 50%;
}
.s2{
display: flex;
height: 60vh;
}
.s2 img:nth-child(1){
width: 50%;
}
.s2 img:not(:nth-child(1)){
width: 25%;
}
section h2, section .title , section .button{
text-align: center;
}
section h2{
margin-bottom: 10px;
}
section .title{
margin-bottom: 12px;
}
section .button{
margin-bottom: 22px;
}
.s3 .container{
display: flex;
gap: 10px;
}
.s3 .container img{
height: 300px;
margin-bottom: 12px;
}
.s3 .container .item{
width: calc((100% - 40px) / 5);
}
.s3 .container .item .name{
height: 50px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.s4{
display: flex;
gap: 20px;
}
.s4 img{
height: 600px;
margin-bottom: 10px;
}
.s4 .item{
width: calc((100% - 40px)/3);
}
.s4 .item .text-box{
padding-left: 20px; box-sizing: border-box;
}
.s4 .item .text-box h3{
margin-bottom: 5px;
}
@media (max-width:1500px){
nav .left .menu{
display: none;
}
}
@media (max-width:1024px){
.s1{
height: 160vh;
flex-wrap: wrap;
}
.s1 > div{
width: 100%;
height: 50%;
}
.s2{
flex-wrap: wrap;
}
.s2 img:nth-child(1){
width: 100%;
height: 50%;
}
.s2 img:not(:nth-child(1)){
width: 50%;
height: 50%;
}
.s3 .container .item{
width: calc((100% - 20px) / 3);
}
.s3 .container .item:nth-child(2n){
display: none;
}
.s4 .item{
width: calc((100% - 40px)/2);
}
.s4 .item:nth-child(2n){
display: none;
}
}
</style>
</head>
<body>
<div class="wrap">
<header>
<nav>
<div class="left">
<div class="logo">
<i class="fa-solid fa-binoculars"></i>
</div>
<div class="menu">
<p class="title">프로모션</p>
<p>남성</p>
<p>여성</p>
<p>아동</p>
<p>화이트라벨</p>
<p>가방&용품</p>
<p>신발</p>
<p>아울렛</p>
<p>랭킹</p>
</div>
</div>
<div class="right">
<div class="icon">
<i class="fa-solid fa-bars-progress"></i>
<span>로그인</span>
</div>
<div class="icon">
<i class="fa-solid fa-baby"></i>
<span>회원가입</span>
</div>
<div class="icon">
<i class="fa-solid fa-bell"></i>
<span>장바구니</span>
</div>
<div class="search">
<span>SEARCH</span>
<i class="fa-solid fa-box"></i>
</div>
</div>
</nav>
<div class="bar">
<i class="fa-solid fa-arrow-left"></i>
<span>공식몰 멤버십 3% 마일리지 적립 해택 추가!</span>
<div class="bar-right">
<i class="fa-solid fa-arrow-rotate-right"></i>
<i class="fa-solid fa-arrow-right"></i>
</div>
</div>
<div class="img-box">
<img src="img1.jpg" alt="">
</div>
</header>
<section class="s1">
<div class="left">
<img src="img1.jpg" alt="">
</div>
<div class="right">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
</div>
</section>
<section class="s2">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
</section>
<section class="s3">
<h2>매일 새로운 신상으로 채우다</h2>
<p class="title">새롭게 선보이는 노스페이스 제품들을 만나세요</p>
<div class="button">
<i class="fa-solid fa-arrow-right"></i>
<span>제품 전체 보기</span>
</div>
<div class="container">
<div class="item">
<img src="img3.jpg" alt="">
<p class="name">TNF BUSAN EDITION TNF BUSAN EDITION TNF BUSAN EDITION</p>
<p class="price">59,000원</p>
</div>
<div class="item">
<img src="img3.jpg" alt="">
<p class="name">TNF BUSAN EDITION</p>
<p class="price">59,000원</p>
</div>
<div class="item">
<img src="img3.jpg" alt="">
<p class="name">TNF BUSAN EDITION</p>
<p class="price">59,000원</p>
</div>
<div class="item">
<img src="img3.jpg" alt="">
<p class="name">TNF BUSAN EDITION</p>
<p class="price">59,000원</p>
</div>
<div class="item">
<img src="img3.jpg" alt="">
<p class="name">TNF BUSAN EDITION</p>
<p class="price">59,000원</p>
</div>
</div>
</section>
<section class="s4">
<div class="item">
<img src="img3.jpg" alt="">
<div class="text-box">
<h3>DAILY ACTIVE STYLE</h3>
<p class="name">편안한 착용감을 제공하는 액티브 웨어</p>
</div>
</div>
<div class="item">
<img src="img3.jpg" alt="">
<div class="text-box">
<h3>DAILY ACTIVE STYLE</h3>
<p class="name">편안한 착용감을 제공하는 액티브 웨어</p>
</div>
</div>
<div class="item">
<img src="img3.jpg" alt="">
<div class="text-box">
<h3>DAILY ACTIVE STYLE</h3>
<p class="name">편안한 착용감을 제공하는 액티브 웨어</p>
</div>
</div>
</section>
</div>
</body>
</html>
■ 1월 13일 - 2일차
■ Swiper
○ Swiper란?
웹에 사용하기 적합한 오픈 소스 JavaScript 라이브러리
반응형 슬라이드 쇼 및 스와이퍼 기능을 쉽게 구현할 수 있음
○ Swiper 기본 세팅 (CDN 활용)
- CDN 개념
Content delivery Network 콘텐츠 전송 네트워크
서버 네트워크로 사용자에게 빠르고 효율적으로 콘텐츠를 전달하기 위해 사용
- CSS 속성 및 스크립트 추가
<!-- Link Swiper's CSS 스와이퍼에 필요한 CSS 코드-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- Swiper JS 스와이퍼에 필요한 스크립트 코드 -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
- Style 속성추가
속성에 대해서 미리 설정을 지정해줌
<style>
/* 스와이퍼 기본 Css속성 */
.swiper {
width: 100%;
height: 100%;
border: 1px solid #000;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
/* 이미지는 없으니까 빼도 됨 */
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
- Swiper 구조 설정
<!-- 스와이퍼가 실행되는 부분 -->
<div class="swiper mySwiper">
<!-- 스와이퍼를 감싸는 부분 -->
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
</div>
</div>
- Script로 swiper 사용 객체 만들기
<script>
// 스와이퍼 객체 만들기
let swiper = new Swiper(".mySwiper", {});
// 변수에 저장 새로운 Swiper(대소문자 구분)
// .클래스 이름을 넣어줌 기본과 달라도 상관은 없음
</script>
○ Swiper 활용
<!-- Link Swiper's CSS 스와이퍼에 필요한 CSS 코드-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- Swiper JS 스와이퍼에 필요한 스크립트 코드 -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<style>
/* 스와이퍼 Css속성 */
.swiper {
width: 500px;
height: 400px;
overflow: hidden;
}
.swiper-slide{
text-align: center;
font-size: 18px;
background: red;
align-content: center;
border: 1px solid #000;
box-sizing: border-box;
}
</style>
<body>
<!-- 스와이퍼가 실행되는 부분 -->
<div class="swiper">
<!-- 스와이퍼를 감싸는 부분 -->
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
</div>
</div>
<script>
// 스와이퍼 객체 만들기
let swiper = new Swiper(".swiper", {
});
</script>
</body>
○ Swiper 주요 옵션 변경
- 슬라이드 방향 (direction)
horizontal : 수평방향(기본)
vertical : 수직방향
let swiper = new Swiper(".swiper", {
direction: 'vertical'
});
- 슬라이드 루프 (loop)
true : 마지막 이후 다시 처음으로 돌아가기
false : 마지막에서 종료
구분은 , 찍어줘야함
let swiper = new Swiper(".swiper", {
direction : "vertical",
loop : true,
});
- 자동재생 (autoplay)
자동 재생여부 설정
true: 자동재생
false : 종료
delay : 딜레이 시간 (ms)
let swiper = new Swiper(".swiper", {
direction : "vertical",
loop : true,
autoplay : true,
});
딜레이 시간 넣기
let swiper = new Swiper(".swiper", {
direction : "vertical",
loop : true,
autoplay : {
delay : 200,
}
});
- 애니메이션 속도 speed
애니메이션이 실행되는 속도(ms)
speed : 5000 (5초) {}중괄호가 끝나도 (,) 콤마는 넣어줘야 함.
let swiper = new Swiper(".swiper", {
direction : "vertical",
loop : true,
autoplay : {
delay : 1000, //1초마다
},
speed : 5000, //5초동안
});
- 한번에 보여지는 슬라이드 수
slidesPerView : 개수 // 이용시 대소문자 구분 필수
let swiper = new Swiper(".swiper", {
direction : "vertical",
loop : true,
autoplay : true,
slidesPerView : 2,
});
- 한번에 넘어가는 슬라이드 수
SlidesperGroup
let swiper = new Swiper(".swiper", {
direction : "vertical",
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
});
- 슬라이드 간격설정
spaceBetween: 30, // 슬라이드 간격 단위px
<script>
// 스와이퍼 객체 만들기
let swiper = new Swiper(".swiper", {
direction : "vertical",
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
});
</script>
- 슬라이드 내부 간격은 CSS로 통제
.swiper {
width: 500px;
height: 400px;
overflow: hidden;
border: 1px solid #000;
padding: 10px;
}
■ Swiper 연습
○ Swiper 두개 적용
스와이퍼2번째 적용 이름 변경
swiper2
script에서 다시 작성 새로운 변수에 넣고 적용할 클래스명 넣어주기
작동방식 작성
오른쪽 정렬 크기도 설정해보기
<style>
/* 스와이퍼 Css속성 */
.swiper {
width: 500px;
height: 400px;
overflow: hidden;
border: 1px solid #000;
padding: 10px;
}
.swiper .swiper-slide{
text-align: center;
font-size: 18px;
background: red;
align-content: center;
border: 1px solid #000;
box-sizing: border-box;
}
.swiper2{
margin-top: 200px;
width: 300px;
height: 100px;
overflow: hidden;
border: 1px solid #000;
margin-left: auto;
/*왼쪽에 붙이기*/
}
.swiper2 .swiper-slide{
text-align: center;
background-color: aqua;
align-content: center;
}
</style>
<body>
<!-- 스와이퍼가 실행되는 부분 -->
<div class="swiper">
<!-- 스와이퍼를 감싸는 부분 -->
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
</div>
</div>
<div class="swiper2">
<!-- 스와이퍼를 감싸는 부분 -->
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
</div>
</div>
<script>
// 스와이퍼 객체 만들기
let swiper = new Swiper(".swiper", {
direction : "vertical",
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
});
let swiper2 = new Swiper(".swiper2", {
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
});
</script>
</body>
○ Swiper 이미지 넣기
<style>
/* 스와이퍼 Css속성 */
.swiper {
width: 500px;
height: 400px;
overflow: hidden;
border: 1px solid #000;
padding: 10px;
}
.swiper .swiper-slide{
text-align: center;
align-content: center;
border: 1px solid #000;
box-sizing: border-box;
}
.swiper .swiper-slide img{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
</style>
<body>
<!-- 스와이퍼가 실행되는 부분 -->
<div class="swiper">
<!-- 스와이퍼를 감싸는 부분 -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://picsum.photos/id/1/800/200" alt="">
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/2/800/200" alt="">
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/3/800/200" alt="">
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/4/800/200" alt="">
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/5/800/200" alt="">
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/6/800/200" alt="">
</div>
</div>
</div>
</div>
<script>
// 스와이퍼 객체 만들기
let swiper = new Swiper(".swiper", {
direction : "vertical",
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
});
</script>
</body>
○ 이미지와 글자 같이 넣기
<style>
/* 스와이퍼 Css속성 */
.swiper {
width: 500px;
height: 400px;
overflow: hidden;
border: 1px solid #000;
padding: 10px;
}
.swiper .swiper-slide{
text-align: center;
align-content: center;
border: 1px solid #000;
box-sizing: border-box;
display: flex;
}
.swiper .swiper-slide img{
width: 70%;
height: 100%;
display: block;
object-fit: cover;
}
.swiper .swiper-slide .swiper-text{
width: 30%;
align-content: center;
}
.swiper .swiper-slide .swiper-text p{
text-align: center;
}
</style>
<body>
<!-- 스와이퍼가 실행되는 부분 -->
<div class="swiper">
<!-- 스와이퍼를 감싸는 부분 -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://picsum.photos/id/1/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/2/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/3/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/4/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/5/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/6/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
</div>
</div>
</div>
<script>
// 스와이퍼 객체 만들기
let swiper = new Swiper(".swiper", {
direction : "vertical",
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
});
</script>
</body>
○ 좌우로 변경하기
크기도 조금 작게 조절하기
400 * 300 내부에 이미지 두개씩
<style>
/* 스와이퍼 Css속성 */
.swiper {
width: 400px; /* 크기조절 */
height: 300px; /* 크기조절 */
overflow: hidden;
border: 1px solid #000;
padding: 10px;
}
.swiper .swiper-slide{
text-align: center;
align-content: center;
border: 1px solid #000;
box-sizing: border-box;
/* display: flex; */ /* flex 삭제 */
}
.swiper .swiper-slide img{
width: 100%; /* 너비 변경 */
height: 70%; /* 높이 변경 */
display: block;
object-fit: cover;
}
.swiper .swiper-slide .swiper-text{
/* width: 30%; */ /* 너비 삭제 */
height: 30%; /* 높이 지정 */
align-content: center;
}
.swiper .swiper-slide .swiper-text p{
margin: 5px; /* 마진 수정 */
text-align: center;
}
</style>
<body>
<!-- 스와이퍼가 실행되는 부분 -->
<div class="swiper">
<!-- 스와이퍼를 감싸는 부분 -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://picsum.photos/id/1/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/2/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/3/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/4/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/5/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/6/800/200" alt="">
<div class="swiper-text">
<p>제목</p>
<p>여러가지 내용들</p>
</div>
</div>
</div>
</div>
<script>
// 스와이퍼 객체 만들기
let swiper = new Swiper(".swiper", {
// direction : "vertical", 방향 조절
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
});
</script>
</body>
■ Swiper 버튼 및 슬라이드
○ 페이지 버튼
pagination
false 페이징 끔
true 페이지 켬
type 페이지 종류
(bullets, fraction, progressbar, custom)
- HTML
<div class="swiper">
<div class="swiper-wrapper">
<!--슬라이드 부분-->
</div>
<!--wrapper 밑에 설정 -->
<div class="swiper-pagination"></div>
</div>
- Script
let swiper = new Swiper(".swiper", {
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
pagination: {
el: '.swiper-pagination',
type: 'bullets'
},
});
- 밖에 내가 원하는 곳에 배치
.swp{
display: flex;
justify-content: center;
height: 50px;
align-items: center;
}
<div class="swp"></div>
// swiper 밖에 설정 이름 설정 overflow: hidden으로 안보임
let swiper = new Swiper(".swiper", {
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
pagination: {
el: '.swp', //이름 다른 이름이어도 상관은 없음 대신 배치를 알아서 해야함
type: 'bullets',
clickable : true, // bullets을 클릭하면 이동
},
});
○ 이전 다음 버튼 설정
navigation
nextEl : 다음버튼 선택
prevEl : 이전버튼 선택
- HTML
<div class="swiper">
<div class="swiper-wrapper">
<!--슬라이드 부분-->
</div>
<!--wrapper 밑에 설정 -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
- Script
let swiper = new Swiper(".swiper", {
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
- 슬라이드 처음과 끝에 투명해지게 하기
슬라이드 누르면 사라지게 하기
let swiper = new Swiper(".swiper", {
loop : false, // 루프 중지
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
watchOverflow: true, //처음과 끝 숨기기
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
hideOnClick: true, //슬라이드를 누르면 숨기기
},
});
- 버튼 밖으로 변경
<div class="button">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>.button{
width: 500px; /* 너비지정 */
height: 100px;
display: flex;
justify-content: space-between;
position: absolute; /* 위치 지정 */
top: 100px;
left: 50%;
transform: translate(-50%, 0);
}
.button > div{
position: relative; /* 내부 요소가 absolute로 되어 있어서 수정 */
}
- 다른이름으로 다른 형태를 넣어서 링크
<div class="button">
<div class="a"></div>
<div class="b"></div>
</div>let swiper = new Swiper(".swiper", {
loop : false, // 루프 중지
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
watchOverflow: true, //처음과 끝
navigation: {
nextEl: '.a', //클래스명 이름
prevEl: '.b', //클래스명 이름
hideOnClick: true, //슬라이드를 누르면 숨기기
},
});.button > div{
width: 30px;
height: 30px;
background-color: red;
}
- disabledClass 비활성화 되었을때 클래스 이름
'swiper-button-disabled' 기본값
let swiper = new Swiper(".swiper", {
loop : false, // 루프 중지
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
watchOverflow: true, //처음과 끝
navigation: {
nextEl: '.a',
prevEl: '.b',
hideOnClick: true, //슬라이드를 누르면 숨기기
disabledClass: 'c', //비활성화시 클래스명
},
});
.button > .c{ // c라는 클래스 일때 변동값 넣어주기
background-color: aqua;
}
- hiddenClass 숨겨질때 클래스 이름
'swiper-button-hidden'
○ 스크롤바
scrollbar
<!--스와이퍼 안에 레퍼 밖에 id설정은 높이수정하려면-->
<div class="swiper-scrollbar" id="ss"></div>#ss{
background-color: aqua;
height: 10px;
}
.swiper-scrollbar-drag{
background-color: blue;
}let swiper = new Swiper(".swiper", {
loop : true,
autoplay : true,
slidesPerView : 2,
slidesPerGroup : 2,
spaceBetween: 20,
scrollbar: {
el: '.swiper-scrollbar',
draggable: true, // 드래그 되기
hide: true, // 미사용시 숨김
dragSize: '50px', //너비
}
});
○ effect 슬라이드 효과
slide: 기본 슬라이드 효과 (기본값)
fade: 페이드 효과
cube: 큐브 효과
coverflow: 커버플로우 효과
flip: 플립 효과
let swiper = new Swiper(".swiper", {
loop : true,
autoplay : true,
effect : 'flip',
});
■ 1월 14일 - 3일차
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<style>
body, h2,h3,p{
margin: 0;
}
img{
width: 100%; height: 100%; object-fit: cover; display: block;
}
header{
height: 80vh;
position: relative;
}
header .swiper{
height: 100%;
}
header .swiper .header-img .text-box{
position: absolute;
left: 100px; bottom: 100px; color: #fff;
}
header .swiper .header-img .text-box .title{
font-size: 50px; font-weight: 600;
text-transform: uppercase;
}
header .swiper .header-img .text-box .source{
font-size: 20px; font-weight: 600;
}
/* 페이지네이션 통제 */
header .swiper .swiper-pagination{
width: fit-content; padding: 0 100px; bottom: 25px;
}
/* 비활성 */
header .swiper .swiper-pagination .swiper-pagination-bullet{
background-color: #fff;
width: 20px; height: 10px; border-radius: 5px;
transition: width 0.5s; opacity: 0.5;
margin-right: 20px;
margin-left: 0;
}
/* 활성 */
header .swiper .swiper-pagination .swiper-pagination-bullet-active{
opacity: 1; width: 120px;
}
header nav{
position: absolute; top: 0; left: 0; z-index: 20;
width: 100%; display: flex; justify-content: space-between;
padding: 30px 100px; box-sizing: border-box; color: #fff;
}
header nav .logo{
font-size: 26px;
display: flex; gap: 10px;
}
header nav .logo i{
font-size: 42px;
}
header nav .menu{
display: flex; gap: 20px; font-size: 18px; font-weight: 600;
}
header nav .icon{
display: flex; gap: 10px; font-size: 24px;
}
/* 섹션 전체 통제 제목과 부제까지 */
section{
padding: 60px 100px; box-sizing: border-box;
}
h2{
text-transform: uppercase; font-size: 32px;
margin-bottom: 8px;
}
section > p.title{
font-size: 18px;
text-transform: capitalize; font-weight: 600;
margin-bottom: 30px;
}
/* 메인내용 */
/* 섹션1의 스와이퍼 스타일 */
.s1 .swiper .s1-slide{
height: 300px;
}
/* 섹션1 스와이퍼 버튼 통제 */
.s1{
position: relative;
}
.s1 .s1-swiper-btbox{
position: absolute;
right: 100px; bottom: 380px;
font-size: 32px;
display: flex; gap: 30px;
}
.s1 .s1-swiper-btbox i{
cursor: pointer;
transition: scale 0.5s;
}
.s1 .s1-swiper-btbox i.swiper-button-disabled{
opacity: 0.3; cursor: auto;
}
.s1 .s1-swiper-btbox i:not(.swiper-button-disabled):hover{
scale: 1.4;
}
/* 섹션1 스와이퍼 두개말고는 투명하게 */
.s1 .swiper .s1-slide{
opacity: 0.7; transition: opacity 1s;
}
.s1 .swiper .s1-slide.swiper-slide-active,
.s1 .swiper .s1-slide.swiper-slide-next{
opacity: 1;
}
/* More 버튼 */
.s1 .swiper .s1-slide .bt{
position: absolute;
left: 50%; bottom: 20px; color: #fff;
border: 1px solid #fff; padding: 5px 40px;
transform: translateX(-50%); cursor: pointer;
}
/* 버튼 호버 */
.s1 .swiper .s1-slide .bt:hover{
background-color: #000;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="swiper header-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide header-img">
<img src="img1.jpg" alt="">
<div class="text-box">
<div class="title">Contrary to popular</div>
<div class="source">Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature</div>
</div>
</div>
<div class="swiper-slide header-img">
<img src="img2.jpg" alt="">
<div class="text-box">
<div class="title">Contrary to popular</div>
<div class="source">Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature</div>
</div>
</div>
<div class="swiper-slide header-img">
<img src="img3.jpg" alt="">
<div class="text-box">
<div class="title">Contrary to popular</div>
<div class="source">Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<nav>
<div class="logo">
<i class="fa-brands fa-apple-pay"></i>
<span>
APPLE PAY
</span>
</div>
<div class="menu">
<div class="item">MENU1</div>
<div class="item">MENU2</div>
<div class="item">MENU3</div>
<div class="item">MENU4</div>
<div class="item">MENU5</div>
</div>
<div class="icon">
<i class="fa-brands fa-avianex"></i>
<i class="fa-solid fa-award"></i>
<i class="fa-solid fa-bag-shopping"></i>
</div>
</nav>
</header>
<main>
<section class="s1">
<h2>The standard chunk</h2>
<p class="title">many variations of passages of Lorem Ipsum</p>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide s1-slide">
<img src="img1.jpg" alt="">
<div class="bt">More</div>
</div>
<div class="swiper-slide s1-slide">
<img src="img2.jpg" alt="">
<div class="bt">More</div>
</div>
<div class="swiper-slide s1-slide">
<img src="img3.jpg" alt="">
<div class="bt">More</div>
</div>
<div class="swiper-slide s1-slide">
<img src="img1.jpg" alt="">
<div class="bt">More</div>
</div>
<div class="swiper-slide s1-slide">
<img src="img2.jpg" alt="">
<div class="bt">More</div>
</div>
<div class="swiper-slide s1-slide">
<img src="img3.jpg" alt="">
<div class="bt">More</div>
</div>
<div class="swiper-slide s1-slide">
<img src="img1.jpg" alt="">
<div class="bt">More</div>
</div>
<div class="swiper-slide s1-slide">
<img src="img2.jpg" alt="">
<div class="bt">More</div>
</div>
</div>
</div>
<div class="s1-swiper-btbox">
<i class="fa-solid fa-circle-arrow-left"></i>
<i class="fa-solid fa-circle-arrow-right"></i>
</div>
</section>
</main>
</div>
<script>
let hswiper = new Swiper("header .header-swiper",{
pagination: {
el: "header .swiper-pagination",
clickable : true,
},
});
let s1swiper = new Swiper(".s1 .swiper",{
slidesPerView : 3,
spaceBetween : 20,
navigation: {
nextEl: ".s1-swiper-btbox .fa-circle-arrow-right",
prevEl: ".s1-swiper-btbox .fa-circle-arrow-left",
},
});
</script>
</body>
</html>
■ 1월 15일 - 4일차(이전것 이어서)
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<style>
body, h2,h3,p{
margin: 0;
}
img{
width: 100%; height: 100%; object-fit: cover; display: block;
}
header{
height: 80vh;
position: relative;
}
header .swiper{
height: 100%;
}
header .swiper .header-img .text-box{
position: absolute;
left: 100px; bottom: 100px; color: #fff;
}
header .swiper .header-img .text-box .title{
font-size: 50px; font-weight: 600;
text-transform: uppercase;
}
header .swiper .header-img .text-box .source{
font-size: 20px; font-weight: 600;
}
/* 페이지네이션 통제 */
header .swiper .swiper-pagination{
width: fit-content; padding: 0 100px; bottom: 25px;
}
/* 비활성 */
header .swiper .swiper-pagination .swiper-pagination-bullet{
background-color: #fff;
width: 20px; height: 10px; border-radius: 5px;
transition: width 0.5s; opacity: 0.5;
margin-right: 20px;
margin-left: 0;
}
/* 활성 */
header .swiper .swiper-pagination .swiper-pagination-bullet-active{
opacity: 1; width: 120px;
}
header nav{
position: absolute; top: 0; left: 0; z-index: 20;
width: 100%; display: flex; justify-content: space-between;
padding: 30px 100px; box-sizing: border-box; color: #fff;
}
header nav .logo{
font-size: 26px;
display: flex; gap: 10px;
}
header nav .logo i{
font-size: 42px;
}
header nav .menu{
display: flex; gap: 20px; font-size: 18px; font-weight: 600;
}
header nav .icon{
display: flex; gap: 10px; font-size: 24px;
}
/* 섹션 전체 통제 제목과 부제까지 */
section{
padding: 60px 100px; box-sizing: border-box;
}
h2{
text-transform: uppercase; font-size: 32px;
margin-bottom: 8px;
}
section > p.title{
font-size: 18px;
text-transform: capitalize; font-weight: 600;
margin-bottom: 30px;
}
/* 메인내용 */
/* 섹션1의 스와이퍼 스타일 */
.s1 .swiper .s1-slide{
height: 300px;
}
/* 섹션1 스와이퍼 버튼 통제 */
.s1{
position: relative;
}
.s1 .s1-swiper-btbox{
position: absolute;
right: 100px; bottom: 380px;
font-size: 32px;
display: flex; gap: 30px;
}
.s1 .s1-swiper-btbox i{
cursor: pointer;
transition: scale 0.5s;
}
.s1 .s1-swiper-btbox i.swiper-button-disabled{
opacity: 0.3; cursor: auto;
}
.s1 .s1-swiper-btbox i:not(.swiper-button-disabled):hover{
scale: 1.4;
}
/* 섹션1 스와이퍼 두개말고는 투명하게 */
.s1 .swiper .s1-slide{
opacity: 0.7; transition: opacity 1s;
}
.s1 .swiper .s1-slide.swiper-slide-active,
.s1 .swiper .s1-slide.swiper-slide-next{
opacity: 1;
}
/* More 버튼 */
.s1 .swiper .s1-slide .bt{
position: absolute;
left: 50%; bottom: 20px; color: #fff;
border: 1px solid #fff; padding: 5px 40px;
transform: translateX(-50%); cursor: pointer;
}
/* 버튼 호버 */
.s1 .swiper .s1-slide .bt:hover{
background-color: #000;
border: 1px solid #000;
}
/* section2번 스와이퍼 4개 */
.s2{
position: relative;
}
.s2 .swiper .swiper-slide .img-box{
height: 350px; position: relative;
overflow: hidden; cursor: pointer;
margin-bottom: 10px;
}
.s2 .swiper .swiper-slide .img-box i{
position: absolute; right: 30px; top: 20px;
font-size: 32px; color: rgb(226, 113, 113);
}
.s2 .swiper .swiper-slide .text-box .title{
font-size: 18px; text-transform: capitalize; font-weight: 600;
margin-bottom: 4px;
}
.s2 .swiper .swiper-slide .text-box .source{
text-transform: capitalize;
}
.s2 .swiper .swiper-button-next,
.s2 .swiper .swiper-button-prev{
color: #fff;
}
.s2 .swiper .swiper-button-next.swiper-button-disabled,
.s2 .swiper .swiper-button-prev.swiper-button-disabled{
color: #000;
}
/* 페이지네이션 위치 및 커스텀마이징 */
.s2 .swiper-pagination{
position: absolute; top: 110px; right: 100px; left: auto;
width: fit-content;
height: fit-content;
}
.s2 .swiper-pagination .swiper-pagination-bullet{
height: 10px; width: 20px; border-radius: 5px;
}
.s2 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
width: 70px; background-color: #000;
}
/* 섹션 3 */
.s3 .swiper .swiper-slide{
height: 300px;
display: flex;
}
.s3 .swiper .swiper-slide img{
width: 50%;
}
/* 섹션 3 프로그래스바 변형 */
.s3 .swiper .swiper-pagination.swiper-pagination-progressbar{
background-color: rgba(85, 215, 255, 0.133);
}
.s3 .swiper .swiper-pagination .swiper-pagination-progressbar-fill{
background-color: rgb(0, 0, 0);
}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="swiper header-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide header-img">
<img src="img1.jpg" alt="">
<div class="text-box">
<div class="title">Contrary to popular</div>
<div class="source">Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature</div>
</div>
</div>
<div class="swiper-slide header-img">
<img src="img2.jpg" alt="">
<div class="text-box">
<div class="title">Contrary to popular</div>
<div class="source">Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature</div>
</div>
</div>
<div class="swiper-slide header-img">
<img src="img3.jpg" alt="">
<div class="text-box">
<div class="title">Contrary to popular</div>
<div class="source">Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<nav>
<div class="logo">
<i class="fa-brands fa-apple-pay"></i>
<span>
APPLE PAY
</span>
</div>
<div class="menu">
<div class="item">MENU1</div>
<div class="item">MENU2</div>
<div class="item">MENU3</div>
<div class="item">MENU4</div>
<div class="item">MENU5</div>
</div>
<div class="icon">
<i class="fa-brands fa-avianex"></i>
<i class="fa-solid fa-award"></i>
<i class="fa-solid fa-bag-shopping"></i>
</div>
</nav>
</header>
<main>
<section class="s1">
<h2>The standard chunk</h2>
<p class="title">many variations of passages of Lorem Ipsum</p>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide s1-slide">
<img src="img1.jpg" alt="">
<div class="bt">More</div>
</div>
<div class="swiper-slide s1-slide">
<img src="img2.jpg" alt="">
<div class="bt">More</div>
</div>
<div class="swiper-slide s1-slide">
<img src="img3.jpg" alt="">
<div class="bt">More</div>
</div>
<div class="swiper-slide s1-slide">
<img src="img1.jpg" alt="">
<div class="bt">More</div>
</div>
<div class="swiper-slide s1-slide">
<img src="img2.jpg" alt="">
<div class="bt">More</div>
</div>
<div class="swiper-slide s1-slide">
<img src="img3.jpg" alt="">
<div class="bt">More</div>
</div>
<div class="swiper-slide s1-slide">
<img src="img1.jpg" alt="">
<div class="bt">More</div>
</div>
<div class="swiper-slide s1-slide">
<img src="img2.jpg" alt="">
<div class="bt">More</div>
</div>
</div>
</div>
<div class="s1-swiper-btbox">
<i class="fa-solid fa-circle-arrow-left"></i>
<i class="fa-solid fa-circle-arrow-right"></i>
</div>
</section>
<section class="s2">
<h2>variations of passages</h2>
<p class="title">Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words</p>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="img-box">
<img src="img1.jpg" alt="">
<i class="fa-solid fa-heart"></i>
</div>
<div class="text-box">
<p class="title">undoubtable source</p>
<p class="source">variations of passages of Lorem Ipsum available, but the majority</p>
</div>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img1.jpg" alt="">
<i class="fa-solid fa-heart"></i>
</div>
<div class="text-box">
<p class="title">undoubtable source</p>
<p class="source">variations of passages of Lorem Ipsum available, but the majority</p>
</div>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img3.jpg" alt="">
<i class="fa-solid fa-heart"></i>
</div>
<div class="text-box">
<p class="title">undoubtable source</p>
<p class="source">variations of passages of Lorem Ipsum available, but the majority</p>
</div>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img2.jpg" alt="">
<i class="fa-solid fa-heart"></i>
</div>
<div class="text-box">
<p class="title">undoubtable source</p>
<p class="source">variations of passages of Lorem Ipsum available, but the majority</p>
</div>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img1.jpg" alt="">
<i class="fa-solid fa-heart"></i>
</div>
<div class="text-box">
<p class="title">undoubtable source</p>
<p class="source">variations of passages of Lorem Ipsum available, but the majority</p>
</div>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img2.jpg" alt="">
<i class="fa-solid fa-heart"></i>
</div>
<div class="text-box">
<p class="title">undoubtable source</p>
<p class="source">variations of passages of Lorem Ipsum available, but the majority</p>
</div>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img1.jpg" alt="">
<i class="fa-solid fa-heart"></i>
</div>
<div class="text-box">
<p class="title">undoubtable source</p>
<p class="source">variations of passages of Lorem Ipsum available, but the majority</p>
</div>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img1.jpg" alt="">
<i class="fa-solid fa-heart"></i>
</div>
<div class="text-box">
<p class="title">undoubtable source</p>
<p class="source">variations of passages of Lorem Ipsum available, but the majority</p>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="swiper-pagination"></div>
</section>
<section class="s3">
<h2>predefined chunks as necessary</h2>
<p class="title">going through the cites of the word</p>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<img src="img2.jpg" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
</main>
</div>
<script>
let hswiper = new Swiper("header .header-swiper",{
pagination: {
el: "header .swiper-pagination",
clickable : true,
},
});
let s1swiper = new Swiper(".s1 .swiper",{
slidesPerView : 3,
spaceBetween : 20,
navigation: {
nextEl: ".s1-swiper-btbox .fa-circle-arrow-right",
prevEl: ".s1-swiper-btbox .fa-circle-arrow-left",
},
});
let s2swiper = new Swiper(".s2 .swiper",{
slidesPerView : 4,
spaceBetween : 20,
navigation: {
nextEl: ".s2 .swiper-button-next",
prevEl: ".s2 .swiper-button-prev",
},
pagination: {
el: ".s2 .swiper-pagination",
clickable : true,
},
});
let s3swiper = new Swiper(".s3 .swiper",{
pagination: {
el: ".s3 .swiper-pagination",
type: "progressbar",
},
});
</script>
</body>
</html>
■ 1월 19일 - 5일차
<!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="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<style>
body,h2,h3,h4,p{
margin: 0;
}
img{
width: 100%; height: 100%; object-fit: cover;
display: block;
}
header{
height: 70vh;
display: flex; gap: 20px;
}
header .header-swiper{
width: 70%; height: 100%;
}
header .right{
width: 30%; height: 100%;
display: flex; flex-direction: column;
gap: 20px;
}
header .right img{
height: calc((100% - 40px)/3);
}
main{
padding: 50px 300px;
}
main .main-swiper{
height: 300px;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="swiper header-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="right">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
</div>
</header>
<main>
<div class="swiper main-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
</div>
</div>
</div>
</main>
</div>
<script>
let hsw = new Swiper("header .header-swiper",{
navigation: {
nextEl: ".header-swiper .swiper-button-next",
prevEl: ".header-swiper .swiper-button-prev",
},
});
let msw = new Swiper("main .main-swiper",{
slidesPerView : 3,
spaceBetween : 20,
});
</script>
</body>
</html>
■ 1월 20일 - 6일차
<!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="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<style>
body, h3, p{
margin: 0;
}
.s1{
height: 500px;
}
.s2{
padding: 50px 30px;
background-color: rgb(0, 0, 0);
color: #fff;
cursor: pointer; position: relative;
}
.s2 .swiper-slide .img-box{
height: 300px; margin-bottom: 10px;
}
.s2 .swiper-slide .img-box img{
width: 100%; height: 100%; object-fit: cover;
}
.s2 .swiper-slide h3{
font-size: 1.4rem; margin-bottom: 6px;
text-transform: uppercase;
}
.s2 .swiper-slide p{
text-transform: capitalize;
}
.s2 .swiper-pagination{
bottom: 10px;
}
.s2 .swiper-pagination .swiper-pagination-bullet{
width: 30px; height: 30px; align-content: center;
opacity: 1; background-color: transparent;
}
.s2 .swiper-pagination .swiper-pagination-bullet-active{
background-color: #fff; color: #000;
}
</style>
</head>
<body>
<div class="wrap">
<div class="s1"></div>
<div class="s2">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="img-box">
<img src="img2.jpg" alt="">
</div>
<h3>when an unknown</h3>
<p>hen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img2.jpg" alt="">
</div>
<h3>when an unknown</h3>
<p>hen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img1.jpg" alt="">
</div>
<h3>when an unknown</h3>
<p>hen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img1.jpg" alt="">
</div>
<h3>when an unknown</h3>
<p>hen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img1.jpg" alt="">
</div>
<h3>when an unknown</h3>
<p>hen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img3.jpg" alt="">
</div>
<h3>when an unknown</h3>
<p>hen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img2.jpg" alt="">
</div>
<h3>when an unknown</h3>
<p>hen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img1.jpg" alt="">
</div>
<h3>when an unknown</h3>
<p>hen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img3.jpg" alt="">
</div>
<h3>when an unknown</h3>
<p>hen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img2.jpg" alt="">
</div>
<h3>when an unknown</h3>
<p>hen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img1.jpg" alt="">
</div>
<h3>when an unknown</h3>
<p>hen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="s1"></div>
</div>
<script>
let s2swiper = new Swiper(".s2 .mySwiper",{
slidesPerView : 4,
spaceBetween : 20,
pagination: {
el: ".swiper-pagination",
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "번" + "</span>";
},
},
});
</script>
</body>
</html>
■ 1월 21일 - 7일차
<!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="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
<style>
body,h2,h3,p{
margin: 0;
}
img{
width: 100%; height: 100%; object-fit: cover; display: block;
}
header{
display: flex;
height: 600px;
gap: 10px;
}
header .header1{
width: calc(70% - 10px);
}
header .header2{
width: 30%;
}
header .header1 .swiper-button-next,
header .header1 .swiper-button-prev{
color: #fff;
opacity: 1;
}
header .header1 .swiper-button-disabled{
opacity: 0;
}
header .header1 .swiper-pagination{
text-align: left;
color: #fff; font-weight: 600;
box-sizing: border-box;
padding-left: 20px;
bottom: 12px; top: auto;
}
/* 모든 섹션 제목, title 넣기 */
section{
padding: 50px 100px;
}
section > h2{
text-transform: uppercase;
margin-bottom: 8px;
}
section > .title{
font-size: 18px;
margin-bottom: 42px;
}
/* 섹션1번 */
.s1{
position: relative;
}
.s1 .s1s .swiper-slide img{
height: 350px;
margin-bottom: 12px;
}
.s1 .s1s .swiper-slide p:nth-child(3){
margin-bottom: 22px;
}
.s1 .s1s .swiper-slide p span{
margin-right: 10px;
}
.s1 .swiper-button{
position: absolute;
right: 100px; top: 80px;
font-size: 30px;
display: flex; gap: 20px;
}
.s1 .swiper-pagination{
top: 80px;
}
.s1 .swiper-pagination .swiper-pagination-bullet{
background-color: #000;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="swiper header1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<div class="swiper header2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
</div>
</div>
</div>
</header>
<main>
<section class="s1">
<h2>discovered the</h2>
<p class="title">classical Latin literature from 45 BC</p>
<div class="swiper s1s">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img1.jpg" alt="">
<h3>scrambled it to make</h3>
<p>remaining essentially unchanged. It was popularised in the 1960s with the release</p>
<p><span>#콜라겐</span><span>#메이크업</span><span>#skin</span></p>
</div>
<div class="swiper-slide">
<img src="img1.jpg" alt="">
<h3>scrambled it to make</h3>
<p>remaining essentially unchanged. It was popularised in the 1960s with the release</p>
<p><span>#콜라겐</span><span>#메이크업</span><span>#skin</span></p>
</div>
<div class="swiper-slide">
<img src="img2.jpg" alt="">
<h3>scrambled it to make</h3>
<p>remaining essentially unchanged. It was popularised in the 1960s with the release</p>
<p><span>#콜라겐</span><span>#메이크업</span><span>#skin</span></p>
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<h3>scrambled it to make</h3>
<p>remaining essentially unchanged. It was popularised in the 1960s with the release</p>
<p><span>#콜라겐</span><span>#메이크업</span><span>#skin</span></p>
</div>
<div class="swiper-slide">
<img src="img2.jpg" alt="">
<h3>scrambled it to make</h3>
<p>remaining essentially unchanged. It was popularised in the 1960s with the release</p>
<p><span>#콜라겐</span><span>#메이크업</span><span>#skin</span></p>
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<h3>scrambled it to make</h3>
<p>remaining essentially unchanged. It was popularised in the 1960s with the release</p>
<p><span>#콜라겐</span><span>#메이크업</span><span>#skin</span></p>
</div>
</div>
</div>
<div class="swiper-button">
<i class="fa-solid fa-arrow-left prev"></i>
<i class="fa-solid fa-arrow-right next"></i>
</div>
<div class="swiper-pagination"></div>
</section>
</main>
</div>
<script>
let h1 = new Swiper("header .header1",{
pagination: {
el: ".header1 .swiper-pagination",
type: "fraction",
},
navigation: {
nextEl: ".header1 .swiper-button-next",
prevEl: ".header1 .swiper-button-prev",
},
});
let h2 = new Swiper("header .header2",{
direction: 'vertical',
slidesPerView : 3,
spaceBetween : 10,
});
let s1s = new Swiper(".s1 .s1s",{
slidesPerView : 3,
spaceBetween : 20,
pagination: {
el: ".s1 .swiper-pagination",
},
navigation: {
nextEl: ".s1 .swiper-button .next",
prevEl: ".s1 .swiper-button .prev",
},
});
</script>
</body>
</html>
■ 1월 22일 - 8일차
<!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="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<style>
body, h2, h3, p{
margin: 0;
}
header{
height: 80vh;
position: relative;
}
/* 헤더 스와이퍼 */
header .headersw{
height: 100%;
}
header .headersw video{
width: 100%; height: 100%; object-fit: cover; display: block;
}
header .headersw .swiper-slide h2{
position: absolute;
left: 50px; bottom: 100px;
font-size: 50px; color: #fff;
text-transform: uppercase;
}
header .headersw .swiper-button-next,
header .headersw .swiper-button-prev{
color: #fff;
}
/* 네비 게이션 */
header nav{
position: absolute; z-index: 50;
left: 0; top: 0; width: 100%; height: 70px;
padding: 0 50px; box-sizing: border-box;
display: flex; justify-content: space-between; align-items: center;
background-color: #0002; color: #fff;
backdrop-filter: blur(4px);
}
header nav .logo{
font-size: 28px; text-transform: uppercase;
font-weight: 700;
}
header nav .menu{
display: flex;
height: 100%;
}
header nav .menu p{
width: 150px;
align-content: center; text-align: center;
font-size: 18px; text-transform: uppercase;
}
header nav .menu p:hover{
background-color: #fff8; color: black; cursor: pointer;
}
/* 메인 섹션들 h2 .title 수정 img */
section{
padding: 60px 100px; box-sizing: border-box;
}
section > h2{
font-size: 1.8rem;
margin-bottom: 6px;
}
section > .title{
font-size: 1.2rem;
margin-bottom: 40px;
}
img{
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 섹션1 */
.s1 .s1sw .s1sl{
height: 400px;
display: flex;
}
.s1 .s1sw .s1sl img,
.s1 .s1sw .s1sl .text-box{
width: 50%;
}
.s1 .s1sw .s1sl .text-box{
padding: 0 30px; box-sizing: border-box;
align-content: center;
background-color: #000; color: #fff;
}
.s1 .s1sw .swiper-button-next,
.s1 .s1sw .swiper-button-prev{
color: #fff;
top: 40px;
}
.s1 .s1sw .swiper-button-next{
right: 20px; left: auto;
}
.s1 .s1sw .swiper-button-prev{
left: 20px; right: auto;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="swiper headersw">
<div class="swiper-wrapper">
<div class="swiper-slide">
<video src="mv1.mp4" autoplay muted loop></video>
<h2>Contrary to popular belief</h2>
</div>
<div class="swiper-slide">
<video src="mv2.mp4" autoplay muted loop></video>
<h2>piece of classical Latin literature</h2>
</div>
<div class="swiper-slide">
<video src="mv3.mp4" autoplay muted loop></video>
<h2>have suffered alteration in some</h2>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<nav>
<div class="logo">Home</div>
<div class="menu">
<p>Menu1</p>
<p>Menu2</p>
<p>Menu3</p>
<p>Menu4</p>
<p>Menu5</p>
</div>
</nav>
</header>
<main>
<section class="s1">
<h2>Hampden-Sydney</h2>
<p class="title">randomised words which</p>
<div class="swiper s1sw">
<div class="swiper-wrapper">
<div class="swiper-slide s1sl">
<img src="./img1.jpg" alt="">
<div class="text-box">
<h3>Variations of passages of Lorem Ipsum</h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
</div>
</div>
<div class="swiper-slide s1sl">
<img src="./img2.jpg" alt="">
<div class="text-box">
<h3>Variations of passages of Lorem Ipsum</h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
</div>
</div>
<div class="swiper-slide s1sl">
<img src="./img3.jpg" alt="">
<div class="text-box">
<h3>Variations of passages of Lorem Ipsum</h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
</div>
</div>
<div class="swiper-slide s1sl">
<img src="./img4.jpg" alt="">
<div class="text-box">
<h3>Variations of passages of Lorem Ipsum</h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
</div>
</div>
<div class="swiper-slide s1sl">
<img src="./img1.jpg" alt="">
<div class="text-box">
<h3>Variations of passages of Lorem Ipsum</h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
</div>
</div>
<div class="swiper-slide s1sl">
<img src="./img2.jpg" alt="">
<div class="text-box">
<h3>Variations of passages of Lorem Ipsum</h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
</main>
</div>
<script>
let hs = new Swiper("header .headersw",{
navigation: {
nextEl: ".headersw .swiper-button-next",
prevEl: ".headersw .swiper-button-prev",
},
});
let s1s = new Swiper(".s1 .s1sw",{
slidesPerView : 2,
spaceBetween : 20,
navigation: {
nextEl: ".s1 .swiper-button-next",
prevEl: ".s1 .swiper-button-prev",
},
});
</script>
</body>
</html>
■ 1월 28일 - 11일차
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<style>
body, h2, h3, h4, p {
margin: 0;
}
img{
width: 100%; height: 100%; object-fit: cover; display: block;
}
section {
padding: 50px 0;
box-sizing: border-box;
}
h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 42px;
}
header{
position: relative;
height: 80vh;
}
header .headersw{
height: 100%;
}
/* Prgressbar 커스텀 */
header .headersw .swiper-pagination{
width: 150px; height: 4px;
top: auto; left: 70px; bottom: 100px;
background-color: #fff6;
}
header .headersw .swiper-pagination-progressbar-fill{
background-color: #fff;
}
header .headersw .swiper-pagination::before{
content: "1";
left: -20px;
}
header .headersw .swiper-pagination::after{
content: "3";
right: -20px;
}
header .headersw .swiper-pagination::before,
header .headersw .swiper-pagination::after{
position: absolute; top: 50%; transform: translateY(-50%);
font-weight: 600; color: #fff;
}
header .headersw .txt-box{
position: absolute; left: 150px; top: 200px;
color: #fff;
}
header .headersw .txt-box h3{
margin-bottom: 12px;
}
header .headersw .txt-box .title{
font-size: 42px; font-weight: 500;
}
header .headersw .txt-box .title span{
font-weight: 600; margin-top: 5px; display: inline-block;
}
/* 네비 박스 */
.nav-box{
position: absolute; left: 0; top: 0; width: 100%;
z-index: 20;
color: #fff;
}
.nav-box .keyword{
background-color: #444;
height: 30px;
display: flex; justify-content: space-between; align-items: center;
padding: 0 50px; box-sizing: border-box; font-size: 13px;
}
.nav-box .keyword .none{
opacity: 0;
}
.nav-box nav{
display: flex; justify-content: space-between; align-items: center;
padding: 0 50px;
height: 80px;
}
.nav-box nav .menu{
display: flex; gap: 30px;
}
.nav-box nav .icon-box{
display: flex; gap: 12px; font-size: 18px;
}
.nav-box nav .icon-box .fa-user{
position: relative;
}
.nav-box nav .icon-box .fa-user::after{
content: "1초 회원가입";
position: absolute; left: 50%; top: 40px; transform: translateX(-50%);
font-size: 10px;
display: block; width: 70px; height: 20px; background-color: rgb(140, 190, 235);
align-content: center; border-radius: 10px;
}
/* ALL */
.all{
text-align: center;
display: flex; justify-content: center;
gap: 25px;
}
.all .item .back-item{
width: 90px; height: 100px;
background-color: #ccc; border-radius: 30px;
align-content: center; margin-bottom: 12px;
}
.all .item .back-item img{
width: 40px; height: 40px;
margin: 0 auto; border-radius: 50%;
}
/* 베스트 아이템 */
.best-item{
position: relative;
}
.best-item .bestsw{
width: 80%;
margin: 0 auto;
}
.best-item .bestsw .swiper-slide{
background-color: #eeea; padding: 30px 40px; box-sizing: border-box;
text-align: center; border-radius: 10px;
}
.best-item .bestsw .swiper-slide .img-box{
height: 350px; width: 70%; margin: 0 auto;
margin-bottom: 30px;
}
.best-item .bestsw .swiper-slide .img-box img{
border-radius: 35px;
}
.best-item .bestsw .swiper-slide .title{
font-size: 1.1rem; font-weight: 600;
margin-bottom: 3px;
}
.best-item .bestsw .swiper-slide .subtitle{
color: #aaa; font-size: 0.8rem;
margin-bottom: 12px;
}
.best-item .bestsw .swiper-slide .price{
display: flex; justify-content: center; gap: 8px;
align-items: center;
}
.best-item .bestsw .swiper-slide .price .di{
padding: 1px 6px; background-color: rgb(127, 185, 240);
font-size: 0.9rem; border-radius: 5px; color: #fff;
}
.best-item .bestsw .swiper-slide .price .pr-di{
font-size: 0.8rem; text-decoration: line-through;
color: #aaa;
}
.best-item .swiper-button-next{
right: 30px; width: 10px; color: #444;
}
.best-item .swiper-button-prev{
left: 30px; width: 10px; color: #444;
}
.event{
position: relative;
}
.event .eventsw{
height: 600px;
}
.event .eventsw img{
border-radius: 30px;
}
.event .eventsw .swiper-slide{
opacity: 0.4;
}
.event .eventsw .swiper-slide-active{
opacity: 1;
}
/* 스와이퍼 버튼 */
.event > .button{
position: absolute; top: 50%;
z-index: 20;
width: 5%; aspect-ratio: 1;
border: #4aa1c4 solid 3px;
border-radius: 50%;
color: #4aa1c4; font-weight: 600; font-size: 1vw;
align-content: center; text-align: center;
cursor: pointer;
}
.event > .button:hover{
background-color: #fffa;
}
.event > .button-next{
right: 15%;
}
.event > .button-prev{
left: 15%;
}
.pick .container{
height: 800px;
display: flex;
gap: 20px;
}
.pick .container .picksw{
width: 60%;
border-radius: 0 20px 20px 0;
}
.pick .container .items{
width: calc(40% - 20px);
display: flex; flex-wrap: wrap;
gap:20px;
}
.pick .container .items img{
width: calc((100% - 20px)/2);
height: calc((100% - 20px)/2);
}
/* 인스타 그램 */
.instasw{
width: 90%; margin: 0 auto; height: 250px;
}
.instasw .swiper-slide{
border-radius: 12px; overflow: hidden;
cursor: pointer; scale: 0.8;
}
.instasw .swiper-slide.swiper-slide-next+.swiper-slide{
scale: 1;
}
.instasw .swiper-slide img{
transition: .8s;
}
.instasw .swiper-slide:hover img{
scale: 1.15;
}
.insta .icon-box{
position: absolute; right: 30px; top: 30px;
color: #fff; font-size: 20px;
}
.insta .icon-box i{
position: absolute;
top: 0;
}
.insta .icon-box i:nth-child(1){
top: 12px;
right: 16px;
font-size: 12px;
}
.insta .icon-box i:nth-child(2){
right: 0px; z-index: 2;
}
.insta .icon-box i:nth-child(3){
right: 0px; color: #ff6d6d; font-size: 22px;
}
@media (max-width:1024px){
.all .item:nth-child(2n){
display: none;
}
.event .eventsw{
height: 400px;
}
.pick .container{
height: auto;
display: block;
}
.pick .container .picksw{
width: 100%;
height: 400px;
margin-bottom: 50px;
}
.pick .container .items{
width: 100%;
height: 300px;
gap: 10px;
}
.pick .container .items img{
width: calc((100% - 30px)/4);
height: 100%;
}
.instasw .swiper-slide.swiper-slide-next+.swiper-slide{
scale: 0.8;
}
.instasw .swiper-slide.swiper-slide-next{
scale: 1;
}
}
@media(max-width:600px){
.nav-box nav .icon-box{
display: none;
}
.nav-box nav{
padding: 0 20px;
height: 50px;
}
.nav-box nav .menu{
width: 100%;
font-size: 14px;
gap: 0;
justify-content: space-between;
}
header .headersw .txt-box{
left: 20px;
width: 70%;
}
header .headersw .txt-box h3{
font-size: 14px;
margin-bottom: 0px;
}
header .headersw .txt-box .title{
font-size: 24px;
}
header .headersw .swiper-pagination{
width: 100px;
}
.event .eventsw{
height: 300px;
}
.event > .button{
top: 55%;
width: 8%;
font-size: 1.8vw;
}
.event > .button-next{
right: 12%;
}
.event > .button-prev{
left: 12%;
}
}
</style>
</head>
<body>
<div class="wrap">
<header> <!-- Alt + Shift + F 탭맞추기-->
<div class="swiper headersw">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img1.jpg" alt="">
<div class="txt-box">
<h3>NEW</h3>
<p class="title">
놓칠 수 없는 따끈한 갓 신상!<br>
<span>하이드라 앰플 토너, 크림 나노플러스</span>
</p>
</div>
</div>
<div class="swiper-slide">
<img src="img2.jpg" alt="">
<div class="txt-box">
<h3>NEW</h3>
<p class="title">
놓칠 수 없는 따끈한 갓 신상!<br>
<span>하이드라 앰플 토너, 크림 나노플러스</span>
</p>
</div>
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<div class="txt-box">
<h3>NEW</h3>
<p class="title">
놓칠 수 없는 따끈한 갓 신상!<br>
<span>하이드라 앰플 토너, 크림 나노플러스</span>
</p>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="nav-box">
<div class="keyword">
<i class="fa-solid fa-xmark none"></i>
<span>이달의 키워드 '워터프랜들리'UP TO 50% OFF</span>
<i class="fa-solid fa-xmark"></i>
</div>
<nav>
<div class="menu">
<p>PRODUCT</p>
<p>EVENT</p>
<p>BEST</p>
<p>BRAND</p>
<p>MEDIA</p>
<p>REVIEW</p>
<p>CS</p>
</div>
<div class="icon-box">
<i class="fa-solid fa-magnifying-glass"></i>
<i class="fa-solid fa-user"></i>
<i class="fa-solid fa-bag-shopping"></i>
<i class="fa-solid fa-globe"></i>
</div>
</nav>
</div>
</header>
<main>
<section class="all">
<div class="item">
<div class="back-item">
ALL
</div>
<p>전 제품</p>
</div>
<div class="item">
<div class="back-item">
EVENT
</div>
<p>이벤트</p>
</div>
<div class="item">
<div class="back-item">
<img src="img1.jpg" alt="">
</div>
<p>토너·로션</p>
</div>
<div class="item">
<div class="back-item">
<img src="img1.jpg" alt="">
</div>
<p>토너·로션</p>
</div>
<div class="item">
<div class="back-item">
<img src="img1.jpg" alt="">
</div>
<p>토너·로션</p>
</div>
<div class="item">
<div class="back-item">
<img src="img1.jpg" alt="">
</div>
<p>토너·로션</p>
</div>
<div class="item">
<div class="back-item">
<img src="img1.jpg" alt="">
</div>
<p>토너·로션</p>
</div>
<div class="item">
<div class="back-item">
<img src="img1.jpg" alt="">
</div>
<p>토너·로션</p>
</div>
</section>
<section class="best-item">
<h2>Best Items</h2>
<div class="swiper bestsw">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="img-box">
<img src="img4.jpg" alt="">
</div>
<p class="title">선크림 시그니처</p>
<p class="subtitle">국내 최대자차 무색소 진짜 톤업 선크림</p>
<div class="price">
<span class="di">20%</span>
<span class="pr">38,400원</span>
<span class="pr-di">48,000원</span>
</div>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img3.jpg" alt="">
</div>
<p class="title">선크림 시그니처</p>
<p class="subtitle">국내 최대자차 무색소 진짜 톤업 선크림</p>
<div class="price">
<span class="di">20%</span>
<span class="pr">38,400원</span>
<span class="pr-di">48,000원</span>
</div>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img2.jpg" alt="">
</div>
<p class="title">선크림 시그니처</p>
<p class="subtitle">국내 최대자차 무색소 진짜 톤업 선크림</p>
<div class="price">
<span class="di">20%</span>
<span class="pr">38,400원</span>
<span class="pr-di">48,000원</span>
</div>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img1.jpg" alt="">
</div>
<p class="title">선크림 시그니처</p>
<p class="subtitle">국내 최대자차 무색소 진짜 톤업 선크림</p>
<div class="price">
<span class="di">20%</span>
<span class="pr">38,400원</span>
<span class="pr-di">48,000원</span>
</div>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img4.jpg" alt="">
</div>
<p class="title">선크림 시그니처</p>
<p class="subtitle">국내 최대자차 무색소 진짜 톤업 선크림</p>
<div class="price">
<span class="di">20%</span>
<span class="pr">38,400원</span>
<span class="pr-di">48,000원</span>
</div>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img3.jpg" alt="">
</div>
<p class="title">선크림 시그니처</p>
<p class="subtitle">국내 최대자차 무색소 진짜 톤업 선크림</p>
<div class="price">
<span class="di">20%</span>
<span class="pr">38,400원</span>
<span class="pr-di">48,000원</span>
</div>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img2.jpg" alt="">
</div>
<p class="title">선크림 시그니처</p>
<p class="subtitle">국내 최대자차 무색소 진짜 톤업 선크림</p>
<div class="price">
<span class="di">20%</span>
<span class="pr">38,400원</span>
<span class="pr-di">48,000원</span>
</div>
</div>
<div class="swiper-slide">
<div class="img-box">
<img src="img1.jpg" alt="">
</div>
<p class="title">선크림 시그니처</p>
<p class="subtitle">국내 최대자차 무색소 진짜 톤업 선크림</p>
<div class="price">
<span class="di">20%</span>
<span class="pr">38,400원</span>
<span class="pr-di">48,000원</span>
</div>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</section>
<section class="event">
<h2>Event</h2>
<div class="swiper eventsw">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./img1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./img2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./img3.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./img4.jpg" alt="">
</div>
</div>
</div>
<div class="button button-next">NEXT</div>
<div class="button button-prev">PREV</div>
</section>
<section class="pick">
<h2>MD Pick</h2>
<div class="container">
<div class="swiper picksw">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
</div>
</div>
</div>
<div class="items">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
<img src="img4.jpg" alt="">
</div>
</div>
</section>
<section class="insta">
<h2>Instagram</h2>
<div class="swiper instasw">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img1.jpg" alt="">
<div class="icon-box">
<i class="fa-solid fa-pen"></i>
<i class="fa-solid fa-umbrella"></i>
<i class="fa-solid fa-umbrella"></i>
</div>
</div>
<div class="swiper-slide">
<img src="img2.jpg" alt="">
<div class="icon-box">
<i class="fa-solid fa-pen"></i>
<i class="fa-solid fa-umbrella"></i>
</div>
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<div class="icon-box">
<i class="fa-solid fa-pen"></i>
<i class="fa-solid fa-umbrella"></i>
</div>
</div>
<div class="swiper-slide">
<img src="img4.jpg" alt="">
<div class="icon-box">
<i class="fa-solid fa-pen"></i>
<i class="fa-solid fa-umbrella"></i>
</div>
</div>
<div class="swiper-slide">
<img src="img1.jpg" alt="">
<div class="icon-box">
<i class="fa-solid fa-pen"></i>
<i class="fa-solid fa-umbrella"></i>
<i class="fa-solid fa-umbrella"></i>
</div>
</div>
<div class="swiper-slide">
<img src="img2.jpg" alt="">
<div class="icon-box">
<i class="fa-solid fa-pen"></i>
<i class="fa-solid fa-umbrella"></i>
</div>
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<div class="icon-box">
<i class="fa-solid fa-pen"></i>
<i class="fa-solid fa-umbrella"></i>
</div>
</div>
<div class="swiper-slide">
<img src="img4.jpg" alt="">
<div class="icon-box">
<i class="fa-solid fa-pen"></i>
<i class="fa-solid fa-umbrella"></i>
</div>
</div>
<div class="swiper-slide">
<img src="img1.jpg" alt="">
<div class="icon-box">
<i class="fa-solid fa-pen"></i>
<i class="fa-solid fa-umbrella"></i>
<i class="fa-solid fa-umbrella"></i>
</div>
</div>
<div class="swiper-slide">
<img src="img2.jpg" alt="">
<div class="icon-box">
<i class="fa-solid fa-pen"></i>
<i class="fa-solid fa-umbrella"></i>
</div>
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<div class="icon-box">
<i class="fa-solid fa-pen"></i>
<i class="fa-solid fa-umbrella"></i>
</div>
</div>
<div class="swiper-slide">
<img src="img4.jpg" alt="">
<div class="icon-box">
<i class="fa-solid fa-pen"></i>
<i class="fa-solid fa-umbrella"></i>
</div>
</div>
<div class="swiper-slide">
<img src="img1.jpg" alt="">
<div class="icon-box">
<i class="fa-solid fa-pen"></i>
<i class="fa-solid fa-umbrella"></i>
</div>
</div>
<div class="swiper-slide">
<img src="img2.jpg" alt="">
<div class="icon-box">
<i class="fa-solid fa-pen"></i>
<i class="fa-solid fa-umbrella"></i>
</div>
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<div class="icon-box">
<i class="fa-solid fa-pen"></i>
<i class="fa-solid fa-umbrella"></i>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
<script>
let hsw = new Swiper("header .headersw",{
pagination: {
el: ".headersw .swiper-pagination",
type: "progressbar",
},
});
let bestsw = new Swiper("main .bestsw",{
slidesPerView : 1,
spaceBetween : 10,
navigation: {
nextEl: ".best-item .swiper-button-next",
prevEl: ".best-item .swiper-button-prev",
},
breakpoints:{
600:{
slidesPerView : 2,
},
1024:{
slidesPerView : 4,
}
},
});
let evesw = new Swiper("main .eventsw",{
slidesPerView: 1.5,
spaceBetween : 20,
initialSlide : 1,
centeredSlides: true,
navigation: {
nextEl: ".event .button-next",
prevEl: ".event .button-prev",
},
breakpoints:{
600:{
spaceBetween : 80,
}
},
});
let picksw = new Swiper("main .picksw",{
});
let instasw = new Swiper("main .instasw",{
slidesPerView : 3,
spaceBetween : 10,
autoplay: {
delay: 1500,
},
loop: true,
breakpoints:{
1024:{
slidesPerView : 5,
spaceBetween : 35,
}
},
});
</script>
</body>
</html>
■ 1월 29일 - 12일차
■ 자바스크립트(Javascript)란?
○ 정의
JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있는 스크립팅 또는 프로그래밍 언어임
웹 페이지가 단순히 정적인 정보를 표시하는 것 이상으로
시의적절한 콘텐츠 업데이트, 대화형 지도, 애니메이션 2D/3D 그래픽, 스크롤링 비디오 주크박스 등을
표시할 때마다 JavaScript가 관련되어 있음.
○ HTML, CSS, Javascript 차이
- HTML : 문단, 제목, 데이터 표를 정의 페이지에 이미지, 영상을 삽입하는 등 콘텐츠를 정의
- CSS : 배경색 및 콘텐츠에 스타일을 적용하는 데 사용하는 언어
- Javascript : 동적으로 변경되는 콘텐츠를 만들고 멀티미디어를 제어하며
이미지에 애니메이션을 적용하는 등 모든 작업을 수행할 수 있는 언어
웹 사이트의 동작이나 상호작용을 정의 하는 언어
- HTML, CSS로 페이지 구성 및 배치를 하고 나서
Javascript로 페이지가 가진 기능 실행 및 동작활동을 실행함
언제부터 실행해야 할지 시점을 맞춰 주는 것이 중요
■ Javascript 환경구축
○ 환경구축 방법
1. HTML 내부에 작성하기
기본적으로 body아래에 작성해 주는것이 좋다.
이유 HTML의 태그와 CSS의 스타일이 모두 적용된 후 실행하기 때문이며
그래서 body내부에 태그 아래 쪽에 작성함
<body>
<!-- Contents 작성 -->
<script>
// Javascript 작성하는 부분
</script>
</body>
2. 자바스크립트 파일을 만들고 작성코드를 문서에 연결하기
.js로 확장자명으로 파일을 만들어서 작성한다.
<body>
<script src="script.js"></script>
</body>
■ 객체(Object)
○ 정의
특정 실체를 객관화 하여 인식하거나 이해하는 대상
세상에 실제로 존재하는 것을 실체로 칭한다면
나(주체)가 다른 실체를 바라볼때, 그 실체가 객체라고 함.
컴퓨터 과학에서는 메모리(실제 저장공간)에 할당 된 것으로 프로그램에서
사용되는 데이터 또는 식별자에 의해 참조되는 공간을 의미
자바스크립트에서의 객체
값 또는 기능을 가지고 있는 데이터로 웹브라우저도 소프트웨어 세계에 존재하는 사물로 객체이다.
웹브라우저 객체 의 대표 (Window) : 웹브라우저에 접근할 수 있음
○ 객체 사용법
- 객체이름 및 실제 객체뒤에 점을 찍어 주면 내부에 접근 할 수 있다.
- 객체.데이터 : 객체가 가지고 있는 숫자 문자등 다양한 데이터를 사용
- 객체.기능() : 객체가 가지고 있는 다양한 기능을 수행
○ 주석
- 주석 내용은 컴파일 하지 않고 사용자에게는 보여지는 것
// 한줄 주석
/*
여러줄
주석
*/
○ 기본사용
- window객체에서 alert() (경고창 기능을 사용하겠다)
window.alert()
- alert기능 내 ()에 작성되어진 것은 내부에 있는 것을 경고창에 넣어 주어 사용하겠다는 의미임
문자는 " " 큰따옴표 및 ' ' 작은 따옴표로 작성 +는 문자를 연결
window.alert("안녕"+'하세요')
- 여러개를 작성해줄때 기본 ;(세미콜론은 한줄 종료를 의미)
window.alert("안녕");
window.alert("웹페이지");
window.alert("기본");
- 주석처리
window.alert("안녕");
// window.alert("웹페이지");
window.alert("기본");
- 여러줄 주석
window.alert("안녕");
/*
window.alert("웹페이지");
window.alert("기본");
*/
■ Javascript 코드 작성시 규칙
○ 대문자와 소문자를 잘 구분 해서 작성
○ 구문의 끝에는 세미콜론(;) 입력해 끝을 알림
○ 한줄에는 1개의 구문을 작성하는것이 기본
■ 콘솔(console)
콘솔은 브라우저의 디버깅(debugging) 콘솔을 의미,
브라우저 안에 내장된 브라우저의 하위 객체로 브라우저 객체를 통해 접근
디버그(debug) : 컴퓨터 프로그램 개발 단계 중 시스템의
논리적 오류나 비정상적 연산(버그)를 찾아내고 수정하는 작업과정
디버깅 콘솔
개발자 도구를 열면 메뉴 중 콘솔항목이 있는데 이 화면이 디버깅 콘솔
자바스크립트 코드를 테스트(점검) 할 수 있다.
기본적으로 window 의 하위 객체 이지만 편의를 위해 생략해도 문제 없음
window.console.log(11);
console.log(100);
- 세미콜론이 없을때
window.console.log(11) console.log(100) //에러 문법적인 문제
window.console.log(11); console.log(100);
- 대소문자 잘못 사용시
console.log(11);
console.Log(100);
- clear
내 이전 콘솔의 내용을 지운다.
console.log("안녕");
console.clear();
console.log("기본");
console.log("이상");
■ 변수(Variable)
○ 변수(variable)
값에 상직적인 이름으로 변수명은 식별자(identifiers)라 불린다.
데이터에 붙이는 이름으로 변수를 이용하면 이름표를
붙여 둔 데이터를 기억해두었다가 필요할 때마다 재사용 할 수 있다.
○ 변수의 선언
변수를 만들어 주는 작업을 선언이라고 하며, 만들어진 변수에 첫 데이터를 지정하는 것을
변수의 초기화라 부른다. 동시 진행할 수 있고 따로 진행 가능
let 변수이름; // 변수 선언
변수이름 = 데이터; // 변수 초기화
let 변수이름 = 데이터; // 변수의 선언 및 초기화
let va1 = "안녕 ";
let va2;
va2 = "하세요";
console.log(va1+va2);
○ 변수의 이름 규칙
- 변수명에는 문자와 숫자 기호 $, _ 만이 포ㅓ함
- 변수명 첫번째에 숫자가 올수 없음
- 이미 다른 의미를 가지고 있는 단어(키워드)는 사용할 수 없다.
let console = "1";
console.log(console);
let 1va = "1";
let $va = "1";
console.log($va);
○ 변수의 변화
변수는 데이터를 기억하기 위해 사용, 변수는 한번에 하나의 데이터만 기억
기억하고 있는 값을 바꿔 사용 가능
let va1 = "안녕";
va1 = "웹수업";
console.log(va1);
va1 = "기본"
console.log(va1);
○ 변수의 선언 방식
- var : 변수를 선언 추가로 동시에 값을 초기화
- let : 블록 스코프 지역 변수 선언, 추가로 동시에 값을 초기화
- const : 블록 스코프 읽기 전용 상수를 선언
- var 와 let 의 차이로는 동일명으로 선언이 가능하다.
var a = 1;
var a = 2; // 동일명으로 선언가능
console.log(a);
let b = 1;
let b = 2; // 동일명 선언불가
console.log(b);
- var는 어디서나 선언해도 읽어 들일 수 있다.
var a1 = 1;
console.log("a1 = " + a1);
console.log("a2 = " + a2);
var a2 = 10;
console.log("아래쪽 a2 = " + a2);
let b1 = 1;
console.log("b1 = " + b1);
console.log("b2 = " + b2);
let b2 = 10;
- const
상수란 수식에서 변하지 않는 값을 뜻함
단 하나의 데이터만을 위해 사용하는 이름표 값의 변경이 불가능
상수는 선언과 동시에 초기화 해주어야 함. 그렇지 않으면 지정 불가
- 상수 선언 및 초기화
const con = '변하지 않음';
console.log(con);
- 값을 변경 불가
const con = '변하지 않음';
con = 20;
console.log(con);
- 선언하자 마자 초기화 하지 않아도 불가
const con;
con = 20;
console.log(con);
○ 변수에 저장 시킬수 있는 자료
자바스크립트로 표현 할 수 있는 모든 데이터를 기억할 수 있다.
간단한 자료로는 숫자와 문자열이 있음
- 숫자 저장 및 콘솔
let num1 = 10;
let num2 = 0;
let num3 = -30;
console.log(num1+num3);
- 실수 저장 및 콘솔
let num1 = 3.141592;
let num2 = -1.125;
console.log(num1+num2);
- 문자열 저장
" " 큰따옴표 및 ' ' 작은 따옴표로 감싸야 한다.
let str1 = "안녕 123";
let str2 = "2#$%^";
console.log(str1+str2);
- 변수내 타 변수 값 및 계산식 입력
let a = 10;
let b = 2;
let c = a+b;
let d = c;
console.log(c);
console.log(d);
○ Prompt
입력을 받을 수 있도록 해주는 메서드
prompt("입력창에 나올 메시지")
prompt()의 값은 입력한 값으로 반환되어 콘솔을 거쳐서 화면에 나옴
console.log(prompt("입력 >> "));
- 입력내용 변수 처리 및 결과값 반환
let input_data = "여기에 10을 입력하세요";
let result = prompt(input_data);
console.log("결과 = " + result);
■ 데이터 구조 및 형
○ 원시형 데이터
- Boolean : true, false
- null : 비어있음
- nudefined : 값이 정의 되어 있지 않음
- Numver : 정수 형 또는 실수형
- String : 문자열
- 문자열은 더하면 이어주고 숫자형태는 더하기가 된다.
let a1 = 10;
console.log(a1 + 20);
let a2 = "10";
console.log(a2 + 20);
- 다른 사칙연산으로 변경하면 문자는 숫자화 된다.
let a1 = 10;
console.log(a1 - 20);
let a2 = "10";
console.log(a2 - 20);
console.log(a2 / 20);
console.log(a2 * 20);
- 문자열과 숫자를 더하면 문자열이 된다.
숫자를 먼저더해주려면()괄호를 작성해주면됨
let a1 = "안녕";
let a2 = 10;
console.log(a1+a2+20);
console.log(a2+20+a1);
console.log(a1+(a2+20));
○ 데이터 형 변환
- paseInt() : 정수 변환
- paseFloat() : 실수 변환
console.log(parseInt("10",2)); //2진수
console.log(parseInt("10",10)); //10진수
console.log(parseInt("10",8)); //8진수
console.log(parseInt("f",16)); //16진수
console.log(parseInt("10"));
- 실수 변환
console.log(parseInt("3.14"));
console.log(parseFloat("3.14"));
console.log(parseInt(10/3));
console.log(10/3);
○ 데이터 비교
- 비교 == 같은지 다른 지 boolean으로 나옴
let a1 = "안녕"=="안녕"; //비교 true
let a3 = "1" == 1; //문자를 숫자로 변환 true
let a2 = "" == 0; //비어 있는 것은 0 true
let a4 = "1" === 1; //=== 타입도 확인 false
let a5 = parseInt("1") === 1; //타입변환 paseInt 정수로 변경 true
console.log(a1);
console.log(a2);
console.log(a3);
console.log(a4);
console.log(a5);
○ 참조형 타입
- 함수, 객체, 배열등이 있다.
- 객체(Object) : 변수와 메서드를 한 곳에 모아주는 것
- 배열(Array) : 여러 개의 데이터 원소로 가진 데이터 집합
- 함수(Function) : 실행할 구문을 미리 정의 하고 사용하는 실행부
let obj = new Object(); //객체
let arr = new Array(); //배열
function sum(a,b){ //함수
let s = a+b;
}
○ 산술 연산자
console.log(10+3); //더하기
console.log(10-3); //빼기
console.log(10*3); //곱하기
console.log(10/3); //나누기
console.log(10%3); //나머지
○ 증감 연산자
변수의 값을 1씩 증가시키거나 1씩 감소 시키는 연산자
증가시키거나 감소시키기 때문에 증감연산자라고 한다.
| 연산자 | 설명 |
| ++x | 먼저 1 증가 (전위연산자) |
| x++ | 나중에 1 증가 (후위연산자) |
| --x | 먼저 1 감소 (전위연산자) |
| x-- | 나중에 1 감소 (후위연산자) |
let i = 1;
console.log(++i); // 2 미리 증가시킴 (전위)
console.log(i++); // 2 나중에 증가시킴 (후위)
console.log(i); // 3
console.log(--i); // 2 미리 감소시킴
console.log(i--); // 2 나중에 감소 시킴
console.log(i); // 1
○ 복합 대입 연산자
변수의 값에 사칙연산을 시켜 바로 변경해 줄수 있다.
| 연산자 | 설명 |
| x+=10 | x변수의 값에 10을 더한 값을 x에 대입해준다. |
| x-=10 | x변수의 값에 10을 뺀 값을 x에 대입해준다. |
| x*=10 | x변수의 값에 10을 곱한 값을 x에 대입해준다. |
| x/=10 | x변수의 값에 10을 나눈 값을 x에 대입해준다. |
| x%=10 | x변수의 값에 10을 나누어 나머지 값을 x에 대입해준다. |
let i = 1;
i+=10;
console.log(i); // 11
i=i+10;
console.log(i); // 21
i%=10;
console.log(i); // 1
■ 조건문
○ 조건문의 기본
프로그램의 순차적인 흐름을 제어 할때 사용하는 실행문을 제어문이라고 한다.
조건문이란 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어
참일때 실행 및 거짓일때 실행하는 것들에 대해서 지정해 준다.
○ 비교 연산자
| 연산자 | 설명 |
| x > y | x가 y보다 크면 true 아니면 false |
| x >= y | x가 y보다 크거나 같으면 true 아니면 false |
| x < y | x가 y보다 작으면 true 아니면 false |
| x <= y | x가 y보다 작거나 같으면 true 아니면 false |
| x == y | x와 y가 같으면 true 다르면 false |
| x != y | x와 y가 다르면 true 같으면 false |
| x === y | x와 y가 같으면서 타입이 같으면 true 다르면 false |
| x !== y | x와 y가 다르거나 타입이 다르면 true 같으면 false |
○ IF문
- if문법 사용법
if(표현식, 조건){
표현식의 결과가 참일때 실행하고자 하는 실행문;
}
- 사용예시
let x = 10, y = 20;
if (x == y) {
document.write("x와 y는 같습니다.");
}
if (x < y) {
document.write("x가 y보다 작습니다.");
}
if (x > y) // 실행될 실행문이 한 줄뿐이라면 중괄호({})를 생략할 수 있음.
document.write("x가 y보다 큽니다.");
- if, else문법 사용
if(표현식, 조건){
표현식의 결과가 참일때 실행하고자 하는 실행문;
}
//다른 실행문을 넣으면 else가 if를 인지 하지 못함;
else{ //조건을 넣어 주지 않는다.
//else는 if가 없으면 사용할 수 없다.
표현식의 결과가 거짓일때 실행하고자 하는 실행문;
}
- if, else, else if 문법 사용
if(표현식1, 조건){
표현식의 결과가 참일때 실행하고자 하는 실행문;
}
//다른 실행문을 넣으면 else if가 if를 인지 하지 못함;
else if(표현식2){//몇번이든 다시 사용가능
//else if는 if가 없으면 사용할 수 없다.
표현식1의 결과가 거짓이면서 표현식 2가 참일때 실행하고자 하는 실행문;
}
else if(표현식3){
표현식1,2의 결과가 거짓이면서 표현식 3이 참일때 실행하고자 하는 실행문;
}
else{
표현식1,2,3 결과가 거짓일때 실행하고자 하는 실행문;
}
- 사용예시
let x = 10, y = 20;
if (x == y) {
document.write("x와 y는 같습니다.");
} else if (x < y) {
document.write("x가 y보다 작습니다.");
} else { // x > y인 경우
document.write("x가 y보다 큽니다.");
}
- 삼항연산자
간단히 표현할수 있도록 한 내용
표현식 ? 반환값1 : 반환값2let x = 3, y = 5;
let result = (x > y) ? x : y // x가 더 크면 x를, 그렇지 않으면 y를 반환함.
document.write("둘 중에 더 큰 수는 " + result + "입니다.");
- 중첩 조건문
조건문을 중첩하여 여러 조건에 따라 다양하게 적용할 수 있다.
if(표현식1){
if(표현식2){
표현식1이 맞고 표현식 2가 맞을때 실행하는 실행문;
}
else{
표현식1이 맞고 표현식 2가 아닐때 실행하는 실행문;
}
표현식1이 맞으면 실행하는 실행문; //표현식2와 상관없이 무조건 실행
}
else{
//여기에 if를 넣을 수도 있다.
표현식1이 아닐때 실행하는 실행문;
}let x = 10, y = 20;
if (x != y) {
if(x>y){
document.write("x가 y보다 크다.");
} else{
document.write("x가 y보다 작다.");
}
} else {
document.write("x와 y는 같습니다.");
}
○ Switch문
표현식, 또는 조건에 따라 다른 명령을 수행하는 if문과 다르게
조건 값이 무엇일때 다른 명령을 수행할지를 결정해 준다.
- 문법
switch (조건 값) {
case 값1:
조건 값이 값1일 때 실행하고자 하는 실행문;
break; //사용을 하지 않으면 값1이 맞으면 밑에 까지 같이 실행됨
case 값2:
조건 값이 값2일 때 실행하고자 하는 실행문;
break;
default:
조건 값이 어떠한 case 절에도 해당하지 않을 때 실행하고자 하는 실행문;
break;
}
- 사용예시
let x = 10;
switch (typeof x) {
case "number":
document.write("변수 x의 타입은 숫자입니다.");
break;
case "string":
document.write("변수 x의 타입은 문자열입니다.");
break;
case "object":
document.write("변수 x의 타입은 객체입니다.");
break;
default:
document.write("변수 x의 타입을 잘 모르겠네요...");
break;
}
- 기타 사용
let day = new Date().getDay(); // 오늘의 요일을 반환함. (일요일: 0 ~ 토요일: 6)
switch (day) {
case 1: // 월요일인 경우
case 2: // 화요일인 경우
case 3: // 수요일인 경우
case 4: // 목요일인 경우
default: // 0부터 6까지의 값이 아닌 경우
document.write("아직도 주말은 멀었네요... 힘내자구요!!");
break;
case 5: // 금요일인 경우
document.write("오늘은 불금이네요!!");
break;
case 6: // 토요일인 경우
case 0: // 일요일인 경우
document.write("즐거운 주말에도 열심히 공부하는 당신~ 최고에요!!");
break;
}
■ 반복문
반복문이란 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문
프로그램이 처리하는 대부분의 코드는 반복적인 형태가 많으므로, 가장 많이 사용되는 실행문 중 하나
○ while 문
while 문은 특정 조건을 만족할 때까지 계속해서 주어진 실행문을 반복 실행
- 문법
while (표현식) {
표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;
}
- 사용예시
let i = 1;
while (i < 5) { // 변수 i가 5보다 작을 때만 while 문을 반복함.
document.write(i + "<br>");
i++; // 반복할 때마다 변수 i를 1씩 증가시켜 변수 i가 10보다 커지면 반복문을 종료함.
}
- do/while문
while 문은 루프에 진입하기 전에 먼저 표현식부터 검사하지만
do / while 문은 먼저 루프를 한 번 실행한 후에 표현식을 검사한다.
결과와 상관없이 무조건 한번은 루프를 실행함
- 문법
do {
표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;
} while (표현식);
- 사용예시
let i = 1;
do { // 변수 i의 초깃값은 1이기 때문에 이 do / while 문은 단 한 번만 실행됨.
document.write("i : " + (i++) + "<br>");
} while (i > 3);
//i의 값은 2임
○ for문
for 문은 while 문과는 달리 자체적으로 초기식, 표현식, 증감식을 모두 포함하고 있는 반복문
- 문법
for (초기식; 표현식; 증감식) {
표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;
}
- 사용예시
for (let i = 1; i < 10; i++) {
document.write(i + "<br>");
}
- for in
연속되어진 객체를 넣어주면 인덱스 번호로 개수 만큼 반복한다.
for (변수 in 객체) {
객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
}let arr= [10,20,30];
for(let i in arr){
document.write("i : " + i + " arr[i] : "+arr[i] + "<br>");
}
// 결과
i : 0 arr[i] : 10
i : 1 arr[i] : 20
i : 2 arr[i] : 30
- for of
연속되어진 객체를 넣어주면 값이 나오고 개수 만큼 반복한다.
for (변수 of 객체) {
객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
}let arr= [10,20,30];
for(let i of arr){
document.write("i : " + i + "<br>");
}
//결과
i : 10
i : 20
i : 30
○ 기타 제어문
- continue
만나게 되면 나머지 부분을 건너뛰고 다음을 실행 한다.
let Num = 3;
for (let i = 1; i <= 10; i++) {
if (i % Num == 0){
continue;
} // Num의 배수는 출력하지 않음.
document.write(i + " ");
}
// 결과
1 2 4 5 7 8 10
- break
만나게 되면 멈춘다.
let Num = 3;
for (let i = 1; i <= 10; i++) {
if (i % Num == 0){
break;
} // Num의 배수이면 멈춤.
document.write(i + " ");
}
//결과
1 2
■ 배열
○ 배열이란?
배열(array)는 이름과 인덱스로 참조되는 정렬된 값의 집합
배열을 구성하는 각각의 값을 배열요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를
인덱스(index)라고 한다.
- 자바스크립트 배열의 특징
배열 요소의 타입이 고정되어 있지 않다. 같은 배열에 다른 타입이 들어갈 수 있다.
배열은 array 객체로 다뤄진다.
○ 배열 생성
let arr1 = [1,"안녕",true]; // 배열 리터럴 이용
let arr2 = Array(10,20,"js","html"); //Array 객체의 생성자 이용
let arr3 = new Array(10,20,"js","html"); //new 연산자 이용 객체 생성
console.log(arr1);
document.write(arr1+"<br>");
document.write(arr2+"<br>");
document.write(arr3+"<br>");
○ 배열 참조
배열의 각 요소를 참조 하고 싶을 때는 [] 연산자를 사용한다.
자바스크립트에서 배열 요소의 개수를 배열의 길이라고 한다.
length에 자동으로 갱신되며 인덱스는 언제나 0에서 부터 시작함
let arr1 = [1,"안녕",true];
console.log(arr1[1]); //1번 인덱스 접근
arr1[3] = 100; //3번 인덱스 추가
arr1[4] = 20;
console.log(arr1);
- 배열의 개수 알아내기
let arr = [10,20,100,200];
console.log(arr.length); // 4
- 배열 추가
let arr = [];
arr.push(추가할 요소); // push() 메소드를 이용하는 방법
arr[arr.length] = 추가할 요소; // length 프로퍼티를 이용하는 방법
arr[특정인덱스] = 추가할 요소; // 특정 인덱스를 지정하여 추가하는 방법
- 반복문을 이용한 배열 추가
let arr = [];
for(let i = 0; i<10; i++){
arr[arr.length] = i;
}
console.log(arr);
■ 2월 2일 - 13일차
○ 여러 배열 기능
- Join 배열안에 있는 내용을 합쳐준다.
let arr = [10,20,100,200];
let arrj = arr.join("-");
console.log(arrj);
console.log(typeof(arr));
console.log(typeof(arrj));
- reverse 반대로 돌려준다.
let arr = [10,20,100,200];
arr.reverse();
console.log(arr);
- sort 정렬
let arr = [5,2,10,22,1];
arr.sort();
console.log(arr);
arr.sort(function(a,b){
return a-b;
});
console.log(arr);
arr.reverse();
console.log(arr);
- push 마지막 추가, pop 마지막 삭제
let arr = [1,10,22,30];
arr.push(100);
arr.push(200);
console.log(arr);
console.log(arr.pop());
console.log(arr);
○ 다차원 배열
배열 요소가 또 다른 배열인 배열을 의미
let arr = new Array(3);
arr[0] = new Array(2);
arr[1] = new Array(3);
arr[2] = new Array(4);
arr[1][0] = 10;
console.log(arr);
■ 함수
○ 함수란?
하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미
함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다.
○ 함수의 정의
함수는 function키워드로 시작하며, 이름, 매개변수(parameter), 실행문으로 구성되어 있다.
function 함수이름(매개변수1, 매개변수2,...) {
함수가 호출되었을 때 실행하고자 하는 실행문;
}
- 반환
함수에서 실행한 결과를 전달 받던지 특정한 형태를 전달 받을 수 있다.
function add(x,y){
return x+y;
}
console.log(add(10,20)); //30
- 배열을 반환하는 함수 만들기
function arrcr(x){
let arr = new Array(x);
for(let i=0; i<x; i++){
arr[i] = i;
}
return arr;
}
let a = arrcr(10);
console.log(a);
■ 함수
- 전역변수, 지역변수
전역변수 : 전체 지역에서 사용할 수 있다.
지역변수 : 블럭내부에서만 사용가능 하다.
let sum = 10;
function s(x,y){
let sum = x+y;
return sum;
}
console.log(s(5,10)); // 15
console.log(sum); // 10let sum = 10; // 전역변수
function s(x,y){
sum +=x; // 전역변수에 저장 sum에 x를 더해줘라
return x+y;
}
console.log(s(1,2)); //3
console.log(sum); //11
console.log(s(2,3)); //5
console.log(sum); //13
- 호이스팅 Hoisting
console.log(s(1,5)); //6
function s(x,y){ //함수는 밑에 있어서 호이스팅 되어 사용할 수 있다.
let sum =x+y;
return sum;
}
■ 객체(Object)
○ 객체(Object)
객체는 프로그래밍에서 데이터를 구조화하고 속성과 메서드를 포함할 수 있는 독립된 데이터 구조임
속성이란 키와 값을 가지고 있다. 변수의 값과 유사하며, 메서드는 함수 기능을 의미함
객체는 기본적으로 상태(프로퍼티-속성) 행동(메서드)을 갖는 논리적 개체를 모델링하며
객체 지향 프로그래밍의 핵심개념임
객체는 key: value 형식으로 데이터가 저장되며,
속성에 접근하거나 메서드를 호출해 객체의 상태를 일거나 변경할 수 있다.
이로서 유연하고 동적인 프로그래밍 환경을 가능하게 한다.
객체는 원시 데이터(Number, String, Boolean등)과 달리 복잡한 데이터 구조를 나타내고
프로토타입 기반 상속을 통해 다른 객체로부터 속성과 메서드를 상속할 수 있다.
이로서 재사용성과 확장성을 높여 코드의 효율성을 크게 향상시킨다.
- Object 예시
let person = {
name: "John",
age: 30,
greet: function() {
console.log("Hello, " + this.name);
}
};
person.greet(); // "Hello, John"
○ 객체 리터럴
객체 리터럴은 중괄호 { } 를 사용하여 직접 객체를 정의 하는 방법임
간단한 객체를 생성할때 매우 유용함
- 예시
let car = {
brand: "Toyota",
model: "Camry",
year: 2021,
start: function() {
console.log("The car has started.");
},
stop: function() {
console.log("The car has stopped.");
}
};
console.log(car.brand); // "Toyota"
car.start(); // "The car has started."
car라는 객체가 정의되어 brand, model, year라는 프로퍼티를 가진다.
객체 리터럴은 JavaScript에서 객체를 생성하는 가장 기본적인 방법임
- 사용되어지는 언어
1. 중괄호 { } 객체의 속성과 메서드를 정의함
2. 키(Key) 값(Value)쌍 : 객체는 여러개의 속성(프로퍼티)을 가질 수 있으며
각 속성은 키와 값의 쌍으로 이루어져 있음 year이 키 이고 2020이 값임
키는 속성의 이름으로 문자열로 표현되며, 다른형태도 가능
값은 키에 대응하는 값으로 어떤 데이터 타입도 될 수 있음
3. 메서드 : 함수도 리터럴 안에 가질수 있고 메서드라고 불린다.
메서드명 : function으로 만들어준다.
4. 쉼표(,) : 각 속성(프로퍼티)과 메서드는 쉼표로 구분됨
마지막 속성 뒤에는 쉼표가 없어도 된다.
- 객체 리터럴의 장점
1. 간결함 : 객체를 생성하는 가장 간단하고 직관적인 방법임.
2. 명확함 : 어떤 속성과 메서드가 포함되는지 한눈에 알 수 있다.
3. 구조화 : 여러 데이터를 한 곳에 모아서 구조적으로 표현가능
■ 2월 3일 - 14일차
○ 계산된 속성이름 (Computed Property Names)
동적으로 속성 이름을 생성할 수 있는 기능이 추가되었음
객체를 생성할 때 속성 이름을 고정된 문자열이 아닌, 변수나 표현식으로 지정할 수 있음
let propName = "model";
let car = {
brand: "Toyota",
[propName]: "Camry", // propName이 "model"이므로, car 객체에 model: "Camry"가 추가됩니다.
};
console.log(car.model); // "Camry"
- 대괄호 표기법
계산된 속성 이름을 사용하려면, 속성 이름 자리에 대괄호 []를 사용하여 변수를 감쌈
대괄호 안에는 변수, 숫자, 함수 호출, 수학 연산 등 다양한 표현식이 들어갈 수 있다.
let dynamicKey = "age";
let person = {
name: "Alice",
[dynamicKey]: 25 // "age": 25
};
console.log(person.age); // 25
- 표현식 사용
대활호안에 복잡한 표현식을 사용 할 수 있음
let prefix = "user";
let id = 42;
let user = {
[prefix + id]: "John Doe" // "user42": "John Doe"
};
console.log(user.user42); // "John Doe"
- 함수나 메서드의 결과를 속성이름으로 사용
함수나 메서드의 결과물을 사용할 수 있다.
function generateKey(index) {
return `key${index}`;
}
let obj = {
[generateKey(1)]: "value1", // "key1": "value1"
[generateKey(2)]: "value2" // "key2": "value2"
};
console.log(obj.key1); // "value1"
console.log(obj.key2); // "value2"
- 탬플릿 리터럴
${}를 이용해 변수나 표현식을 문자열에 쉽게 삽입가능
// 일반적인 문자열 결합
let greeting = "Hello, " + name + "! You are " + age + " years old.";
// 템플릿 리터럴 사용
let greeting = `Hello, ${name}! You are ${age} years old.`;
- 객체 병합
function mergeObjects(key1, value1, key2, value2) {
return {
[key1]: value1,
[key2]: value2
};
}
let mergedObject = mergeObjects("name", "Alice", "age", 30);
console.log(mergedObject); // { name: "Alice", age: 30 }
○ this키워드
현재 실행 중인 함수가 속한 객체를 참조
let person = {
name: "John",
greet: function() {
console.log("Hello, " + this.name);
}
};
person.greet(); // "Hello, John"
- 생성자 함수에서 This는 새로 생성된 객체를 가리킨다.
function Person(name) {
this.name = name;
}
let person1 = new Person("Alice");
console.log(person1.name); // "Alice"
○ 프로퍼티 접근 및 수정
객체의 프로퍼티는 점 표기법 또는 대괄호 표기법을 사용하여 접근 및 수정이 가능
- 설명
console.log(car.brand); // "Toyota"
car.year = 2021;
console.log(car["year"]); // 2021car.brand는 car 객체의 brand 프로퍼티에 접근하고 car.year는 해당 프로퍼티의 값을 수정하는 예제임
점 표기법이 주로 사용되지만 대괄호 표기법은 프로퍼티 이름이 변수로 지정되거나 특수 문자일때 유용함
- 추가와 삭제
car.year = 2021; //추가
delete car.year; //삭제
○ JSON과 객체
JavaScript 객체는 JSON(JavaScript Object Notation) 형식으로 직렬화 될 수 있다.
JSON은 객체 데이터를 문자열로 표현하며, 주로 데이터 전송이나 저장을 위해 사용됨
- 사용예시
let person = {
name: "Alice",
age: 25
};
let jsonString = JSON.stringify(person);
console.log(jsonString); // '{"name":"Alice","age":25}'
let parsedPerson = JSON.parse(jsonString);
console.log(parsedPerson.name); // "Alice"
- 설명
JSON.stringify()는 객체를 JSON 문자열로 변환하고,
JSON.parse()는 JSON 문자열을 객체로 변환
JSON은 데이터의 직렬화와 전송을 위한 표준 형식으로 널리 사용
○ 객체의 내장 메서드
JavaScript 객체에는 다양한 내장 메서드가 있음
대표적인 메서드로는 Object.keys(), Object.values(), Object.entries()
등이 있으며, 각각 객체의 키, 값, 키-값 쌍, 객체 복사 등의 작업을 수행
let person = { name: "Alice", age: 25 };
console.log(Object.keys(person)); // ["name", "age"]
console.log(Object.values(person)); // ["Alice", 25]
console.log(Object.entries(person)); // [["name", "Alice"], ["age", 25]]
○ 객체의 복사
객체를 복사할 때는 얕은 복사와 깊은 복사라는 두 가지 방식이 있다.
얕은 복사는 객체의 최상위 속성만 복사 중첩된 객체는 참조로 복사됨,
- 얕은 복사
얕은 복사는 복사된 객체의 속성이 원본 객체의 속성과 동일한 참조(주소)를
가르키게 되어 복사된 객체의 속성 값이 변경되면 원본 객체의 속성 값도 함께
변경될 수 있다.
let original = { name: "John", address: { city: "New York" } };
// 얕은 복사
let copy = Object.assign({}, original);
// 복사된 객체 수정
copy.name = "Alice";
copy.address.city = "Los Angeles";
console.log(original.name); // "John" (변경되지 않음)
console.log(original.address.city); // "Los Angeles" (변경됨)
- 깊은 복사
객체나 배열을 복사하는데 복사된 객체는 원본 객체와 완전히 독립적이며,
어떤 변경도 서로에게 영향을 미치지 않는다. 모든 중첩된 객체나 배열도 새롭게 생성되어 복사됨
let original = { name: "John", address: { city: "New York" } };
// 깊은 복사
let deepCopy = JSON.parse(JSON.stringify(original));
// 복사된 객체 수정
deepCopy.name = "Alice";
deepCopy.address.city = "Los Angeles";
console.log(original.name); // "John" (변경되지 않음)
console.log(original.address.city); // "New York" (변경되지 않음)
○ 객체의 상속
JavaScript 객체는 프로토타입이라는 숨겨진 속성을 통해
다른 객체로부터 속성과 메서드를 상속받을 수 있다.
모든 객체는 자신의 프로토타입을 가리키는 __proto__라는 속성을 가지며,
이는 객체 상속의 기초임
let animal = {
eats: true,
walk: function() {
console.log("Animal walks");
}
};
let rabbit = {
jumps: true,
__proto__: animal
};
console.log(rabbit.eats); // true
rabbit.walk(); // "Animal walks"
- 설명
rabbit 객체는 animal 객체를 프로토타입으로 가지며,
rabbit이 직접 정의하지 않은 프로퍼티와 메서드는
프로토타입 체인을 통해 animal 객체에서 상속됨
○ 팩토리 함수(Factory Function)
팩토리 함수는 말 그대로 새 객체를 찍어내는 함수
첫째, “객체 리터럴을 10번 복사”하는 대신 한 번만 정의
둘째, 필요한 값(이름/가격/수량 등)만 넣어서 매번 새로운 객체를 만들어낸다
- 기본표시
function createUser(name, age) {
return {
name: name,
age: age
};
}
const u1 = createUser("Kim", 30);
const u2 = createUser("Lee", 25);
- 축약표시
function createUser(name, age) {
return { name, age };
}
- 화살표 축약
const createUser = (name, age) => ({ name, age });
const u1 = createUser("Kim", 30);
const u2 = createUser("Lee", 25);
- 여러개 만들기
const raw = [
["Kim", 30],
["Lee", 25],
["Park", 28]
];
const users = raw.map(([name, age]) => ({ name, age }));
- 메서드를 포함한형식
function createUser(name, age) {
return {
name,
age,
info() {
return `${this.name} (${this.age})`;
}
};
}
- 팩토리에서 공유 메서드 만들기
function userInfo() {
return `${this.name} (${this.age})`;
}
function createUser(name, age) {
return {
name,
age,
info: userInfo
};
}
- 함수까지 for로
const raw = [
["Kim", 30],
["Lee", 25],
["Park", 28]
];
const users = raw.map(([name, age]) => ({
name,
age,
info() {
return `${this.name} (${this.age})`;
}
}));
console.log(users[0].info()); // Kim (30)
■ 클래스
○ 클래스란?
자바스크립트에서 클래스는 “객체를 여러 개 만들기 위한 문법”이면서
클래스는 결국 인스턴스(개별 객체), 프로토타입(공유 메서드 저장소),
this(실행 컨텍스트 바인딩), 상속 체인을 한 덩어리로 다루게 만드는 설계 장치임
class User {
constructor(name) {
this.name = name; // 인스턴스에 붙는 값
}
hello() {
return `hi ${this.name}`; // 프로토타입에 붙는 메서드
}
}
const u = new User("Kim");
○ constructor (생성자)
constructor의 역할: 초기 상태를 “강제”하는 진입점으로
여기서 constructor는 “편하게 넣는 자리”가 아니라 규칙의 관문
어떤 값이 들어와야 하는지, 어떤 형태로 저장할지, 초기화가 누락되면 어떻게 할지
잘못된 값이면 막을지(검증)
class Product {
constructor(code, price, qty) {
this.code = code;
this.price = price;
this.qty = qty;
}
}
검증도구 예시
class Product {
constructor(code, price, qty) {
if (!code) throw new Error("code required");
if (price < 0) throw new Error("price must be >= 0");
if (qty < 0) throw new Error("qty must be >= 0");
this.code = code;
this.price = price;
this.qty = qty;
}
}
○ 클래스 내 함수
class User {
hello() { return "hi"; }
}
// 화살괄호 형태
class User {
hello = () => "hi";
}
- this 사용시 유의
u.hello()처럼 “점(.)으로 호출”하면 this는 u가 된다.
하지만 f()처럼 함수만 떼서 호출하면 this가 사라진다.
이게 프론트에서 흔히 터지는 패턴임
class User {
constructor(name) { this.name = name; }
hello() { return this.name; }
}
const u = new User("Kim");
const f = u.hello;
console.log(f()); // this가 u가 아닐 수 있음(엄격 모드면 undefined)
- 바인딩하기
button.addEventListener("click", u.hello); // this 깨짐
button.addEventListener("click", u.hello.bind(u)); //바인딩 해주기
■ 선택하기
○ DOM
Document Object Model로 웹 페이지의 콘텐츠 및 구조, 스타일요소를 구조화시켜 표현하여
프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 제공하는 인터페이스
○ ID 선택자
ID명을 HTML 구조에서 검색해 선택해 주는 것
document.getElementById("아이디명");
//예시
document.getElementById("title");
○ 태그 선택
document.getElementsByTagName("태그명");
//예시
document.getElementsByTagName("div");
- div 태그 width 변경하기
console.log(document.getElementsByTagName("div"));
document.getElementsByTagName("div")[0].style.width = "200px";
document.getElementsByTagName("div")[1].style.width = "200px";
document.getElementsByTagName("div")[2].style.width = "200px";
- 반복문 사용
let divtag = document.getElementsByTagName("div");
for(let i of divtag){
i.style.width = "10px";
}
○ 클래스 선택
document.getElementsByClassName("클래스명");
//예시
document.getElementsByClassName("box");
- 클래스 너비 변경
let cbox = document.getElementsByClassName("box");
cbox[1].style.width = "100px";
○ CSS선택자로 선택
//첫번째 한개선택
document.querySelector("css 선택자");
//여러개 선택
document.querySelectorAll("css 선택자");
//예시
document.querySelector("body > #box2");
- 사용예
let qs = document.querySelector("body > #box2");
document.querySelector("body > .box").style.width = "200px";
qs.style.backgroundColor = "red";
let qbox = document.querySelectorAll(".box");
for(let i of qbox){
i.style.height = "20px";
}
- Css 변경 다른 예
let qbox = document.querySelectorAll(".box");
for(let i of qbox){
i.style.cssText = "width: 200px; height: 20px; background-color: aquamarine;"
}
■ 2월 4일 - 15일차
■ 이벤트
○ 이벤트
사용자가 웹페이지와 상호 작용할 때 발생하는 다양한 상황에 대한 반응을 정의하는 것
element.addEventListener('이벤트명', function() {
// 클릭 시 실행할 코드
});
- 자주 쓰는 이벤트 종류
| 이벤트명 | 설명 |
| click | 클릭할 때 |
| mouseover | 마우스가 특정 객체 위로 올려졌을때 |
| mouseout | 마우스가 특정 객체 밖으로 나갔을때 |
| mouseenter | 마우스가 특정 객체 안에 들어왔을 때 |
| mouseleave | 마우스가 특정 객체에서 떠났을 때 |
| mousedown | 마우스를 눌렀을 때 |
| mouseup | 마우스를 떼었을 때 |
| scroll | 문서에서 스크롤 할때 |
| resize | 브라우저 창의 크기가 변경될 때 |
| change | input 요소의 변동이 있을때 |
| focus | 초점이 이동했을때 |
| keydown | 키를 눌렀을 때 |
| keyup | 키를 떼었을 때 |
- 기본사용하기
<style>
.box{
width: 50px;
height: 50px;
border: 1px solid #000;
}
</style>
<body>
<h1 id="title">제목</h1>
<button id="b1">버튼1</button>
<button id="b2">버튼2</button>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<script>
let ev1 = document.getElementById("b1");
let ev2 = document.getElementById("b2");
let boxcolor = document.getElementById("box1").style.backgroundColor; //이전색 저장
let box = document.getElementsByClassName("box");
ev1.addEventListener("click",function(){ //색변화
for(let i of box){
i.style.backgroundColor = "#ccc";
}
});
ev2.addEventListener("click",function(){ //이전색으로
for(let i of box){
i.style.backgroundColor = boxcolor;
}
});
window.addEventListener("resize",function(){ //브라우저 크기 변경시
let wiw = window.innerWidth;
if(wiw>500){
for(let i of box){
i.style.backgroundColor = "red";
}
}
else{
for(let i of box){
i.style.backgroundColor = boxcolor;
}
}
});
</script>
</body>
- 선택창 값 색상변경하기
<style>
#box{
width: 300px;
height: 300px;
border: 1px solid #000;
margin-top: 20px;
}
</style>
<body>
<h1 id="title">제목</h1>
<select name="" id="color">
<option value="">색상 선택</option>
<option value="#f00">빨강</option>
<option value="#00f">파랑</option>
<option value="#ac6f6f">기타</option>
</select>
<div id="box"></div>
<script>
document.getElementById("color").addEventListener("change",function(){
document.getElementById("box").style.backgroundColor = this.value;
});
</script>
</body>
■ Click 이벤트
○ 색상 가져와서 변경과 이전 돌리기
- 색상 가져오기
document.getElementById("아이디명").style.color //tag에 걸려있는 style 값가져옴
getComputedStyle(document.getElementById("아이디명")).color //직접 걸려있는 속성 가져옴
- if문 활용 현재 상태 확인 후 변경하기
<style>
.box{
width: 100px;
height: 100px;
color: aqua;
border: 1px solid #000;
}
</style>
<body>
<button id="bt1">색</button>
<div class="box" id="box1">1</div>
<div class="box" id="box2">2</div>
<div class="box" id="box3">3</div>
<script>
let btn = document.getElementById("bt1"); //버튼 이벤트 확인
let cbox = document.getElementsByClassName("box"); //클래스로 되어 있는것 선택
let cboxc = getComputedStyle(cbox[1]).color; //색상 가져오기
console.log(cboxc);
console.log(cbox[1].style.color); //tag에 걸려 있는 색상을 가져온다.
btn.addEventListener("click",function(){
if(getComputedStyle(cbox[1]).color===cboxc){
for(let i of cbox){
i.style.color = "red";
}
}
else{
for(let i of cbox){
i.style.color = cboxc;
}
}
});
</script>
</body>
○ 클래스 추가 삭제
- 클래스 변경
let a = document.getElementById("아이디명"); // 선택
a.classList.add("클래스명"); //클래스 추가
a.classList.remove("클래스명"); //클래스 삭제
a.className = "클래스명"; //클래스 이름이 변경
a.toggle("클래스명"); //클래스명이 없으면 생기고 있으면 삭제
a.classList.conntains("클래스명"); //클래스 이름이 있으면 true, 없으면 false
- 클래스 추가 하기 (지정하지 않은것에 줄 수도 있음)
<style>
.box{
width: 100px;
height: 100px;
color: aqua;
border: 1px solid #000;
}
.boxc{
background-color: red;
}
</style>
<body>
<button id="bt1">색</button>
<div class="box" id="box1">1</div>
<div class="box" id="box2">2</div>
<div class="box" id="box3">3</div>
<script>
let a = document.getElementById("box1");
a.classList.add("boxc");
</script>
</body>
- 클래스 추가 /삭제 다중 동일함
let a = document.getElementById("box1");
a.classList.add("boxc","box");
- 클래스 삭제(이름이 다르면 삭제 안됨)
let a = document.getElementById("box1");
a.classList.remove("box");
- 클래스 이름 변경 (지정하지 않은것에 줄 수도 있음)
let a = document.getElementById("box1");
a.className ="boxc";
- toggle 없으면 추가 있으면 삭제
let a = document.getElementById("box1");
a.classList.toggle("boxc");
- toggle 2개 이상 사용하기
let a = document.getElementById("box1");
a.classList.toggle("boxc");
a.classList.toggle("box");
- 클래스 확인하기
let a = document.getElementById("box1");
console.log(a.classList.contains("box"));
console.log(a.classList.contains("boxc"));
- 클래스 여러개 얻기
<div class="box boxc" id="box1">1</div>
<script>
let a = document.getElementById("box1");
console.log(a.classList.item(0)); //box
console.log(a.classList.item(1)); //boxc
</script>
- 클래스 개수 확인
let a = document.getElementById("box1");
console.log(a.classList.length); //2
- 클래스이름 배열로 얻기
let a = document.getElementById("box1");
console.log(a.classList);
console.log(a.classList[0]);
- toggle활용 클래스 추가 삭제
<style>
.box{
width: 100px;
height: 100px;
color: aqua;
border: 1px solid #000;
}
.boxc{
background-color: red;
}
</style>
<body>
<button id="bt1">색</button>
<div class="box" id="box1">1</div>
<div class="box" id="box2">2</div>
<div class="box" id="box3">3</div>
<script>
let btn = document.getElementById("bt1");
let cbox = document.getElementsByClassName("box");
btn.addEventListener("click",function(){
for(let i of cbox){
i.classList.toggle("boxc");
}
});
</script>
</body>
■ 2월 5일 - 16일차
'Web 수업자료 > Web 정규' 카테고리의 다른 글
| Web 4 26-2 (0) | 2026.02.10 |
|---|---|
| 웹 디자인 1 26-1 (0) | 2026.01.17 |
| Web 2 25-12 (0) | 2025.12.04 |
| UIUX 디자인 24-11 (0) | 2025.11.23 |
| 웹디자인 2 25-10 (0) | 2025.10.25 |