■ 이전 교육
<!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>
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
.wrap{
width: 1000px;
height: 650px;
background-color: red;
display: flex;
}
header{
width: 20%;
background-color: #fff;
}
.logo{
height: 20%;
background-color: aquamarine;
}
nav{
height: 80%;
background-color: #ccc;
}
.menu{
width: 80%;
margin: 0 auto;
}
.menu > li{
position: relative;
}
.menu > li > a{
text-align: center;
width: 100%;
height: 50px;
display: inline-block;
font-size: 20px;
align-content: center;
background-color: #fff;
}
.menu > li:hover >.submenu{
display: block;
}
.submenu{
display: none;
position: absolute;
width: 100%;
left: 100%;
top: 0;
}
.submenu > li > a{
display: inline-block;
width: 100%;
height: 40px;
background-color: #fff;
text-align: center;
align-content: center;
}
main{
width: 80%;
background-color: aquamarine;
}
.contents{
height: 350px;
background-color: blueviolet;
}
section{
height: 200px;
background-color: chocolate;
}
footer{
height: 100px;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="logo"></div>
<nav>
<ul class="menu">
<li>
<a href="#">메뉴1</a>
<ul class="submenu">
<li><a href="#">서브메뉴1-1</a></li>
<li><a href="#">서브메뉴1-2</a></li>
<li><a href="#">서브메뉴1-3</a></li>
<li><a href="#">서브메뉴1-4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴2</a>
<ul class="submenu">
<li><a href="#">서브메뉴2-1</a></li>
<li><a href="#">서브메뉴2-2</a></li>
<li><a href="#">서브메뉴2-3</a></li>
<li><a href="#">서브메뉴2-4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴3</a>
<ul class="submenu">
<li><a href="#">서브메뉴3-1</a></li>
<li><a href="#">서브메뉴3-2</a></li>
<li><a href="#">서브메뉴3-3</a></li>
<li><a href="#">서브메뉴3-4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴4</a>
<ul class="submenu">
<li><a href="#">서브메뉴4-1</a></li>
<li><a href="#">서브메뉴4-2</a></li>
<li><a href="#">서브메뉴4-3</a></li>
<li><a href="#">서브메뉴4-4</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<main>
<div class="contents"></div>
<section></section>
<footer></footer>
</main>
</div>
</body>
</html>
■ Web 1일차 11-12
<!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>
ul{
padding: 0;
margin: 0;
list-style: none;
}
.wrap{
width: 80%;
margin: 0 auto;
}
header{
height: 100px;
display: flex;
background-image: url(mirroring-4661419_1280.jpg);
background-size: 100%;
background-position: center;
}
header > .logo{
width: 20%;
font-size: 42px;
text-align: center;
align-content: center;
}
header > nav{
width: 80%;
position: relative;
}
a{
text-decoration: none;
color: inherit;
}
.menu{
position: absolute;
right: 0px;
bottom: 0px;
width: 80%;
height: 50px;
display: flex;
z-index: 1;
}
.menu > li{
width: 25%;
}
.menu li > a{ /* li>a 로 되어 있는 모든것 공통*/
display: inline-block;
width: 100%;
text-align: center;
align-content: center;
background-color: #ffffff;
}
.menu > li > a{
height: 100%;
font-size: 20px;
}
.menu > li:hover > a{
background-color:#000;
color: #fff;
}
.menu:hover > li > .submenu{
display: block;
}
.submenu{
display: none;
}
.submenu > li > a{
height: 40px;
font-size: 18px;
}
.submenu > li:last-child{
height: 70px;
background-color: #fff;
}
.submenu > li:hover > a{
background-color: #000;
color: #fff;
}
.contents{
height: 300px;
position: relative;
}
.contents > img{
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
transition: 1s;
}
.contents > span{
position: absolute;
left: 50%;
top: 50%;
padding: 10px 20px;
font-size: 24px;
background-color: #ffffff99;
transform: translate(-50%, -50%);
border-radius: 10px;
opacity: 0;
}
.contents:hover > span{
opacity: 1;
transition: opacity 1s 1s;
}
.contents > span:hover{
background-color: #00000099;
color: #fff;
cursor: pointer;
}
.contents:hover > img:nth-child(2){
opacity: 0;
}
section{
height: 200px;
display: flex;
}
section > div{
width: calc(100% / 3);
}
.section1{
align-content: center;
position: relative;
}
section p{
margin: 0;
font-size: 30px;
margin-bottom: 20px;
text-align: center;
}
.section1 > .button:active ~ .i2{
opacity: 1;
}
.section1 > .button:hover{
cursor: pointer;
}
.section1 > img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.section1 > .i1{
opacity: 0.5;
}
.section1 > .i2{
opacity: 0;
}
section .button{
width: 100px;
height: 40px;
background-color: #000;
color: #fff;
text-align: center;
align-content: center;
margin: 0 auto;
}
.section2{
background-color: #ccc;
position: relative;
}
.section2 > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.section2 > .button{
position: absolute;
left: 50%;
bottom: 5px;
transform: translate(-50%);
}
.section3{
align-content: center;
padding-right: 20px;
box-sizing: border-box;
position: relative;
}
.section3 > p{
text-align: end;
}
.section3 > .button{
margin: 0;
margin-left: auto;
}
.section3 > .button:hover{
cursor: pointer;
}
.section3 > .button:active ~ img{
opacity: 1;
}
.section3 > img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0;
transition: 2s;
}
footer{
height: 100px;
background-color: #000;
}
</style>
<body>
<div class="wrap">
<header>
<div class="logo">LOGO</div>
<nav>
<ul class="menu">
<li>
<a href="#">메뉴1</a>
<ul class="submenu">
<li><a href="#">서브메뉴1-1</a></li>
<li><a href="#">서브메뉴1-2</a></li>
<li><a href="#">서브메뉴1-3</a></li>
<li><a href="#">서브메뉴1-4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴2</a>
<ul class="submenu">
<li><a href="#">서브메뉴2-1</a></li>
<li><a href="#">서브메뉴2-2</a></li>
<li><a href="#">서브메뉴2-3</a></li>
<li><a href="#">서브메뉴2-4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴3</a>
<ul class="submenu">
<li><a href="#">서브메뉴3-1</a></li>
<li><a href="#">서브메뉴3-2</a></li>
<li><a href="#">서브메뉴3-3</a></li>
<li><a href="#">서브메뉴3-4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴4</a>
<ul class="submenu">
<li><a href="#">서브메뉴4-1</a></li>
<li><a href="#">서브메뉴4-2</a></li>
<li><a href="#">서브메뉴4-3</a></li>
<li><a href="#">서브메뉴4-4</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="contents">
<img src="cologne-1884931_1280.jpg" alt="#">
<img src="maserati-1464806_1280.jpg" alt="#">
<span>Click</span>
</div>
<section>
<div class="section1">
<p>simply dummy text</p>
<div class="button">Click</div>
<img class="i1" src="skyline-1925943_640.jpg" alt="">
<img class="i2" src="mirroring-4661419_1280.jpg" alt="">
</div>
<div class="section2">
<img src="skyline-1925943_640.jpg" alt="">
<div class="button">Click</div>
</div>
<div class="section3">
<p>simply dummy text</p>
<div class="button">Click</div>
<img src="skyline-1925943_640.jpg" alt="">
</div>
</section>
<footer></footer>
</div>
</body>
</html>
■ Web 2일차 11-14
■ 폰트 적용
○ 구글폰트 적용
- 구글 폰트 사이트에서 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>
- 색 정보
■ Web 3일차 11-19
<!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;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
h1, p {
margin: 0;
}
.wrap{
}
header{
height: 700px;
display: flex;
}
header > .left{
width: 50%;
padding: 0 10%;
box-sizing: border-box;
}
header > .left > .contents{
height: 100%;
align-content: center;
position: relative;
}
header > .left > .contents > .logo{
font-size: 2em;
position: absolute;
top: 5%;
}
header > .left > .contents > h1{
font-size: 3em;
margin-bottom: 30px;
}
header > .left > .contents > .button{
font-size: 1.4em;
width: 180px;
height: 45px;
text-align: center;
align-content: center;
border-radius: 20px;
border: 3px solid #7a7878;
}
header > .left > .contents > .button:hover{
background-color: #b4afafa3;
cursor: pointer;
}
header > .right{
width: 50%;
background-color: #eee;
}
header > .right > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.section1{
height: 400px;
align-content: center;
}
.section1 > .contents{
width: 90%;
height: 80%;
margin: 0 auto;
display: flex;
}
.section1 > .contents > .left{
width: 60%;
border-right: 2px solid #7a7878;
align-content: center;
box-sizing: border-box;
padding-right: 30px;
}
.section1 > .contents > .left > h1{
font-size: 2.6em;
margin-bottom: 20px;
}
.section1 > .contents > .left > p:nth-child(2){
margin-bottom: 18px;
}
.section1 > .contents > .left > p{
font-size: 1.3em;
text-align: justify;
}
.section1 > .contents > .right{
width: 40%;
align-content: center;
/* border: 1px solid #000; */
}
.section1 > .contents > .right > .container{
width: 90%;
height: 90%;
margin: 0 auto;
}
.section1 > .contents > .right > .container > .box{
height: 50%;
display: flex;
}
.section1 > .contents > .right > .container > .box > .box-l{
width: 30%;
text-align: center;
align-content: center;
}
.section1 > .contents > .right > .container > .box > .box-l > img{
width: 80%;
height: 80%;
}
.section1 > .contents > .right > .container > .box > .box-r{
width: 70%;
align-content: center;
}
.section1 .container .box-r p:nth-child(1){
font-weight: 700;
margin-bottom: 10px;
}
.section2{
height: 700px;
align-content: center;
}
.section2 > h1{
font-size: 2.6em;
text-align: center;
margin-bottom: 16px;
}
.section2 > p{
width: 70%;
font-size: 1.2em;
text-align: center;
margin: 0 auto;
margin-bottom: 24px;
}
.section2 > img{
width: 80%;
height: 70%;
display: block;
margin: 0 auto;
}
.section3{
height: 300px;
text-align: center;
align-content: center;
}
.section3 > h1{
font-size: 2.6em;
margin-bottom: 16px;
}
.section3 > p{
font-size: 1.4em;
margin-bottom: 22px;
}
.section3 > .button{
width: 160px;
height: 50px;
align-content: center;
font-size: 1.4em;
border-radius: 40px;
margin: 0 auto;
background-color: #000;
}
.wrap > div:nth-child(2n){
background-color: #adbbe0;
color: #fff;
}
.section4{
height: 700px;
align-content: center;
position: relative;
}
.section4 > h1{
text-align: center;
font-size: 2.6em;
margin-bottom: 16px;
}
.section4 > p{
text-align: center;
font-size: 1.4em;
margin-bottom: 24px;
}
.section4 > .contents{
width: 80%;
height: 65%;
margin: 0 auto;
}
.section4 > .contents > div{
height: calc(50% - 10px);
display: flex;
justify-content: space-between;
}
.section4 > .contents > div:nth-child(1){
margin-bottom: 20px;
}
.section4 > .contents > div > div{
border-radius: 12px;
align-content: center;
padding: 0 20px;
box-sizing: border-box;
background-color: #fff;
}
.section4 > .contents > div > div > p:nth-child(1){
font-size: 1.4em;
margin-bottom: 16px;
}
.section4 > .contents > div > div > p:nth-child(2){
font-size: 1.1em;
margin-bottom: 16px;
}
.section4 > .contents > div > div > p:nth-child(3){
font-size: 1.1em;
}
.section4 > .contents > .top > .top-l{
width: calc(40% - 10px);
overflow: hidden;
padding: 0;
}
.section4 > .contents > .top > .top-l > img{
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: 0.8s;
}
.section4 > .contents > .top > .top-l > img:hover{
transform: scale(1.2);
cursor: pointer;
}
.section4 > .contents > .top > .top-r{
width: calc(60% - 10px);
}
.section4 > .contents > .bottom > .bottom-l{
width: calc(50% - 10px);
}
.section4 > .contents > .bottom > .bottom-r{
width: calc(50% - 10px);
}
.section4 > .st4{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
left: 0;
top: 0;
z-index: -1;
opacity: 0.7;
}
.section5{
height: 200px;
display: flex;
padding: 0 10%;
box-sizing: border-box;
}
.section5 > .box:nth-child(1){
font-size: 4em;
}
.section5 > .box{
width: calc(100% / 3);
align-content: center;
}
.section5 > .box li{
list-style: none;
height: 18%;
align-content: center;
font-size: 1.1em;
}
</style>
<body>
<div class="wrap">
<header>
<div class="left">
<div class="contents">
<div class="logo">LOGO</div>
<h1>Contrary<br>McClintock<br>looked<br>consectetur</h1>
<div class="button">More View</div>
</div>
</div>
<div class="right">
<img src="a2.jpg" alt="">
</div>
</header>
<div class="section1">
<div class="contents">
<div class="left">
<h1>majority</h1>
<p>anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary,</p>
<p>Content here, content here, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text</p>
</div>
<div class="right">
<div class="container">
<div class="box">
<div class="box-l">
<img src="a2.jpg" alt="">
</div>
<div class="box-r">
<p>There are many variations</p>
<p>ontrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece</p>
</div>
</div>
<div class="box">
<div class="box-l">
<img src="a2.jpg" alt="">
</div>
<div class="box-r">
<p>There are many variations</p>
<p>ontrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section2">
<h1>centuries</h1>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC</p>
<img src="buli.jpg" alt="">
</div>
<div class="section3">
<h1>Hampden-Sydney College in Virginia</h1>
<p>Lorem Ipsum passage, and going through the cites of the word<br>in classical literature, discovered the undoubtable source.</p>
<div class="button">Button</div>
</div>
<div class="section4">
<h1>Richard McClintock</h1>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. <br> of classical Latin literature from 45 BC</p>
<div class="contents">
<div class="top">
<div class="top-l">
<img src="building-1.jpg" alt="">
</div>
<div class="top-r">
<p>printing and typesetting</p>
<p>galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially</p>
<p>PageMaker</p>
</div>
</div>
<div class="bottom">
<div class="bottom-l">
<p>printing and typesetting</p>
<p>galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially</p>
<p>PageMaker</p>
</div>
<div class="bottom-r">
<p>printing and typesetting</p>
<p>galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially</p>
<p>PageMaker</p>
</div>
</div>
</div>
<img src="nyc-7924482_1280.jpg" alt="" class="st4">
</div>
<div class="section5">
<div class="box">
<div class="logo">LOGO</div>
</div>
<div class="box">
<li>essentially</li>
<li>sometimes</li>
<li>combined</li>
<li>passage</li>
<li>suffered</li>
</div>
<div class="box">
<li>essentially</li>
<li>sometimes</li>
<li>combined</li>
<li>passage</li>
<li>suffered</li>
</div>
</div>
</div>
</body>
</html>
■ Web 4일차 11-21
<!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;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
p{
margin: 0;
}
header{
height: 100px;
display: flex;
align-items: center;
padding: 0 5%;
justify-content: space-between;
}
.logo{
width: 10%;
height: 50px;
font-size: 36px;
text-align: center;
align-content: center;
}
.menu{
width: 50%;
height: 40px;
display: flex;
}
.menu > li{
width: 20%;
text-align: center;
align-content: center;
font-size: 1vw;
position: relative;
}
.menu > li:hover{
background-color: #999;
color: #fff;
cursor: pointer;
}
.menu:hover > li > .submenu{
display: block;
}
.menu > li > .submenu{
position: absolute;
text-align: center;
width: 100%;
top: 100%;
z-index: 1;
background-color: #fff;
display: none;
}
.menu > li > .submenu > li{
height: 40px;
align-content: center;
color: #000;
}
.menu > li > .submenu > li:hover{
background-color: #999;
color: #fff;
cursor: pointer;
}
.top-section{
height: 300px;
background-color: #ddd;
position: relative;
}
.top-section > .button{
width: 15%;
height: 50px;
background-color: #555;
font-size: 20px;
color: #fff;
text-align: center;
align-content: center;
position: absolute;
bottom: 70px;
left: 50%;
transform: translate(-50%);
}
.headline{
height: 300px;
align-content: center;
}
.headline > p{
text-align: center;
}
.headline > p:nth-child(1){
font-size: 42px;
font-weight: 800;
margin-bottom: 10px;
}
.headline > p:nth-child(2){
font-size: 26px;
font-style: italic;
margin-bottom: 38px;
}
.headline > p:nth-child(3){
font-size: 20px;
}
.pa-image{
height: 300px;
background-color: #ddd;
position: relative;
}
.pa-image > .button{
height: 80px;
width: 40px;
border-radius: 20px;
border: 3px solid #5f5f5f;
position: absolute;
top: 50%;
left: 50px;
transform: translate(0, -50%);
}
.ho-effect{
height: 450px;
display: flex;
align-items: center;
justify-content: space-around;
}
.ho-effect > .imgbox{
width: 27%;
height: 250px;
background-color: #ddd;
}
.ho-effect > .imgbox:hover{
background-color: #999;
}
.full-image{
height: 400px;
background-color: #ddd;
position: relative;
}
.full-image > .slide{
width: 100%;
height: 40px;
display: flex;
justify-content: space-between;
padding: 0 20px;
box-sizing: border-box;
align-items: center;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
.full-image > .slide > .button{
width: 30px;
height: 30px;
background-color: #999;
}
.full-image > .dotbox{
width: 70px;
height: 10px;
display: flex;
justify-content: space-between;
position: absolute;
bottom: 30px;
left: 50%;
transform: translate(-50%);
}
.full-image > .dotbox > .dot{
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #555;
}
.download{
height: 300px;
align-content: center;
}
.download > p:nth-child(1){
text-align: center;
font-size: 40px;
font-weight: 800;
margin-bottom: 15px;
}
.download > p:nth-child(2){
text-align: center;
font-size: 26px;
font-style: italic;
margin-bottom: 30px;
}
.download > .subbox{
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.download > .subbox > .box{
width: 31%;
height: 40px;
background-color: #555;
}
.footer{
height: 200px;
align-content: center;
background-color: #ddd;
}
.footer > .f-menu{
width: 50%;
height: 50px;
margin: 0 auto;
display: flex;
}
.footer > .f-menu > li{
width: 20%;
text-align: center;
font-size: 20px;
}
.footer > p{
font-size: 18px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<header>
<div class="logo">LOGO</div>
<ul class="menu">
<li>HOME
<ul class="submenu">
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
</ul>
</li>
<li>ABOUT
<ul class="submenu">
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
</ul>
</li>
<li>SERVICES
<ul class="submenu">
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
</ul>
<ul class="submenu">
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
</ul>
</li>
<li>BLOG
<ul class="submenu">
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
</ul>
</li>
<li>CONTACT
<ul class="submenu">
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
</ul>
</li>
</ul>
</header>
<div class="top-section">
<div class="button">CLICK HERE!</div>
</div>
<div class="headline">
<p>HEADLINE</p>
<p>subheadline</p>
<p>suporting body text</p>
</div>
<div class="pa-image">
<div class="button"></div>
</div>
<div class="ho-effect">
<div class="imgbox"></div>
<div class="imgbox"></div>
<div class="imgbox"></div>
</div>
<div class="full-image">
<div class="slide">
<div class="button"></div>
<div class="button"></div>
</div>
<div class="dotbox">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="download">
<p>DOWNLOAD YOUR FREEBIE</p>
<p>freebie details</p>
<div class="subbox">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
<div class="footer">
<ul class="f-menu">
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
<p>copyright</p>
</div>
</div>
</body>
</html>
■ Web 5일차 11-22
<!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://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<style>
body{
margin: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
h1, p{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.wrap{
}
.section1{
height: 100px;
display: flex;
position: relative;
}
.section1 .logo{
width: 30%;
font-size: 3em;
text-align: center;
align-content: center;
}
.section1 nav{
width: 70%;
align-content: end;
}
.section1 .menu{
width: 80%;
height: 50px;
margin: 0 auto;
display: flex;
position: relative;
z-index: 2;
}
.section1 .menu:hover + .bgbox{
display: block;
}
.section1 .menu > li{
width: 20%;
}
.section1 .menu > li:hover > a{
background-color: #00000099;
color: #fff;
}
.section1 .menu > li:hover > .submenu{
display: block;
}
.section1 .menu > li > a{
width: 100%;
height: 50px;
font-size: 1.4em;
text-align: center;
align-content: center;
}
.section1 .menu a{
display: inline-block;
text-decoration: none;
color: inherit;
}
.section1 .submenu{
display: none;
}
.section1 .submenu > li{
height: 40px;
}
.section1 .submenu > li:hover > a{
background-color: #00000099;
color: #fff;
}
.section1 .submenu a{
width: 100%;
height: 100%;
font-size: 1.3em;
text-align: center;
align-content: center;
}
.section1 .bgbox{
position: absolute;
display: none;
z-index: 1;
left: 0;
top: 100%;
width: 100%;
height: 150px;
background-color: #00000044;
}
.section2{
height: calc(100vh - 100px);
background-color: #ccc;
position: relative;
margin-bottom: 4em;
}
.section2 > img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.section2 .textbox{
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
width: 60%;
text-align: center;
color: #ffffffcc;
}
.section2 .textbox h1{
width: 70%;
margin: 0 auto;
font-size: 4em;
margin-bottom: 1em;
}
.section2 .textbox p{
font-size: 1.6em;
}
.section3{
height: 50vh;
align-content: end;
margin-bottom: 8em;
}
.section3 > .container{
width: 80%;
height: 88%;
margin: 0 auto;
}
.section3 > .container > h1{
font-size: 2.6em;
height: 110px;
}
.section3 > .container > .box{
height: calc(100% - 110px);
display: flex;
justify-content: space-between;
}
.section3 > .container > .box > div{
width: 48%;
}
.section3 > .container .left{
}
.section3 > .container .left > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.section3 > .container .right{
align-content: center;
}
.section3 > .container .right > h1{
font-size: 2.2em;
margin-bottom: 1em;
}
.section3 > .container .right > p{
font-size: 1.2em;
}
.section4{
margin-bottom: 8em;
}
.section4 > h1{
width: 80%;
margin: 0 auto;
font-size: 2.6em;
margin-bottom: 1em;
}
.section4 > .container{
height: 200px;
background-color: #ccc;
display: flex;
}
.section4 > .container > div{
width: 50%;
position: relative;
overflow: hidden;
}
.section4 > .container > div > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.section4 > .container > div > .bt{
position: absolute;
bottom: 10%;
left: 10%;
font-size: 2em;
color: #fff;
}
.section4 > .container > div:hover{
cursor: pointer;
}
.section4 > .container > div:hover > img{
transform: scale(1.3);
transition: 2s;
}
.section4 > .container > div:hover > .bt{
left: 30%;
transition: 2s;
}
.section5{
margin-bottom: 8em;
}
.section5 > h1{
width: 80%;
margin: 0 auto;
font-size: 2.6em;
margin-bottom: 1em;
}
.section5 > .container{
width: 80%;
height: 300px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.section5 .item{
width: 23%;
position: relative;
}
.section5 img{
width: 100%;
height: 100%;
object-fit: cover;
}
.section5 .item .bt{
position: absolute;
right: 10px;
top: 10px;
}
.section5 .bt span{
color: #d94141;
font-size: 2em;
}
.section6{
}
.section6 > h1{
width: 80%;
margin: 0 auto;
font-size: 2.6em;
margin-bottom: 1em;
}
.section6 > .container{
width: 60%;
margin: 0 auto;
height: 700px;
display: flex;
}
.section6 > .container > div{
width: 50%;
position: relative;
}
.section6 .container img{
width: 120%;
height:70%;
object-fit: cover;
position: absolute;
}
.section6 .container > .right > img{
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="section1">
<div class="logo">English</div>
<nav>
<ul class="menu">
<li>
<a href="#">Content</a>
<ul class="submenu">
<li>
<a href="#">Content-1</a>
</li>
<li>
<a href="#">Content-2</a>
</li>
<li>
<a href="#">Content-3</a>
</li>
</ul>
</li>
<li>
<a href="#">fact</a>
<ul class="submenu">
<li>
<a href="#">fact-1</a>
</li>
<li>
<a href="#">fact-2</a>
</li>
<li>
<a href="#">fact-3</a>
</li>
</ul>
</li>
<li>
<a href="#">passages</a>
<ul class="submenu">
<li>
<a href="#">passages-1</a>
</li>
<li>
<a href="#">passages-2</a>
</li>
<li>
<a href="#">passages-3</a>
</li>
</ul>
</li>
<li>
<a href="#">even</a>
<ul class="submenu">
<li>
<a href="#">even-1</a>
</li>
<li>
<a href="#">even-2</a>
</li>
<li>
<a href="#">even-3</a>
</li>
</ul>
</li>
<li>
<a href="#">repeat</a>
<ul class="submenu">
<li>
<a href="#">repeat-1</a>
</li>
<li>
<a href="#">repeat-2</a>
</li>
<li>
<a href="#">repeat-3</a>
</li>
</ul>
</li>
</ul>
<div class="bgbox"></div>
</nav>
</div>
<div class="section2">
<img src="girl.jpg" alt="">
<div class="textbox">
<h1>Donec hendrerit congue</h1>
<p>Morbi ornare quam eu ante scelerisque pellentesque. Nulla at augue nibh. Morbi quis posuere dui. Sed erat libero, commodo at nisi at, lacinia suscipit massa.</p>
</div>
</div>
<div class="section3">
<div class="container">
<h1> Vestibulum purus elit</h1>
<div class="box">
<div class="left">
<img src="woman.jpg" alt="">
</div>
<div class="right">
<h1>Nulla vel suscipit</h1>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum id arcu elit. Aliquam in porta elit. Curabitur lacus dui, pretium mollis erat a, gravida tincidunt ante. Ut vel mauris quis ipsum pellentesque interdum. Proin mauris diam, viverra vitae nisi a, finibus tincidunt tortor. Nunc venenatis tincidunt est. Duis porta eleifend nisl vel tincidunt.</p>
</div>
</div>
</div>
</div>
<div class="section4">
<h1>Nullam mi libero</h1>
<div class="container">
<div class="left">
<img src="man.jpg" alt="">
<div class="bt">click →</div>
</div>
<div class="right">
<img src="generated.jpg" alt="">
<div class="bt">click →</div>
</div>
</div>
</div>
<div class="section5">
<h1>Donec hendrerit congue</h1>
<div class="container">
<div class="item">
<img src="generated.jpg" alt="">
<div class="bt">
<span class="material-symbols-outlined">favorite</span>
</div>
</div>
<div class="item">
<img src="girl.jpg" alt="">
<div class="bt">
<span class="material-symbols-outlined">favorite</span>
</div>
</div>
<div class="item">
<img src="man.jpg" alt="">
<div class="bt">
<span class="material-symbols-outlined">favorite</span>
</div>
</div>
<div class="item">
<img src="woman.jpg" alt="">
<div class="bt">
<span class="material-symbols-outlined">favorite</span>
</div>
</div>
</div>
</div>
<div class="section6">
<h1>Fusce porttitor ornare</h1>
<div class="container">
<div class="left">
<img src="girl.jpg" alt="">
</div>
<div class="right">
<img src="generated.jpg" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
■ Web 6일차 11-26
■ 로딩화면
○ 두 원 회전
<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>
○ afrer, before 사용하기
<!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>
ul{
padding: 0;
margin: 0;
list-style: none;
}
nav{
height: 200px;
background-color: aquamarine;
align-content: end;
}
.menu{
width: 80%;
height: 60px;
display: flex;
margin: 0 auto;
}
.menu > li{
width: 25%;
text-align: center;
align-content: center;
border: 1px solid #000;
font-size: 1.2em;
position: relative;
z-index: 1;
cursor: pointer;
}
.menu > li::after{
content: "";
background-color: blue;
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 0%;
display: block;
z-index: -1;
}
.menu > li:hover::after{
height: 100%;
transition: 2s;
}
</style>
</head>
<body>
<nav>
<ul class="menu">
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
</ul>
</nav>
</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>
ul, body{
padding: 0;
margin: 0;
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
header{
height: 100vh;
position: relative;
}
header > img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
nav{
width: 100%;
height: 60px;
position: absolute;
top: 0;
background-color: #00000050;
display: flex;
align-items: end;
z-index: 1;
}
nav > .logo{
width: 20%;
height: 100%;
text-align: center;
align-content: center;
color: #fff;
font-size: 1.4em;
}
nav > .menu{
width: 80%;
height: 70%;
display: flex;
}
nav > .menu:hover::after{
display: block;
}
nav > .menu::after{
content: "";
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 150px;
background-color: #00000050;
z-index: -1;
}
nav > .menu a{
position: relative;
}
nav > .menu a::after{
content: "";
display: block;
position: absolute;
bottom: 0;
width: 0%;
height: 1.4px;
background-color: #fff;
}
nav > .menu a:hover::after{
width: 100%;
transition: 1s;
}
nav > .menu > li{
width: 20%;
height: 100%;
align-content: center;
text-align: center;
}
nav > .menu > li > a{
/* width: 100%; */
height: 100%;
display: inline-block;
color: #fff;
}
nav > .menu > li:hover .submenu{
display: block;
}
nav .submenu{
display: none;
}
nav .submenu > li > a{
display: inline-block;
width: 100%;
height: 30px;
text-align: center;
align-content: center;
color: #fff;
}
header > p{
position: absolute;
margin: 0;
left: 50%;
top: 50%;
font-size: 4em;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
animation: ani 2s linear reverse;
}
@keyframes ani{
0%{transform: translate(-50%, -50%);}
100%{transform: translate(-250%, -50%);}
}
</style>
</head>
<body>
<header>
<img src="girl.jpg" alt="">
<nav>
<div class="logo">LOGO</div>
<ul class="menu">
<li><a href="#">menu1</a>
<ul class="submenu">
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
</ul>
</li>
<li><a href="#">menu2</a>
<ul class="submenu">
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
</ul>
</li>
<li><a href="#">menu3</a>
<ul class="submenu">
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
</ul>
</li>
<li><a href="#">menu4</a>
<ul class="submenu">
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
</ul>
</li>
<li><a href="#">menu5</a>
<ul class="submenu">
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
</ul>
</li>
</ul>
</nav>
<p>established fact that a reader will</p>
</header>
</body>
</html>
■ Web 7일차 11-28
<!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, h2, p{
margin: 0;
}
.wrap{
width: 80%;
margin: 0 auto;
}
.contents1{
height: 60vh;
align-content: center;
}
.contents1 > .container{
width: 80%;
height: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.contents1 > .container > div{
width: 45%;
}
.contents1 > .container > .left{
align-content: center;
}
.contents1 > .container > .left > h2{
font-size: 2.6rem;
text-align: center;
margin-bottom: 5rem;
}
.contents1 > .container > .left > .text{
display: flex;
justify-content: space-around;
align-items: end;
}
.contents1 > .container > .left > .text > p{
width: 45%;
font-size: 1.1rem;
text-align: center;
}
.contents1 > .container > .right > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.contents2{
height: 100vh;
position: relative;
}
.contents2 > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.contents2 > h2{
position: absolute;
width: 100%;
text-align: center;
bottom: 80%;
color: #fff;
font-size: 3rem;
}
.contents2 > .text{
position: absolute;
width: 40%;
top: 25%;
height: 65%;
left: 50%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.contents2 > .text > .item{
width: 50%;
margin-left: auto;
color: #fff;
text-shadow: 1px 1px 3px #000;
}
.contents2 > .text > .item > .title{
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.8rem;
}
</style>
</head>
<body>
<div class="wrap">
<div class="contents1">
<div class="container">
<div class="left">
<h2>Praesent imperdiet<br>placerat dolor</h2>
<div class="text">
<p>Nunc eros est, accumsan ut libero in, pellentesque consectetur velit. Mauris vitae condimentum tortor.</p>
<p>suscipit ligula. Fusce elementum ut est eget vestibulum. Suspendisse eleifend, sem ac sollicitudin pharetra</p>
</div>
</div>
<div class="right">
<img src="ct1.jpg" alt="">
</div>
</div>
</div>
<div class="contents2">
<img src="ct2.jpg" alt="">
<h2>Curabitur</h2>
<div class="text">
<div class="item">
<p class="title">venenatis volutpat</p>
<p class="pa">Duis sed cursus erat. Nulla ultricies placerat ipsum, ac consectetur risus fermentum et. Maecenas iaculis pretium</p>
</div>
<div class="item">
<p class="title">venenatis volutpat</p>
<p class="pa">Duis sed cursus erat. Nulla ultricies placerat ipsum, ac consectetur risus fermentum et. Maecenas iaculis pretium</p>
</div>
<div class="item">
<p class="title">venenatis volutpat</p>
<p class="pa">Duis sed cursus erat. Nulla ultricies placerat ipsum, ac consectetur risus fermentum et. Maecenas iaculis pretium</p>
</div>
<div class="item">
<p class="title">venenatis volutpat</p>
<p class="pa">Duis sed cursus erat. Nulla ultricies placerat ipsum, ac consectetur risus fermentum et. Maecenas iaculis pretium</p>
</div>
</div>
</div>
</div>
</body>
</html>
■ Web 8일차 12-03
<!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.1/css/all.min.css">
<style>
body, h2, p{
margin: 0;
}
.wrap{
width: 80%;
margin: 0 auto;
}
.contents1{
height: 60vh;
align-content: center;
}
.contents1 > .container{
width: 80%;
height: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.contents1 > .container > div{
width: 45%;
}
.contents1 > .container > .left{
align-content: center;
}
.contents1 > .container > .left > h2{
font-size: 2.6rem;
text-align: center;
margin-bottom: 5rem;
}
.contents1 > .container > .left > .text{
display: flex;
justify-content: space-around;
align-items: end;
}
.contents1 > .container > .left > .text > p{
width: 45%;
font-size: 1.1rem;
text-align: center;
}
.contents1 > .container > .right > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.contents2{
height: 100vh;
position: relative;
}
.contents2 > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.contents2 > h2{
position: absolute;
width: 100%;
text-align: center;
bottom: 80%;
color: #fff;
font-size: 3rem;
}
.contents2 > .text{
position: absolute;
width: 40%;
top: 25%;
height: 65%;
left: 50%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.contents2 > .text > .item{
width: 50%;
margin-left: auto;
color: #fff;
text-shadow: 1px 1px 3px #000;
}
.contents2 > .text > .item > .title{
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.8rem;
}
.contents3{
height: 40vh;
align-content: center;
}
.contents3 > .container{
display: flex;
height: 70%;
width: 80%;
margin: 0 auto;
}
.contents3 > .container > .left{
width: 30%;
align-content: center;
}
.contents3 > .container > .left > h2{
font-size: 2.4em;
margin-bottom: 20px;
}
.contents3 > .container > .right{
width: 70%;
align-content: center;
font-size: 1.6em;
}
.contents4{
height: 40vh;
background-color: #d1f1e9;
align-content: center;
}
.contents4 > h2{
font-size: 2.4em;
text-align: center;
margin-bottom: 20px;
}
.contents4 > p{
width: 60%;
margin: 0 auto;
text-align: center;
margin-bottom: 30px;
}
.contents4 > .container{
width: 80%;
display: flex;
margin: 0 auto;
justify-content: space-between;
}
.contents4 > .container > .item{
width: 30%;
display: flex;
background-color: #8ecdbe;
border-radius: 10px;
color: #fff;
padding: 10px 0px;
}
.contents4 > .container > .item > .left{
width: 15%;
text-align: center;
align-content: center;
font-size: 1.4em;
}
.contents4 > .container > .item > .right{
width: 85%;
}
.contents4 > .container > .item > .right > p:nth-child(1){
margin-bottom: 5px;
}
.contents4 > .container > .item > .right > p:nth-child(2){
font-size: 0.8em;
}
.contents5{
height: 60vh;
align-content: center;
}
.contents5 > .container{
width: 80%;
height: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.contents5 > .container > .left{
width: 30%;
align-content: center;
}
.contents5 > .container > .left > h2{
margin-bottom: 16px;
}
.contents5 > .container > .left > p{
margin-bottom: 24px;
}
.contents5 > .container > .left > .item-box{
display: flex;
flex-wrap: wrap;
height: 20%;
align-content: space-between;
}
.contents5 > .container > .left > .item-box > .item{
width: 49%;
height: 30%;
display: flex;
}
.contents5 > .container > .left > .item-box > .item > .iteml{
width: 20%;
aspect-ratio: 1;
height: auto;
background-color: #d1f1e9;
border-radius: 50%;
text-align: center;
align-content: center;
}
.contents5 > .container > .left > .item-box > .item > .itemr{
width: 80%;
text-align: center;
}
.contents5 > .container > .right{
width: 65%;
}
.contents5 > .container > .right > video{
width: 100%;
height: 100%;
object-fit: cover;
}
.contents6{
height: 60vh;
background-color: #d1f1e9;
align-content: center;
}
.contents6 > .container{
width: 80%;
height: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.contents6 > .container > img{
width: 49%;
height: 100%;
object-fit: cover;
position: relative;
}
.contents6 > .container > img:nth-child(1){
bottom: -3%;
}
.contents6 > .container > img:nth-child(2){
top: -3%;
}
.contents7{
height: 60vh;
align-content: center;
}
.contents7 > h2{
font-size: 2.4em;
margin-bottom: 12px;
text-align: center;
}
.contents7 > p{
text-align: center;
margin-bottom: 24px;
}
.contents7 > .container{
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.contents7 > .container:nth-child(3){
margin-bottom: 10px;
}
.contents7 > .container > .item{
width: calc(50% - 5px);
background-color: #8ecdbe;
display: flex;
box-sizing: border-box;
padding: 20px;
border-radius: 10px;
}
.contents7 > .container > .item > .left{
align-content: center;
margin-right: 20px;
}
.contents7 > .container > .item > .left > .circle{
width: 80px;
height: 80px;
background-color: #fff;
border-radius: 50%;
}
.contents8{
height: 80px;
background-color: #d1f1e9;
align-content: center;
}
.contents8 > .container{
width: 50%;
margin: 0 auto;
display: flex;
font-size: 1.4em;
}
.contents8 > .container > .box{
width: 20%;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
<div class="contents1">
<div class="container">
<div class="left">
<h2>Praesent imperdiet<br>placerat dolor</h2>
<div class="text">
<p>Nunc eros est, accumsan ut libero in, pellentesque consectetur velit. Mauris vitae condimentum tortor.</p>
<p>suscipit ligula. Fusce elementum ut est eget vestibulum. Suspendisse eleifend, sem ac sollicitudin pharetra</p>
</div>
</div>
<div class="right">
<img src="ct1.jpg" alt="">
</div>
</div>
</div>
<div class="contents2">
<img src="ct2.jpg" alt="">
<h2>Curabitur</h2>
<div class="text">
<div class="item">
<p class="title">venenatis volutpat</p>
<p class="pa">Duis sed cursus erat. Nulla ultricies placerat ipsum, ac consectetur risus fermentum et. Maecenas iaculis pretium</p>
</div>
<div class="item">
<p class="title">venenatis volutpat</p>
<p class="pa">Duis sed cursus erat. Nulla ultricies placerat ipsum, ac consectetur risus fermentum et. Maecenas iaculis pretium</p>
</div>
<div class="item">
<p class="title">venenatis volutpat</p>
<p class="pa">Duis sed cursus erat. Nulla ultricies placerat ipsum, ac consectetur risus fermentum et. Maecenas iaculis pretium</p>
</div>
<div class="item">
<p class="title">venenatis volutpat</p>
<p class="pa">Duis sed cursus erat. Nulla ultricies placerat ipsum, ac consectetur risus fermentum et. Maecenas iaculis pretium</p>
</div>
</div>
</div>
<div class="contents3">
<div class="container">
<div class="left">
<h2>Ipsum<br>generator</h2>
<p>There are many variations</p>
</div>
<div class="right">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney</p>
</div>
</div>
</div>
<div class="contents4">
<h2>Mauris blandit auctor viverra</h2>
<p>Vestibulum cursus justo justo, et venenatis nisl lacinia mattis. In at ligula fermentum, consequat metus blandit, volutpat mauris. Donec blandit, ipsum id laoreet malesuada</p>
<div class="container">
<div class="item">
<div class="left">
<i class="fa-solid fa-hippo"></i>
</div>
<div class="right">
<p>Nullam imperdiet eget</p>
<p>Phasellus euismod eros vitae tempor consectetur. Suspendisse potenti.</p>
</div>
</div>
<div class="item">
<div class="left">
<i class="fa-solid fa-ghost"></i>
</div>
<div class="right">
<p>Nullam imperdiet eget</p>
<p>Phasellus euismod eros vitae tempor consectetur. Suspendisse potenti.</p>
</div>
</div>
<div class="item">
<div class="left">
<i class="fa-solid fa-gift"></i>
</div>
<div class="right">
<p>Nullam imperdiet eget</p>
<p>Phasellus euismod eros vitae tempor consectetur. Suspendisse potenti.</p>
</div>
</div>
</div>
</div>
<div class="contents5">
<div class="container">
<div class="left">
<h2>Donec sit amet sapien</h2>
<p>Nunc vel convallis enim, at accumsan justo. Quisque iaculis vestibulum sapien at faucibus. Nam pretium ante et massa efficitur imperdiet.</p>
<div class="item-box">
<div class="item">
<div class="iteml">
<i class="fa-solid fa-plane"></i>
</div>
<div class="itemr">elementum</div>
</div>
<div class="item">
<div class="iteml">
<i class="fa-solid fa-key"></i>
</div>
<div class="itemr">elementum</div>
</div>
<div class="item">
<div class="iteml">
<i class="fa-solid fa-tree"></i>
</div>
<div class="itemr">elementum</div>
</div>
<div class="item">
<div class="iteml">
<i class="fa-solid fa-handshake"></i>
</div>
<div class="itemr">elementum</div>
</div>
</div>
</div>
<div class="right">
<video controls autoplay muted loop src="ct5.mp4"></video>
</div>
</div>
</div>
<div class="contents6">
<div class="container">
<img src="ct6-1.jpg" alt="">
<img src="ct6-2.jpg" alt="">
</div>
</div>
<div class="contents7">
<h2>Quisque iaculis vestibulum</h2>
<p>Phasellus euismod eros vitae tempor consectetur. Suspendisse potenti. Sed eleifend purus a magna feugiat fringilla.<br> Aliquam ac aliquet dui, a varius tellus. Fusce ac mi nibh.</p>
<div class="container">
<div class="item">
<div class="left">
<div class="circle"></div>
</div>
<div class="right">Curabitur ut quam leo. Vivamus ac odio nibh. Donec sit amet sapien in orci feugiat faucibus sed in urna. Cras sed velit finibus, tempor purus eget, finibus sapien. Nullam diam ex, maximus vel purus ac, elementum aliquam libero.</div>
</div>
<div class="item">
<div class="left">
<div class="circle"></div>
</div>
<div class="right">Curabitur ut quam leo. Vivamus ac odio nibh. Donec sit amet sapien in orci feugiat faucibus sed in urna. Cras sed velit finibus, tempor purus eget, finibus sapien. Nullam diam ex, maximus vel purus ac, elementum aliquam libero.</div>
</div>
</div>
<div class="container">
<div class="item">
<div class="left">
<div class="circle"></div>
</div>
<div class="right">Curabitur ut quam leo. Vivamus ac odio nibh. Donec sit amet sapien in orci feugiat faucibus sed in urna. Cras sed velit finibus, tempor purus eget, finibus sapien. Nullam diam ex, maximus vel purus ac, elementum aliquam libero.</div>
</div>
<div class="item">
<div class="left">
<div class="circle"></div>
</div>
<div class="right">Curabitur ut quam leo. Vivamus ac odio nibh. Donec sit amet sapien in orci feugiat faucibus sed in urna. Cras sed velit finibus, tempor purus eget, finibus sapien. Nullam diam ex, maximus vel purus ac, elementum aliquam libero.</div>
</div>
</div>
</div>
<div class="contents8">
<div class="container">
<div class="box">menu1</div>
<div class="box">menu2</div>
<div class="box">menu3</div>
<div class="box">menu4</div>
<div class="box">menu5</div>
</div>
</div>
</div>
</body>
</html>
■ Web 9일차 12-05
■ 체크박스 형태 클릭 이벤트 같은 효과 넣기
○ 체크 박스와 연동된 레이블 만들기
- input 박스는 타입(text, checkbox, radio 등)과 이름(서버로 올릴때 사용할 명) id(자신만의 이름)를 구성할 수 있음
- label은 for 속성으로 나를 클릭했을때 변화할 input를 설정 할 수 있음 input의 아이디명을 넣어줌
<div for="input의 아이디명">박스</div><style>
.box{
width: 200px;
height: 200px;
background-color: lightcyan;
text-align: center;
align-content: center;
}
</style>
<body>
<div class="box">
<input type="checkbox" name="check" id="check-box">
<label for="check-box">체크</label>
</div>
</body>
- div나 다른 태그에 for 속성을 넣어봤자 작동하지 않음
- 멀리 떨어져 있어도 label른 작동함
<style>
.box{
width: 200px;
height: 200px;
background-color: lightcyan;
text-align: center;
align-content: center;
}
</style>
<body>
<div class="box">
<input type="checkbox" name="check" id="check-box">
<label for="check-box">체크</label>
<div for="check-box">박스</div>
</div>
<label for="check-box">박스외 체크</label>
</body>
○ 체크 되었을때 css 변화 가능
- input 박스 변화는 불가능 너비랑 이런것은 가능하지만
css 속성을 넣어주는 방법
input:checked
- 체크되었을때 label를 통제함
<style>
.box{
width: 200px;
height: 200px;
background-color: lightcyan;
text-align: center;
align-content: center;
}
input:checked + label{
color: red;
background-color: blue;
}
</style>
<body>
<div class="box">
<input type="checkbox" name="check" id="check-box">
<label for="check-box">체크</label>
</div>
</body>
- 일반박스도 통제가능
<style>
.box{
width: 200px;
height: 200px;
background-color: lightcyan;
text-align: center;
align-content: center;
}
input:checked + label{
color: red;
background-color: blue;
}
.sbox{
width: 30px;
height: 30px;
background-color: blue;
}
input:checked ~ .sbox{
background-color: red;
}
</style>
<body>
<div class="box">
<input type="checkbox" name="check" id="check-box">
<label for="check-box">체크</label>
<div class="sbox"></div>
</div>
</body>
○ 박스 내부요소 변화
<style>
.box{
width: 200px;
height: 200px;
background-color: lightcyan;
text-align: center;
align-content: center;
}
input:checked + label{
color: red;
background-color: blue;
}
.sbox{
width: 30px;
height: 30px;
background-color: blue;
}
input:checked ~ .sbox{
background-color: red;
}
input:checked ~ .sbox > span{
color: #fff;
}
</style>
<body>
<div class="box">
<input type="checkbox" name="check" id="check-box">
<label for="check-box">체크</label>
<div class="sbox">
<span>글</span>
</div>
</div>
</body>
○ 박스를 클릭 했을때 변화
<style>
.box{
width: 200px;
height: 200px;
background-color: lightcyan;
text-align: center;
align-content: center;
}
.sbox{
width: 30px;
height: 30px;
background-color: blue;
}
input:checked + label > .sbox{
background-color: red;
}
</style>
<body>
<div class="box">
<input type="checkbox" name="check" id="check-box">
<label for="check-box">
<div class="sbox"></div>
</label>
</div>
</body>
○ lable 클릭으로 박스안에 있는 이미지 변화
<style>
.box{
width: 200px;
height: 200px;
background-color: lightcyan;
text-align: center;
align-content: center;
}
input{
display: none;
}
.sbox{
position: relative;
width: 100px;
height: 100px;
margin: 0 auto;
}
.sbox > img{
transition: 2s;
position: absolute;
left: 0;
top: 0;
}
.img2{
opacity: 0;
}
input:checked ~ .sbox > .img1{
opacity: 0;
}
input:checked ~ .sbox > .img2{
opacity: 1;
}
</style>
<body>
<div class="box">
<input type="checkbox" name="check" id="check-box">
<label for="check-box">버튼</label>
<div class="sbox">
<img class="img1" src="https://picsum.photos/id/237/100/100" alt="">
<img class="img2" src="https://picsum.photos/id/235/100/100" alt="">
</div>
</div>
</body>
<!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.1/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Jaro:opsz@6..72&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, p{
margin: 0;
}
h1{
font-family: "Jaro";
font-weight: 300;
font-size: 4.6em;
}
h2{
font-family: "Roboto";
font-size: 3.2em;
}
h3{
font-family: "Roboto";
font-size: 2.2em;
}
p{
font-family: "Roboto";
font-size: 1.3em;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
color: inherit;
}
/* 해더 */
header{
height: 100vh;
position: relative;
}
header > img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
header > nav{
height: 60px;
background-color: #00000059;
position: relative;
align-content: center;
}
header .logo{
position: absolute;
height: 100%;
top: 0;
left: 10%;
align-content: center;
font-size: 1.8em;
font-family: "Roboto";
font-weight: 700;
color: #fff;
}
header .menu{
width: 50%;
display: flex;
justify-content: space-between;
margin: 0 auto;
color: #fff;
font-size: 1.4em;
}
header > .header-main{
height: calc(100% - 60px);
align-content: center;
text-align: center;
}
.header-main > h1{
color: #fff;
margin-bottom: 5%;
}
.header-main > .container{
width: 80%;
margin: 0 auto;
background-color: #ffffffa9;
box-sizing: border-box;
padding: 5% 15%;
}
.header-main > .container > .button{
background-color: #fff;
width: 170px;
height: 40px;
font-size: 1.4em;
text-align: center;
align-content: center;
margin: 0 auto;
border-radius: 12px;
}
.header-main > .container > h2{
margin-bottom: 16px;
}
.header-main p{
margin-bottom: 12px;
line-height: 1.4;
}
.contents1{
height: 100vh;
align-content: center;
}
.contents1 h2{
text-align: center;
margin-bottom: 24px;
}
.contents1 > p{
width: 70%;
text-align: center;
margin: 0 auto;
margin-bottom: 24px;
}
.contents1 .container{
width: 80%;
height: 50%;
display: flex;
margin: 0 auto;
justify-content: space-between;
margin-bottom: 32px;
}
.contents1 .container > div{
width: 48%;
}
.contents1 .container > .left > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.contents1 .right{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.contents1 .item{
display: flex;
font-size: 0.8em;
justify-content: space-between;
}
.contents1 .item .icon{
width: 10%;
text-align: center;
align-content: center;
}
.icon > i{
font-size: 2em;
width: 90%;
aspect-ratio: 1;
text-align: center;
align-content: center;
border-radius: 50%;
background-color: #badce1;
color: #fff;
}
.contents1 .item .text{
width: 85%;
}
.contents1 .box-wrap{
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.contents1 .box-wrap > .box{
width: 31%;
background-color: #fff;
display: flex;
align-items: center;
font-size: 0.8em;
box-sizing: border-box;
padding: 20px;
border-radius: 10px;
border: 2px solid #dad8d88e;
box-shadow: 5px 5px 8px #0000004f;
}
.contents1 .box-wrap > .box .circle{
width: 60px;
height: 60px;
margin-right: 20px;
background-color: #badce1;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<nav>
<div class="logo">
<i class="fa-brands fa-squarespace"></i>
<span>LOGO</span>
</div>
<ul class="menu">
<li><a href="#">dignissim</a></li>
<li><a href="#">hendrerit</a></li>
<li><a href="#">Integer</a></li>
<li><a href="#">egesta</a></li>
<li><a href="#">Pellentesque</a></li>
</ul>
</nav>
<div class="header-main">
<h1>In sit amet rhoncus sem<br> Donec id euismod</h1>
<div class="container">
<h2>Cras auctor metus</h2>
<p>Proin semper dignissim leo at cursus. Pellentesque vitae risus id tellus condimentum hendrerit at sit amet purus. Maecenas dictum, nisl sit amet vestibulum luctus, tellus sem rhoncus mi, eget mollis dolor lectus eu mauris.</p>
<div class="button">BUTTON</div>
</div>
</div>
<img src="header.jpg" alt="">
</header>
<div class="contents1">
<h2>Pellentesque</h2>
<p>Maecenas id accumsan mauris. Nunc semper ac ipsum sed eleifend. Integer quis nulla ac tortor cursus venenatis sit amet a eros. Phasellus pulvinar ante in tristique ultricies</p>
<div class="container">
<div class="left">
<img src="ct1.jpg" alt="">
</div>
<div class="right">
<div class="item">
<div class="icon">
<i class="fa-solid fa-lemon"></i>
</div>
<div class="text">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ut ornare sem. Proin condimentum mi vel sem consectetur egestas.</p>
</div>
</div>
<div class="item">
<div class="icon">
<i class="fa-solid fa-paper-plane"></i>
</div>
<div class="text">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ut ornare sem. Proin condimentum mi vel sem consectetur egestas.</p>
</div>
</div>
<div class="item">
<div class="icon">
<i class="fa-solid fa-globe"></i>
</div>
<div class="text">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ut ornare sem. Proin condimentum mi vel sem consectetur egestas.</p>
</div>
</div>
<div class="item">
<div class="icon">
<i class="fa-solid fa-handshake"></i>
</div>
<div class="text">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ut ornare sem. Proin condimentum mi vel sem consectetur egestas.</p>
</div>
</div>
<div class="item">
<div class="icon">
<i class="fa-solid fa-palette"></i>
</div>
<div class="text">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ut ornare sem. Proin condimentum mi vel sem consectetur egestas.</p>
</div>
</div>
</div>
</div>
<div class="box-wrap">
<div class="box">
<div class="boxl">
<div class="circle"></div>
</div>
<p>Proin semper dignissim leo at cursus. Pellentesque</p>
</div>
<div class="box">
<div class="boxl">
<div class="circle"></div>
</div>
<p>Proin semper dignissim leo at cursus. Pellentesque</p>
</div>
<div class="box">
<div class="boxl">
<div class="circle"></div>
</div>
<p>Proin semper dignissim leo at cursus. Pellentesque</p>
</div>
</div>
</div>
</div>
</body>
</html>
■ Web 10일차 12-06
<!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.1/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Jaro:opsz@6..72&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, p{
margin: 0;
}
h1{
font-family: "Jaro";
font-weight: 300;
font-size: 4.6em;
}
h2{
font-family: "Roboto";
font-size: 3.2em;
}
h3{
font-family: "Roboto";
font-size: 2.2em;
}
p{
font-family: "Roboto";
font-size: 1.3em;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
color: inherit;
}
/* 해더 */
header{
height: 100vh;
position: relative;
}
header > img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
header > nav{
height: 60px;
background-color: #00000059;
position: relative;
align-content: center;
}
header .logo{
position: absolute;
height: 100%;
top: 0;
left: 10%;
align-content: center;
font-size: 1.8em;
font-family: "Roboto";
font-weight: 700;
color: #fff;
}
header .menu{
width: 50%;
display: flex;
justify-content: space-between;
margin: 0 auto;
color: #fff;
font-size: 1.4em;
}
header > .header-main{
height: calc(100% - 60px);
align-content: center;
text-align: center;
}
.header-main > h1{
color: #fff;
margin-bottom: 5%;
}
.header-main > .container{
width: 80%;
margin: 0 auto;
background-color: #ffffffa9;
box-sizing: border-box;
padding: 5% 15%;
}
.header-main > .container > .button{
background-color: #fff;
width: 170px;
height: 40px;
font-size: 1.4em;
text-align: center;
align-content: center;
margin: 0 auto;
border-radius: 12px;
}
.header-main > .container > h2{
margin-bottom: 16px;
}
.header-main p{
margin-bottom: 12px;
line-height: 1.4;
}
.contents1{
height: 100vh;
align-content: center;
}
.contents1 h2{
text-align: center;
margin-bottom: 24px;
}
.contents1 > p{
width: 70%;
text-align: center;
margin: 0 auto;
margin-bottom: 24px;
}
.contents1 .container{
width: 80%;
height: 50%;
display: flex;
margin: 0 auto;
justify-content: space-between;
margin-bottom: 32px;
}
.contents1 .container > div{
width: 48%;
}
.contents1 .container > .left > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.contents1 .right{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.contents1 .item{
display: flex;
font-size: 0.8em;
justify-content: space-between;
}
.contents1 .item .icon{
width: 10%;
text-align: center;
align-content: center;
}
.contents1 .icon > i{
font-size: 2em;
width: 90%;
aspect-ratio: 1;
text-align: center;
align-content: center;
border-radius: 50%;
background-color: #badce1;
color: #fff;
}
.contents1 .item .text{
width: 85%;
}
.contents1 .box-wrap{
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.contents1 .box-wrap > .box{
width: 31%;
background-color: #fff;
display: flex;
align-items: center;
font-size: 0.8em;
box-sizing: border-box;
padding: 20px;
border-radius: 10px;
border: 2px solid #dad8d88e;
box-shadow: 5px 5px 8px #0000004f;
}
.contents1 .box-wrap > .box .circle{
width: 60px;
height: 60px;
margin-right: 20px;
background-color: #badce1;
border-radius: 50%;
}
.contents2{
height: 60vh;
align-content: center;
}
.contents2 > .container{
width: 80%;
height: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.contents2 > .container > div{
width: 48%;
}
.contents2 > .container > .right{
align-content: center;
}
.contents2 > .container > .right > h2{
margin-bottom: 24px;
text-transform: capitalize;
}
.contents2 > .container .map{
width: 100%;
height: 100%;
}
footer{
width: 80%;
margin: 0 auto;
height: 80px;
color: #507e85;
display: flex;
justify-content: space-between;
align-items: center;
}
footer > .flogo{
width: 15%;
font-size: 2em;
}
footer > .icon-box{
width: 15%;
font-size: 1.6em;
display: flex;
justify-content: space-between;
}
footer > .menu{
width: 50%;
display: flex;
justify-content: space-between;
font-size: 1.2em;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<nav>
<div class="logo">
<i class="fa-brands fa-squarespace"></i>
<span>LOGO</span>
</div>
<ul class="menu">
<li><a href="#">dignissim</a></li>
<li><a href="#">hendrerit</a></li>
<li><a href="#">Integer</a></li>
<li><a href="#">egesta</a></li>
<li><a href="#">Pellentesque</a></li>
</ul>
</nav>
<div class="header-main">
<h1>In sit amet rhoncus sem<br> Donec id euismod</h1>
<div class="container">
<h2>Cras auctor metus</h2>
<p>Proin semper dignissim leo at cursus. Pellentesque vitae risus id tellus condimentum hendrerit at sit amet purus. Maecenas dictum, nisl sit amet vestibulum luctus, tellus sem rhoncus mi, eget mollis dolor lectus eu mauris.</p>
<div class="button">BUTTON</div>
</div>
</div>
<img src="header.jpg" alt="">
</header>
<div class="contents1">
<h2>Pellentesque</h2>
<p>Maecenas id accumsan mauris. Nunc semper ac ipsum sed eleifend. Integer quis nulla ac tortor cursus venenatis sit amet a eros. Phasellus pulvinar ante in tristique ultricies</p>
<div class="container">
<div class="left">
<img src="ct1.jpg" alt="">
</div>
<div class="right">
<div class="item">
<div class="icon">
<i class="fa-solid fa-lemon"></i>
</div>
<div class="text">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ut ornare sem. Proin condimentum mi vel sem consectetur egestas.</p>
</div>
</div>
<div class="item">
<div class="icon">
<i class="fa-solid fa-paper-plane"></i>
</div>
<div class="text">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ut ornare sem. Proin condimentum mi vel sem consectetur egestas.</p>
</div>
</div>
<div class="item">
<div class="icon">
<i class="fa-solid fa-globe"></i>
</div>
<div class="text">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ut ornare sem. Proin condimentum mi vel sem consectetur egestas.</p>
</div>
</div>
<div class="item">
<div class="icon">
<i class="fa-solid fa-handshake"></i>
</div>
<div class="text">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ut ornare sem. Proin condimentum mi vel sem consectetur egestas.</p>
</div>
</div>
<div class="item">
<div class="icon">
<i class="fa-solid fa-palette"></i>
</div>
<div class="text">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ut ornare sem. Proin condimentum mi vel sem consectetur egestas.</p>
</div>
</div>
</div>
</div>
<div class="box-wrap">
<div class="box">
<div class="boxl">
<div class="circle"></div>
</div>
<p>Proin semper dignissim leo at cursus. Pellentesque</p>
</div>
<div class="box">
<div class="boxl">
<div class="circle"></div>
</div>
<p>Proin semper dignissim leo at cursus. Pellentesque</p>
</div>
<div class="box">
<div class="boxl">
<div class="circle"></div>
</div>
<p>Proin semper dignissim leo at cursus. Pellentesque</p>
</div>
</div>
</div>
<div class="contents2">
<div class="container">
<div class="left">
<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11700.207519793099!2d127.0406580252395!3d37.64377865641735!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357cbc07526d7cb5%3A0xb7e173db87bdc449!2z6rWt66a97ZiE64yA66-47Iig6rSAIOywveuPmeugiOyngOuNmOyLnA!5e0!3m2!1sko!2skr!4v1733479573667!5m2!1sko!2skr" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="right">
<h2>randomised words</h2>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form</p>
</div>
</div>
</div>
<footer>
<div class="flogo">
<i class="fa-brands fa-squarespace"></i>
<span>LOGO</span>
</div>
<div class="menu">
<div class="smenu">middle</div>
<div class="smenu">middle</div>
<div class="smenu">chk</div>
<div class="smenu">middle</div>
<div class="smenu">middle</div>
</div>
<div class="icon-box">
<i class="fa-brands fa-github"></i>
<i class="fa-brands fa-discord"></i>
<i class="fa-solid fa-calendar-days"></i>
</div>
</footer>
</div>
</body>
</html>
■ backdropfilter
■ 스크롤 변화에 따라 아래 요소들이 올라오는 듯한 변화주기
- emmet 약어
.content#content$*4>{cont$}<div class="content" id="content1">cont1</div>
<div class="content" id="content2">cont2</div>
<div class="content" id="content3">cont3</div>
<div class="content" id="content4">cont4</div><style>
body{
margin: 0;
}
.wrap{
position: relative;
}
.content{
height: 100vh;
text-align: center;
align-content: center;
font-size: 80px;
position: sticky;
top: 0;
}
#content1{
background-color: #ccc;
}
#content2{
background-color: #aaa;
}
#content3{
background-color: #888;
}
#content4{
background-color: #666;
}
</style>
<body>
<div class="wrap">
<div class="content" id="content1">cont1</div>
<div class="content" id="content2">cont2</div>
<div class="content" id="content3">cont3</div>
<div class="content" id="content4">cont4</div>
</div>
</body>
배경색이 없으면 겹쳐서 나옴
○ 배경이미지가 변화되면서 화면이동
<style>
body{
margin: 0;
}
.wrap{
position: relative;
}
.wrap > .img-box{
height: 450vh;
}
.wrap > .img-box > img{
width: 100%;
height: 100vh;
object-fit: cover;
position: sticky;
top: 0;
}
.wrap > .container{
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.wrap > .container > div{
height: 50vh;
}
.wrap > .container > div:nth-child(2n-1){
background-color: #fff;
}
footer{
height: 200vh;
background-color: #ccc;
}
</style>
<body>
<div class="wrap">
<div class="img-box">
<img src="https://picsum.photos/id/237/1000/2000" alt="">
<img src="https://picsum.photos/id/240/1000/2000" alt="">
<img src="https://picsum.photos/id/250/1000/2000" alt="">
<img src="https://picsum.photos/id/260/1000/2000" alt="">
</div>
<div class="container">
<div class="contents">cont1</div>
<div class="contents">cont2</div>
<div class="contents">cont3</div>
<div class="contents">cont4</div>
<div class="contents">cont5</div>
<div class="contents">cont6</div>
<div class="contents">cont7</div>
<div class="contents">cont8</div>
<div class="contents">cont9</div>
</div>
</div>
<footer>footer</footer>
</body>
</html>
■ border로 말풍선 만들기
- 너비와 높이가 없는 박스에 border를 전체 넣어주고 특정 위치만 색을 다르게 하면 각각의
보더가 들어간것을 확인 할 수 있다.
.box1{
width: 0;
height: 0;
border: 10px solid #ccc;
border-top: 10px solid #000;
}
- 여러방향 확인하기
<style>
body{
margin: 0;
}
.wrap{
width: 300px;
height: 100px;
border: 1px solid #000;
display: flex;
align-items: center;
justify-content: space-around;
}
.box1{
width: 0;
height: 0;
border: 10px solid #ccc;
border-top: 10px solid #000;
}
.box2{
width: 0;
height: 0;
border: 10px solid #ccc;
border-left: 10px solid #000;
}
.box3{
width: 0;
height: 0;
border: 10px solid #ccc;
border-right: 10px solid #000;
}
.box4{
width: 0;
height: 0;
border: 10px solid #ccc;
border-bottom: 10px solid #000;
}
</style>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
- 말풍선 만들기
<style>
body{
margin: 0;
}
.wrap{
width: 400px;
height: 100px;
border: 1px solid #000;
align-content: center;
}
.box{
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #ccc;
border-radius: 10px;
position: relative;
}
.box::after{
content: "";
border: 10px solid transparent;
border-top: 10px solid #ccc;
position: absolute;
top: 100%;
left: 20%;
}
</style>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
- 마우스 호버시 말풍선 나오게 만들기
<style>
body{
margin: 0;
}
.wrap{
width: 400px;
height: 100px;
border: 1px solid #000;
align-content: center;
}
.wrap > i{
font-size: 60px;
color: rgb(111, 141, 238);
cursor: pointer;
vertical-align: middle;
}
.wrap > i:hover + .box{
display: inline-block;
}
.box{
width: 100px;
height: 50px;
display: none;
align-content: center;
text-align: center;
color: #fff;
margin: 0 auto;
background-color: rgb(111, 141, 238);
border-radius: 10px;
position: relative;
left: 10px;
vertical-align: middle;
}
.box::after{
content: "";
border: 10px solid transparent;
border-right: 10px solid rgb(111, 141, 238);
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 100%;
}
</style>
<body>
<div class="wrap">
<i class="fa-brands fa-facebook"></i>
<div class="box">페이스북</div>
</div>
</body>
■ Animate
자주 사용하던지 기본적인 애니메이션을 제공해주는 사이트
CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.css">
효과를 확인
애니메이션이 실행할 박스의 클래스를
animate__animated 기본값 지정해주고
넣어줄 효과 animate__heartBeat 같이 지정함
<style>
h1{
text-align: center;
}
</style>
<body>
<h1 class="animate__animated animate__heartBeat">animate element</h1>
</body>
어떤 특정 박스 안에서 실행
<style>
.box{
width: 400px;
overflow: hidden;
}
h1{
text-align: center;
}
</style>
<body>
<div class="box">
<h1 class="animate__animated animate__fadeInRight">animate element1</h1>
<h1 class="animate__animated animate__fadeInUp">animate element2</h1>
</div>
</body>
개발자 모드 확인
클래스를 fadeInUp 으로 넣어주면 에니메이션 네임이 fadeInUp 이 들어감
○ 마우스 호버시 애니메이션 실행
<style>
.box{
width: 400px;
overflow: hidden;
}
.box:hover > .a{
animation: fadeInRight 2s;
}
.box:hover > .b{
animation: fadeInUp 2s;
}
h1{
text-align: center;
}
</style>
<body>
<div class="box">
<h1 class="animate__animated a">animate element1</h1>
<h1 class="animate__animated b">animate element2</h1>
</div>
</body>
○ 두번째는 지연후 실행
- 파일 확인
<style>
.box{
width: 400px;
/* height: 200px; */
overflow: hidden;
}
.b{
opacity: 0;
}
.box:hover > .a{
animation: fadeInRight 2s;
}
.box:hover > .b{
animation: fadeInUp 2s 2s;
}
h1{
text-align: center;
}
</style>
<body>
<div class="box">
<h1 class="animate__animated a">animate element1</h1>
<h1 class="animate__animated b">animate element2</h1>
</div>
</body>
'Web 수업자료 > Web 정규' 카테고리의 다른 글
| UX/UI 디자인 24-11 (7) | 2024.11.16 |
|---|---|
| Web 1,2 24-10 (11) | 2024.11.11 |
| 웹디자인 기능사 (0) | 2024.10.15 |
| Web 4 24-09 (1) | 2024.09.10 |
| Web 3 24-08 (0) | 2024.08.08 |