https://naver.me/xl0eJ1vm
■ 3월 13일 - 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>
<style>
body, h1, h2, h3, p{
margin: 0;
}
h2{
font-size: 30px;
}
.wrap{
width: 80%;
margin: 0 auto;
}
header{
height: 100vh;
position: relative;
}
header img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
header .text-box{
position: absolute;
width: 100%;
text-align: center;
top: 50%;
transform: translateY(-50%);
color: #fff;
text-shadow: 2px 2px 5px #000;
}
header .text-box h1{
font-size: 48px;
margin-bottom: 12px;
}
header .text-box p{
font-size: 22px;
}
header .menu-box{
width: 100%; height: 50px; background-color: #0006;
position: absolute; top: 0;
display: flex; justify-content: space-around;
font-size: 24px; text-transform: capitalize;
color: #fff;
}
header .menu-box .menu{
width: 10%;
text-align: center; align-content: center;
}
header .menu-box .menu:hover{
cursor: pointer;
color: #000;
background-color: #fff8;
}
header .menu-box .submenu{
width: 100%;
height: 400px;
position: absolute;
background-color: #0006;
top: 100%;
display: none;
}
header .menu-box:hover .submenu{
display: block;
}
/* 두번째 컨텐츠 섹션1 */
.s1{
padding: 30px 0px;
}
.s1 h2{
margin-bottom: 20px;
}
.s1 .container{
display: flex;
flex-direction: column;
gap: 20px;
}
.s1 .container .item{
display: flex;
gap: 20px;
}
.s1 .container .item > div{
width: 50%;
}
.s1 .container .img-box img{
width: 100%;
height: 100%;
object-fit: cover;
}
.s1 .container .text-box{
box-sizing: border-box;
padding: 0 5%;
align-content: center;
text-align: center;
}
.s1 .container .text-box h3{
margin-bottom: 20px;
}
/* 세번째 컨텐츠 섹션2 */
.s2{
padding-bottom: 30px;
}
.s2 h2{
margin-bottom: 20px;
}
.s2 .container{
display: flex;
justify-content: space-between;
}
.s2 .container .item{
width: 23%;
}
.s2 .img-box{
height: 300px;
overflow: hidden;
margin-bottom: 12px;
}
.s2 .img-box img{
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: 2s;
}
.s2 .img-box:hover img{
transform: scale(1.2);
}
.s2 .item h3{
margin-bottom: 6px;
}
/* 네번째 컨텐츠 섹션3 */
.s3{
padding: 30px 0;
}
.s3 h2{
margin-bottom: 20px;
}
.s3 .container {
display: flex;
gap: 20px;
}
.s3 .container .img-box{
width: 100%;
height: 200px;
position: relative;
overflow: hidden;
}
.s3 .container .img-box img{
width: 100%;
height: 100%;
object-fit: cover;
}
.s3 .container .img-box .box{
position: absolute;
width: 100%;
height: 100%;
background-color: #fff4;
top: 0;
left: 0;
transition: 2s;
}
.s3 .container .img-box:hover .box{
cursor: pointer;
background-color: #fff0;
transition: 0s;
}
/* 다섯번째 컨텐츠 섹션4 */
.s4{
padding: 30px 0;
}
.s4 .button{
width: 150px;
height: 50px;
text-align: center;
align-content: center;
background-color: black;
color: #fff;
font-size: 20px;
font-weight: 800;
margin: 0 auto;
position: relative;
cursor: pointer;
}
.s4 .button::after{
content: "";
display: block;
background-color: #f006;
position: absolute;
transition: 2s;
top: 0;
bottom: 0;
right: 0;
left: 100%;
}
.s4 .button:hover::after{
left: 0;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<img src="./h.jpg" alt="">
<div class="text-box">
<h1>printer took a galley of type</h1>
<p> It was popularised in the 1960s with the release of Letraset<br>1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
</div>
<div class="menu-box">
<div class="menu">menu</div>
<div class="menu">menu</div>
<div class="menu">menu</div>
<div class="menu">menu</div>
<div class="menu">menu</div>
<div class="submenu"></div>
</div>
</header>
<main>
<section class="s1">
<h2>professor at Hampden-Sydney</h2>
<div class="container">
<div class="item">
<div class="img-box">
<img src="./s1-1.jpg" alt="">
</div>
<div class="text-box">
<h3>There are many variations</h3>
<p>passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
</div>
</div>
<div class="item">
<div class="text-box">
<h3>Contrary to popular belief</h3>
<p>Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature</p>
</div>
<div class="img-box">
<img src="./s1-2.jpg" alt="">
</div>
</div>
</div>
</section>
<section class="s2">
<h2>The standard chunk</h2>
<div class="container">
<div class="item">
<div class="img-box">
<img src="s2-1.jpg" alt="">
</div>
<h3>suffered alteration</h3>
<p>anything embarrassing hidden</p>
</div>
<div class="item">
<div class="img-box">
<img src="s2-2.jpg" alt="">
</div>
<h3>suffered alteration</h3>
<p>anything embarrassing hidden</p>
</div>
<div class="item">
<div class="img-box">
<img src="s2-3.jpg" alt="">
</div>
<h3>suffered alteration</h3>
<p>anything embarrassing hidden</p>
</div>
<div class="item">
<div class="img-box">
<img src="s2-4.jpg" alt="">
</div>
<h3>suffered alteration</h3>
<p>anything embarrassing hidden</p>
</div>
</div>
</section>
<section class="s3">
<h2>Aldus PageMaker</h2>
<div class="container">
<div class="img-box">
<img src="./s2-2.jpg" alt="">
<div class="box"></div>
</div>
<div class="img-box">
<img src="./s2-4.jpg" alt="">
<div class="box"></div>
</div>
</div>
</section>
<section class="s4">
<div class="button">button</div>
</section>
</main>
</div>
</body>
</html>
■ 3월 18일 - 2일차
■ flex box란?
○ flex box란?
- 행 또는 열을 주축으로 설정하여 웹 요소를 배치 정렬 하는 1차원 레이아웃 방식
- flex 방식에서, 요소의 배치와 정렬은 flex container와 flex item 간의 상호작용
- flex 방식을 사용하기 위해서는 display: flex 사용
○ flex container
- flex box 방식으로 레이아웃을 결정할 요소
○ flex item
- flex container 내부에서 flex box 방식으로 배치되는 요소
- flex item은 기본적으로 container의 높이에 맞춰 나온다.
○ flex 축방식
- 주축이 가로방향의 행으로 좌우라면 교차축은 세로방향의 열로 위아래
■ flex-direction
○ 주축의 방향성을 결정하는 속성
○ 행은 가로축, 열은 세로축
○ 속성값 의미
| 속성값 | 의미 |
| row | 기본값, 주축은 행으로 가로 콘텐츠 방향과 동일 |
| row-reverse | 주축은 행으로 가로 콘텐츠 방향과 반대 |
| column | 주축은 열으로 세로 콘텐츠 방향과 동일 |
| column-reverse | 주축은 열으로 세로 콘텐츠 방향과 반대 |
○ 코드 연습
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>.container{
width: 200px; height: 200px;
background-color: yellow;
display: flex;
flex-direction: row; /* direction 위치값 */
}
.item{
width: 50px; height: 50px;
background-color: yellowgreen;
border: 1px solid #000;
}
■ flex-wrap
○ flex-wrap
flex item 들이 강제로 한줄에 배치 되게 할 것인지
또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성
○ wrap
- 너비를 벗어나면 container를 둘로 나누고 나눈 부분에서 위로 정렬
- 한줄에 더큰 요소가 있을때는 벗어나서 표시해줌
- 크기를 벗어나게 많은 요소가 있을때는 보여지는 부분이 넘어가서 활성화됨
- 그러나 행은 기본형태인 1가지 행으로 구성되어 있다고 인지하면됨
○ 속성값 의미
| 속성값 | 의미 |
| nowrap | 기본값. 공간이 부족해도 한줄배치 |
| wrap | 공간 크기에 따라 요소가 여러 행에 걸쳐 배치 |
| wrap-reverse | wrap에서 나열되는 시작점과 끝점이 반대 |
○ 코드
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
<style>
.container{
width: 200px; height: 200px;
background-color: yellow;
display: flex;
flex-wrap: wrap-reverse; /* reverse */
}
.item{
width: 50px; height: 50px;
background-color: yellowgreen;
border: 1px solid #000;
}
</style>
■ flex-flow
○ flex-flow
direction과 wrap을 한번에 사용하는 속성
○ 코드
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
<style>
.container{
width: 200px; height: 200px;
background-color: yellow;
display: flex;
flex-flow: column wrap;
}
.item{
width: 50px; height: 50px;
background-color: yellowgreen;
border: 1px solid #000;
}
</style>
■ justify-content
○ justify-content
flex item 들이 박스의 주축을 따라 배치될때 요소 사이의 공간 분배
| 속성값 | 의미 |
| flex-start | 주축의 시작점으로부터 끝점을 향해 배치 |
| flex-end | 주축의 끝점으로 부터 시작점을 향해 배치 |
| center | 주축의 중심부에 배치 |
| space-between | 주축에서 양끝에 배치 사이 간격 동일 |
| space-around | 각각의 요소에 동일한 여백 |
| space-evenly | 모든 여백이 같음 |
○ 코드
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<style>
.container{
width: 200px; height: 100px;
background-color: yellow;
display: flex;
justify-content: flex-start; /* 주축 정렬 */
}
.item{
width: 30px; height: 30px;
background-color: yellowgreen;
border: 1px solid #000;
}
</style>
■ align-items
○ flex - container
교차축 위에 플렉스 아이템들이 어떤식으로 정렬될 것인지 결정
| 속성값 | 의미 |
| stretch | 교차축 길이에 맞춰 늘어남 width, height가 우선 |
| flex-start | 교차축 시작점 부터 시작 |
| flex-end | 교차축 끝점 부터 시작 |
| center | 교차축 중심부에 배치 |
○ 코드
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<style>
.container{
width: 200px; height: 100px;
background-color: yellow;
display: flex;
align-items: flex-start; /* 보조축 정렬 */
}
.item{
width: 30px; height: 30px;
background-color: yellowgreen;
border: 1px solid #000;
}
</style>
■ align-self
○ align-self
- 각각의 flex item이 교차축에서 정렬될지 스스로 결정
- flex item에 직접입력함
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item item3">3</div> /* 개별 클래스 이름 설정 */
</div>
<style>
.container{
width: 200px; height: 100px;
background-color: yellow;
display: flex;
}
.item{
width: 30px; height: 30px;
background-color: yellowgreen;
border: 1px solid #000;
}
.item3{
align-self: flex-end; /* 개별 요소 보조축 정렬 */
}
</style>
■ align-content
○ align-content
- 교차축 정렬인데 flex-wrap: wrap; 상태일때 사용가능
- space에 대해서도 사용가능 align-item에서는 안됨
- align-item에 center와 align-content의 space-around가 같음
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<style>
.container{
width: 200px; height: 100px;
background-color: yellow;
display: flex;
flex-wrap: wrap; /* wrap일때 사용가능 */
align-content: space-around; /* align-item : center 와 동일 */
/* 다른값은 align-item에서 구할수 없음 */
}
.item{
width: 80px; height: 30px;
background-color: yellowgreen;
border: 1px solid #000;
}
</style>
■ flex-grow
○ flex-grow
- flex item이 기본 크기에 대해서 더 커질수 있다.
- container에서 할당 받을 수 있는 공간을 상대적으로 정의
- 남은게 300px 이고 1과 2로구성 되었다면 1은 100px 커지고 2는 200px 커짐
○ 코드
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<style>
.container{
height: 100px; /* 너비값 없게 놓고 해보는 것이 좋음 계속 변경해야함*/
background-color: yellow;
display: flex;
}
.item{
width: 50px; height: 30px;
background-color: yellowgreen;
border: 1px solid #000;
}
.item:nth-child(2){
flex-grow: 1; /* 남은 공간을 3으로보고 1커지기 */
}
.item:nth-child(3){
flex-grow: 2; /* 남은 공간을 3으로보고 2커지기 */
}
</style>
■ flex-shrink
○ flex-shrink
- flex item이 기본 크기에 대해서 더 작아질 수 있다.
- container에서 할당 받을 수 있는 공간을 상대적으로 정의
- 수치를 입력하지 않은것과 입력한 1을 입력한것은 동일
- 0을 입력하면 안작아짐
○ 코드
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<style>
.container{
height: 100px; /* 너비값 없게 놓고 해보는 것이 좋음 계속 변경해야함*/
background-color: yellow;
display: flex;
}
.item{
width: 50px; height: 30px;
background-color: yellowgreen;
border: 1px solid #000;
}
.item:nth-child(1){
flex-shrink: 0; /* 줄어들지 않음 */
}
.item:nth-child(2){
flex-shrink: 1; /* 줄어든 공간을 3으로보고 1배율작아지기 */
}
.item:nth-child(3){
flex-shrink: 2; /* 줄어든 공간을 3으로보고 1배율작아지기 */
}
</style>
■ flex-basis
○ flex-basis
플렉스 아이템의 초기 크기를 지정, 콘텐츠 박스의 크기를 결정
기본값은 auto로 width 속성을 정의 할 때와 동일한 방식
■ flex
○ flex
flex-grow, flex-shrink, flex-basis 세가지 속성의 정의
순서는 grow, shrink, basis임
○ 코드
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<style>
.container{
height: 100px;
background-color: yellow;
display: flex;
}
.item{
height: 30px;
background-color: yellowgreen;
border: 1px solid #000;
}
.item:nth-child(1){
flex: 1 1 100px; /* 증가, 감소, 본크기 */
}
.item:nth-child(2){
flex: 2 2 100px;
}
.item:nth-child(3){
flex: 3 3 100px;
}
</style>
■ order
○ order
플렉스 아이템의 배치 순서를 개발자가 마음대로 설정
지정한 숫자에 맞춰 오름차순 배치
코드에는 영향을 끼치지 않고 보여지는 순서에만 영향
-값에서 + 형태로 입력해 준다. 미입력 0
○ 코드
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<style>
.container{
height: 100px;
background-color: yellow;
display: flex;
}
.item{
width: 50px; height: 30px;
background-color: yellowgreen;
border: 1px solid #000;
}
.item:nth-child(1){
order: 1;
}
.item:nth-child(2){
}
.item:nth-child(3){
order: -1;
}
</style>
■ 3월 20일 - 3일차
■ 폰트 적용
○ 구글폰트 적용
- 구글 폰트 사이트에서 Filter 해당 언어 선택
- 폰트의 스타일의 개수가 너비의 차이있는 글자체임
- 글자체를 선택하면 너비 값의 종류를 확인할수 있음
- 폰트에서 Getfont 클릭
- Get embed code (웹에서 적용), Download all (디바이스에서 적용할 파일 다운로드)
- 적용할 style 체크
- import 에서 CSS에 넣을 부분 카피
300;500;700 체크하면 추가됨
- 적용
<style>
@import url('https://fonts.googleapis.com/css2?family=Matemasie&family=Sunflower:wght@300;500;700&display=swap');
.sf{
font-family: "Sunflower";
font-weight: 300;
}
</style>
<body>
<h1 class="sf">적용된 안녕하세요</h1>
<h1>기본 안녕하세요</h1>
</body>
○ 눈누 폰트적용
- font-weight는 글자 파일에 관련 되어 있음
여러개 적용가능
- font-face는 파일을 가져와 이름을 지정해 주는 역활 동일 하지 않아도 상관없음
하나의 파일에 모든 굵기를 바꿀수 있는 글자체이면 크게 문제 없지만 웹용으로 많이 쓰는 woff는 하나의 형태만 사용
가변폰트로 만들어져 있는 woff2같은경우 weight를 적용할 수 있음
<style>
@font-face {
font-family: 'Gy';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Title_Light.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'SB';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.gy{
font-family: 'Gy';
}
.sb{
font-family: "SB";
}
</style>
<body>
<h1 class="gy">적용된 안녕하세요</h1>
<h1 class="sb">적용된 안녕하세요</h1>
<h1>기본 안녕하세요</h1>
</body>
○ 파일적용
- woff 다운로드 ttf도 가능은하나 웹보다는 데스크 탑에서 사용
WOFF (Web Open Font Format) : 웹에 최적화
TTF (TrueType Font) : 데스크탑에 최적화
- 각각의 파일을 적용하고 이름을 지정함
<style>
@font-face {
font-family: "tb";
src: url(font/Title_Bold.woff);
}
@font-face {
font-family: "tm";
src: url(font/Title_Medium.woff);
}
@font-face {
font-family: "tl";
src: url(font/Title_Light.woff);
}
.tb{
font-family: "tb";
}
.tl{
font-family: "tl";
}
</style>
<body>
<h1 class="tb">적용된 안녕하세요</h1>
<h1 class="tl">적용된 안녕하세요</h1>
<h1>기본 안녕하세요</h1>
</body>
</html>
- 전체 적용 클래스로 우선순위를 얻어서 변경
<style>
@font-face {
font-family: "tb";
src: url(font/Title_Bold.woff);
}
@font-face {
font-family: "tm";
src: url(font/Title_Medium.woff);
}
@font-face {
font-family: "tl";
src: url(font/Title_Light.woff);
}
body > *{
font-family: "tm";
}
.tb{
font-family: "tb";
}
.tl{
font-family: "tl";
}
</style>
<body>
<h1 class="tb">적용된 안녕하세요</h1>
<h1 class="tl">적용된 안녕하세요</h1>
<h1>기본 안녕하세요</h1>
</body>
■ 아이콘 적용하기
○ 구글 아이콘
- 스타일 링크
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
- 글자로 인식 커스텀 예시
<style>
.a > span{
font-size: 50px;
color: aqua;
background-color: blue;
border-radius: 50%;
width: 80px;
height: 80px;
text-align: center;
align-content: center;
}
.b > span{
font-variation-settings:
'FILL' 1,
'wght' 700,
'GRAD' 0,
'opsz' 48;
font-size: 80px;
font-weight: 800;
}
.c > span{
font-size: 60px;
color: blueviolet;
}
</style>
<body>
<div class="a">
<span class="material-symbols-outlined">menu</span>
</div>
<div class="b">
<span class="material-symbols-outlined">home</span>
</div>
<div class="c">
<span class="material-symbols-outlined">add</span>
</div>
</body>
○ Font awesome (폰트 어썸)
- CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.css">
- Free 사용가능
- 코드
<style>
.a{
width: 30px;
height: 30px;
background-color: aqua;
border-radius: 50%;
padding: 10px;
}
.c{
font-size: 30px;
height: 30px;
background-color: aquamarine;
padding: 10px;
}
.d{
font-size: 30px;
line-height: 30px;
vertical-align: top;
background-color: aquamarine;
padding: 10px;
}
</style>
<body>
<svg class="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#FF0000" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg>
<i class="c fa-solid fa-heart fa-flip fa-xs" style="color: #FFD43B;"></i>
<i class="d fa-solid fa-heart fa-flip fa-xs" style="color: #FFD43B;"></i>
</body>
- 색 정보
■ 기타 효과
○ Border - Radius
- 4개
첫 번째 값은 좌측 상단 모서리에 적용
두 번째 값은 우측 상단 모서리에 적용
세 번째 값은 우측 하단 모서리에 적용
네 번째 값은 좌측 하단 모서리에 적용
border-radius: 15px 50px 30px 5px;
- 3개
첫 번째 값은 좌측 상단 모서리에 적용
두 번째 값은 우측 상단과 좌측 하단 모서리에 적용
세 번째 값은 우측 하단 모서리에 적용
border-radius: 15px 50px 30px;
- 2개
첫 번째 값은 좌측 상단과 우측 하단 모서리에 적용
두 번째 값은 우측 상단과 좌측 하단 모서리에 적용
border-radius: 15px 50px;
- 이미지에 적용
<style>
img{
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 10px 30px;
}
</style>
<body>
<img src="dog.jpg" alt="">
</body>
- 이미지와 박스에 적용해보기
<style>
p{
margin: 2px;
}
.box{
width: 200px;
border: 1px solid #aaa;
overflow: hidden; /* 넘치는 것 숨기기 */
border-radius: 40px 10px;
}
.box img{
width: 100%;
object-fit: cover;
}
</style>
<body>
<div class="box">
<img src="dog.jpg" alt="">
<p>제목</p>
<p>내용</p>
</div>
</body>
○ Text - shadow
<style>
.box > h1:nth-child(1){
text-shadow: 0px 4px; /*좌 아래*/
}
.box > h1:nth-child(2){
text-shadow: -4px -4px red; /*좌 아래 색*/
}
.box > h1:nth-child(3){
text-shadow: 4px 4px 2px; /*좌 아래 흐림*/
}
.box > h1:nth-child(4){
text-shadow: 4px 4px 6px;
}
.box > h1:nth-child(5){
text-shadow: 3px 3px 3px #888 ; /*좌 아래 흐림 색*/
}
</style>
<body>
<div class="box">
<h1>텍스트 그림자1</h1>
<h1>텍스트 그림자2</h1>
<h1>텍스트 그림자3</h1>
<h1>텍스트 그림자4</h1>
<h1>텍스트 그림자5</h1>
</div>
</body>
○ Box-shadow
<style>
.box{
width: 100px;
height: 100px;
background-color: aquamarine;
margin-bottom: 20px;
}
.box:nth-child(1){
box-shadow: 3px 3px;
}
.box:nth-child(2){
box-shadow: 3px 3px #fff00088;
}
.box:nth-child(3){
box-shadow: 3px 3px 3px red;
}
.box:nth-child(4){
box-shadow: -2px -2px 12px inset rgba(48, 97, 81, 0.308);
}
.box:nth-child(5){
box-shadow: 0px 4px 8px #aaa, 0px 8px 20px #aaa;
}
</style>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</body>
○ Text -Stroke
<style>
.box{
width: 300px;
position: relative;
}
.box > img{
width: 300px;
}
.box > h1{
margin: 0;
-webkit-text-stroke: 6px #ddd;
color: transparent;
font-size: 120px;
font-weight: 900;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="box">
<img src="dog.jpg" alt="">
<h1>DOG</h1>
</div>
</body>
○ background-clip
<style>
h1{
margin: 0;
color: transparent;
font-size: 120px;
font-weight: 900;
background-image: url(dog.jpg);
background-size: 100%;
background-position: center;
background-clip: text;
}
</style>
<body>
<h1>DOG</h1>
</body>
○ mask-imge clip
<style>
.box{
width: 300px;
height: 300px;
background-image: url(dog.jpg);
background-size: cover;
background-position: center;
mask-image: url(Untitled-1.png);
mask-size: cover;
}
</style>
<body>
<div class="box"></div>
</body>
■ 애니메이션 (Animation) 기본
○ 애니메이션 정의
애니메인션은 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시킴
애니메이션은 애니메이션을 나타내는 CSS 스타일과
애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다.
○ 애니메이션 하위 속성
- animation-name : 중간 상태를 지정, 중간 상태는 @keyframes 규칙 이용
- animation-duration : 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정
- animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행
- animation-delay : 로드 되고 얼마만큼의 시간이 지난 후 실행될지 설정
- animation-iteration-count : 애니메이션이 몇 번 반복될지 지정. infinite은 무한히 반복
- animation- direction : 애니메이션이 종료 후 다시 처음부터, 역방향으로 진행 설정
- animation-fill-mode : 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정
- animation-play-state : 멈추거나 다시 시작
○ 애니메이션 속기형 작성
- 순서는 크게 문제는 안되지만 duration, delay는 기본 앞이 duration, 뒤에 작성시 delay 임
animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state> [,...];
- 실제 사용법 (순서대로 작성하는 것을 기본으로 한다. )
div{
animation: abc 3s linear infinite ;
}
div{
animation: linear infinite 3s abc;
/* 타이밍, 개수, 시간, 이름 */
}
○ 애니메이션 @keyframes 사용
CSS 애니메이션과 트랜지션 방식의 주된 차이는 @keyframes rule에 있다.
이 rule을 사용하면 애니메이션의 흐름(sequence) 중의
여러 시점(breakpoint)에서 CSS 프로퍼티값(속성값)을 지정할 수 있다.
- from, to 키워드를 사용하여 애니메이션의 시작과 끝 시점을 정의함
- from, to 키워드 대신 %를 사용가능
@keyframes name{ /* 최초 왼쪽 여백을 0% 지정, 종료시 왼쪽 여백 -100% 지정 */
from{ margin-left: 0%; }
to{ margin-left: -100%; }
}
@keyframes name{ /* 50%를 지날때 왼쪽 여백을 -100% 지정, 0%, 100%일때는 왼쪽 여백 0% */
50%{ margin-left: -100%; }
}
■ 애니메이션 속성(property)별 작성요령
○ animation-name
- @keyframes 뒤에 애니메이션을 대표하는 임의의 이름를 부여하는 형태
- animation-name 프로퍼티값으로 지정하여 사용하고자 하는 @keyframes rule을 선택
- 하나 이상의 애니메이션 이름을 지정할 수 있다.
div{ /* 한개의 이름을 지정 */
animation-name: move;
}
div{ /* 여러개의 이름을 지정 */
animation-name: move, fadeOut, changeColor;
}
- 유효한 이름
문자열 시작하는 이름, _(언더바)로 시작, - (하이픈)으로 시작
div{
animation-name: name; /* 문자열로 시작하는 이름 */
animation-name: _name; /* 언더바(_)로 시작하는 이름 */
animation-name: -name; /* 하이픈(-)으로 시작하는 이름 */
}
- 유효하지 않은 이름
숫자로 시작, 특수문자 시작
div{
animation-name: 1name; /* 숫자로 시작하는 이름 */
animation-name: @name; /* 특수 문자로 시작하는 이름 */
}
- 화면확인
○ animation-duration
- 애니메이션 프레임의 지속시간을 지정
- 지속 시간은 애니메이션이 시작하고 종료하는 데 걸리는 시간 의미
- 단위는 밀리초 ms, 초 s로 지정함
- 지정하지 않는 경우 기본값 0s가 셋팅되어 어떠한 애니메이션도 실행 되지 않음
○ animation-timing-function
- 애니메이션 효과를 위한 수치 함수를 지정
- ease : 기본, 느리게 시작하여 점점 빨라졌다가 느려지면서 종료
- linear : 동일한 속도로 운동
- ease-in : 느리게 시작 한 후 등속 운동
- ease-out : 등속시작해서 느리게 종료
- ease-in-out : ease와 유사
○ animation-delay
- 요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에
대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정
○ animation-iteration-count
- 애니메이션 주기의 재생 횟수를 지정
- 기본값은 1이며 infinite로 무한반복
○ animation-direction
- 애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정
- normal : 기본값으로 진행
- reverse : 역순으로 진행(100->0%)
- alternate : 홀수는 normal, 짝수는 reverse로 진행
- alternate-reverse : 홀수는 reverse, 짝수는 normal로 진행
○ animation-direction
- 애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정
- normal : 기본값으로 진행
- reverse : 역순으로 진행(100->0%)
- alternate : 홀수는 normal, 짝수는 reverse로 진행
- alternate-reverse : 홀수는 reverse, 짝수는 normal로 진행
○ animation-fill-mode 값 설명
- none : 기본값. 애니메이션이 끝나면 원래 상태로 돌아감.
- forwards : 애니메이션이 끝난 후 최종 상태(마지막 키프레임) 유지.
- backwards : 애니메이션이 시작되기 전 처음 상태(첫 번째 키프레임) 적용.
- both : forwards와 backwards를 모두 적용.
■ 3월 21일 - 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>
<style>
body, h1, p{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
.wrap{
width: 800px;
margin: 0 auto;
}
header{
height: 100px;
background-color: aqua;
display: flex;
padding: 0 60px;
justify-content: space-between;
align-items: flex-end;
}
header .logo{
height: 100%;
font-size: 24px;
align-content: center;
}
header nav{
width: 70%;
height: 50px;
background-color: red;
position: relative;
z-index: 1;
}
header nav .menu{
display: flex;
height: 100%;
}
header nav .menu > li{
width: 25%;
height: 100%;
font-weight: 800;
}
header nav .menu > li > a{
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
align-content: center;
background-color: #fff;
}
header nav .menu .submenu{
display: none;
}
header nav .menu .submenu > li{
height: 40px;
}
header nav .menu .submenu > li > a{
display: inline-block;
width: 100%; height: 100%;
align-content: center;
text-align: center;
background-color: #fff;
}
header .menu > li > a:hover{
background-color: #000;
color: #fff;
}
header .menu .submenu > li > a:hover{
background-color: #000;
color: #fff;
}
header .menu li:hover > .submenu{
display: block;
}
/* 섹션1 */
.s1{
height: calc(100vh - 100px);
background-color: red;
position: relative;
}
.s1 img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.s1 .text-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
color: #fff;
}
.s1 .text-box h1{
margin-bottom: 50px;
}
.s2 h2{
font-size: 42px;
}
.s2 .container{
display: flex;
gap: 30px;
}
.s2 .container .img-box{
width: 100%;
height: 200px;
overflow: hidden;
}
.s2 .container .img-box img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: 2s;
}
.s2 .container .img-box img:hover{
scale: 1.3;
}
/* 섹션3 */
.s3 .container{
display: flex;
gap: 30px;
}
.s3 .container .item{
width: 100%;
height: 200px;
cursor: pointer;
position: relative;
}
.s3 .container .item img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="logo">Homepage</div>
<nav>
<ul class="menu">
<li><a href="#">Menu1</a>
<ul class="submenu">
<li><a href="#">Submenu1-1</a></li>
<li><a href="#">Submenu1-2</a></li>
<li><a href="#">Submenu1-3</a></li>
<li><a href="#">Submenu1-4</a></li>
</ul>
</li>
<li><a href="#">Menu2</a>
<ul class="submenu">
<li><a href="#">Submenu1-1</a></li>
<li><a href="#">Submenu1-2</a></li>
<li><a href="#">Submenu1-3</a></li>
<li><a href="#">Submenu1-4</a></li>
</ul>
</li>
<li><a href="#">Menu3</a>
<ul class="submenu">
<li><a href="#">Submenu1-1</a></li>
<li><a href="#">Submenu1-2</a></li>
<li><a href="#">Submenu1-3</a></li>
<li><a href="#">Submenu1-4</a></li>
</ul>
</li>
<li><a href="#">Menu4</a>
<ul class="submenu">
<li><a href="#">Submenu1-1</a></li>
<li><a href="#">Submenu1-2</a></li>
<li><a href="#">Submenu1-3</a></li>
<li><a href="#">Submenu1-4</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<section class="s1">
<img src="s1-1.jpg" alt="">
<div class="text-box">
<h1>HOMEPAGE</h1>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. </p>
</div>
</section>
<section class="s2">
<h2>image</h2>
<div class="container">
<div class="img-box">
<img src="s1-2.jpg" alt="">
</div>
<div class="img-box">
<img src="s1-2.jpg" alt="">
</div>
<div class="img-box">
<img src="s1-2.jpg" alt="">
</div>
<div class="img-box">
<img src="s1-2.jpg" alt="">
</div>
</div>
</section>
<section class="s3">
<h2>제목</h2>
<div class="container">
<div class="item">
<img src="s2-3.jpg" alt="">
</div>
<div class="item">
<img src="s2-3.jpg" alt="">
</div>
</div>
</section>
</div>
</body>
</html>
■ 3월 25일 - 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<style>
body,h1,h2,h3,p{
margin: 0;
}
img{
width: 100%;
object-fit: cover;
vertical-align: top;
}
.s1{
height: 50vh;
padding: 0 100px;
box-sizing: border-box;
align-content: center;
}
.s1 .container{
height: 80%;
display: flex;
justify-content: space-between;
}
.s1 .container .left{
width: 45%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.s1 .container .left h1{
font-size: 42px;
text-align: center;
text-transform: uppercase;
}
.s1 .container .left .text-box{
display: flex;
justify-content: space-between;
text-align: center;
}
.s1 .container .left .text-box .title{
font-size: 22px;
margin-bottom: 12px;
text-transform: capitalize;
font-weight: 600;
}
.s1 .container .text-box .item{
width: 45%;
}
.s1 .container .right{
width: 50%;
}
.s1 .container .right img{
height: 100%;
}
/* 섹션2 */
.s2{
height: 80vh;
position: relative;
}
.s2 img{
height: 100%;
}
.s2 .text-box{
width: 40%;
position: absolute;
right: 100px; top: 50%;
transform: translateY(-50%);
color: #fff;
text-shadow: 1px 1px 1px #000;
}
.s2 .text-box h2{
margin-bottom: 16px;
}
.s2 .text-box .text-con{
padding-left: 40px;
box-sizing: border-box;
}
.s2 .text-box .text-con .item:not(:last-child){
margin-bottom: 20px;
}
.s2 .text-box .text-con .item p:nth-child(1){
font-weight: 600;
}
/* 섹션3 */
.s3{
box-sizing: border-box;
padding: 50px 100px;
}
.s3 .container{
display: flex;
justify-content: space-between;
}
.s3 .container .text-box{
width: 30%;
align-content: center;
}
.s3 .container .text-box > h2{
font-size: 36px;
margin-bottom: 12px;
}
.s3 .container .text-box > p{
font-size: 20px;
}
.s3 .container > p{
width: 65%;
font-size: 22px;
}
/* 섹션4 */
.s4{
padding: 50px 100px;
box-sizing: border-box;
background-color: rgb(187, 221, 241);
}
.s4 h2{
font-size: 36px;
text-align: center;
margin-bottom: 12px;
}
.s4 > p{
width: 70%;
margin: 0 auto;
text-align: center;
margin-bottom: 24px;
}
.s4 .container{
display: flex;
justify-content: space-between;
}
.s4 .container .item{
box-sizing: border-box;
padding: 10px 26px;
background-color: rgb(20, 50, 151);
color: #fff;
display: flex;
border-radius: 10px;
}
.s4 .container .item .item-l{
width: 50px;
font-size: 24px;
align-content: center;
}
.s4 .container .item .item-r .title{
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
/* 섹션 5 */
.s5{
padding: 50px 100px; box-sizing: border-box;
}
.s5 .container{
display: flex; justify-content: space-between;
}
.s5 .container .left-box{
width: 40%; align-content: center;
}
.s5 .container .left-box h2{
margin-bottom: 32px;
}
.s5 .container .left-box .con{
display: flex;
justify-content: space-between;
font-weight: 700;
text-transform: capitalize;
}
.s5 .container .left-box .con:nth-child(2){
margin-bottom: 20px;
}
.s5 .container .left-box .con .item{
display: flex;
align-items: center;
}
.s5 .container .left-box .con .item img{
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 12px;
}
.s5 video{
width: 50%;
}
</style>
</head>
<body>
<div class="wrap">
<section class="s1">
<div class="container">
<div class="left">
<h1>unknown printer took a galley of type</h1>
<div class="text-box">
<div class="item">
<p class="title">simply random</p>
<p class="source">College in Virginia, looked up one of the</p>
</div>
<div class="item">
<p class="title"> theory of ethics</p>
<p class="source">Virginia, looked up one of the more obscure</p>
</div>
</div>
</div>
<div class="right">
<img src="s1-1.jpg" alt="">
</div>
</div>
</section>
<section class="s2">
<img src="s1-2.jpg" alt="">
<div class="text-box">
<h2>Contrary to</h2>
<div class="text-con">
<div class="item">
<p>Latin literature</p>
<p>very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32</p>
</div>
<div class="item">
<p>Latin literature</p>
<p>very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32</p>
</div>
<div class="item">
<p>Latin literature</p>
<p>very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32</p>
</div>
<div class="item">
<p>Latin literature</p>
<p>very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32</p>
</div>
</div>
</div>
</section>
<section class="s3">
<div class="container">
<div class="text-box">
<h2>variations of<br> passages</h2>
<p>consectetur, from</p>
</div>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
</div>
</section>
<section class="s4">
<h2>discovered the undoubtable source</h2>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour</p>
<div class="container">
<div class="item">
<div class="item-l">
<i class="fa-brands fa-bluesky"></i>
</div>
<div class="item-r">
<p class="title">injected humour</p>
<p class="source">words which don't<br> look even slightly</p>
</div>
</div>
<div class="item">
<div class="item-l">
<i class="fa-brands fa-bluesky"></i>
</div>
<div class="item-r">
<p class="title">injected humour</p>
<p class="source">words which don't<br> look even slightly</p>
</div>
</div>
<div class="item">
<div class="item-l">
<i class="fa-brands fa-bluesky"></i>
</div>
<div class="item-r">
<p class="title">injected humour</p>
<p class="source">words which don't<br> look even slightly</p>
</div>
</div>
</div>
</section>
<section class="s5">
<div class="container">
<div class="left-box">
<h2>simply random text</h2>
<div class="con">
<div class="item">
<img src="s2-2.jpg" alt="">
<p>undoubtable</p>
</div>
<div class="item">
<img src="s2-2.jpg" alt="">
<p>undoubtable</p>
</div>
</div>
<div class="con">
<div class="item">
<img src="s2-2.jpg" alt="">
<p>undoubtable</p>
</div>
<div class="item">
<img src="s2-2.jpg" alt="">
<p>undoubtable</p>
</div>
</div>
</div>
<video src="vi.mp4" controls autoplay muted loop></video>
</div>
</section>
</div>
</body>
</html>
■ 3월 27일 - 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<style>
body,h1,h2,h3,p{
margin: 0;
}
.wrap{
width: 1024px;
background-color: #074461
}
img{
width: 100%;
object-fit: cover;
display: block;
}
header{
height: 60vh;
position: relative;
}
header img{
height: 100%;
}
header .hbg{
width: 100%; height: 100%;
position: absolute; left: 0; top: 0;
background-color: #0007;
}
header .text-box{
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
color: #fff;
text-align: center;
}
header .text-box h1{
text-transform: uppercase;
margin-bottom: 12px;
}
header .text-box p{
margin-bottom: 30px;
}
header .text-box .bt{
width: 180px; height: 40px;
border-radius: 20px;
font-size: 18px; font-weight: 600; text-transform: uppercase;
color: #000; background-color: #fff;
align-content: center; margin: 0 auto;
}
.s1{
padding: 60px 0;
background-color: #074461; color: #fff;
text-align: center;
}
.s1 span{
font-weight: 700; color: rgb(239, 243, 13);
display: inline-block;
font-size: 18px; margin-bottom: 12px;
}
.s1 h2{
text-transform: capitalize;
}
.s2{
padding: 40px 0;
}
.s2 .container{
width: 95%; margin: 0 auto;
display: flex;
justify-content: space-between;
}
.s2 .container .item{
width: 23%;
height: 300px;
position: relative;
overflow: hidden;
}
.s2 .container .item img{
height: 100%;
transition: 500ms;
cursor: pointer;
}
.s2 .container .item:hover img{
scale: 1.1;
}
.s2 .container .item .text-box{
position: absolute;
left: 12px; top: 50%; transform: translateY(-50%);
width: 80%;
color: #fff;
}
.s2 .container .item .text-box p:nth-child(1){
font-size: 14px; font-weight: 600;
margin-bottom: 140px;
}
.s2 .container .item .text-box p:nth-child(2){
font-size: 10px; margin-bottom: 20px;
}
.s2 .container .item .text-box p:nth-child(3){
font-size: 12px; font-weight: 600;
}
/* s3 */
.s3{
padding: 40px 10%; box-sizing: border-box;
}
.s3 .text-box{
margin-bottom: 80px;
}
.s3 .text-box > p{
font-size: 12px; font-weight: 600;
color: gold; margin-bottom: 8px;
}
.s3 .text-box > h2{
font-size: 30px; color: #fff; text-transform: capitalize;
}
.s3 .container{
display: flex;
justify-content: space-between;
}
.s3 .container .item{
width: 22%;
text-align: center;
font-size: 14px; color: #fff;
}
.s3 .container .item > img{
width: 60px; height: 60px;
border-radius: 50%; display: inline-block;
margin-bottom: 12px;
}
.s3 .container .item .title{
font-weight: 800; margin-bottom: 12px;
}
.s3 .container .item .source{
opacity: 0.8;
}
.s4{
padding: 40px 0;
}
.s4 .container{
width: 95%; height: 400px;
margin: 0 auto; position: relative;
cursor: pointer;
overflow: hidden;
}
.s4 .container img{
height: 100%; opacity: 0.5;
}
.s4 .container .text-box{
position: absolute;
left: 100px; top: 50%; transform: translateY(-50%);
width: 45%; color: #fff;
}
.s4 .container .text-box p:nth-child(1){
font-size: 12px; color: gold; font-weight: 600;
margin-bottom: 12px;
}
.s4 .container .text-box h2{
font-size: 30px; text-transform: capitalize;
margin-bottom: 20px;
}
.s4 .container .text-box p:nth-child(3){
font-size: 14px; margin-bottom: 20px;
}
.s4 .container .text-box .bt{
width: 140px; height: 30px; font-size: 16px; font-weight: 700;
background-color: #fff; color: #000;
border-radius: 15px; text-align: center; align-content: center;
}
.s4 .container img.slide{
opacity: 0.5; width: 35%; height: 70%;
position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
transition: left 1s, opacity 1s 1s;
}
.s4 .container:hover img.slide{
left: 65%; opacity: 1;
}
.s5{
padding: 40px 0;
}
.s5 .container{
width: 70%; margin: 0 auto;
display: flex; justify-content: space-between;
}
.s5 .container .item{
width: 18%; display: flex; align-items: center;
font-weight: 600;
color: #fff2;
animation: abc 10s linear infinite;
}
.s5 .container .item i{
font-size: 24px; margin-right: 5px;
}
@keyframes abc{
0%{
color: #fff2;
}
20%{
color: #fff;
}
21%{
color: #fff2;
}
}
.s5 .container .item:nth-child(1){
animation-delay: 0s;
}
.s5 .container .item:nth-child(2){
animation-delay: 2s;
}
.s5 .container .item:nth-child(3){
animation-delay: 4s;
}
.s5 .container .item:nth-child(4){
animation-delay: 6s;
}
.s5 .container .item:nth-child(5){
animation-delay: 8s;
}
.s6{
padding: 40px 20%; box-sizing: border-box;
}
.s6 .container1{
height: 200px;
display: flex;
gap: 15px;
}
.s6 .container1:nth-child(1){
margin-bottom: 15px;
}
.s6 .container1 .item{
position: relative;
width: 100%;
}
.s6 .container1 .item img{
height: 100%;
}
.s6 .container1 .item .bg{
position: absolute;
left: 0; top: 0; width: 100%; height: 100%;
background-color: #0008;
text-align: center; align-content: center;
font-size: 24px; opacity: 0; transition: 1s;
cursor: pointer; color: #fff;
}
.s6 .container1 .item:hover .bg{
opacity: 1;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<img src="header.jpg" alt="">
<div class="hbg"></div>
<div class="text-box">
<h1>type specimen book.<br> It has survived </h1>
<p>It was popularised<br> in the 1960s with</p>
<div class="bt">show room</div>
</div>
</header>
<main>
<section class="s1">
<span>about us</span>
<h2>Richard McClintock,<br> a Latin professor at<br> Hampden-Sydney College</h2>
</section>
<section class="s2">
<div class="container">
<div class="item">
<img src="header.jpg" alt="">
<div class="text-box">
<p>Hampden-Sydney<br> College</p>
<p>looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage</p>
<p>variations</p>
</div>
</div>
<div class="item">
<img src="header.jpg" alt="">
<div class="text-box">
<p>Hampden-Sydney<br> College</p>
<p>looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage</p>
<p>variations</p>
</div>
</div>
<div class="item">
<img src="header.jpg" alt="">
<div class="text-box">
<p>Hampden-Sydney<br> College</p>
<p>looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage</p>
<p>variations</p>
</div>
</div>
<div class="item">
<img src="header.jpg" alt="">
<div class="text-box">
<p>Hampden-Sydney<br> College</p>
<p>looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage</p>
<p>variations</p>
</div>
</div>
</div>
</section>
<section class="s3">
<div class="text-box">
<p>Contrary to popular</p>
<h2>Richard McClintock, a Latin professor<br> at Hampden-Sydney College</h2>
</div>
<div class="container">
<div class="item">
<img src="header.jpg" alt="">
<p class="title">McClintock</p>
<p class="source">orem Ipsum passage, and going through the cites of the word in classical literature,</p>
</div>
<div class="item">
<img src="header.jpg" alt="">
<p class="title">McClintock</p>
<p class="source">orem Ipsum passage, and going through the cites of the word in classical literature,</p>
</div>
<div class="item">
<img src="header.jpg" alt="">
<p class="title">McClintock</p>
<p class="source">orem Ipsum passage, and going through the cites of the word in classical literature,</p>
</div>
<div class="item">
<img src="header.jpg" alt="">
<p class="title">McClintock</p>
<p class="source">orem Ipsum passage, and going through the cites of the word in classical literature,</p>
</div>
</div>
</section>
<section class="s4">
<div class="container">
<img src="header.jpg" alt="">
<div class="text-box">
<p>College in Virginia</p>
<h2> passage of Lorem Ipsum, you need to be sure there isn't anything</h2>
<p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
<div class="bt">버튼</div>
</div>
<img class="slide" src="header.jpg" alt="">
</div>
</section>
<section class="s5">
<div class="container">
<div class="item">
<i class="fa-brands fa-kickstarter"></i>
<p>discovered</p>
</div>
<div class="item">
<i class="fa-brands fa-wordpress"></i>
<p>discovered</p>
</div>
<div class="item">
<i class="fa-brands fa-docker"></i>
<p>discovered</p>
</div>
<div class="item">
<i class="fa-brands fa-wix"></i>
<p>discovered</p>
</div>
<div class="item">
<i class="fa-brands fa-rebel"></i>
<p>discovered</p>
</div>
</div>
</section>
<section class="s6">
<div class="container">
<div class="container1">
<div class="item">
<img src="header.jpg" alt="">
<div class="bg">project</div>
</div>
<div class="item">
<img src="header.jpg" alt="">
<div class="bg">project</div>
</div>
<div class="item">
<img src="header.jpg" alt="">
<div class="bg">project</div>
</div>
</div>
<div class="container1">
<div class="item">
<img src="header.jpg" alt="">
<div class="bg">project</div>
</div>
<div class="item">
<img src="header.jpg" alt="">
<div class="bg">project</div>
</div>
<div class="item">
<img src="header.jpg" alt="">
<div class="bg">project</div>
</div>
</div>
</div>
</section>
</main>
</div>
</body>
</html>
■ 4월 1일 - 7일차
■ 로딩화면
○ 두 원 회전
<style>
body div {
box-sizing: border-box;
}
.bigbox{
width: 200px;
height: 200px;
border: 1px solid #000;
position: relative;
}
.bigbox > div{
position: absolute;
}
.bigbox > .a{
transform: rotate(135deg);
animation: spin 4s infinite;
}
@keyframes spin{
0%{
transform: rotate(135deg);
opacity: 1;
}
25%{
opacity: 0.75;
}
50%{
transform: rotate(675deg);
opacity: 1;
}
75%{
opacity: 0.75;
}
100%{
transform: rotate(135deg);
opacity: 1;
}
}
.box-l{
width: 100px;
height: 100px;
border-width: 15px 0px 0px 15px;
border-color: blue;
border-style: solid;
border-top-left-radius: 100%;
transform-origin: 100% 100%;
}
.box-r{
width: 100px;
height: 100px;
bottom: 0px;
right: 0px;
border-right: 15px solid blue;
border-bottom: 15px solid blue;
border-bottom-right-radius: 100%;
transform-origin: 0% 0%;
}
.sbox-r{
width: 70px;
height: 70px;
border: 1px solid #000;
left: 50%;
bottom: 50%;
border-width: 15px 15px 0px 0px;
border-color: blue;
border-style: solid;
border-top-right-radius: 100%;
transform-origin: 0% 100%;
}
.sbox-l{
width: 70px;
height: 70px;
border: 1px solid #000;
right: 50%;
top: 50%;
border-width: 0px 0px 15px 15px;
border-color: blue;
border-style: solid;
border-bottom-left-radius: 100%;
transform-origin: 100% 0%;
}
.cercle{
width: 50px;
height: 50px;
background-color: blue;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: cercle 2s infinite;
}
@keyframes cercle{
0%{opacity: 1;}
50%{opacity: 0.5;}
100%{opacity: 1;}
}
</style>
<body>
<div class="bigbox">
<div class="a box-l"></div>
<div class="a box-r"></div>
<div class="a sbox-r"></div>
<div class="a sbox-l"></div>
<div class="cercle"></div>
</div>
</body>
</html>
○ 내부 원 회전
<style>
/* 컨테이너 설정 */
.loading-container {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
background-color: #f5f5f5;
}
/* 로딩 박스 설정 */
.loading-box {
width: 80px;
height: 80px;
border: 8px solid #ccc;
border-top: 8px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* 회전 애니메이션 */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loading-container">
<div class="loading-box"></div>
</div>
</body>
</html>
○ 점 물결
<style>
.loading-container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
width: 300px;
background-color: #f5f5f5;
}
.bouncing-dots {
display: flex;
gap: 8px;
}
.bouncing-dots div {
width: 15px;
height: 15px;
background-color: #3498db;
border-radius: 50%;
animation: bounce 0.6s infinite alternate;
}
.bouncing-dots div:nth-child(2) {
animation-delay: 0.2s;
}
.bouncing-dots div:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes bounce {
from { transform: translateY(0); }
to { transform: translateY(-15px); }
}
</style>
</head>
<body>
<div class="loading-container">
<div class="bouncing-dots">
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
○ 선 물결
<style>
.loading-container{
width: 200px;
height: 200px;
background-color: #ccc;
align-content: center;
}
.wave {
width: 35px;
display: flex;
gap: 5px;
margin: 0 auto;
}
.wave > div {
width: 5px;
height: 20px;
background-color: #3498db;
animation: wave 0.6s infinite ease-in-out;
}
.wave div:nth-child(2) { animation-delay: 0.1s; }
.wave div:nth-child(3) { animation-delay: 0.2s; }
.wave div:nth-child(4) { animation-delay: 0.3s; }
.wave div:nth-child(5) { animation-delay: 0.4s; }
@keyframes wave {
0%, 40%, 100% { transform: scaleY(1); }
20% { transform: scaleY(2); }
}
</style>
<body>
<div class="loading-container">
<div class="wave">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
○ 점 페이드 인아웃
<style>
.loading-container{
width: 200px;
height: 200px;
background-color: #ccc;
align-content: center;
}
.fade-dots {
width: calc(15px * 3 + (8px*2));
display: flex;
gap: 8px;
margin: 0 auto;
}
.fade-dots div {
width: 15px;
height: 15px;
background-color: #3498db;
border-radius: 50%;
animation: fade 1.2s infinite ease-in-out;
}
.fade-dots div:nth-child(2) { animation-delay: 0.2s; }
.fade-dots div:nth-child(3) { animation-delay: 0.4s; }
@keyframes fade {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
</style>
<body>
<div class="loading-container">
<div class="fade-dots">
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
○ 원 크기 페이드인아웃
<style>
.loading-container{
width: 200px;
height: 200px;
background-color: #ccc;
align-content: center;
}
.pulse-ring {
width: 50px;
height: 50px;
margin: 0 auto;
border: 4px solid #3498db;
border-radius: 50%;
animation: pulse 1s infinite ease-in-out;
}
@keyframes pulse {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.5); opacity: 0; }
}
</style>
<body>
<div class="loading-container">
<div class="pulse-ring"></div>
</div>
</body>
○ 선 페이드 인 아웃
<style>
.loading-container{
width: 200px;
height: 200px;
background-color: #ccc;
align-content: center;
}
.flash-stripes {
width: calc((8px * 4) + (4px*3));
margin: 0 auto;
display: flex;
gap: 4px;
}
.flash-stripes div {
width: 8px;
height: 40px;
background-color: #3498db;
animation: flash 1s infinite ease-in-out;
}
.flash-stripes div:nth-child(2) { animation-delay: 0.2s; }
.flash-stripes div:nth-child(3) { animation-delay: 0.4s; }
.flash-stripes div:nth-child(4) { animation-delay: 0.6s; }
@keyframes flash {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
</style>
<body>
<div class="loading-container">
<div class="flash-stripes">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
○ 두 원 교차
<style>
.loading-container{
width: 200px;
height: 200px;
background-color: #ccc;
align-content: center;
}
.colliding-rings {
position: relative;
width: 60px;
height: 60px;
margin: 0 auto;
}
.ring {
position: absolute;
width: 60px;
height: 60px;
border: 4px solid #3498db;
border-radius: 50%;
animation: collide 1.5s infinite ease-in-out;
}
.ring:nth-child(2) {
animation-delay: 0.75s;
}
@keyframes collide {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.5); opacity: 0.5; }
}
</style>
<body>
<div class="loading-container">
<div class="colliding-rings">
<div class="ring"></div>
<div class="ring"></div>
</div>
</div>
</body>
○ 바 체우기
<style>
.loading-container{
width: 200px;
height: 200px;
background-color: #ccc;
align-content: center;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* 로딩 텍스트 */
.loading-text {
font-size: 24px;
font-weight: bold;
color: #3498db;
margin-bottom: 20px;
}
/* 튀는 점 */
.dots {
display: inline-block;
animation: bounce-dots 0.5s infinite alternate;
}
/* 진행 바 */
.progress-bar {
width: 80%;
height: 10px;
background-color: #e0e0e0;
border-radius: 5px;
overflow: hidden;
position: relative;
}
/* 진행 중 */
.progress {
width: 0;
height: 100%;
background-color: #3498db;
animation: fill-bar 2s infinite;
}
/* 점이 튀는 애니메이션 */
@keyframes bounce-dots {
0% { transform: translateY(0); }
100% { transform: translateY(-8px); }
}
/* 진행 바가 채워지는 애니메이션 */
@keyframes fill-bar {
0% { width: 0; }
50% { width: 100%; }
100% { width: 0; }
}
</style>
<body>
<div class="loading-container">
<div class="loading-text">Loading<span class="dots">...</span></div>
<div class="progress-bar">
<div class="progress"></div>
</div>
</div>
</body>
<!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>
<style>
body,h1,h2,h3,p{
margin: 0;
}
img{
width: 100%;
object-fit: cover;
display: block;
}
header{
height: 600px;
position: relative;
}
header > img{
height: 100%;
}
header nav{
width: 100%; height: 60px;
box-sizing: border-box;
padding: 0 100px;
position: absolute;
top: 0; left: 0;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #000;
}
header nav .logo{
font-size: 30px;
}
header nav .menu{
display: flex;
gap: 30px;
}
header .text-box{
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
text-align: center;
width: 60%; color: #fff;
text-shadow: 2px 2px 3px #000;
}
header .text-box h1{
margin-bottom: 20px;
}
.s1{
padding: 0 100px;
box-sizing: border-box;
margin-bottom: 50px;
}
.s1 .menu{
width: 50%;
height: 100px;
font-size: 20px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.s1 .container{
display: flex;
}
.s1 .container .item{
width: calc(100% / 3);
}
.s1 .container .item img{
height: 100%;
transition: 500ms;
}
.s1 .container .item .box{
height: 200px;
}
.s1 .container .item .box1{
height: 400px;
}
.s1 .container .item > div{
overflow: hidden;
cursor: pointer;
}
.s1 .container .item > div:hover img{
transform: scale(1.1);
}
.s2{
padding: 30px 100px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.s2 p {
width: calc((100% - 12px) / 2);
}
.s2 .box{
width: 4px;
background-color: #444;
}
.s2 p:nth-child(1){
font-size: 24px;
font-weight: 600;
align-content:center;
}
.s2 p:nth-child(3){
text-align: right;
line-height: 1.6;
}
.s3{
--backc : rgb(33, 165, 83);
--size : 100px;
padding: var(--size) 100px;
display: flex;
justify-content: space-between;
}
.s3 .item{
width: 31%;
height: calc(var(--size)*2); /* 변수 사용 */
background-color: var(--backc);
}
</style>
</head>
<body>
<div class="wrap">
<header>
<img src="header.jpg" alt="">
<nav>
<div class="logo">logo</div>
<div class="menu">
<p>menu1</p>
<p>menu2</p>
<p>menu3</p>
<p>menu4</p>
<p>menu5</p>
<p>menu6</p>
</div>
</nav>
<div class="text-box">
<h1>piece of classical Latin literature</h1>
<p>College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites</p>
</div>
</header>
<section class="s1">
<div class="menu">
<p>menu</p>
<p>menu</p>
<p>menu</p>
<p>menu</p>
<p>menu</p>
</div>
<div class="container">
<div class="item">
<div class="box1">
<img src="header.jpg" alt="">
</div>
<div class="box">
<img src="header.jpg" alt="">
</div>
</div>
<div class="item">
<div class="box">
<img src="header.jpg" alt="">
</div>
<div class="box">
<img src="header.jpg" alt="">
</div>
<div class="box">
<img src="header.jpg" alt="">
</div>
</div>
<div class="item">
<div class="box">
<img src="header.jpg" alt="">
</div>
<div class="box1">
<img src="header.jpg" alt="">
</div>
</div>
</div>
</section>
<section class="s2">
<p>which don't look even slightly</p>
<div class="box"></div>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</section>
<section class="s3">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</section>
</div>
</body>
</html>
■ 4월 3일 - 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<style>
:root{
--pd : 150px;
}
body,h1,h2,h3,p{
margin: 0;
}
img{
width: 100%; object-fit: cover; display: block;
}
header{}
header .search{
padding: 0 var(--pd); height: 40px;
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 30px;
}
header .search .left{
width: 120px;
}
header .search .left .text-box{
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 5px;}
header .search .left .line{
height: 2px; background-color: #ccc;
}
header .search .right{
width: 150px; display: flex; justify-content: space-between;
}
header .search .right .line{
width: 2px; background-color: #ccc;
}
header h1{
text-align: center;
height: 80px;
border-bottom: 2px solid #ccc;
}
header nav{
padding: 0 calc(var(--pd) * 2);
height: 70px; background-color: aliceblue;
font-size: 18px; font-weight: 600;
display: flex; justify-content: space-between; align-items: center;
}
header .img-box{
height: 600px;
box-sizing: border-box;
padding: 0 var(--pd);
position: relative;
}
header .img-box img{
height: 100%;
}
header .img-box .text-box{
position: absolute; top: 50%; transform: translateY(-50%); right: calc(var(--pd) + 100px);
text-align: end; color: #ffffff;
}
header .img-box .text-box h2{
font-size: 36px;
margin-bottom: 20px;
font-weight: 500;
}
header .img-box .text-box h2 span{
font-weight: 900;
}
header .img-box .text-box p{
font-size: 18px;
margin-bottom: 24px;
}
header .img-box .text-box .bt{
width: 140px; height: 40px;
border: 2px solid #ffffff; font-weight: 600;
align-content: center; text-align: center;
margin-left: auto;
}
header .img-box .icon-box{
display: flex;
gap: 4px;
position: absolute; bottom: 10px; right: calc(var(--pd) + 50px);
}
header .img-box .icon-box .box{
width: 10px; height: 10px;
border-radius: 50%; background-color: rgb(255, 255, 255);
opacity: 0.3;
}
header .img-box .icon-box .box.act{
opacity: 1;
}
header .img-box .icon-box .line-box {
display: flex;
gap: 2px;
}
header .img-box .icon-box .line-box .line{
width: 3px; height: 10px; background-color: rgb(255, 255, 255);
}
/* 섹션1 */
.s1{
padding: 80px var(--pd); box-sizing: border-box;
}
.s1 h2{
width: fit-content;
margin: 0 auto;
margin-bottom: 30px;
position: relative;
cursor: pointer;
}
.s1 h2::after{
content: ""; display: block;
width: 0px; height: 3px;
position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
background-color: black; transition: 500ms;
}
.s1 h2:hover::after{
width: 100%;
}
.s1 .container{
display: flex;
width: 80%;
margin: 0 auto;
gap: 30px;
position: relative;
}
.s1 .container .item{
height: 200px;
width: 100%;
cursor: pointer;
position: relative;
z-index: 1;
overflow: hidden;
}
.s1 .container .item::after{
content: "설명";
display: block;
padding: 5px 0px;
position: absolute;
width: 100%;
text-align: center;
background-color: #00000099;
color: #ffffff;
bottom: -30px;
transition: 1s;
}
.s1 .container .item:hover::after{
bottom: 0;
}
.s1 .container .item img{
height: 100%;
}
.s1 .container .icon-box{
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 115%; font-size: 22px;
display: flex; justify-content: space-between;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="search">
<div class="left">
<div class="text-box">
<p>한국어/KOR</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="line"></div>
</div>
<div class="right">
<p>매장찾기</p>
<div class="line"></div>
<p>
검색
<i class="fa-solid fa-magnifying-glass"></i>
</p>
</div>
</div>
<h1>HANKOOK COSMETICS</h1>
<nav>
<p>회사소개</p>
<p>브랜드</p>
<p>커뮤니티</p>
<p>고객센터</p>
<p>투자정보</p>
<p>채용안내</p>
<p>대리점/뷰티마스터 모집</p>
</nav>
<div class="img-box">
<img src="image.jpg" alt="">
<div class="text-box">
<h2>한국화장품<br><span>온라인 스토어</span></h2>
<p>한국 화장품의 다양한 제품을<br>온라인으로 만나보세요!</p>
<div class="bt">ONLINE STORE</div>
</div>
<div class="icon-box">
<div class="box act"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="line-box">
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</div>
</header>
<main>
<section class="s1">
<h2>ALL BRAND</h2>
<div class="container">
<div class="item">
<img src="image.jpg" alt="">
</div>
<div class="item">
<img src="image.jpg" alt="">
</div>
<div class="item">
<img src="image.jpg" alt="">
</div>
<div class="item">
<img src="image.jpg" alt="">
</div>
<div class="item">
<img src="image.jpg" alt="">
</div>
<div class="icon-box">
<i class="fa-solid fa-angle-left"></i>
<i class="fa-solid fa-angle-right"></i>
</div>
</div>
</section>
</main>
</div>
</body>
</html>
■ 4월 4일 - 9일차
<!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/6.7.2/css/all.min.css">
<style>
:root{
--pd : 150px;
}
body,h1,h2,h3,p{
margin: 0;
}
img{
width: 100%; object-fit: cover; display: block;
}
header .search{
padding: 0 var(--pd); height: 40px;
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 30px;
}
header .search .left{
width: 120px;
}
header .search .left .text-box{
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 5px;}
header .search .left .line{
height: 2px; background-color: #ccc;
}
header .search .right{
width: 150px; display: flex; justify-content: space-between;
}
header .search .right .line{
width: 2px; background-color: #ccc;
}
header h1{
text-align: center;
height: 80px;
border-bottom: 2px solid #ccc;
}
header nav{
padding: 0 calc(var(--pd) * 2);
height: 70px; background-color: aliceblue;
font-size: 18px; font-weight: 600;
display: flex; justify-content: space-between; align-items: center;
}
header .img-box{
height: 600px;
box-sizing: border-box;
padding: 0 var(--pd);
position: relative;
}
header .img-box img{
height: 100%;
}
header .img-box .text-box{
position: absolute; top: 50%; transform: translateY(-50%); right: calc(var(--pd) + 100px);
text-align: end; color: #ffffff;
}
header .img-box .text-box h2{
font-size: 36px;
margin-bottom: 20px;
font-weight: 500;
}
header .img-box .text-box h2 span{
font-weight: 900;
}
header .img-box .text-box p{
font-size: 18px;
margin-bottom: 24px;
}
header .img-box .text-box .bt{
width: 140px; height: 40px;
border: 2px solid #ffffff; font-weight: 600;
align-content: center; text-align: center;
margin-left: auto;
}
header .img-box .icon-box{
display: flex;
gap: 4px;
position: absolute; bottom: 10px; right: calc(var(--pd) + 50px);
}
header .img-box .icon-box .box{
width: 10px; height: 10px;
border-radius: 50%; background-color: rgb(255, 255, 255);
opacity: 0.3;
}
header .img-box .icon-box .box.act{
opacity: 1;
}
header .img-box .icon-box .line-box {
display: flex;
gap: 2px;
}
header .img-box .icon-box .line-box .line{
width: 3px; height: 10px; background-color: rgb(255, 255, 255);
}
/* 섹션1 */
.s1{
padding: 80px var(--pd); box-sizing: border-box;
}
.s1 h2{
width: fit-content;
margin: 0 auto;
margin-bottom: 30px;
position: relative;
cursor: pointer;
}
.s1 h2::after{
content: ""; display: block;
width: 0px; height: 3px;
position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
background-color: black; transition: 500ms;
}
.s1 h2:hover::after{
width: 100%;
}
.s1 .container{
display: flex;
width: 80%;
margin: 0 auto;
gap: 30px;
position: relative;
}
.s1 .container .item{
height: 200px;
width: 100%;
cursor: pointer;
position: relative;
z-index: 1;
overflow: hidden;
}
.s1 .container .item::after{
content: "설명";
display: block;
padding: 5px 0px;
position: absolute;
width: 100%;
text-align: center;
background-color: #00000099;
color: #ffffff;
bottom: -30px;
transition: 1s;
}
.s1 .container .item:hover::after{
bottom: 0;
}
.s1 .container .item img{
height: 100%;
}
.s1 .container .icon-box{
position: absolute; left: 50%; transform: translateX(-50%); bottom: -40px;
width: 7%; font-size: 28px;
display: flex; justify-content: space-between;
}
/* 섹션2 */
.s2{
padding: 30px var(--pd);
background-color: #eee;
display: flex;
}
.s2 > div{
/* width: 50%; */
}
.s2 .left{
width: 60%;
height: 400px;
position: relative;
}
.s2 .left img{
height: 100%;
}
.s2 .left .text-box{
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
background-color: #0008; color: #fff;
width: 250px; height: 200px; align-content: center;
}
.s2 .left .text-box .title{
font-size: 26px; font-weight: 600; text-transform: uppercase;
width: 80%; margin: 0 auto; text-align: center;
}
.s2 .left .text-box hr{
width: 20%;
margin-top: 25px;
margin-bottom: 40px;
}
.s2 .left .text-box .source{
font-weight: 600; text-align: center;
}
.s2 .right{
width: 40%;
padding-left: 40px; box-sizing: border-box;
align-content: center;
}
.s2 .right .title{
font-size: 24px; font-weight: 600;
}
.s2 .right h2{
font-size: 36px;
text-transform: capitalize;
margin-bottom: 20px;
}
.s2 .right .source{
margin-bottom: 40px;
}
.s2 .right .button{
width: 80px;
height: 35px;
text-align: center;
align-content: center;
border: 2px solid #000;
}
/* 섹션 3 */
.s3{
padding: 30px var(--pd) 60px;
--gap : 10px
}
.s3 .container{
height: 300px; margin-bottom: var(--gap);
display: flex; justify-content: space-between;
}
.s3 .container > div{
box-shadow: 2px 2px 6px #aaa;
}
.s3 .container .item-b{
width: calc((100% - var(--gap)*2)/4*2);
display: flex;
}
.s3 .container .item-b > div{
width: 50%;
}
.s3 .container .item-b .img-box img{
height: 100%;
}
.s3 .container .item-b .text-box{
padding-left: 20px; box-sizing: border-box;
align-content: center;
}
.s3 .container .item-b .text-box h3{
margin-bottom: 12px;
}
.s3 .container .item-b .text-box p{
margin-bottom: 36px;
}
.s3 .container .item-b .text-box .bt{
width: 110px; height: 30px;
text-align: center; align-content: center;
background-color: #000; color: #fff;
}
.s3 .container .item-b .text-box .bt i{
margin-left: 16px;
}
.s3 .container .item-s{
width: calc((100% - var(--gap)*2)/4);
}
.s3 .container .item-s .img-box{
height: 70%;
}
.s3 .container .item-s .img-box img{
height: 100%;
}
.s3 .container .item-s .text-box{
height: 30%; align-content: center;
padding-left: 10px;
}
.s3 .container .item-s .text-box .title{
margin-bottom: 8px;
}
.s3 .container .item-s .text-box span.line{
width: 2px; height: 16px; display: inline-block;
background-color: #999;
margin: 0 12px;
}
/* 푸터 */
footer{
padding: 30px var(--pd) 60px;
background-color: #000; color: #fff;
display: flex; justify-content: space-between;
}
footer .left{
width: 50%;
}
footer .left .title{
margin-bottom: 20px;
}
footer .right{
width: 25%;
}
footer .right .container{
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
footer .right .container .site-box{
width: 48%;
}
footer .right .container .site-box .text{
padding-left: 10px; box-sizing: border-box;
display: flex; justify-content: space-between; align-items: center;
}
footer .right .item-box{
font-size: 32px;
text-align: right;
}
footer .right .item-box .fa-arrow-right{
transition: 1s;
}
footer .right .item-box:hover .fa-arrow-right{
transform: rotate(90deg);
}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="search">
<div class="left">
<div class="text-box">
<p>한국어/KOR</p>
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="line"></div>
</div>
<div class="right">
<p>매장찾기</p>
<div class="line"></div>
<p>
검색
<i class="fa-solid fa-magnifying-glass"></i>
</p>
</div>
</div>
<h1>HANKOOK COSMETICS</h1>
<nav>
<p>회사소개</p>
<p>브랜드</p>
<p>커뮤니티</p>
<p>고객센터</p>
<p>투자정보</p>
<p>채용안내</p>
<p>대리점/뷰티마스터 모집</p>
</nav>
<div class="img-box">
<img src="image.jpg" alt="">
<div class="text-box">
<h2>한국화장품<br><span>온라인 스토어</span></h2>
<p>한국 화장품의 다양한 제품을<br>온라인으로 만나보세요!</p>
<div class="bt">ONLINE STORE</div>
</div>
<div class="icon-box">
<div class="box act"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="line-box">
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</div>
</header>
<main>
<section class="s1">
<h2>ALL BRAND</h2>
<div class="container">
<div class="item">
<img src="image.jpg" alt="">
</div>
<div class="item">
<img src="image.jpg" alt="">
</div>
<div class="item">
<img src="image.jpg" alt="">
</div>
<div class="item">
<img src="image.jpg" alt="">
</div>
<div class="item">
<img src="image.jpg" alt="">
</div>
<div class="icon-box">
<i class="fa-solid fa-angle-left"></i>
<i class="fa-solid fa-angle-right"></i>
</div>
</div>
</section>
<section class="s2">
<div class="left">
<img src="image.jpg" alt="">
<div class="text-box">
<p class="title">simply random text</p>
<hr>
<p class="source">Hampden-Sydney College</p>
</div>
</div>
<div class="right">
<p class="title">SINCE 1962</p>
<h2>Contrary to popular<br> belief, Lorem Ipsum</h2>
<p class="source">Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure</p>
<div class="button">MORE</div>
</div>
</section>
<section class="s3">
<div class="container">
<div class="item-b">
<div class="img-box">
<img src="image.jpg" alt="">
</div>
<div class="text-box">
<h3>suffered alteration</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some</p>
<div class="bt">MORE
<i class="fa-solid fa-angle-right"></i>
</div>
</div>
</div>
<div class="item-s">
<div class="img-box">
<img src="./image.jpg" alt="">
</div>
<div class="text-box">
<p class="title">건강한 하루를 위한 작은 습관!</p>
<span>BRAND NEWS</span>
<span class="line"></span>
<span>2025-03-31</span>
</div>
</div>
<div class="item-s">
<div class="img-box">
<img src="./image.jpg" alt="">
</div>
<div class="text-box">
<p class="title">건강한 하루를 위한 작은 습관!</p>
<span>BRAND NEWS</span>
<span class="line"></span>
<span>2025-03-31</span>
</div>
</div>
</div>
<div class="container">
<div class="item-b">
<div class="img-box">
<img src="image.jpg" alt="">
</div>
<div class="text-box">
<h3>suffered alteration</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some</p>
<div class="bt">MORE
<i class="fa-solid fa-angle-right"></i>
</div>
</div>
</div>
<div class="item-s">
<div class="img-box">
<img src="./image.jpg" alt="">
</div>
<div class="text-box">
<p class="title">건강한 하루를 위한 작은 습관!</p>
<span>BRAND NEWS</span>
<span class="line"></span>
<span>2025-03-31</span>
</div>
</div>
<div class="item-s">
<div class="img-box">
<img src="./image.jpg" alt="">
</div>
<div class="text-box">
<p class="title">건강한 하루를 위한 작은 습관!</p>
<span>BRAND NEWS</span>
<span class="line"></span>
<span>2025-03-31</span>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="left">
<p class="title">개인정보처리방침</p>
<p class="source">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</p>
</div>
<div class="right">
<div class="container">
<div class="site-box">
<div class="text">
BRAND SITE
<i class="fa-solid fa-angle-up"></i>
</div>
<hr>
</div>
<div class="site-box">
<div class="text">
FAMLILY SITE
<i class="fa-solid fa-angle-up"></i>
</div>
<hr>
</div>
</div>
<div class="item-box">
<i class="fa-regular fa-rectangle-list"></i>
<i class="fa-solid fa-image"></i>
<i class="fa-solid fa-arrow-right"></i>
</div>
</div>
</footer>
</div>
</body>
</html>
■ 4월 8일 - 10일차
<!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/6.7.2/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
body, h1, h2, h3, p{
font-family: "Noto Sans KR", sans-serif;
margin: 0;
}
h2{
font-size: 46px; margin-bottom: 12px; font-weight: 600;
text-align: center;
}
.source{
text-align: center;
font-size: 18px; font-weight: 600; margin-bottom: 32px;
}
.button{
background-color: #000; color: #fff;
width: fit-content; margin: 0 auto;
padding: 14px 24px;
}
img{width: 100%; object-fit: cover; display: block;}
ul{padding: 0; margin: 0; list-style: none;}
.header-top{
height: 50px;
background-color: #fff;
text-align: center; align-content: center;
}
nav{
position: sticky; top: 0;
background-color: #000; color: #fff;
height: 80px;
display: flex; justify-content: space-between; align-items: center;
padding: 0 50px; box-sizing: border-box;
}
nav .nav-l{
display: flex; gap: 20px; align-items: center;
}
nav .nav-l .logo{
font-size: 30px;
}
nav .nav-l .menu{
display: flex; gap: 15px;
font-size: 18px; font-weight: 600;
}
nav .nav-r{
display: flex; align-items: center; gap: 20px;
}
nav .nav-r .input-box{
position: relative;
}
nav .nav-r .input-box i{
position: absolute;
left: 10px; top: 50%; transform: translateY(-50%);
font-size: 20px;
}
nav .nav-r input{
height: 50px;
padding-left: 40px;
background-color: #000;
font-size: 18px;
font-weight: 500;
border: 1px solid #fff7;
}
nav .nav-r input:focus{
outline: none;
}
nav .nav-r .icon-box{
display: flex;
gap: 20px;
font-size: 24px;
}
.imgslide{
height: calc(100vh - 130px);
}
.imgslide img{
height: 100%;
}
/* 섹션 */
.s1{
padding: 50px 0px;
}
.s1 .button{
margin-bottom: 120px;
}
.s2 .container,
.s1 .container{
width: 90%; margin: 0 auto;
display: flex; justify-content: space-between;
}
.s2 .container .item,
.s1 .container .item{
width: calc((100% - 30px)/4);
}
.s2 .container img,
.s1 .container img{
height: 200px;
}
.s2 .container .item .text-box,
.s1 .container .item .text-box{
display: flex; justify-content: space-between;
}
/* 섹션2 */
.s2 > img{
height: 500px;
margin-bottom: 30px;
}
.s2 .source{
width: 600px;
margin: 0 auto 32px;
}
.s2 .bt-box{
display: flex;
width: 360px;
margin: 0 auto 80px;
}
/* 섹션 3 */
.s3{
padding: 80px 0 80px;
}
.s3 .container{
display: flex; justify-content: space-evenly;
}
.s3 .container .item{
width: calc((100% - 45px)/2);
}
.s3 .container .item img{
height: 600px;
margin-bottom: 30px;
}
.s3 .container .item h3{
font-size: 32px;
text-align: center;
margin-bottom: 54px;
}
/* 섹션4 */
.s4{
padding: 50px 0 60px;
}
.s4 .container{
display: flex; justify-content: space-between;
background-color: #fff;
margin-bottom: 40px;
}
.s4 .container img{
width: calc((100% - 12px)/3);
height: 600px;
}
/* 푸터 */
footer{
padding: 120px 20px 40px;
background-color: #000;
color: #fff;
display: flex; justify-content: space-between;
border-bottom: 1px solid #fff8;
}
footer .footer-l{
width: 65%;
}
footer .footer-l .icon-box{
height: 150px;
font-size: 28px;
}
footer .footer-l .container{
display: flex;
justify-content: space-between;
}
footer .footer-l .container .item{
border-top: 2px solid #fff;
width: calc((100% - 10px)/2);
padding-top: 20px;
}
footer .footer-l .container .item .box{
display: flex;
}
footer .footer-l .container .item .box .box-item{
width: 50%;
}
footer .footer-l p{
margin-bottom: 6px;
color: #fff8;
}
footer .footer-r{
width: 28%;
}
footer p.title{
font-weight: 700;
margin-bottom: 12px;
color: #fff;
}
footer .footer-r .footer-r-up{
height: 150px; display: flex; flex-direction: column;
justify-content: space-between;
border-bottom: 2px solid #fff;
}
footer .footer-r .footer-r-up .bt{
width: 95%; height: 50px;
border: 1px solid #fff8;
margin: 0 auto;
padding: 0 20px; box-sizing: border-box;
display: flex; justify-content: space-between;
align-items: center;
color: #fff8;
}
footer .footer-r .footer-r-up .email{
margin-bottom: 5px;
}
footer .footer-r .footer-r-down{
padding-top: 20px;
}
footer .footer-r .footer-r-down .icon-box{
margin-bottom: 150px;
font-size: 20px;
}
footer .footer-r .footer-r-down .icon-box i{
margin-right: 20px;
}
footer .footer-r .footer-r-down .trac{
display: flex; gap: 20px;
height: 150px;
align-items: center;
border-top: 1px solid #fff8;
}
footer .footer-r .footer-r-down .trac-l{
width: 50px; height: 60px;
align-content: center; text-align: center;
border: 1px solid #fff8;
border-radius: 4px;
}
.footer2{
height: 90px;
background-color: #000;
display: flex; justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.footer2 .f-l{
width: 65%;
color: #fff;
display: flex;
justify-content: space-between;
}
.footer2 .f-r {
display: flex;
gap: 20px;
}
.footer2 .f-r img{
width: 50px; height: 30px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header-top">
무료배송, 14일내 무료반품
</div>
<nav>
<div class="nav-l">
<div class="logo">
<i class="fa-brands fa-docker"></i>
</div>
<ul class="menu">
<li>신상품</li>
<li>여성</li>
<li>남성</li>
<li>아동</li>
<li>스포츠</li>
<li>컬렉션</li>
</ul>
</div>
<div class="nav-r">
<div class="input-box">
<i class="fa-solid fa-magnifying-glass"></i>
<input type="text" placeholder="PUMA.COM 검색하기">
</div>
<div class="icon-box">
<i class="fa-solid fa-cart-shopping"></i>
<i class="fa-solid fa-user"></i>
</div>
</div>
</nav>
<div class="imgslide">
<img src="image.jpg" alt="">
</div>
<main>
<section class="s1">
<div class="h-text-box">
<h2>스피드캣 발렛</h2>
<p class="source">
스피드 캣의 아이코닉함과 발레 슈즈의 우아함의 완벽한 만남
</p>
<div class="button">컬렉션 바로가기</div>
</div>
<div class="container">
<div class="item">
<img src="image.jpg" alt="">
<div class="text-box">
<p>스피드캣 발렛 SD우먼스<br>Speedcat Ballet SD Wns</p>
<p>119,000원</p>
</div>
</div>
<div class="item">
<img src="image.jpg" alt="">
<div class="text-box">
<p>스피드캣 발렛 SD우먼스<br>Speedcat Ballet SD Wns</p>
<p>119,000원</p>
</div>
</div>
<div class="item">
<img src="image.jpg" alt="">
<div class="text-box">
<p>스피드캣 발렛 SD우먼스<br>Speedcat Ballet SD Wns</p>
<p>119,000원</p>
</div>
</div>
<div class="item">
<img src="image.jpg" alt="">
<div class="text-box">
<p>스피드캣 발렛 SD우먼스<br>Speedcat Ballet SD Wns</p>
<p>119,000원</p>
</div>
</div>
</div>
</section>
<section class="s2">
<img src="image.jpg" alt="">
<h2>GO WILD</h2>
<p class="source">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
<div class="bt-box">
<div class="button">더 알아보기</div>
<div class="button">러닝제품 보러가기</div>
</div>
<div class="container">
<div class="item">
<img src="image.jpg" alt="">
<div class="text-box">
<p>스피드캣 발렛 SD우먼스<br>Speedcat Ballet SD Wns</p>
<p>119,000원</p>
</div>
</div>
<div class="item">
<img src="image.jpg" alt="">
<div class="text-box">
<p>스피드캣 발렛 SD우먼스<br>Speedcat Ballet SD Wns</p>
<p>119,000원</p>
</div>
</div>
<div class="item">
<img src="image.jpg" alt="">
<div class="text-box">
<p>스피드캣 발렛 SD우먼스<br>Speedcat Ballet SD Wns</p>
<p>119,000원</p>
</div>
</div>
<div class="item">
<img src="image.jpg" alt="">
<div class="text-box">
<p>스피드캣 발렛 SD우먼스<br>Speedcat Ballet SD Wns</p>
<p>119,000원</p>
</div>
</div>
</div>
</section>
<section class="s3">
<div class="container">
<div class="item">
<img src="image.jpg" alt="">
<h3>여성</h3>
<div class="button">여성 러닝 바로가기</div>
</div>
<div class="item">
<img src="image.jpg" alt="">
<h3>남성</h3>
<div class="button">남성 러닝 바로가기</div>
</div>
</div>
</section>
<section class="s4">
<div class="container">
<img src="image.jpg" alt="">
<img src="image.jpg" alt="">
<img src="image.jpg" alt="">
</div>
<h2>스피드캣 GO</h2>
<p class="source">다가오는 봄과 여름을 맞아 '스피드캣 GO'와 함께 자유롭고 다채로운 스타일을 시도해보세요!</p>
<div class="button">컬렉션 바로가기</div>
</section>
</main>
<footer>
<div class="footer-l">
<div class="icon-box">
<i class="fa-brands fa-docker"></i>
</div>
<div class="container">
<div class="item">
<p class="title">Support</p>
<div class="box">
<div class="box-item">
<p>자주 물어보는 질문</p>
<p>고객센터</p>
<p>고객센터</p>
<p>고객센터</p>
<p>고객센터</p>
</div>
<div class="box-item">
<p>자주 물어보는 질문</p>
<p>고객센터</p>
<p>고객센터</p>
</div>
</div>
</div>
<div class="item">
<p class="title">Support</p>
<div class="box">
<div class="box-item">
<p>자주 물어보는 질문</p>
<p>고객센터</p>
<p>고객센터</p>
<p>고객센터</p>
<p>고객센터</p>
</div>
<div class="box-item">
<p>자주 물어보는 질문</p>
<p>고객센터</p>
<p>고객센터</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer-r">
<div class="footer-r-up">
<p class="title">뉴스레터 구독하기</p>
<div class="bt">
이메일
<i class="fa-solid fa-angle-right"></i>
</div>
<p class="email">입력하신 이메일 주소로 할인 코드를 발송해 드립니다.</p>
</div>
<div class="footer-r-down">
<p class="title">More Inspiration</p>
<div class="icon-box">
<i class="fa-solid fa-copyright"></i>
<i class="fa-solid fa-copyright"></i>
<i class="fa-solid fa-copyright"></i>
</div>
<div class="trac">
<div class="trac-l">
<i class="fa-brands fa-docker"></i>
<p>TRAC</p>
</div>
<div class="trac-r">
<p class="title">TRANIN WITH THE FASREST</p>
</div>
</div>
</div>
</div>
</footer>
<div class="footer2">
<div class="f-l">
<div class="box">
한국어
</div>
<div class="box">
PUMA Korea Ltd, 2024. All Rights Reseved.
</div>
<div class="box">
Imprint & Legal Data
</div>
</div>
<div class="f-r">
<img src="image.jpg" alt="">
<img src="image.jpg" alt="">
</div>
</div>
</div>
</body>
</html>'Web 수업자료 > Web 정규' 카테고리의 다른 글
| Web 2 25-04 (0) | 2025.04.09 |
|---|---|
| UIUX 디자인 24-03 (1) | 2025.03.22 |
| 웹 디자인 2 25-03 (0) | 2025.03.13 |
| Web 1 25-02 (3) | 2025.02.27 |
| 웹 디자인 1 25-02 (1) | 2025.02.13 |