https://naver.me/5CWuGlXf
■ 5월 13일 - 1일차
■ 반응형 웹 기본
○ 반응형 웹 기본
오늘날 다양한 기기와 해상도를 통해 웹 문서를 열람하고 있는데
이로 인해 특정 기기, 브라우저에 국한 되지 않고
다양한 환경에서 동일한 경험을 제공할 수 있는 웹 문서를 만들어야 한다.
이것을 반응형 웹 이라고 함.
○ 반응형 웹이란?
다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해 가며
반응하는 웹문서 또는 이를 위해 사용하는 기법
스마트 모바일 기기 등장 및 태블릿 등장으로 웹문서 설계에 변화가 필요함
모바일 전용 URL 제공, 데스크톱 전용 URL 따로 제공하는 방식도 있음.
그러나 기기의 유형의 다양해 짐에 따라 한계가 드러날 수 밖에 없음
그로인해 사용하는 기기에 적절하게 맞춰지는 사이트를 개발 하는 것이 바람직해졌고
가변성을 유지 시켜주는 것이 핵심 키워드가 됨.
○ 뷰포트 (Viewport)
현재 화면에 보여지는 영역을 의미
기기 별로 뷰포트가 다르기 때문에 동일한 웹 페이지 라도 기기에 따른 배율조정으로 화면의 크기가 다르게 보임
<meta name="viewport" content="width=device-width, initial-scale=1.0">- 기기의 너비 기준으로 초기 크기를 1배율로 하겠다라는 의미 임.
- 작성하지 않으면 뷰포트 변경에 따라서 크기가 유지 되지 않고 사이즈가 각각 달라짐.
반응형 웹의 일반적 화면 크기는 모바일 768px 미만, 태블릿 1024px 미만, 데스크 탑 1024px 이상
■ 단위(상대 단위, 뷰포트 단위)
○ 절대 단위, 상대 단위
- 절대 단위 : px 은 절대 길이 단위로 화면이 변형되어도 변경되지 않고 고정되어있음
- 상대 단위 : rem, em 은 상대적인 길이 단위로 특정 요소에 고정되어 요소의 변경에 따라 변화됨
○ em, rem
- 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위
- em : 부모요소의 글꼴 크기를 의미함 부모가 20px 이면 1em = 20px, 2em = 40px
- rem : 루트 요소의 글꼴 크기를 의미함 1rem = 16px, 2rem = 32px
- 루트 요소는 Html요소를 말하고 기본값은 16px
- Hint : em으로 여백(margin, padding) 크기를 지정할 때는 부모가 아닌 가지 자신의 글자크기를 기준으로 함
○ 뷰포트 단위 (vw, vh, vmin, vmax)
- em 과 rem은 주변에 맞게 크기를 변경하지만 기기화면에 따른 변화는 불가능
- 기기 화면 크기에 맞춰 변화는 단위를 뷰포트 단위 라고 함
- 1vw : 뷰포트 너비의 100분의 1
- 1vh : 뷰포트, 높이의 100분의 1
- 1vmin : 뷰포트 높이와 너비중 작은 쪽
- 1vmax : 뷰포트 높이와 너비중 큰 쪽
○ %단위 가변 레이아웃
- % 백분율로 부모요소와의 상대적 크기를 지정시 사용
- 부모요소와의 상대적 크기를 지정할 수 있다.
- font-size : 부모 글자크기의 50% 비율
- height : 부모 높이의 % 비율
- width, margin, padding : 부모 너비의 %비율 / margin,padding은 너비를 기준으로 들어감
○ Calc
- Css 함수는 괄호안에 인수를 전달하면, 인수에 따른 결과값을 속성에 적용
- calc 사용시 주의 사항으로 사칙연산의 앞뒤는 1칸씩 띄어 써야 함.
width: calc(100% - 100px);
■ 미디어 쿼리
○ 미디어 쿼리(media query)
미디어 타입을 인식하고 물리적 속성을 감지할 수 있는 기능
- 두가지 구성요소를 가지고 있음 (미디어 타입, 조건에 대한 물음)
@media 미디어 타입 and (조건) {
div{ /* 변경 요소 */
}
}/* 800px 이하를 뜻함 */
@media screen and (max-width:800px) {
div{
width: 300px;
height: 300px;
}
}
/* 500px 이하를 뜻함 */
@media screen and (max-width:500px) {
div{
width: 200px;
height: 300px;
}
}
- link로 사용하기 screen and (max-width:800px) 800미만 일때 style.css 적용
- 기존 link보다는 밑에 있어야 적용됨 (나중에 읽기 때문에)
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style.css" media="screen and (max-width:800px)">
@media (min-width:1025px){ /* 1025px 이상때 실행*/
.a{
background-color: red;
}
}
@media (min-width:701px) and (max-width:1024px){ /* 701px~1024px사이때 실행*/
.a{
background-color: blue;
}
}
@media (max-width:700px){/* 700px 이하일때 실행*/
.a{
background-color: green;
}
}
■ 5월 14일 - 2일차
<style>
body{margin: 0;
--gap : 10px;
--num : 5;
}
.con{
width: calc(100% - 300px);
height: 200px;
margin: 0 auto;
display: flex; justify-content: space-between;
}
.con .a{
width: calc((100% - var(--gap)*calc(var(--num) - 1))/var(--num));
/*100%에서 개수 - 1 한것에 곱하기 사이 px값 나누기 개수 */
background-color: aqua;
}
@media (max-width:1024px){
body{
--num : 4;
}
.con .a:nth-child(5){
display: none;
}
}
@media (max-width:700px){
body{
--num : 3;
}
.con .a:nth-child(4){
display: none;
}
}
@media (max-width:500px){
body{
--num : 1;
}
.con .a:nth-child(2),
.con .a:nth-child(3){
display: none;
}
}
</style>
<body>
<div class="con">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>
</body>
</html>
■ 변수 및 반응성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
margin: 0;
--gap : 5px;
--bg1 : red;
--bg2 : blue;
--bg3 : green;
--b5 : 5;
}
.container{
margin: 0 auto;
width: calc(100% - 60px);
background-color: yellow;
display: flex;
flex-wrap: wrap;
gap: var(--gap);
}
.a{
width: calc((100% - var(--gap) * 4) / 5);
aspect-ratio: 1;
background-color: var(--bg3);
}
.a:nth-child(5n){
background-color: var(--bg2);
}
@media (max-width: 1024px){
.a{
width: calc((100% - var(--gap) * 3) / 4);
aspect-ratio: 1 / 0.8;
}
.a:nth-child(4n){
background-color: var(--bg2);
}
.a:not(:nth-child(4n)){
background-color: var(--bg3);
}
}
@media (max-width: 768px){
.a{
width: calc((100% - var(--gap) * 2) / 3);
aspect-ratio: 1 / 0.5;
}
.a:nth-child(3n){
background-color: var(--bg2);
}
.a:not(:nth-child(3n)){
background-color: var(--bg3);
}
}
</style>
<body>
<div class="wrap">
<div class="container">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>
</div>
</body>
</html>
■ 레이아웃(Layout)
전체적인 디자인 콘셉트와 계획에 따라 서체와 이미지 등 각각의
시각적 요소들을 한정된 공간 안에 적절하게 배치하는 것을 의미
인터페이스 디자인에서 레이아웃이란
화면의 전체적인 구도를 파악하고 심미적 요소들을
화면에 배치하는 것을 의미
시각적 인터페이스의 레이아웃을 결정하는데 있어서의 핵심은
정보의 분류와 위계, 체계 등의 정보 설계, 즉 콘텐츠 구조임
레이아웃을 구성할 때에는 그리드가 명확해야 하며,
페이지 간의 일관성이 뛰어나 사용자가 어떤 페이지에 머물든지 간에
원하는 정보를 빠르게 찾을 수 있어야 한다.
그러나 모든 페이지가 일관적이기만 하면 페이지의 인상이 지루해질 수 있기 때문에
일관성을 유지 하면서도 약간의 변화와 다양성을 줄 수 있어야 한다.
레이아웃은 웹사이트의 심미성 뿐 아니라
사용 편의성 및 효율성, 정보 전달성 등에 밀접한 영향을 미침
○ 그리드 시스템(Grid System)
같은 간격으로 배치된 수직·수평의 가상의 선, 즉 격자로 된 가이드라인을 의미하며,
그리드를 이용하여 디자인 요소들을 조화롭게 구성하고 배치하는 레이아웃 기법
○ 그리드의 종류
그리드를 단으로 나누는 것인데, 단(column)의 수에 따라 이미지가 달라진다.
그리드는 정확한 배치와 통합, 질서, 순서를 부여함으로써
웹사이트 공간을 체계적으로 활용할 수 있게 한다
시각적 조화와 심미성을 높여주며, 정보
를 조직적이고 명료하게 표현하도록 한다
그리드 시스템을 활용하게 되면 시각적 구성 요소들을 배치하는데
기준이 되기 때문에 단순히 감에 의지하여 구성 요소를 배치하는 것보다
레이아웃 작업이 훨씬 쉬워지며, 여러 페이지에 걸쳐 작업해야 하는
웹사이트의 경우에는 웹페이지들의 일관성과 통일성을 유지할 수가 있다
○ 해상도 및 배치
웹사이트를 디자인할 때에는 모니터에 따라 작업 해상도가 달라진다.
가로와 세로 각각 1024×768, 1280×1024, 1920×1080 해상도 등이 있으며,
각 해상도 안에 콘텐츠가 안전하게 보일 수 있도록
디자인 작업 시 좌우 여백을 주는 것이 일반적임
콘텐츠 영역의 폭을 12개의 칼럼으로 나누고
가로 사이즈를 960px로 설정하는 960 그리드 시스템을 적극 활용하는 것이 좋다.
가로 폭을 12개의 칼럼으로 나누는 이유는 12가 1, 2, 3, 4, 6으로 나누어지기 때문인데,
웹사이트 디자인에서 콘텐츠 배치를 위한 가장 일반적 분할이
2단, 3단, 4단임을 고려했을 때 12개의 칼럼은 콘텐츠의 종류와 크기에 따라
다양한 분할과 통합에 매우 효율적이다
■ 반응형 웹 레이아웃
○ 반응형 웹사이트의 레이아웃
사용자의 화면 크기에 반응을 한다고 하여 반응형 웹이라고 하며
반응형 웹디자인을 기반으로 하는 다양한 디바이스를 대응하는 웹을 말한다.
디스플레이 종류와 크기에 따라 자동으로 조절하며 정보 설계상에서 중요한 항목들을 도출하여
화면에 대한 레이아웃을 정한다
- 유동형 패턴(Mostly Fluid)
중대형 화면에서 중간 크기의 화면까지는 여백 정도만 조정하고,
작은 화면이 되면 그리드가 움직이며 콘텐츠를 수직으로 배치한다.
- 기본형태
<style>
body{
padding: 0;
margin: 0;
}
#wrap{
width: 960px;
margin: 0 auto;
}
#wrap > div {
height: 400px;
}
.box1{
width: 100%;
background-color: hotpink;
}
.box2{
width: 50%;
background-color: aqua;
float: left;
}
.box3{
width: 50%;
background-color: blueviolet;
float: right;
}
</style>
<body>
<div id="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
- Media 쿼리 사용
@media screen and (max-width: 960px){
#wrap{
width: 95%;
}
}
@media screen and (max-width: 768px){
#wrap{
width: 100%;
}
}
@media screen and (max-width: 480px){
.box2, .box3{
float: none;
width: 100%;
}
}
■ 5월 15일 - 3일차
- 칼럼드롭(Column Drop)
화면의 폭이 좁아져 더 이상 콘텐츠의 정상적인 표시가 힘들 경우 컬럼을 하단으로
하여 열을 수직으로 쌓는다.
콘텐츠가 서로 연관 되어 있지 않을때 효과적임
세 개의 콘텐츠가 연관되어 있다면 계층구조 관리가 힘듦
- 기본형태
<style>
body{
padding: 0;
margin: 0;
}
#wrap{
width: 100%;
display: flex;
}
.box1{
width: 25%;
height: 600px;
background-color: hotpink;
}
.box2{
width: 50%;
background-color: aqua;
}
.box3{
width: 25%;
background-color: blueviolet;
}
</style>
<body>
<div id="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
- Media 쿼리 사용
@media (max-width: 960px){
#wrap{
flex-wrap: wrap;
}
.box1{
width: 30%;
}
.box2{
width: 70%;
}
.box3{
width: 100%;
height: 300px;
}
}
@media (max-width: 768px){
.box1{
width: 100%;
height: 300px;
}
.box2{
width: 100%;
height: 600px;
order: -1;
}
}
@media (max-width: 480px){
.box2{
height: 1000px;
}
.box1, .box3{
height: 600px;
}
}
- 레이아웃 시프터 패턴(Layout Shifter)
이 패턴은 스크린 크기 마다 다른 형태의 레이아웃을 사용하여 다른 패턴들 보다 복잡하다.
단순히 컬럼을 아래로 떨어뜨리는 배치 방식이 아닌
화면 크기마다 새로운 레이아웃으로 변형한다
- 기본형태
<style>
body{
padding: 0;
margin: 0;
}
#wrap{
width: 960px;
display: flex;
margin: 0 auto;
height: 100vh;
}
.box1{
width: 30%;
height: 100%;
background-color: green;
}
.boxwrap{
width: 70%;
height: 100%;
}
.box2{
height: 50%;
background-color: brown;
}
.box3{
height: 50%;
background-color: aqua;
}
</style>
<body>
<div id="wrap">
<div class="box1"></div>
<div class="boxwrap">
<div class="box2"></div>
<div class="box3"></div>
</div>
</div>
</body>
- Media 쿼리 사용
@media (max-width: 960px){
#wrap{
width: 95%;
}
}
@media (max-width: 768px){
#wrap{
width: 100%;
display: block;
}
.box1{
width: 100%;
height: 100px;
}
.boxwrap{
width: 100%;
}
}
@media (max-width: 480px){
.box1{
width: 100%;
height: 50px;
}
.boxwrap{
height: 200%;
}
}
- 미세조정 패턴(Tiny Tweaks)
미니멀리즘에 따른 접근 방식으로 다른 패턴들 보다 단순한 패턴이다.
보통 하나의 컬럼을 사용하여 브라우저의 폭이 변하더라도 레이아웃의 변화가 크지 않아서
블로그에서 많이 사용되는 패턴
- 기본형태
<style>
body{
margin: 0; padding: 0;
background-color: bisque;
}
#wrap{
width: 80%; margin: 100px auto;
}
.box{
width: 18%; height: 50px; margin: 1%;
background-color: #fff;
border-radius: 10px; float: left;
}
</style>
<body>
<div id="wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
- Media 쿼리 사용
@media(max-width:1024px){
.box{width: 23%;}
}
@media(max-width:960px){
.box{width: 31.333%;}
}
@media(max-width:768px){
.box{width: 48%;}
}
@media(max-width:480px){
.box{width: 98%;}
}
- 오프캔버스 패턴(Off- canvas)
패턴들이 작은 화면에서는 길게 늘어나는 결과가 나타나기 때문에
페이지 컴포넌스를 스크린 밖으로 밀어냈다가 요청을 받으면
슬라이딩 도어처럼 다시 콘텐츠를 화면에 노출하는 방식이다
- 기본형태
<style>
body{
padding: 0;
margin: 0;
}
#wrap{
width: 960px;
margin: 0 auto;
height: 100vh;
}
#wrap-box{
width: 100%;
height: 100%;
display: flex;
}
#wrap-box > div{
width: calc(100% / 3);
}
.box1{
background-color: aquamarine;
}
.box2{
background-color: burlywood;
}
.box3{
background-color: chartreuse;
}
</style>
<body>
<div id="wrap">
<div id="wrap-box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</div>
</body>
- Media 쿼리 사용
@media (max-width: 960px){
#wrap{
width: 100%;
}
}
@media (max-width: 768px){
#wrap{
overflow: hidden;
position: relative;
}
#wrap-box{
position: absolute;
width: 150%;
}
}
@media (max-width: 480px){
#wrap-box{
width: 300%;
margin-left: -100%;
}
}
■ 5월 19일 - 4일차
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
}
.wrap{
width: 1024px;
margin: 0 auto;
}
header{
height: 5vh;
background-color: #ccc;
}
main{
height: 90vh;
display: flex;
}
.section1{
width: 20%;
background-color: #eee;
}
.section2{
width: 80%;
}
.section2 > article{
height: calc(100% / 3);
}
.section2 > .article1{
background-color: #aaa;
}
.section2 > .article2{
background-color: #999;
}
.section2 > .article3{
background-color: #777;
}
footer{
height: 5vh;
background-color: #555;
}
@media (max-width:1024px){
.wrap{
width: 100%;
}
header{
height: 10vh;
}
.section2 > article{
height: 50%;
}
.section2 > .article3{
display: none;
}
}
@media (max-width:768px){
header{
height: 20vh;
}
main{
height: 80vh;
display: block;
}
.section1{
width: 100%;
height: 20vh;
}
.section2{
width: 100%;
height: 60vh;
display: flex;
}
.section2 > article{
width: 50%;
height: 100%;
}
}
@media (max-width:500px){
main{
height: 120vh;
}
.section1{
height: 40vh;
}
.section2{
display: block;
height: 80vh;
}
.section2 > article{
width: 100%;
height: 50%;
}
}
</style>
</head>
<body>
<div class="wrap">
<header></header>
<main>
<section class="section1"></section>
<section class="section2">
<article class="article1"></article>
<article class="article2"></article>
<article class="article3"></article>
</section>
</main>
<footer></footer>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
}
.wrap{
width: 1024px;
margin: 0 auto;
}
header{
height: 5vh;
background-color: #fcc;
}
.section1{
height: 40vh;
background-color: #faa;
}
.section2{
height: 50vh;
align-content: center;
background-color: #f99;
}
.section2 > .container{
width: 80%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
.section2 > .container > .item{
aspect-ratio: 1;
border-radius: 5%;
background-color: #f55;
}
footer{
height: 5vh;
background-color: #f77;
}
@media (max-width:1024px){
.wrap{
width: 100%;
}
.section2{
height: auto;
padding: 50px 0;
box-sizing: border-box;
}
.section2 > .container{
grid-template-columns: repeat(4, 1fr);
}
.section2 > .container > .item:nth-last-child(-n + 2){
display: none;
}
}
@media (max-width:768px){
.section2 > .container{
grid-template-columns: repeat(3, 1fr);
}
.section2 > .container > .item:nth-last-child(2){
display: block;
}
}
@media (max-width:500px){
.section2 > .container{
grid-template-columns: repeat(2, 1fr);
}
.section2 > .container > .item:nth-last-child(1){
display: block;
}
}
</style>
</head>
<body>
<div class="wrap">
<header></header>
<section class="section1"></section>
<section class="section2">
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</section>
<footer></footer>
</div>
</body>
</html>
■ 5월 20일 - 5일차
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
}
.wrap{
width: 1024px;
margin: 0 auto;
}
header{
height: 5vh;
background-color: #eef;
}
.section1{
height: 40vh;
background-color: #ddf;
}
.section2{
height: 40vh;
display: flex;
}
.section2 > .left{
width: calc(100% / 3);
background-color: #ccf;
}
.section2 > .right{
width: calc(100% / 3 * 2);
}
.section2 > .right > .content1{
height: 50%;
background-color: #bbf;
}
.section2 > .right > .content2{
height: 50%;
background-color: #aaf;
}
.section3{
height: 30vh;
display: flex;
}
.section3 > div{
width: calc(100% / 3);
}
.section3 > .content1{
background-color: #99f;
}
.section3 > .content2{
background-color: #88f;
}
.section3 > .content3{
background-color: #77f;
}
.section4{
height: 30vh;
box-sizing: border-box;
padding: 50px 100px;
background-color: #aaf;
}
.section4 > .container{
width: 100%;
height: 100%;
display: flex;
gap: 30px;
}
.section4 > .container > div{
width: 100%;
background-color: #77f;
border-radius: 10px;
}
footer{
height: 5vh;
background-color: #eef;
}
</style>
</head>
<body>
<div class="wrap">
<header></header>
<section class="section1"></section>
<section class="section2">
<article class="left"></article>
<article class="right">
<div class="content1"></div>
<div class="content2"></div>
</article>
</section>
<section class="section3">
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>
</section>
<section class="section4">
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</section>
<footer></footer>
</div>
</body>
</html>
■ 5월 21일 - 6일차
■ grid layout
○ grid layout이란
- 이름 그대로 격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식
- 그리드 아이템의 배치와 정렬은 컨테이너 내부 행과 열의 상호작용을 통해 결정
- flex는 주축과 교차축을 가지고 정리한다고 한다면 gird는 상호작용을 통해 결정
- grid container : 레이아웃을 그리드 방식으로 결정할 요소
- grid item : 컨테이너 내부에서 그리드 방식으로 배치
○ 사용법
grid container에서 display속성의 값에 grid 사용
div{
diplay: grid;
}■ grid-template-columns,rows
○ grid-template-columns
- grid container 트랙 중 열 내 아이템들의 크기를 지정할 수 있는 속성
- 기본형태는 열과 행 모두 container의 크기에 맞게 나온다.
- 트랙이란 행 또는 열을 뜻함
○ 사용법
- px형태로 3열을 구성하려면 px px px (개수에 따라서 열 구성, 차이는 남)
- %형태로 container의 크기의 %형태로 들어감
- fr형태 남은 사이즈를 가지고 fr의 전체를 가지고 나눔 1fr 2fr (남은것중 1/3 2/3) 크기
- 같이 사용 가능
○ 코드
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<style>
.container{
height: 100px;
background-color: yellow;
display: grid;
grid-template-columns: 10% 100px 2fr;
}
.item{
background-color: yellowgreen;
border: 1px solid #000;
}
</style>
○ grid-template-rows
- grid container 트랙 중 행 내 아이템들의 크기를 지정할 수 있는 속성
- columns와 동일하며 item이 부족해 남으면 빈공간을 남김
- columns과 같이 주어도 됨
○ 코드
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<style>
.container{
height: 200px;
background-color: yellow;
display: grid;
grid-template-rows: 1fr 2fr;
grid-template-columns: 1fr 2fr;
}
.item{
background-color: yellowgreen;
border: 1px solid #000;
}
</style>
■ gap(grid-gap)
○ gap(grid-gap)
- gap으로만 사용가능
- grid cotainer에서 item들의 사이 간격을 지정하는 속성
- columns 와 rows가 수치로 되어 있으면 container를 넘어감
○ 사용법
- px로 사용해도 되고 %로 사용해도됨 그러나 너비와 높이가 다르면 %는 각각에 %임
○ 코드
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<style>
.container{
height: 200px;
background-color: yellow;
display: grid;
grid-template-rows: 1fr 2fr;
grid-template-columns: 1fr 2fr;
gap: 30px 10px;
}
.item{
background-color: yellowgreen;
border: 1px solid #000;
}
</style>
■ 트랙함수
○ 트랙 함수
- grid container의 크기를 지정할때 사용할 수 있는 유용 함수
- repeat(), minmax(), auto-fill, auto-fit 이며 template에서 사용한다.
- grid-template-columns: repeat( , ) 형태로 사용
○ repeat(반복개수, 크기)
- 반복적으로 수치를 설정할때 사용함
- 크기가 container를 넘어가면 넘어간다.
○ minmax(작은, 큰)
- 작은보다 작아질수 없고 큰보다 커질수 없다.
- repeat(개수, minmax(작은, 큰)) 으로 사용함
○ auto-fill, auto-fit
- repeat의 개수에 작성
- auto-fill은 공간이 남으면 개수를 늘리고 모든것이 열로 나오면 남은 공간을 남김
- auto-fit은 위와 동일하나 남은 공간을 체워준다.
- 수치값이 어떠냐에 따라 체워주지 않을수도 있다.
○ 코드
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<style>
.container{
height: 100px;
background-color: yellow;
display: grid;
grid-template-columns: repeat(auto-fill,minmax(80px, 1fr));
}
.item{
background-color: yellowgreen;
border: 1px solid #000;
}
</style>
■ grid-row, grid-column
○ grid-row, grid-column
grid-item에서 사용하며 그리드 컨테이너의 줄번호를 이용해 배치할 수 있다.
row는 위아래로 내려오면서 기준선을 따라서 번호 가장 윗선이 1
column은 좌우로 넘어가면서 기준선을 따라서 번호 가장 왼쪽이 1
○ 코드
<div class="main">
<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
<div class="a">4</div>
<div class="a">5</div>
<div class="a">6</div>
</div>div{
border: 1px solid #000;
box-sizing: border-box;
}
.main{
width: 300px; height: 100px;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
background-color: yellowgreen;
}
.a{
background-color: aquamarine;
}
.a:nth-child(2){
grid-column: 2/4;
grid-row: 2/5;
}
○ grid-row-start, end / grid-coumn-start,end
- grid-row : 1 / 3 == grid-row-start: 1; grid-row-end: 3 과 동일
■ grid-templare-areas, grid-area
○ grid-templare-areas, grid-area
- 그리드 영역의 이름을 이용해 레이아웃의 형태를 정의
- grid-templare-areas : grid container에서 형태를 지정
- grid-area : grid item에서 이름을 지정하는 형태
- grid item에서 이름지정방식
.a:nth-child(1){
grid-area: a;
}
-grid container에서 areas 통제방식
.container{
grid-template-areas:
"a a b"
"d d b"
"- - c"
;
}
- 빈칸은 다른 이름으로 넣어주면 됨 보통(.)으로 넣는다. 숫자는 사용하지 않을것
- 요소들이 분리되면 문제 발생
- 비어 있어도, 넘어가도 문제 발생
- 행과 열이 많이 편성되어 있을때 지역을 잡지 않으면 나오는 문제
<div class="main">
<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
<div class="a">4</div>
</div>div{
border: 1px solid #000;
box-sizing: border-box;
}
.main{
width: 300px; height: 100px;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(4,1fr);
background-color: yellowgreen;
grid-template-areas:
"a a b"
"d d b"
"- - c"
;
}
.a{
background-color: aquamarine;
}
.a:nth-child(1){
grid-area: a;
}
.a:nth-child(2){
grid-area: b;
}
.a:nth-child(3){
grid-area: c;
}
.a:nth-child(4){
grid-area: d;
}
■ align-items,self / justify-items,slef
○ align-items,self / justify-items,slef
- align-items : grid container 에서 행트랙의 높이 기준으로 grid item 배치
- justify-items : grid container 에서 행트랙의 너비 기준으로 그리드 grid item 배치
- align-self : grid item 에서 행트랙의 높이 기준으로 개별 배치
- justify-self : grid item 에서 행트랙의 너비 기준으로 개별 배치
- 속성 값 : flex-end, flex-start, center 등
○ 코드
<div class="main">
<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
<div class="a">4</div>
</div>div{
border: 1px solid #000;
box-sizing: border-box;
}
.main{
width: 300px; height: 100px;
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(2,1fr);
background-color: yellowgreen;
align-items: center;
}
.a{
background-color: aquamarine;
}
.a:nth-child(2){
align-self: flex-end;
}
■ align-content, justify-content
○ align-content, justify-content
- align-content : 열방향에 container에 여유공간이 있을때 사용할 수 있다.
- justify-content : 행방향에 container에 여유공간이 있을때 사용할 수 있다.
- 속성으로 : flex-end, flex-start, center, space-around, space-bertween, space-evenly
○ 코드
div{
border: 1px solid #000;
box-sizing: border-box;
}
.main{
width: 300px; height: 100px;
display: grid;
grid-template-columns: repeat(2,40px);
grid-template-rows: repeat(2,30px);
background-color: yellowgreen;
justify-content: space-between;
align-content: center;
}
.a{
background-color: aquamarine;
}
■ 5월 22일 - 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<style>
body{margin: 0;}
.container{
display: flex;
gap: 20px;
padding: 20px;
box-sizing: border-box;
height: 100vh;
flex-direction: column;
}
.item{
height: calc(50% - 10px);
background-color: aqua;
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px; box-sizing: border-box;
}
.item:nth-child(1) .box:nth-child(3){
width: 100%;
}
.box{
width: calc(50% - 10px);
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="item">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
</html>
■ 5월 26일 - 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>
body,h1,h2,h3,h4,p{margin: 0;}
img{width: 100%; object-fit: cover; display: block;}
header{padding: 0 50px; box-sizing: border-box;}
header .login{height: 50px; display: flex; justify-content: flex-end; align-items: center; }
header .login p{padding: 0 10px;}
header .login p:not(:last-child){border-right: 1px solid #000;}
header nav{display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px;}
header nav .nav-left{display: flex; align-items: flex-end; gap: 40px;}
header nav .nav-left .logo{font-size: 24px; font-weight: 600;}
header nav .nav-left .menu{display: flex; gap: 12px;}
header nav .nav-right{display: flex; gap: 12px; align-items: center;}
header nav .nav-right .search{width: 200px;height: 34px; background-color: #ddd; border-radius: 17px; align-content: center; text-align: end; padding-right: 12px;}
header nav .nav-right > i{font-size: 20px;}
header .img-box{height: 70vh;display: flex; gap: 10px;}
header .img-box .left{width: calc((100% - 10px)/3*2); position: relative;}
header .img-box .left > img{height: 100%;}
header .img-box .left .text-box{position: absolute; top: 150px; left: 150px; color: #fff; text-shadow: 2px 2px 4px #000;}
header .img-box .left .text-box h1{font-weight: 400; margin-bottom: 50px;}
header .img-box .left .text-box h1 span{font-weight: 800;}
header .img-box .left .text-box .button{padding: 5px 15px; background-color: #fffa; width: fit-content; color: #000; text-shadow: none; font-weight: 600;}
header .img-box .right{width: calc((100% - 10px)/3); display: flex; flex-direction: column; gap: 10px;}
header .img-box .right .item{position: relative; height: calc((100% - 20px)/3);}
header .img-box .right .item img{height: 100%;}
header .img-box .right .item .text-box{position: absolute; left: 20px; top: 20px; color: #fff;}
section{padding: 50px 150px; box-sizing: border-box;}
section > .title{display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px;}
section > .title h2{margin-bottom: 6px;}
section .container .item img{margin-bottom: 12px; height: 300px;}
section .container .item h3{font-size: 18px;}
section .container .item .title{margin-bottom: 6px;}
section .container .item .price{margin-bottom: 12px;}
.s1 .container{display: flex; gap: 10px;}
.s1 .container .item{width: calc((100% - 20px)/3);}
.s2 .container{display: flex; gap: 40px;}
.s2 .container .item{width: calc((100% - 40px)/2);}
.s3 {height: 200px; background-color: #ffdfdf; display: flex; justify-content: center; gap: 50px; align-items: center;}
.s3 .icon{font-size: 42px;}
.s3 .text-box{text-align: center;}
.s3 .text-box .button{display: flex; justify-content: center; gap: 20px; margin-bottom: 12px;}
.s3 .text-box .button p{width: 30px;height: 30px;border: 1px solid #000;border-radius: 50%; align-content: center;}
.s3 .text-box h2{margin-bottom: 6px;}
.s4 h2{margin-bottom: 6px;}
.s4 > p{margin-bottom: 20px;}
.s4 .container{display: flex; gap: 10px;}
.s4 .container .item{width: calc((100% - 40px)/5);}
.s4 .container .item img{height: 250px;}
.s5 .container{display: flex; gap: 20px;}
.s5 .container .item{width: calc((100% - 40px)/3);}
.s5 .container .item p{margin-bottom: 20px;}
@media(max-width:1400px){
.s4 .container .item{width: calc((100% - 30px)/4);}
.s4 .container .item:nth-child(5){display: none;}
}
@media(max-width:1200px){
.s4 .container{flex-wrap: wrap;}
.s4 .container .item{width: calc((100% - 10px)/2);}
}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="login">
<p>회원가입</p>
<p>로그인</p>
<p>고객센터</p>
</div>
<nav>
<div class="nav-left">
<div class="logo">cubeme</div>
<div class="menu">
<p>모든상품</p>
<p>이벤트</p>
<p>메거진</p>
<p>브랜드 소개</p>
<p>매장안내</p>
<p>고객센터</p>
</div>
</div>
<div class="nav-right">
<div class="search">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<i class="fa-solid fa-cart-shopping"></i>
</div>
</nav>
<div class="img-box">
<div class="left">
<img src="im1.jpg" alt="">
<div class="text-box">
<h1><span>유기농 녹차</span>의 <span>건강함</span> 가득<br>
<span>특허</span>받은 <span>식물성</span><br>
<span>녹차 유산균</span>
</h1>
<div class="button">
출시 이벤트 2+1
</div>
</div>
</div>
<div class="right">
<div class="item">
<img src="im1.jpg" alt="">
<div class="text-box">
<h3>Only for YOU! 오직 큐브미에서만!</h3>
</div>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<div class="text-box">
<h3>CUBEME Magazine</h3>
</div>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<div class="text-box">
<h3>CUBEME Story</h3>
</div>
</div>
</div>
</div>
</header>
<main>
<section class="s1">
<div class="title">
<div class="text-box">
<h2>가장 핫한 큐브</h2>
<p class="source">11월 가장 인기 많은 베스트 큐브를 만나보세요</p>
</div>
<p class="total">모두 보기(6)</p>
</div>
<div class="container">
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">퍼펙트 큐브</h3>
<h3 class="price">125,000원</h3>
<p>내몸에 흐르는 탱탱분자! 힝알루론산과 콜라겐을 동시에! 새콤달콤 고농축 뷰티 앰플</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">퍼펙트 큐브</h3>
<h3 class="price">125,000원</h3>
<p>내몸에 흐르는 탱탱분자! 힝알루론산과 콜라겐을 동시에! 새콤달콤 고농축 뷰티 앰플</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">퍼펙트 큐브</h3>
<h3 class="price">125,000원</h3>
<p>내몸에 흐르는 탱탱분자! 힝알루론산과 콜라겐을 동시에! 새콤달콤 고농축 뷰티 앰플</p>
</div>
</div>
</section>
<section class="s2">
<div class="title">
<h2>진행 중인 이벤트</h2>
<p class="total">모두 보기(4)</p>
</div>
<div class="container">
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">오직 큐브미에서만!</h3>
<p>큐브미 공식몰 OPEN EVENT</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">오직 큐브미에서만!</h3>
<p>큐브미 공식몰 OPEN EVENT</p>
</div>
</div>
</section>
<div class="s3">
<div class="icon">
<i class="fa-solid fa-hippo"></i>
</div>
<div class="text-box">
<div class="button">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<h2>We're Making Headlines</h2>
<p>cubeme</p>
</div>
</div>
<section class="s4">
<h2>이 상품 어때요?</h2>
<p>언제나 간편하고 즐겁게, 큐브미</p>
<div class="container">
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">워터뱅크 큐브</h3>
<h3 class="price">36,000원</h3>
<p>물, 마시지마세요 속부터 차오르는 리얼 보습 히알루론산</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">워터뱅크 큐브</h3>
<h3 class="price">36,000원</h3>
<p>물, 마시지마세요 속부터 차오르는 리얼 보습 히알루론산</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">워터뱅크 큐브</h3>
<h3 class="price">36,000원</h3>
<p>물, 마시지마세요 속부터 차오르는 리얼 보습 히알루론산</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">워터뱅크 큐브</h3>
<h3 class="price">36,000원</h3>
<p>물, 마시지마세요 속부터 차오르는 리얼 보습 히알루론산</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">워터뱅크 큐브</h3>
<h3 class="price">36,000원</h3>
<p>물, 마시지마세요 속부터 차오르는 리얼 보습 히알루론산</p>
</div>
</div>
</section>
<section class="s5">
<div class="title">
<div class="text-box">
<h2>Magazine</h2>
<p>어디에도 없는 큐브의 웰니스 이야기</p>
</div>
<p class="total">모두 보기(3)</p>
</div>
<div class="container">
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">콜라겐처럼 탱탱 쫀쫀한 '요즘' 메이크업</h3>
<p>코로나 이후 급부상한 쌩얼 트렌드 맨 얼굴이 피부에 더 좋을 수 있지만 풀메이크업이 일상이었다면 적잖아 당황스러울거 같아요</p>
<div class="tag">
<span>#콜라겐</span>
<span>#메이크업</span>
<span>#skin</span>
</div>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">콜라겐처럼 탱탱 쫀쫀한 '요즘' 메이크업</h3>
<p>코로나 이후 급부상한 쌩얼 트렌드 맨 얼굴이 피부에 더 좋을 수 있지만 풀메이크업이 일상이었다면 적잖아 당황스러울거 같아요</p>
<div class="tag">
<span>#콜라겐</span>
<span>#메이크업</span>
<span>#skin</span>
</div>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">콜라겐처럼 탱탱 쫀쫀한 '요즘' 메이크업</h3>
<p>코로나 이후 급부상한 쌩얼 트렌드 맨 얼굴이 피부에 더 좋을 수 있지만 풀메이크업이 일상이었다면 적잖아 당황스러울거 같아요</p>
<div class="tag">
<span>#콜라겐</span>
<span>#메이크업</span>
<span>#skin</span>
</div>
</div>
</div>
</section>
</main>
</div>
</body>
</html>
■ 5월 27일 - 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>
body,h1,h2,h3,h4,p{margin: 0;}
img{width: 100%; object-fit: cover; display: block;}
header{padding: 0 50px; box-sizing: border-box;}
header .login{height: 50px; display: flex; justify-content: flex-end; align-items: center; }
header .login p{padding: 0 10px;}
header .login p:not(:last-child){border-right: 1px solid #000;}
header nav{display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px;}
header nav .nav-left{display: flex; align-items: flex-end; gap: 40px;}
header nav .nav-left .logo{font-size: 24px; font-weight: 600;}
header nav .nav-left .menu{display: flex; gap: 12px;}
header nav .nav-right{display: flex; gap: 12px; align-items: center;}
header nav .nav-right .search{width: 200px;height: 34px; background-color: #ddd; border-radius: 17px; align-content: center; text-align: end; padding-right: 12px;}
header nav .nav-right > i{font-size: 20px;}
header .img-box{height: 70vh;display: flex; gap: 10px;}
header .img-box .left{width: calc((100% - 10px)/3*2); position: relative;}
header .img-box .left > img{height: 100%;}
header .img-box .left .text-box{position: absolute; top: 150px; left: 150px; color: #fff; text-shadow: 2px 2px 4px #000;}
header .img-box .left .text-box h1{font-weight: 400; margin-bottom: 50px;}
header .img-box .left .text-box h1 span{font-weight: 800;}
header .img-box .left .text-box .button{padding: 5px 15px; background-color: #fffa; width: fit-content; color: #000; text-shadow: none; font-weight: 600;}
header .img-box .right{width: calc((100% - 10px)/3); display: flex; flex-direction: column; gap: 10px;}
header .img-box .right .item{position: relative; height: calc((100% - 20px)/3);}
header .img-box .right .item img{height: 100%;}
header .img-box .right .item .text-box{position: absolute; left: 20px; top: 20px; color: #fff;}
section{padding: 50px 150px; box-sizing: border-box;}
section > .title{display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px;}
section > .title h2{margin-bottom: 6px;}
section .container .item img{margin-bottom: 12px; height: 300px;}
section .container .item h3{font-size: 18px;}
section .container .item .title{margin-bottom: 6px;}
section .container .item .price{margin-bottom: 12px;}
.s1 .container{display: flex; gap: 10px;}
.s1 .container .item{width: calc((100% - 20px)/3);}
.s2 .container{display: flex; gap: 40px;}
.s2 .container .item{width: calc((100% - 40px)/2);}
.s3 {height: 200px; background-color: #ffdfdf; display: flex; justify-content: center; gap: 50px; align-items: center;}
.s3 .icon{font-size: 42px;}
.s3 .text-box{text-align: center;}
.s3 .text-box .button{display: flex; justify-content: center; gap: 20px; margin-bottom: 12px;}
.s3 .text-box .button p{width: 30px;height: 30px;border: 1px solid #000;border-radius: 50%; align-content: center;}
.s3 .text-box h2{margin-bottom: 6px;}
.s4 h2{margin-bottom: 6px;}
.s4 > p{margin-bottom: 20px;}
.s4 .container{display: flex; gap: 10px;}
.s4 .container .item{width: calc((100% - 40px)/5);}
.s4 .container .item img{height: 250px;}
.s5 .container{display: flex; gap: 20px;}
.s5 .container .item{width: calc((100% - 40px)/3);}
.s5 .container .item p{margin-bottom: 20px;}
@media(max-width:1400px){
.s4 .container .item{width: calc((100% - 30px)/4);}
.s4 .container .item:nth-child(5){display: none;}
}
@media(max-width:1200px){
section{padding: 50px 100px;}
.s4 .container{flex-wrap: wrap;}
.s4 .container .item{width: calc((100% - 10px)/2);}
}
@media(max-width:800px){
header nav .nav-left .menu{display: none;}
header .img-box{height: calc(90vh + 10px); flex-direction: column;}
header .img-box .left{width: 100%; height: 70vh;}
header .img-box .right{width: 100%; height: 20vh; flex-direction: row;}
header .img-box .right .item{width: calc((100% - 20px)/3); height: 100%;}
.s1 .container .item:nth-child(3),
.s5 .container .item:nth-child(3){display: none;}
.s1 .container .item,
.s5 .container .item{width: calc((100% - 10px)/2);}
}
@media(max-width:500px){
header .img-box .left .text-box
{width: 100%; left: 0; top: 50%; transform: translateY(-50%); text-align: center;}
header .img-box .left .text-box .button{margin: 0 auto;}
header{padding: 0 10px;}
section{padding: 50px 20px;}
header .img-box{height: 70vh;}
header .img-box .right{display: none;}
main section .container{flex-wrap: wrap;}
.s1 .container .item,
.s2 .container .item,
.s4 .container .item,
.s5 .container .item
{width: 100%;}
}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="login">
<p>회원가입</p>
<p>로그인</p>
<p>고객센터</p>
</div>
<nav>
<div class="nav-left">
<div class="logo">cubeme</div>
<div class="menu">
<p>모든상품</p>
<p>이벤트</p>
<p>메거진</p>
<p>브랜드 소개</p>
<p>매장안내</p>
<p>고객센터</p>
</div>
</div>
<div class="nav-right">
<div class="search">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<i class="fa-solid fa-cart-shopping"></i>
</div>
</nav>
<div class="img-box">
<div class="left">
<img src="im1.jpg" alt="">
<div class="text-box">
<h1><span>유기농 녹차</span>의 <span>건강함</span> 가득<br>
<span>특허</span>받은 <span>식물성</span><br>
<span>녹차 유산균</span>
</h1>
<div class="button">
출시 이벤트 2+1
</div>
</div>
</div>
<div class="right">
<div class="item">
<img src="im1.jpg" alt="">
<div class="text-box">
<h3>Only for YOU! 오직 큐브미에서만!</h3>
</div>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<div class="text-box">
<h3>CUBEME Magazine</h3>
</div>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<div class="text-box">
<h3>CUBEME Story</h3>
</div>
</div>
</div>
</div>
</header>
<main>
<section class="s1">
<div class="title">
<div class="text-box">
<h2>가장 핫한 큐브</h2>
<p class="source">11월 가장 인기 많은 베스트 큐브를 만나보세요</p>
</div>
<p class="total">모두 보기(6)</p>
</div>
<div class="container">
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">퍼펙트 큐브</h3>
<h3 class="price">125,000원</h3>
<p>내몸에 흐르는 탱탱분자! 힝알루론산과 콜라겐을 동시에! 새콤달콤 고농축 뷰티 앰플</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">퍼펙트 큐브</h3>
<h3 class="price">125,000원</h3>
<p>내몸에 흐르는 탱탱분자! 힝알루론산과 콜라겐을 동시에! 새콤달콤 고농축 뷰티 앰플</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">퍼펙트 큐브</h3>
<h3 class="price">125,000원</h3>
<p>내몸에 흐르는 탱탱분자! 힝알루론산과 콜라겐을 동시에! 새콤달콤 고농축 뷰티 앰플</p>
</div>
</div>
</section>
<section class="s2">
<div class="title">
<h2>진행 중인 이벤트</h2>
<p class="total">모두 보기(4)</p>
</div>
<div class="container">
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">오직 큐브미에서만!</h3>
<p>큐브미 공식몰 OPEN EVENT</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">오직 큐브미에서만!</h3>
<p>큐브미 공식몰 OPEN EVENT</p>
</div>
</div>
</section>
<div class="s3">
<div class="icon">
<i class="fa-solid fa-hippo"></i>
</div>
<div class="text-box">
<div class="button">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<h2>We're Making Headlines</h2>
<p>cubeme</p>
</div>
</div>
<section class="s4">
<h2>이 상품 어때요?</h2>
<p>언제나 간편하고 즐겁게, 큐브미</p>
<div class="container">
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">워터뱅크 큐브</h3>
<h3 class="price">36,000원</h3>
<p>물, 마시지마세요 속부터 차오르는 리얼 보습 히알루론산</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">워터뱅크 큐브</h3>
<h3 class="price">36,000원</h3>
<p>물, 마시지마세요 속부터 차오르는 리얼 보습 히알루론산</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">워터뱅크 큐브</h3>
<h3 class="price">36,000원</h3>
<p>물, 마시지마세요 속부터 차오르는 리얼 보습 히알루론산</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">워터뱅크 큐브</h3>
<h3 class="price">36,000원</h3>
<p>물, 마시지마세요 속부터 차오르는 리얼 보습 히알루론산</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">워터뱅크 큐브</h3>
<h3 class="price">36,000원</h3>
<p>물, 마시지마세요 속부터 차오르는 리얼 보습 히알루론산</p>
</div>
</div>
</section>
<section class="s5">
<div class="title">
<div class="text-box">
<h2>Magazine</h2>
<p>어디에도 없는 큐브의 웰니스 이야기</p>
</div>
<p class="total">모두 보기(3)</p>
</div>
<div class="container">
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">콜라겐처럼 탱탱 쫀쫀한 '요즘' 메이크업</h3>
<p>코로나 이후 급부상한 쌩얼 트렌드 맨 얼굴이 피부에 더 좋을 수 있지만 풀메이크업이 일상이었다면 적잖아 당황스러울거 같아요</p>
<div class="tag">
<span>#콜라겐</span>
<span>#메이크업</span>
<span>#skin</span>
</div>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">콜라겐처럼 탱탱 쫀쫀한 '요즘' 메이크업</h3>
<p>코로나 이후 급부상한 쌩얼 트렌드 맨 얼굴이 피부에 더 좋을 수 있지만 풀메이크업이 일상이었다면 적잖아 당황스러울거 같아요</p>
<div class="tag">
<span>#콜라겐</span>
<span>#메이크업</span>
<span>#skin</span>
</div>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<h3 class="title">콜라겐처럼 탱탱 쫀쫀한 '요즘' 메이크업</h3>
<p>코로나 이후 급부상한 쌩얼 트렌드 맨 얼굴이 피부에 더 좋을 수 있지만 풀메이크업이 일상이었다면 적잖아 당황스러울거 같아요</p>
<div class="tag">
<span>#콜라겐</span>
<span>#메이크업</span>
<span>#skin</span>
</div>
</div>
</div>
</section>
</main>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<title>Document</title>
<style>
body,h1,h2,h3,h4,p{margin: 0;}
img{width: 100%; object-fit: cover; display: block;}
header{height: 70vh; position: relative;}
header img{width: 100%; height: 100%; object-fit: cover;}
header nav{position: absolute; left: 0; top: 0; background-color: #fff;
width: 100%; height: 70px; display: flex; justify-content: space-between;
padding: 0 50px; box-sizing: border-box; align-items: center;
}
header nav .ham{width: 150px; font-size: 32px; display: none;}
header nav .logo, header nav .login{width: 150px;}
header nav .menu{display: flex; gap: 60px;}
header nav .login{display: flex; justify-content: flex-end; gap: 30px; align-items: center;}
header nav .login p{padding: 5px 20px; border: 1px solid #000;}
main .s1{display: flex;}
main .s1 img{height: 60vh;}
main .s1 .item{position: relative; }
main .s1 .item .text-box{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
color: #fff;
}
main .s1 .item h2{margin-bottom: 35vh;}
main .s1 .item .button{width: fit-content; margin: 0 auto;
padding: 5px 20px;
text-align: center; background-color: #000a;
}
.s2{
position: relative;
}
.s2 img{
height: 50vh;
}
.s2 .text-box{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.s2 .text-box h1{
font-size: 52px;
}
.s2 .text-box h3{
font-size: 32px;
}
.s2 .text-box p{
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
}
.s2 .text-box .button{
width: fit-content;
margin: 0 auto;
font-size: 20px;
font-weight: 600;
padding: 5px 60px;
border: 2px solid #0006;
border-radius: 10px 0px 10px 0px;
background-color: #fff7;
}
.s3{display: flex;}
.s3 img{height: 30vh;}
.s3 .item{width: 50%; position: relative;}
.s3 .item .text-box{position: absolute; left:60px; top: 50%;
transform: translateY(-50%); color: #fff; font-weight: 600;
width: 70%; font-size: 14px;
}
.s3 .item .text-box .title{
margin: 20px 0px; font-size: 18px;
}
.s4{
padding: 50px 150px;
}
.s4 h2{
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 12px;
}
.s4 h2 span:nth-child(2){
font-size: 12px;
}
.s4 .container{
display: flex;
justify-content: space-between;
}
.s4 .container:nth-child(2){
margin-bottom: 40px;
}
.s4 .container .item{
width: calc((100% - 20px)/3);
}
.s4 .container .item img{
height: 250px;
}
.s5{
padding: 200px 0px 50px; box-sizing: border-box;
}
.s5 h2{
text-align: center;
margin-bottom: 20px;
}
.s5 .container{
display: flex;
justify-content: space-between;
height: 50vh;
}
.s5 .container .item{
width: calc((100% - 80px)/5);
height: 90%;
}
.s5 .container .item:first-child,
.s5 .container .item:last-child{
opacity: 0.3;
}
.s5 .container .item:nth-child(2n - 1){
align-self: flex-end;
}
.s5 .container .item img{
height: 80%;
}
@media(max-width:1100px){
header nav .menu{gap: 10px;}
}
@media(max-width:700px){
header nav{padding: 0 20px;}
header nav .ham{display: block;}
header nav .menu{display: none;}
header nav .logo{text-align: center;}
header nav .login p{display: none;}
header nav .login i{font-size: 26px;}
}
</style>
</head>
<body>
<div class="wrap">
<header>
<img src="im1.jpg" alt="">
<nav>
<div class="ham">
<i class="fa-solid fa-bars"></i>
</div>
<div class="logo">
<h3>FORENA</h3>
<p>한화포레나</p>
</div>
<div class="menu">
<p>브랜드</p>
<p>분양정보</p>
<p>현장/입주정보</p>
<p>프리미엄</p>
<p>커뮤니티</p>
<p>고객센터</p>
</div>
<div class="login">
<p>로그인</p>
<i class="fa-solid fa-magnifying-glass"></i>
</div>
</nav>
</header>
<main>
<section class="s1">
<div class="item">
<img src="im1.jpg" alt="">
<div class="text-box">
<h2>고양 더샵포레나</h2>
<div class="button">분양중</div>
</div>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<div class="text-box">
<h2>고양 더샵포레나</h2>
<div class="button">분양중</div>
</div>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<div class="text-box">
<h2>고양 더샵포레나</h2>
<div class="button">분양중</div>
</div>
</div>
</section>
<section class="s2">
<img src="im2.jpg" alt="">
<div class="text-box">
<h1>FORENA</h1>
<h3>한화포레나</h3>
<p>has been the industry's standard dummy text ever since the 1500s, when an unknown<br>printer took a galley of type and scrambled</p>
<div class="button">
브랜드 스토리
<span>→</span>
</div>
</div>
</section>
<section class="s3">
<div class="item">
<img src="im1.jpg" alt="">
<div class="text-box">
<p>BI</p>
<p class="title">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
</p>
<p>VIEW MORE</p>
</div>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<div class="text-box">
<p>BI</p>
<p class="title">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
</p>
<p>VIEW MORE</p>
</div>
</div>
</section>
<section class="s4">
<h2>
<span>포레나 뉴스</span>
<span>VIEW MORE</span>
</h2>
<div class="container">
<div class="item">
<p>2025.05.28</p>
<h4>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots</h4>
</div>
<div class="item">
<p>2025.05.28</p>
<h4>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots</h4>
</div>
<div class="item">
<p>2025.05.28</p>
<h4>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots</h4>
</div>
</div>
<h2>
<span>포레나 채널</span>
<span>VIEW MORE</span>
</h2>
<div class="container">
<div class="item">
<img src="im1.jpg" alt="">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots</p>
</div>
</div>
</section>
<section class="s5">
<h2>포레나 갤러리</h2>
<div class="container">
<div class="item">
<img src="im1.jpg" alt="">
<p>한화 포레나 포항</p>
</div>
<div class="item">
<img src="im2.jpg" alt="">
<p>한화 포레나 포항</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<p>한화 포레나 포항</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<p>한화 포레나 포항</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<p>한화 포레나 포항</p>
</div>
</div>
</section>
</main>
</div>
</body>
</html>
■ 5월 29일 - 11일차
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<title>Document</title>
<style>
body,h1,h2,h3,h4,p{margin: 0;}
img{width: 100%; object-fit: cover; display: block;}
header{height: 70vh; position: relative;}
header img{width: 100%; height: 100%; object-fit: cover;}
header nav{position: absolute; left: 0; top: 0; background-color: #fff;
width: 100%; height: 70px; display: flex; justify-content: space-between;
padding: 0 50px; box-sizing: border-box; align-items: center;
}
header nav .ham{width: 150px; font-size: 32px; display: none;}
header nav .logo, header nav .login{width: 150px;}
header nav .menu{display: flex; gap: 60px;}
header nav .login{display: flex; justify-content: flex-end; gap: 30px; align-items: center;}
header nav .login p{padding: 5px 20px; border: 1px solid #000;}
main .s1{display: flex;}
main .s1 img{height: 60vh;}
main .s1 .item{position: relative; }
main .s1 .item .text-box{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
color: #fff;
}
main .s1 .item h2{margin-bottom: 35vh;}
main .s1 .item .button{width: fit-content; margin: 0 auto;
padding: 5px 20px;
text-align: center; background-color: #000a;
}
.s2{
position: relative;
}
.s2 img{
height: 50vh;
}
.s2 .text-box{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.s2 .text-box h1{
font-size: 52px;
}
.s2 .text-box h3{
font-size: 32px;
}
.s2 .text-box p{
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
}
.s2 .text-box .button{
width: fit-content;
margin: 0 auto;
font-size: 20px;
font-weight: 600;
padding: 5px 60px;
border: 2px solid #0006;
border-radius: 10px 0px 10px 0px;
background-color: #fff7;
}
.s3{display: flex;}
.s3 img{height: 30vh;}
.s3 .item{width: 50%; position: relative;}
.s3 .item .text-box{position: absolute; left:60px; top: 50%;
transform: translateY(-50%); color: #fff; font-weight: 600;
width: 70%; font-size: 14px;
}
.s3 .item .text-box .title{
margin: 20px 0px; font-size: 18px;
}
.s4{
padding: 50px 150px;
}
.s4 h2{
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 12px;
}
.s4 h2 span:nth-child(2){
font-size: 12px;
}
.s4 .container{
display: flex;
justify-content: space-between;
}
.s4 .container:nth-child(2){
margin-bottom: 40px;
}
.s4 .container .item{
width: calc((100% - 20px)/3);
}
.s4 .container .item img{
height: 250px;
}
.s5{
padding: 200px 0px 50px; box-sizing: border-box;
}
.s5 h2{
text-align: center;
margin-bottom: 20px;
}
.s5 .container{
display: flex;
justify-content: space-between;
height: 50vh;
}
.s5 .container .item{
width: calc((100% - 80px)/5);
height: 90%;
}
.s5 .container .item:first-child,
.s5 .container .item:last-child{
opacity: 0.3;
}
.s5 .container .item:nth-child(2n - 1){
align-self: flex-end;
}
.s5 .container .item img{
height: 80%;
}
@media(max-width:1100px){
header nav .menu{gap: 10px;}
}
@media(max-width:1020px){
.s3 .item .text-box{
text-align: center;
left: 50%;
transform: translate(-50%, -50%);
}
.s5 .container .item:first-child,
.s5 .container .item:last-child{
display: none;
}
.s5 .container .item{
width: calc((100% - 40px)/3);
}
}
@media(max-width:700px){
header nav{padding: 0 20px;}
header nav .ham{display: block;}
header nav .menu{display: none;}
header nav .logo{text-align: center;}
header nav .login p{display: none;}
header nav .login i{font-size: 26px;}
main .s1 .item .text-box{
width: 90%; text-align: center;
}
.s2 .text-box{
width: 90%;
}
.s3{
flex-direction: column;
}
.s3 .item{
width: 100%;
}
.s4{
padding: 50px 10px;
}
}
@media(max-width:500px){
main .s1{
flex-direction: column;
}
main .s1 .item:last-child{
display: none;
}
.s4 .container{
flex-direction: column;
}
.s4 .container .item{
width: 100%;
}
.s4 .container .item:last-child{
display: none;
}
}
</style>
</head>
<body>
<div class="wrap">
<header>
<img src="im1.jpg" alt="">
<nav>
<div class="ham">
<i class="fa-solid fa-bars"></i>
</div>
<div class="logo">
<h3>FORENA</h3>
<p>한화포레나</p>
</div>
<div class="menu">
<p>브랜드</p>
<p>분양정보</p>
<p>현장/입주정보</p>
<p>프리미엄</p>
<p>커뮤니티</p>
<p>고객센터</p>
</div>
<div class="login">
<p>로그인</p>
<i class="fa-solid fa-magnifying-glass"></i>
</div>
</nav>
</header>
<main>
<section class="s1">
<div class="item">
<img src="im1.jpg" alt="">
<div class="text-box">
<h2>고양 더샵포레나</h2>
<div class="button">분양중</div>
</div>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<div class="text-box">
<h2>고양 더샵포레나</h2>
<div class="button">분양중</div>
</div>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<div class="text-box">
<h2>고양 더샵포레나</h2>
<div class="button">분양중</div>
</div>
</div>
</section>
<section class="s2">
<img src="im2.jpg" alt="">
<div class="text-box">
<h1>FORENA</h1>
<h3>한화포레나</h3>
<p>has been the industry's standard dummy text ever since the 1500s, when an unknown<br>printer took a galley of type and scrambled</p>
<div class="button">
브랜드 스토리
<span>→</span>
</div>
</div>
</section>
<section class="s3">
<div class="item">
<img src="im1.jpg" alt="">
<div class="text-box">
<p>BI</p>
<p class="title">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
</p>
<p>VIEW MORE</p>
</div>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<div class="text-box">
<p>BI</p>
<p class="title">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
</p>
<p>VIEW MORE</p>
</div>
</div>
</section>
<section class="s4">
<h2>
<span>포레나 뉴스</span>
<span>VIEW MORE</span>
</h2>
<div class="container">
<div class="item">
<p>2025.05.28</p>
<h4>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots</h4>
</div>
<div class="item">
<p>2025.05.28</p>
<h4>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots</h4>
</div>
<div class="item">
<p>2025.05.28</p>
<h4>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots</h4>
</div>
</div>
<h2>
<span>포레나 채널</span>
<span>VIEW MORE</span>
</h2>
<div class="container">
<div class="item">
<img src="im1.jpg" alt="">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots</p>
</div>
</div>
</section>
<section class="s5">
<h2>포레나 갤러리</h2>
<div class="container">
<div class="item">
<img src="im1.jpg" alt="">
<p>한화 포레나 포항</p>
</div>
<div class="item">
<img src="im2.jpg" alt="">
<p>한화 포레나 포항</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<p>한화 포레나 포항</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<p>한화 포레나 포항</p>
</div>
<div class="item">
<img src="im1.jpg" alt="">
<p>한화 포레나 포항</p>
</div>
</div>
</section>
</main>
</div>
</body>
</html>
■ 6월 5일 - 15일차
<!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/6.7.2/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body, h1, h2, h3, h4, p{
margin: 0;
font-family: "Roboto", serif;
}
h2{
font-size: 3.2em;
}
img{
width: 100px;
height: 100px;
object-fit: cover;
}
.wrap{
--bgc : #15111b;
}
/* 해더 부분 */
header{
height: 100vh;
position: relative;
background-color: #00000066;
}
header > img{
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
object-position: center bottom;
}
header > .soc{
box-sizing: border-box;
height: 5vh;
border-bottom: 1px solid #ffffffcc;
padding: 0 10%;
font-size: 1.4em;
align-content: center;
color: #ffffffcc;
}
header > .soc > i{
margin-right: 20px;
}
header > nav{
height: 10vh;
padding: 0 10%;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
}
header > nav > .logo{
width: 25%;
align-content: center;
font-size: 2em;
}
header > nav > .logo > .logo{
display: inline-block;
}
header > nav > .menu-box{
width: 60%;
display: flex;
justify-content: space-between;
font-size: 1.2em;
}
header > nav > .menu-box > .menu{
width: 80%;
display: flex;
justify-content: space-between;
}
header > nav > .menu-box > .menu-i{
width: 10%;
display: flex;
justify-content: space-between;
}
header > .h-m{
height: 85vh;
color: #fff;
text-align: center;
align-content: center;
}
header > .h-m > h1{
font-size: 4.8em;
text-transform: capitalize;
margin-bottom: 0.4em;
}
header > .h-m > p:nth-child(2){
margin-bottom: 0.6em;
}
header > .h-m > p:nth-child(3){
margin-bottom: 4em;
}
header > .h-m > .button{
width: 440px;
border-radius: 28px;
height: 58px;
color: #000;
font-size: 1.6em;
font-weight: 700;
text-transform: uppercase;
align-content: center;
margin: 0 auto;
background-color: #fff;
}
header > .h-m > .button:hover{
cursor: pointer;
background-color: #000000aa;
color: #fff;
}
header > .h-m > .button:hover > i{
transition: transform 1s;
transform: rotate(90deg);
}
.section1{
background-color: var(--bgc);
color: #fff;
box-sizing: border-box;
padding: 5% 15%;
}
.section1 > .container{
display: flex;
gap: 5%;
align-items: center;
}
.section1 > .container > .item{
width: calc((100% - 10%)/3);
}
.section1 > .container > .item > .text-box{
display: flex;
align-items: center;
gap: 10px;
}
.section1 .text-box > p:first-child{
font-size: 10em;
font-weight: 800;
color: #ffe15e;
}
.section1 .text-box > p:last-child{
line-height: 2.1;
font-size: 1.4em;
}
.section1 > .container > .item:nth-child(2) > p{
color: #ffe15e;
margin-bottom: 12px;
}
.section1 > .container > .item > .button{
background-color: #ffffffcc;
color: #000;
font-size: 1.4em;
font-weight: 600;
text-align: center;
align-content: center;
width: 80%;
height: 40px;
border-radius: 12px;
}
.section1 > .container > .item:nth-child(3) > p{
margin-bottom: 48px;
}
.section2{
padding: 3%;
background-color: var(--bgc);
}
.section2 > .container {
display: flex;
gap: 24px;
}
.section2 > .container > .item{
width: calc((100% - 72px)/4);
position: relative;
overflow: hidden;
cursor: pointer;
}
.section2 > .container > .item:hover > .text-box{
transition: 800ms;
left: 0;
}
.section2 > .container > .item > .img-box > img{
width: 100%;
aspect-ratio: 1 / 1.5;
height: auto;
vertical-align: top;
}
.section2 > .container > .item > h4{
position: absolute;
left: 24px;
top: 24px;
z-index: 1;
text-transform: capitalize;
line-height: 1.6;
color: #fff;
text-shadow: 2px 2px 6px #000;
}
.section2 > .container > .item > .text-box{
position: absolute;
width: 100%;
height: 100%;
left: -100%;
top: 0;
background-color: #00000044;
color: #fff;
}
.section2 > .container > .item > .text-box > p:nth-child(1){
position: absolute;
left: 24px;
bottom: 72px;
}
.section2 > .container > .item > .text-box > p:nth-child(2){
position: absolute;
left: 24px;
bottom: 24px;
}
.section3{
padding: 3% 10%;
background-color: var(--bgc);
color: #fff;
}
.section3 > p{
color: #ffe15e;
margin-bottom: 0.6em;
text-transform: uppercase;
}
.section3 > h2{
margin-bottom: 2em;
text-transform: capitalize;
}
.section3 > .container{
display: flex;
gap: 5%;
text-align: center;
}
.section3 > .container > .item{
width: calc((100% - 15%)/4);
}
.section3 > .container > .item > .icon{
font-size: 3em;
margin-bottom: 0.8em;
}
.section3 > .container > .item > .icon > i{
background-color: #726683;
width: 30%;
aspect-ratio: 1;
align-content: center;
border-radius: 50%;
}
.section3 > .container > .item > h4{
margin-bottom: 1.2em;
}
.section3 > .container > .item > p{
color: #726683;
line-height: 1.4;
}
.section4{
position: relative;
background-color: var(--bgc);
color: #fff;
padding: 0% 3%;
}
.section4 > img{
width: 100%;
height: 60vh;
object-fit: cover;
filter: saturate(80%) contrast(120%);
}
.section4 > .text-box{
position: absolute;
top: 50%;
left: 10%;
transform: translateY(-50%);
}
.section4 > .text-box > p:first-child{
color: #ffe15e;
text-shadow: 1px 1px 3px #000;
text-transform: uppercase;
margin-bottom: 1.2em;
}
.section4 > .text-box > h2{
text-shadow: 3px 3px 12px #000;
margin-bottom: 0.6em;
}
.section4 > .text-box > p:nth-child(3){
margin-bottom: 2em;
}
.section4 > .text-box > .button{
width: 200px;
height: 46px;
color: #000;
font-size: 1.2em;
align-content: center;
text-align: center;
border-radius: 10px;
background-color: #fff;
}
.section5{
background-color: var(--bgc);
color: #b1b1b1;
padding: 3% 10%;
}
.section5 > .container{
display: flex;
justify-content: space-between;
}
.section5 > .container > .item{
display: flex;
align-items: center;
}
.section5 > .container > .item:hover{
color: #fff;
cursor: pointer;
}
.section5 > .container > .item > .icon{
font-size: 1.8em;
margin-right: 10px;
}
.section5 > .container > .item > .text-box > p{
font-size: 0.6em;
text-align: center;
}
.section6{
padding: 3% 10%;
background-color: var(--bgc);
color: #fff;
text-align: center;
}
.section6 > p:first-child{
color: #ffe15e;
text-transform: uppercase;
margin-bottom: 1em;
}
.section6 > h2{
margin-bottom: 0.6em;
}
.section6 > p:nth-child(3){
margin-bottom: 3em;
}
.section6 > .container{
display: flex;
flex-wrap: wrap;
gap: 3%;
}
.section6 > .container > .item{
width: calc((100% - 6%)/3);
aspect-ratio: 1 / 0.6;
height: auto;
margin-bottom: 3%;
overflow: hidden;
}
.section6 > .container > .item:hover > img{
cursor: pointer;
transform: scale(1.1);
transition: 0.5s;
}
.section6 > .container > .item > img{
width: 100%;
height: 100%;
object-fit: cover;
vertical-align: top;
}
@media (max-width: 1200px){
body{
font-size: 14px;
}
header > nav > .logo{
width: 230px;
}
header > nav > .menu-box{
width: 80%;
}
header > nav > .menu-box > .menu-i{
width: 15%;
}
.section1{
font-size: 0.6em;
}
.section2 > .container > .item:last-child{
display: none;
}
.section2 > .container > .item{
width: calc((100% - 48px)/3);
}
.section3 .container,
.section5 .container{
font-size: 0.8em;
}
}
@media (max-width: 768px){
header > nav > .menu-box{
justify-content: end;
}
header > nav > .menu-box > .menu{
display: none;
}
header > nav > .menu-box > .menu-i{
width: 25%;
}
.section1{
font-size: 1em;
padding: 5%;
}
.section1 > .container > .item{
width: calc((100% - 5%)/2);
}
.section1 > .container > .item:last-child{
display: none;
}
.section2 > .container > .item{
width: calc((100% - 24px)/2);
}
.section2 > .container > .item:nth-child(3){
display: none;
}
.section3 > .container{
flex-wrap: wrap;
}
.section3 > .container > .item{
width: calc((100% - 5%)/2);
margin-bottom: 5%;
}
.section3 > .container > .item > .icon > i{
width: 22%;
}
.section5 > .container > .item{
font-size: 1.2em;
}
.section5 > .container > .item:nth-last-child(-n + 2){
display: none;
}
.section6 > .container > .item{
width: calc((100% - 3%) / 2);
}
}
@media (max-width: 500px){
header > nav{
display: block;
align-content: center;
}
header > nav > .menu-box{
display: none;
}
.section1 > .container{
flex-wrap: wrap;
}
.section1 > .container > .item:last-child{
display: block;
}
.section1 > .container > .item{
width: 100%;
margin-bottom: 4%;
}
.section2 > .container,
.section3 > .container
{
flex-wrap: wrap;
}
.section2 > .container > .item,
.section3 > .container > .item,
.section6 > .container > .item{
width: 100%;
font-size: 1.4em;
}
.section2 > .container > .item:nth-child(n + 3){
display: block;
}
.section5 > .container{
display: flex;
flex-direction: column;
align-items: center;
font-size: 1.4em;
}
.section5 > .container > .item{
margin-bottom: 5%;
}
.section5 > .container > .item > .text-box > p{
text-align: left;
}
.section5 > .container > .item:nth-child(n + 3){
display: flex;
}
}
</style>
</head>
<body>
<div class="wrap">
<header>
<img src="h-1.jpg" alt="">
<div class="soc">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-tiktok"></i>
<i class="fa-brands fa-discord"></i>
</div>
<nav>
<div class="logo">
<i class="fa-brands fa-slack"></i>
<p class="logo">HOMEPAGE</p>
</div>
<div class="menu-box">
<div class="menu">
<div>HOME</div>
<div>PRODUCTS</div>
<div>SHOP</div>
<div>BLOG</div>
<div>ABOUT</div>
<div>CONTACT</div>
</div>
<div class="menu-i">
<i class="fa-regular fa-user"></i>
<i class="fa-solid fa-magnifying-glass"></i>
<i class="fa-regular fa-clipboard"></i>
</div>
</div>
</nav>
<div class="h-m">
<h1>Lorem Ipsum is<br> not simply random text</h1>
<p>The standard chunk of Lorem</p>
<p>randomised words which</p>
<div class="button">Duis fringilla maximus <i class="fa-solid fa-arrow-right"></i> </div>
</div>
</header>
<div class="section1">
<div class="container">
<div class="item">
<div class="text-box">
<p>24</p>
<p>vestibulum<br>sit amet<br> elit</p>
</div>
</div>
<div class="item">
<p>ABOUT US</p>
<h2>Mauris pretium<br>commo diam<br> ut tempor</h2>
</div>
<div class="item">
<p>Nam sollicitudin leo a enim viverra, vitae dignissim nisi viverra. Vivamus sagittis leo eget lacinia iaculis. Nam tincidunt augue eget felis pretium, et fringilla eros tincidunt. Sed molestie, nibh non gravida vehicula</p>
<div class="button">Cras bibendum purus</div>
</div>
</div>
</div>
<div class="section2">
<div class="container">
<div class="item">
<div class="img-box">
<img src="st2-1.jpg" alt="">
</div>
<h4>dignissim<br> nisi viverra</h4>
<div class="text-box">
<p>Phasellus dolor ex, vestibulum sit amet<br> elit in, congue elementum sem.</p>
<p>Mauris pretium</p>
</div>
</div>
<div class="item">
<div class="img-box">
<img src="st2-2.jpg" alt="">
</div>
<h4>Nam sollicitudin<br>elementum</h4>
<div class="text-box">
<p>Proin auctor viverra odio, et finibus<br> magna fringilla eu. Fusce eu rutrum ligula.</p>
<p>commodo diam</p>
</div>
</div>
<div class="item">
<div class="img-box">
<img src="st2-3.jpg" alt="">
</div>
<h4>Morbi eu nibh<br> fringilla</h4>
<div class="text-box">
<p> Vivamus sagittis leo eget lacinia<br> iaculis. Nam tincidunt augue</p>
<p>vitae dignissim</p>
</div>
</div>
<div class="item">
<div class="img-box">
<img src="st2-4.jpg" alt="">
</div>
<h4>dignissim<br> nisi viverra</h4>
<div class="text-box">
<p>consectetur adipiscing elit.<br> Proin auctor viverra odio, et finibus magna fringilla eu.</p>
<p>Nullam congue neque</p>
</div>
</div>
</div>
</div>
<div class="section3">
<p>Vestibulum fermentum</p>
<h2>Aliquam et quam at risus<br>vestibulum tempus</h2>
<div class="container">
<div class="item">
<div class="icon">
<i class="fa-brands fa-wordpress"></i>
</div>
<h4>maximus massa</h4>
<p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis elit nulla, viverra at dignissim a, vestibulum quis purus. Aenean ut purus mattis eros dignissim sodales eget vel ipsum.</p>
</div>
<div class="item">
<div class="icon">
<i class="fa-brands fa-stack-overflow"></i>
</div>
<h4>Vestibulum fermentum</h4>
<p>ellentesque commodo rhoncus metus, ut bibendum sem ullamcorper vitae. Suspendisse quis rutrum arcu. Donec tempus at quam non placerat. Sed sapien orci, consequat et arcu sit amet, rutrum molestie augue.</p>
</div>
<div class="item">
<div class="icon">
<i class="fa-solid fa-eye"></i>
</div>
<h4>Donec porta ante</h4>
<p>Nullam iaculis, odio eu ultricies scelerisque, sapien neque lacinia arcu, ut fringilla purus ipsum at lacus. Phasellus non luctus justo.</p>
</div>
<div class="item">
<div class="icon">
<i class="fa-regular fa-snowflake"></i>
</div>
<h4>Vestibulum ac lectus</h4>
<p>Sed sollicitudin purus ac velit porttitor, non accumsan neque feugiat. Curabitur tristique laoreet turpis, non rutrum mi pharetra a. Vivamus pretium egestas neque, et mattis ante suscipit sit amet</p>
</div>
</div>
</div>
<div class="section4">
<img src="st4.jpg" alt="">
<div class="text-box">
<p>habitasse platea</p>
<h2>Nam pharetra,<br> eros et consequat ornare</h2>
<p>tiam nec tempor tellus, non imperdiet tellus.<br> Nam hendrerit felis sit amet augue ultrices, et vehicula orci accumsan<br>Donec viverra dignissim justo eu eleifend</p>
<div class="button">MORE CLICK <i class="fa-regular fa-circle-right"></i></div>
</div>
</div>
<div class="section5">
<div class="container">
<div class="item">
<div class="icon">
<i class="fa-solid fa-briefcase"></i>
</div>
<div class="text-box">
<h4>Vestibulum ac lectus</h4>
<p>Morbi rhoncus sapien</p>
</div>
</div>
<div class="item">
<div class="icon">
<i class="fa-solid fa-flask"></i>
</div>
<div class="text-box">
<h4>Phasellus eu</h4>
</div>
</div>
<div class="item">
<div class="icon">
<i class="fa-solid fa-handshake"></i>
</div>
<div class="text-box">
<h4>Suspendisse </h4>
<p>eros et consequat</p>
</div>
</div>
<div class="item">
<div class="icon">
<i class="fa-solid fa-binoculars"></i>
</div>
<div class="text-box">
<h4>imperdiet tellus</h4>
<p>Mauris varius ante non</p>
</div>
</div>
<div class="item">
<div class="icon">
<i class="fa-solid fa-earth-americas"></i>
</div>
<div class="text-box">
<h4>Fusce imperdiet</h4>
<p>itae sollicitudin dolor dapibus</p>
</div>
</div>
</div>
</div>
<div class="section6">
<p>Sed sollicitudin</p>
<h2>Vestibulum dapibus, varius</h2>
<p>Suspendisse rhoncus luctus dolor bibendum malesuada. Nullam egestas dui mi,<br> vitae sollicitudin dolor dapibus id.</p>
<div class="container">
<div class="item">
<img src="st6-1.jpg" alt="">
</div>
<div class="item">
<img src="st6-2.jpg" alt="">
</div>
<div class="item">
<img src="st6-3.jpg" alt="">
</div>
<div class="item">
<img src="st6-4.jpg" alt="">
</div>
<div class="item">
<img src="st6-5.jpg" alt="">
</div>
<div class="item">
<img src="st6-6.jpg" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
'Web 수업자료 > Web 정규' 카테고리의 다른 글
| Web 4 25-05 (0) | 2025.05.13 |
|---|---|
| 웹 디자인 2 25-05 (1) | 2025.05.13 |
| Web 3 25-04 (0) | 2025.04.10 |
| 웹 디자인 1 25-04 (1) | 2025.04.10 |
| Web 2 25-04 (0) | 2025.04.09 |