a
■ 이전내용
○ 메뉴바 및 레이아웃 구성
<!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{
list-style: none;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
color: inherit;
}
p{
margin: 0;
}
.wrap{
width: 80%;
height: 2000px;
margin: 0 auto;
}
header{
height: 600px;
position: relative;
}
header > img{
display: block;
width: 100%;
height: 600px;
object-fit: cover;
}
header > nav{
position: absolute;
left: 0;
top: 0;
height: 100px;
width: 100%;
background-color: #ffffff66;
}
header > nav:hover{
background-color: #fff;
}
header > nav > .logo{
width: 30%;
height: 100%;
text-align: center;
align-content: center;
font-size: 32px;
font-weight: 700;
font-style: italic;
}
header > nav > .menu{
width: 70%;
height: 50px;
position: absolute;
right: 0;
bottom: 0;
display: flex;
}
header > nav > .menu > li{
width: 25%;
}
header > nav > .menu > li > a{
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
align-content: center;
font-size: 22px;
font-weight: 700;
}
header > nav > .menu > li > a:hover{
background-color: #00000044;
color: #fff;
}
header > nav > .menu > li:hover > .submenu{
display: block;
}
header > nav > .menu .submenu{
background-color: #fff;
display: none;
}
header > nav > .menu .submenu > li > a{
display: inline-block;
width: 100%;
height: 40px;
text-align: center;
align-content: center;
font-size: 18px;
font-weight: 600;
}
header > nav > .menu .submenu > li > a:hover{
background-color: #00000044;
color: #fff;
}
header > nav > .menu .submenu > li:last-child{
padding-bottom: 20px;
}
main h1{
font-size: 2.5em;
margin-bottom: 32px;
}
main .container{
display: flex;
justify-content: space-between;
}
main .container > .item{
width: 23%;
}
main .container > .item > img{
display: block;
width: 100%;
margin-bottom: 12px;
}
.contents .item > p:nth-child(2){
font-size: 1.4em;
margin-bottom: 8px;
}
.contents .item > p:nth-child(3){
font-size: 1.2em;
margin-bottom: 32px;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<img src="water.jpg" alt="">
<nav>
<div class="logo">Homepage</div>
<ul class="menu">
<li><a href="#">Menu1</a>
<ul class="submenu">
<li><a href="#">sumenu1-1</a></li>
<li><a href="#">sumenu1-2</a></li>
<li><a href="#">sumenu1-3</a></li>
</ul>
</li>
<li><a href="#">Menu2</a>
<ul class="submenu">
<li><a href="#">sumenu2-1</a></li>
<li><a href="#">sumenu2-2</a></li>
<li><a href="#">sumenu2-3</a></li>
</ul>
</li>
<li><a href="#">Menu3</a>
<ul class="submenu">
<li><a href="#">sumenu3-1</a></li>
<li><a href="#">sumenu3-2</a></li>
<li><a href="#">sumenu3-3</a></li>
</ul>
</li>
<li><a href="#">Menu4</a>
<ul class="submenu">
<li><a href="#">sumenu4-1</a></li>
<li><a href="#">sumenu4-2</a></li>
<li><a href="#">sumenu4-3</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<main>
<div class="contents">
<h1>image</h1>
<div class="container">
<div class="item">
<img src="water.jpg" alt="">
<p>사진 제목</p>
<p>사진에 대한 설명 내용들입니다.</p>
</div>
<div class="item">
<img src="water.jpg" alt="">
<p>사진 제목</p>
<p>사진에 대한 설명 내용들입니다.</p>
</div>
<div class="item">
<img src="water.jpg" alt="">
<p>사진 제목</p>
<p>사진에 대한 설명 내용들입니다.</p>
</div>
<div class="item">
<img src="water.jpg" alt="">
<p>사진 제목</p>
<p>사진에 대한 설명 내용들입니다.</p>
</div>
</div>
<div class="container">
<div class="item">
<img src="water.jpg" alt="">
<p>사진 제목</p>
<p>사진에 대한 설명 내용들입니다.</p>
</div>
<div class="item">
<img src="water.jpg" alt="">
<p>사진 제목</p>
<p>사진에 대한 설명 내용들입니다.</p>
</div>
<div class="item">
<img src="water.jpg" alt="">
<p>사진 제목</p>
<p>사진에 대한 설명 내용들입니다.</p>
</div>
<div class="item">
<img src="water.jpg" alt="">
<p>사진 제목</p>
<p>사진에 대한 설명 내용들입니다.</p>
</div>
</div>
<div class="container">
<div class="item">
<img src="water.jpg" alt="">
<p>사진 제목</p>
<p>사진에 대한 설명 내용들입니다.</p>
</div>
<div class="item">
<img src="water.jpg" alt="">
<p>사진 제목</p>
<p>사진에 대한 설명 내용들입니다.</p>
</div>
<div class="item">
<img src="water.jpg" alt="">
<p>사진 제목</p>
<p>사진에 대한 설명 내용들입니다.</p>
</div>
<div class="item">
<img src="water.jpg" alt="">
<p>사진 제목</p>
<p>사진에 대한 설명 내용들입니다.</p>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
○ 레이아웃 구성 1
<!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>
○ 레이아웃 구성 2
<!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;
}
h1, p{
margin: 0;
padding: 0;
}
.wrap{
width: 1200px;
margin: 0 auto;
}
header{
height: 100px;
align-content: center;
}
nav{
height: 60%;
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
nav > div{
font-size: 22px;
}
nav > .logo{
font-size: 36px;
}
.main-slide{
height: 500px;
background-image: url(food.jpg);
align-content: center;
position: relative;
}
.main-slide > h1{
font-size: 56px;
text-align: center;
margin-bottom: 30px;
color: #fff;
}
.button{
width: 200px;
height: 50px;
margin: 0 auto;
font-size: 22px;
background-color:black;
color: #fff;
align-content: center;
text-align: center;
}
.main-slide > p{
position: absolute;
width: 100%;
text-align: center;
bottom: 20px;
font-weight: 600;
color: #fff;
font-size: 20px;
}
.street-food{
height: 500px;
align-content: center;
}
.street-food > h1{
font-size: 40px;
text-align: center;
margin-bottom: 30px;
color: #000;
}
.street-food > .container{
width: 70%;
height: 200px;
display: flex;
justify-content: space-between;
margin: 0 auto;
margin-bottom: 40px;
}
.street-food > .container > .imgbox{
width: 150px;
}
.street-food .imgbox > img{
display: block;
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
}
.street-food .imgbox > p{
height: 40px;
text-align: center;
align-content: center;
font-size: 18px;
}
.believe{
height: 500px;
display: flex;
}
.believe > div{
width: 50%;
}
.believe > .believe-l{
align-content: center;
text-align: center;
background-image: url(food.jpg);
}
.believe > .believe-l > p{
font-weight: 600;
color: #fff;
text-shadow: 1px 1px black;
}
.believe > .believe-r{
align-content: center;
padding: 0 50px;
box-sizing: border-box;
background-color: #eee;
}
.believe > .believe-r > h1{
margin-bottom: 20px;
}
.believe > .believe-r > p{
margin-bottom: 30px;
}
.believe > .believe-r > .button{
margin: 0;
}
.join-club{
height: 300px;
align-content: center;
text-align: center;
position: relative;
}
.join-club > img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
z-index: -1;
top: 0;
opacity: 0.5;
}
.join-club > h1{
margin-bottom: 16px;
}
.join-club > p{
width: 70%;
margin: 0 auto;
font-size: 24px;
margin-bottom: 44px;
}
.make-war{
height: 300px;
position: relative;
}
.make-war > h1{
height: 200px;
align-content: center;
text-align: center;
}
.make-war > .container{
position: absolute;
top: 100%;
left: 50%;
width: 90%;
height: 200px;
display: flex;
justify-content: space-between;
transform: translate(-50%,-50%);
}
.make-war > .container > .item{
width: 24%;
position: relative;
}
.make-war > .container > .item > img{
width: 100%;
height: 100%;
}
.make-war > .container > .item > span{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff99;
display: inline-block;
width: 150px;
height: 40px;
align-content: center;
text-align: center;
font-size: 18px;
border-radius: 7px;
}
.footer{
height: 700px;
background-color: #000;
color: #fff;
padding: 0 50px;
box-sizing: border-box;
}
.footer-up{
height: 150px;
}
.footer-center{
display: flex;
}
.footer-center p{
font-size: 24px;
}
.footer-center > div{
width: 50%;
}
.footer-center > .sns > p{
margin-bottom: 16px;
}
.footer-center > .sns > .box{
display: flex;
width: 170px;
justify-content: space-between;
}
.footer-center > .sns > .box > div{
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 50%;
}
.footer-center > .email > p{
margin-bottom: 20px;
}
.footer-center > .email > select{
width: 300px;
height: 50px;
font-size: 18px;
background-color: #000;
color: #fff;
}
</style>
<body>
<div class="wrap">
<header>
<nav>
<div>MENU</div>
<div>ABOUT</div>
<div class="logo">LOGO</div>
<div>BLOG</div>
<div>HOME</div>
</nav>
</header>
<div class="main-slide">
<h1>Made With Love,<br>Not MSG</h1>
<div class="button">CREATE ONLINE</div>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
</div>
<div class="street-food">
<h1>Street Food for the People</h1>
<div class="container">
<div class="imgbox">
<img src="copyright.jpg" alt="">
<p>Various versions</p>
</div>
<div class="imgbox">
<img src="copyright.jpg" alt="">
<p>Lorem Ipsum</p>
</div>
<div class="imgbox">
<img src="copyright.jpg" alt="">
<p>predefined chunks</p>
</div>
</div>
<div class="button">SEE MENU</div>
</div>
<div class="believe">
<div class="believe-l">
<p>Lorem Ipsum has been the industry's standard dummy</p>
</div>
<div class="believe-r">
<h1>Contrary to popular belief, Lorem Ipsum is not simply random text. </h1>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
<div class="button">SEE MENU</div>
</div>
</div>
<div class="join-club">
<img src="woman-1.jpg" alt="">
<h1>Join the Gyro Club</h1>
<p>consectetur, from a Lorem Ipsum passage, and going through the cites recently with desktop publishing</p>
<div class="button">JOIN NOW</div>
</div>
<div class="believe">
<div class="believe-r">
<h1>Contrary to popular belief, Lorem Ipsum is not simply random text. </h1>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
<div class="button">SEE MENU</div>
</div>
<div class="believe-l">
<div class="button">GET ITEM</div>
</div>
</div>
<div class="make-war">
<h1>Make Gyros Not War</h1>
<div class="container">
<div class="item">
<img src="food-1.jpg" alt="">
<span>popular belief</span>
</div>
<div class="item">
<img src="food-1.jpg" alt="">
<span>popular belief</span>
</div>
<div class="item">
<img src="food-1.jpg" alt="">
<span>popular belief</span>
</div>
<div class="item">
<img src="food-1.jpg" alt="">
<span>popular belief</span>
</div>
</div>
</div>
<div class="footer">
<div class="footer-up"></div>
<div class="footer-center">
<div class="sns">
<p>#public</p>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</div>
<div class="email">
<p>Letraset sheets containing Lorem Ipsum</p>
<select name="a" id="a">
<option value="1">이메일1</option>
<option value="1">이메일2</option>
<option value="1">이메일3</option>
</select>
</div>
</div>
<div class="footer-down">
<div class="logo"></div>
<div class="menu"></div>
<div class="copy"></div>
</div>
</div>
</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>
body{
margin: 0;
}
ul, li{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: #000;
}
#wrap{
width: 1200px;
margin: 0 auto;
}
header{
height: 100px;
display: flex;
}
#logo{
width: 20%;
background-color: #333;
}
nav{
width: 80%;
background-color: #ccc;
position: relative;
}
#menu{
width: 70%;
height: 50px;
position: absolute;
right: 0;
bottom: 0;
display: flex;
z-index: 1;
}
#menu > li{
width: 25%;
}
#menu > li > a{
display: inline-block;
width: 100%;
height: 50px;
text-align: center;
align-content: center;
background-color: #fff;
font-size: 24px;
}
#menu:hover .submenu{
display: block;
}
.submenu{
display: none;
}
.submenu > li > a{
display: inline-block;
height: 40px;
width: 100%;
text-align: center;
align-content: center;
background-color: #fff;
}
.submenu > li:last-child > a{
padding-bottom: 20px;
}
#contents{
height: 300px;
background-color: #aaa;
position: relative;
}
#contents > img{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: 1s;
position: absolute;
left: 0;
top: 0;
}
#contents > span{
position: absolute;
left: 50%;
top: 50%;
background-color: #ffffff99;
transform: translate(-50%,-50%);
padding: 10px 30px;
font-size: 24px;
border-radius: 10px;
opacity: 0;
transition: 1s;
}
#contents:hover > .img2{
opacity: 0;
}
#contents:hover > span{
opacity: 1;
}
#contents > span:hover{
cursor: pointer;
transition: 0s;
background-color: #00000099;
color: #fff;
}
section{
height: 200px;
display: flex;
}
section > div{
width: calc(100% / 3);
}
.section1{
align-content: center;
position: relative;
}
.section1 > h1{
margin: 0;
margin-bottom: 20px;
text-align: center;
}
.section1 > .button{
width: 120px;
height: 40px;
text-align: center;
align-content: center;
background-color: #000;
color: #fff;
margin: 0 auto;
}
.section1 > .button:hover{
cursor: pointer;
}
.section1 > .button:active + img{
opacity: 0.5;
}
.section1 > img{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
opacity: 0;
transition: 1s;
}
.section2{
position: relative;
}
.section2:hover > img{
display: block;
}
.section2 > img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
display: none;
}
.section3{
background-color: #777;
}
footer{
height: 100px;
background-color: #111;
}
</style>
<body>
<div id="wrap">
<header>
<div id="logo"></div>
<nav>
<ul id="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 id="contents">
<img class="img1" src="food-1.jpg" alt="">
<img class="img2" src="food.jpg" alt="">
<span>Click</span>
</div>
<section>
<div class="section1">
<h1>Where does it come from?</h1>
<div class="button">Click</div>
<img src="woman-1.jpg" alt="">
</div>
<div class="section2">
<img src="food.jpg" alt="">
</div>
<div class="section3"></div>
</section>
<footer></footer>
</div>
</body>
</html>
■ Web 2일차 11-13
■ 폰트 적용
○ 구글폰트 적용
- 구글 폰트 사이트에서 Filter 해당 언어 선택
- 폰트의 스타일의 개수가 너비의 차이있는 글자체임
- 글자체를 선택하면 너비 값의 종류를 확인할수 있음
- 폰트에서 Getfont 클릭
- Get embed code (웹에서 적용), Download all (디바이스에서 적용할 파일 다운로드)
- 적용할 style 체크
- import 에서 CSS에 넣을 부분 카피
300;500;700 체크하면 추가됨
- 적용
<style>
@import url('https://fonts.googleapis.com/css2?family=Matemasie&family=Sunflower:wght@300;500;700&display=swap');
.sf{
font-family: "Sunflower";
font-weight: 300;
}
</style>
<body>
<h1 class="sf">적용된 안녕하세요</h1>
<h1>기본 안녕하세요</h1>
</body>
○ 눈누 폰트적용
- font-weight는 글자 파일에 관련 되어 있음
여러개 적용가능
- font-face는 파일을 가져와 이름을 지정해 주는 역활 동일 하지 않아도 상관없음
하나의 파일에 모든 굵기를 바꿀수 있는 글자체이면 크게 문제 없지만 웹용으로 많이 쓰는 woff는 하나의 형태만 사용
가변폰트로 만들어져 있는 woff2같은경우 weight를 적용할 수 있음
<style>
@font-face {
font-family: 'Gy';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Title_Light.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'SB';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.gy{
font-family: 'Gy';
}
.sb{
font-family: "SB";
}
</style>
<body>
<h1 class="gy">적용된 안녕하세요</h1>
<h1 class="sb">적용된 안녕하세요</h1>
<h1>기본 안녕하세요</h1>
</body>
○ 파일적용
- woff 다운로드 ttf도 가능은하나 웹보다는 데스크 탑에서 사용
WOFF (Web Open Font Format) : 웹에 최적화
TTF (TrueType Font) : 데스크탑에 최적화
- 각각의 파일을 적용하고 이름을 지정함
<style>
@font-face {
font-family: "tb";
src: url(font/Title_Bold.woff);
}
@font-face {
font-family: "tm";
src: url(font/Title_Medium.woff);
}
@font-face {
font-family: "tl";
src: url(font/Title_Light.woff);
}
.tb{
font-family: "tb";
}
.tl{
font-family: "tl";
}
</style>
<body>
<h1 class="tb">적용된 안녕하세요</h1>
<h1 class="tl">적용된 안녕하세요</h1>
<h1>기본 안녕하세요</h1>
</body>
</html>
- 전체 적용 클래스로 우선순위를 얻어서 변경
<style>
@font-face {
font-family: "tb";
src: url(font/Title_Bold.woff);
}
@font-face {
font-family: "tm";
src: url(font/Title_Medium.woff);
}
@font-face {
font-family: "tl";
src: url(font/Title_Light.woff);
}
body > *{
font-family: "tm";
}
.tb{
font-family: "tb";
}
.tl{
font-family: "tl";
}
</style>
<body>
<h1 class="tb">적용된 안녕하세요</h1>
<h1 class="tl">적용된 안녕하세요</h1>
<h1>기본 안녕하세요</h1>
</body>
■ 아이콘 적용하기
○ 구글 아이콘
- 스타일 링크
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
- 글자로 인식 커스텀 예시
<style>
.a > span{
font-size: 50px;
color: aqua;
background-color: blue;
border-radius: 50%;
width: 80px;
height: 80px;
text-align: center;
align-content: center;
}
.b > span{
font-variation-settings:
'FILL' 1,
'wght' 700,
'GRAD' 0,
'opsz' 48;
font-size: 80px;
font-weight: 800;
}
.c > span{
font-size: 60px;
color: blueviolet;
}
</style>
<body>
<div class="a">
<span class="material-symbols-outlined">menu</span>
</div>
<div class="b">
<span class="material-symbols-outlined">home</span>
</div>
<div class="c">
<span class="material-symbols-outlined">add</span>
</div>
</body>
○ Font awesome (폰트 어썸)
- CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.css">
- Free 사용가능
- 코드
<style>
.a{
width: 30px;
height: 30px;
background-color: aqua;
border-radius: 50%;
padding: 10px;
}
.c{
font-size: 30px;
height: 30px;
background-color: aquamarine;
padding: 10px;
}
.d{
font-size: 30px;
line-height: 30px;
vertical-align: top;
background-color: aquamarine;
padding: 10px;
}
</style>
<body>
<svg class="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#FF0000" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg>
<i class="c fa-solid fa-heart fa-flip fa-xs" style="color: #FFD43B;"></i>
<i class="d fa-solid fa-heart fa-flip fa-xs" style="color: #FFD43B;"></i>
</body>
- 색 정보
■ 기타 효과
○ Border - Radius
- 4개
첫 번째 값은 좌측 상단 모서리에 적용
두 번째 값은 우측 상단 모서리에 적용
세 번째 값은 우측 하단 모서리에 적용
네 번째 값은 좌측 하단 모서리에 적용
border-radius: 15px 50px 30px 5px;
- 3개
첫 번째 값은 좌측 상단 모서리에 적용
두 번째 값은 우측 상단과 좌측 하단 모서리에 적용
세 번째 값은 우측 하단 모서리에 적용
border-radius: 15px 50px 30px;
- 2개
첫 번째 값은 좌측 상단과 우측 하단 모서리에 적용
두 번째 값은 우측 상단과 좌측 하단 모서리에 적용
border-radius: 15px 50px;
- 이미지에 적용
<style>
img{
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 10px 30px;
}
</style>
<body>
<img src="dog.jpg" alt="">
</body>
- 이미지와 박스에 적용해보기
<style>
p{
margin: 2px;
}
.box{
width: 200px;
border: 1px solid #aaa;
overflow: hidden; /* 넘치는 것 숨기기 */
border-radius: 40px 10px;
}
.box img{
width: 100%;
object-fit: cover;
}
</style>
<body>
<div class="box">
<img src="dog.jpg" alt="">
<p>제목</p>
<p>내용</p>
</div>
</body>
○ Text - shadow
<style>
.box > h1:nth-child(1){
text-shadow: 0px 4px; /*좌 아래*/
}
.box > h1:nth-child(2){
text-shadow: -4px -4px red; /*좌 아래 색*/
}
.box > h1:nth-child(3){
text-shadow: 4px 4px 2px; /*좌 아래 흐림*/
}
.box > h1:nth-child(4){
text-shadow: 4px 4px 6px;
}
.box > h1:nth-child(5){
text-shadow: 3px 3px 3px #888 ; /*좌 아래 흐림 색*/
}
</style>
<body>
<div class="box">
<h1>텍스트 그림자1</h1>
<h1>텍스트 그림자2</h1>
<h1>텍스트 그림자3</h1>
<h1>텍스트 그림자4</h1>
<h1>텍스트 그림자5</h1>
</div>
</body>
○ Box-shadow
<style>
.box{
width: 100px;
height: 100px;
background-color: aquamarine;
margin-bottom: 20px;
}
.box:nth-child(1){
box-shadow: 3px 3px;
}
.box:nth-child(2){
box-shadow: 3px 3px #fff00088;
}
.box:nth-child(3){
box-shadow: 3px 3px 3px red;
}
.box:nth-child(4){
box-shadow: -2px -2px 12px inset rgba(48, 97, 81, 0.308);
}
.box:nth-child(5){
box-shadow: 0px 4px 8px #aaa, 0px 8px 20px #aaa;
}
</style>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</body>
○ Text -Stroke
<style>
.box{
width: 300px;
position: relative;
}
.box > img{
width: 300px;
}
.box > h1{
margin: 0;
-webkit-text-stroke: 6px #ddd;
color: transparent;
font-size: 120px;
font-weight: 900;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="box">
<img src="dog.jpg" alt="">
<h1>DOG</h1>
</div>
</body>
○ background-clip
<style>
h1{
margin: 0;
color: transparent;
font-size: 120px;
font-weight: 900;
background-image: url(dog.jpg);
background-size: 100%;
background-position: center;
background-clip: text;
}
</style>
<body>
<h1>DOG</h1>
</body>
○ mask-imge clip
<style>
.box{
width: 300px;
height: 300px;
background-image: url(dog.jpg);
background-size: cover;
background-position: center;
mask-image: url(Untitled-1.png);
mask-size: cover;
}
</style>
<body>
<div class="box"></div>
</body>
■ Web 3일차 11-14
■ 로딩화면
○ 두 원 회전
<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>
■ Web 4일차 11-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>
</head>
<style>
body{
margin: 0;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.wrap{
}
header{
height: 100px;
display: flex;
}
header > .logo{
width: 35%;
text-align: center;
align-content: center;
font-size: 32px;
font-weight: 800;
}
header > nav{
width: 65%;
align-content: center;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
nav > .menu{
height: 50px;
display: flex;
}
nav > .menu > li{
font-size: 1.2em;
font-weight: 600;
padding: 0 20px;
align-content: center;
}
.section1{
height: 450px;
display: flex;
padding: 0 10%;
box-sizing: border-box;
}
.section1 > .left{
width: 40%;
}
.section1 .left > h1{
text-align: center;
font-size: 2.8em;
margin: 1.5em 0;
}
.section1 .left > .textbox{
display: flex;
}
.section1 .left > .textbox > div{
width: 50%;
text-align: center;
}
.section1 .left > .textbox > div > .title{
font-size: 1.6em;
font-weight: 600;
}
.section1 .left > .textbox > div > p:nth-child(2){
font-size: 1.2em;
padding: 0 0.5em;
box-sizing: border-box;
}
.section1 > .right{
width: 60%;
}
.section1 > .right > img{
width: 100%;
height: 88%;
object-fit: cover;
border-radius: 15px;
}
/* 두번째 레이아웃 */
.section2{
height: 700px;
display: flex;
}
.section2 > .left{
width: 50%;
text-align: center;
align-content: center;
}
.section2 > .left > img{
width: 60%;
height: 60%;
object-fit: cover;
}
.section2 > .right{
width: 50%;
}
.section2 > .right > h2{
font-size: 3em;
}
.section2 > .right > .textbox{
margin-left: 100px;
width: 60%;
}
.section2 > .right > .textbox > .title{
font-size: 1.6em;
font-weight: 600;
}
.section2 > .right > .textbox > .text{
font-size: 1.2em;
margin-bottom: 2.2em;
}
/* 세번째 레이아웃 */
.section3{
height: 200px;
display: flex;
}
.section3 > .left{
align-content: center;
width: 40%;
}
.section3 > .left > h1{
width: 50%;
font-size: 3em;
margin: 0 auto;
}
.section3 > .left > p{
width: 50%;
margin: 0 auto;
}
.section3 > .right{
width: 60%;
align-content: center;
}
.section3 > .right > p{
width: 90%;
font-size: 1.6em;
font-weight: 600;
margin: 0;
}
/* 세번째 레이아웃 */
.section4{
height: 400px;
align-content: center;
}
.section4 > h1{
margin: 0;
font-size: 3em;
text-align: center;
margin-bottom: 0.3em;
}
.section4 > p{
margin: 0;
font-size: 1.6em;
text-align: center;
margin-bottom: 1em;
}
.section4 > .container{
width: 80%;
margin: 0 auto;
height: 100px;
display: flex;
justify-content: space-between;
}
.section4 > .container > .item{
display: flex;
width: 25%;
background-color: #d8dceb;
border-radius: 16px;
}
.section4 > .container > .item > .left{
width: 30%;
text-align: center;
align-content: center;
}
.section4 > .container > .item > .left > img{
width: 60%;
height: 40%;
border-radius: 10px;
object-fit: cover;
}
.section4 > .container > .item > .right{
width: 70%;
align-content: center;
}
.section4 > .container > .item > .right > p:nth-child(1){
font-size: 1.2em;
margin-bottom: 0.4em;
}
.section4 > .container > .item p{
margin: 0;
}
.section5{
height: 500px;
background-color: #ccc;
padding: 0 10%;
box-sizing: border-box;
display: flex;
}
.section5 > .left{
width: 40%;
background-color: #999;
}
.section5 > .left > h1{
width: 90%;
margin: 0 auto;
}
.section5 > .left > p{
width: 90%;
margin: 0 auto;
}
.section5 > .right{
width: 60%;
background-color: #aaa;
}
</style>
<body>
<div class="wrap">
<header>
<div class="logo">five centuries</div>
<nav>
<ul class="menu">
<li>type</li>
<li>scrambled</li>
<li>dummy</li>
<li>printer</li>
<li>printing</li>
</ul>
</nav>
</header>
<div class="section1">
<div class="left">
<h1>piece of classical Latin</h1>
<div class="textbox">
<div class="textbox-left">
<p class="title">unchanged</p>
<p>but also the leap into electronic typesetting, remaining</p>
</div>
<div class="textbox-right">
<p class="title">readable</p>
<p>readable content of a page when looking</p>
</div>
</div>
</div>
<div class="right">
<img src="food.jpg" alt="">
</div>
</div>
<div class="section2">
<div class="left">
<img src="woman-1.jpg" alt="">
</div>
<div class="right">
<h2>come from</h2>
<div class="textbox">
<p class="title">Contrary to popular</p>
<p class="text">professor at Hampden-Sydney College in Virginia, looked up one of the more obscure</p>
</div>
<div class="textbox">
<p class="title">Contrary to popular</p>
<p class="text">professor at Hampden-Sydney College in Virginia, looked up one of the more obscure</p>
</div>
<div class="textbox">
<p class="title">Contrary to popular</p>
<p class="text">professor at Hampden-Sydney College in Virginia, looked up one of the more obscure</p>
</div>
<div class="textbox">
<p class="title">Contrary to popular</p>
<p class="text">professor at Hampden-Sydney College in Virginia, looked up one of the more obscure</p>
</div>
</div>
</div>
<div class="section3">
<div class="left">
<h1>predefined chunks</h1>
<p>discovered the undoubtable</p>
</div>
<div class="right">
<p>
but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything
</p>
</div>
</div>
<div class="section4">
<h1>Where does it come</h1>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text.<br> It has roots in a piece of classical Latin literature from 45 BC, making</p>
<div class="container">
<div class="item">
<div class="left">
<img src="food.jpg" alt="">
</div>
<div class="right">
<p>going through</p>
<p>Contrary to popular belief, Lorem Ipsum is not</p>
</div>
</div>
<div class="item">
<div class="left">
<img src="food.jpg" alt="">
</div>
<div class="right">
<p>going through</p>
<p>Contrary to popular belief, Lorem Ipsum is not</p>
</div>
</div>
<div class="item">
<div class="left">
<img src="food.jpg" alt="">
</div>
<div class="right">
<p>going through</p>
<p>Contrary to popular belief, Lorem Ipsum is not</p>
</div>
</div>
</div>
</div>
<div class="section5">
<div class="left">
<h1>Hampden-Sydney College</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, making</p>
<div class="container">
<div class="top">
<div class="box">
<div class="left"></div>
<div class="right">unknown printer</div>
</div>
<div class="box">
<div class="left"></div>
<div class="right">Richard McClintock</div>
</div>
</div>
<div class="bottom">
<div class="box">
<div class="left"></div>
<div class="right">many variations</div>
</div>
<div class="box">
<div class="left"></div>
<div class="right">Contrary to</div>
</div>
</div>
</div>
</div>
<div class="right"></div>
</div>
</div>
</body>
</html>
■ Web 5일차 11-18
<!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: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.wrap{
width: 80%;
margin: 0 auto;
}
.wrap > div:nth-child(2n){
background-color: #eef1fc;
border-radius: 15px;
}
header{
height: 100px;
display: flex;
}
header > .logo{
width: 35%;
text-align: center;
align-content: center;
font-size: 32px;
font-weight: 800;
}
header > nav{
width: 65%;
align-content: center;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
nav > .menu{
height: 50px;
display: flex;
}
nav > .menu > li{
font-size: 1.2em;
font-weight: 600;
padding: 0 20px;
align-content: center;
}
.section1{
height: 450px;
display: flex;
padding: 0 10%;
box-sizing: border-box;
}
.section1 > .left{
width: 40%;
}
.section1 .left > h1{
text-align: center;
font-size: 2.8em;
margin: 1.5em 0;
}
.section1 .left > .textbox{
display: flex;
}
.section1 .left > .textbox > div{
width: 50%;
text-align: center;
}
.section1 .left > .textbox > div > .title{
font-size: 1.6em;
font-weight: 600;
}
.section1 .left > .textbox > div > p:nth-child(2){
font-size: 1.2em;
padding: 0 0.5em;
box-sizing: border-box;
}
.section1 > .right{
width: 60%;
align-content: center;
}
.section1 > .right > img{
width: 100%;
height: 88%;
object-fit: cover;
border-radius: 15px;
}
/* 두번째 레이아웃 */
.section2{
height: 700px;
display: flex;
}
.section2 > .left{
width: 50%;
text-align: center;
align-content: center;
}
.section2 > .left > img{
width: 60%;
height: 60%;
object-fit: cover;
}
.section2 > .right{
width: 50%;
}
.section2 > .right > h2{
font-size: 3em;
}
.section2 > .right > .textbox{
margin-left: 100px;
width: 60%;
}
.section2 > .right > .textbox > .title{
font-size: 1.6em;
font-weight: 600;
}
.section2 > .right > .textbox > .text{
font-size: 1.2em;
margin-bottom: 2.2em;
}
/* 세번째 레이아웃 */
.section3{
height: 200px;
display: flex;
}
.section3 > .left{
align-content: center;
width: 40%;
}
.section3 > .left > h1{
width: 50%;
font-size: 3em;
margin: 0 auto;
}
.section3 > .left > p{
width: 50%;
margin: 0 auto;
}
.section3 > .right{
width: 60%;
align-content: center;
}
.section3 > .right > p{
width: 90%;
font-size: 1.6em;
font-weight: 600;
margin: 0;
}
/* 세번째 레이아웃 */
.section4{
height: 400px;
align-content: center;
}
.section4 > h1{
margin: 0;
font-size: 3em;
text-align: center;
margin-bottom: 0.3em;
}
.section4 > p{
margin: 0;
font-size: 1.6em;
text-align: center;
margin-bottom: 1em;
}
.section4 > .container{
width: 80%;
margin: 0 auto;
height: 100px;
display: flex;
justify-content: space-between;
}
.section4 > .container > .item{
display: flex;
width: 25%;
background-color: #d8dceb;
border-radius: 16px;
}
.section4 > .container > .item > .left{
width: 30%;
text-align: center;
align-content: center;
}
.section4 > .container > .item > .left > img{
width: 60%;
height: 40%;
border-radius: 10px;
object-fit: cover;
}
.section4 > .container > .item > .right{
width: 70%;
align-content: center;
}
.section4 > .container > .item > .right > p:nth-child(1){
font-size: 1.2em;
margin-bottom: 0.4em;
}
.section4 > .container > .item p{
margin: 0;
}
.section5{
height: 500px;
padding: 0 10%;
box-sizing: border-box;
display: flex;
}
.section5 > .left{
width: 40%;
align-content: center;
}
.section5 > .left > h1{
width: 90%;
margin: 0 auto;
font-size: 2.5em;
margin-bottom: 20px;
}
.section5 > .left > p{
width: 90%;
margin: 0 auto;
font-size: 1.6em;
margin-bottom: 30px;
}
.section5 > .left .container{
width: 90%;
margin: 0 auto;
}
.section5 > .left .container > div{
display: flex;
}
.section5 > .left .container > .top{
margin-bottom: 20px;
}
.section5 > .left .container .box{
width: 50%;
display: flex;
}
.section5 .container .box > .left{
width: 30%;
}
.section5 .container .left > img{
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 50%;
}
.section5 .container .box > .right{
width: 70%;
align-content: center;
text-align: center;
font-size: 1.2em;
}
.section5 > .right{
width: 60%;
align-content: center;
}
.section5 > .right > img{
width: 80%;
height: 60%;
object-fit: cover;
display: block;
margin: 0 auto;
}
.section6{
height: 600px;
align-content: center;
}
.section6 > .container{
display: flex;
width: 80%;
margin: 0 auto;
height: 80%;
}
.section6 > .container > img{
width: 50%;
height: 100%;
object-fit: cover;
position: relative;
}
.section6 > .container > img:nth-child(1){
right: 10px;
top: 20px;
}
.section6 > .container > img:nth-child(2){
left: 10px;
bottom: 20px;
}
.section7{
height: 700px;
align-content: center;
}
.section7 > h1{
margin: 0;
text-align: center;
font-size: 2.5em;
margin-bottom: 14px;
}
.section7 > p{
margin: 0;
font-size: 1.6em;
width: 70%;
text-align: center;
margin: 0 auto;
margin-bottom: 28px;
}
.section7 > .container{
width: 80%;
height: 60%;
margin: 0 auto;
}
.section7 > .container > .top{
margin-bottom: 20px;
}
.section7 > .container > div{
display: flex;
height: calc(50% - 10px);
gap: 20px;
}
.section7 > .container > div > .box{
display: flex;
width: 50%;
border-radius: 20px;
background-color: #d8dceb;
}
.section7 > .container .left{
width: 30%;
align-content: center;
}
.section7 > .container .left > img{
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
margin: 0 auto;
display: block;
}
.section7 > .container .right{
width: 70%;
align-content: center;
font-size: 1.2em;
text-align: justify;
box-sizing: border-box;
padding-right: 20px;
}
.section8{
height: 700px;
align-content: center;
}
.section8 > .container{
width: 80%;
height: 80%;
display: flex;
margin: 0 auto;
}
.section8 > .container > .left {
width: 60%;
padding-left: 10%;
padding-right: 4%;
box-sizing: border-box;
align-content: center;
}
.section8 > .container > .left > h1{
margin: 0;
font-size: 2.5em;
margin-bottom: 30px;
}
.section8 > .container > .left > p{
margin: 0;
font-size: 1.6em;
}
.section8 > .container > .left > p:nth-child(2){
margin-bottom: 20px;
}
.section8 > .container > .right{
width: 40%;
}
.section8 > .container > .right > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.section9{
height: 400px;
align-content: center;
}
.section9 > .contents{
width: 80%;
height: 80%;
display: flex;
margin: 0 auto;
}
h1, p{
margin: 0 ;
}
.section9 > .contents > .left{
width: 50%;
align-content: center;
}
.section9 > .contents > .left > h1{
font-size: 2.5em;
margin-bottom: 20px;
}
.section9 > .contents > .left > .box{
height: 50%;
width: 50%;
background-color: #a2a7bb;
display: flex;
flex-direction: column;
font-size: 1.4em;
justify-content: space-evenly;
padding-left: 5%;
box-sizing: border-box;
color: #fff;
}
.section9 > .contents > .right{
width: 50%;
align-content: center;
font-size: 1.4em;
}
footer{
height: 100px;
align-content: center;
}
footer > .menu{
width: 50%;
display: flex;
margin: 0 auto;
}
footer > .menu > li{
width: 20%;
font-size: 1.5em;
text-align: center;
}
</style>
<body>
<div class="wrap">
<header>
<div class="logo">five centuries</div>
<nav>
<ul class="menu">
<li>type</li>
<li>scrambled</li>
<li>dummy</li>
<li>printer</li>
<li>printing</li>
</ul>
</nav>
</header>
<div class="section1">
<div class="left">
<h1>piece of classical Latin</h1>
<div class="textbox">
<div class="textbox-left">
<p class="title">unchanged</p>
<p>but also the leap into electronic typesetting, remaining</p>
</div>
<div class="textbox-right">
<p class="title">readable</p>
<p>readable content of a page when looking</p>
</div>
</div>
</div>
<div class="right">
<img src="food.jpg" alt="">
</div>
</div>
<div class="section2">
<div class="left">
<img src="woman-1.jpg" alt="">
</div>
<div class="right">
<h2>come from</h2>
<div class="textbox">
<p class="title">Contrary to popular</p>
<p class="text">professor at Hampden-Sydney College in Virginia, looked up one of the more obscure</p>
</div>
<div class="textbox">
<p class="title">Contrary to popular</p>
<p class="text">professor at Hampden-Sydney College in Virginia, looked up one of the more obscure</p>
</div>
<div class="textbox">
<p class="title">Contrary to popular</p>
<p class="text">professor at Hampden-Sydney College in Virginia, looked up one of the more obscure</p>
</div>
<div class="textbox">
<p class="title">Contrary to popular</p>
<p class="text">professor at Hampden-Sydney College in Virginia, looked up one of the more obscure</p>
</div>
</div>
</div>
<div class="section3">
<div class="left">
<h1>predefined chunks</h1>
<p>discovered the undoubtable</p>
</div>
<div class="right">
<p>
but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything
</p>
</div>
</div>
<div class="section4">
<h1>Where does it come</h1>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text.<br> It has roots in a piece of classical Latin literature from 45 BC, making</p>
<div class="container">
<div class="item">
<div class="left">
<img src="food.jpg" alt="">
</div>
<div class="right">
<p>going through</p>
<p>Contrary to popular belief, Lorem Ipsum is not</p>
</div>
</div>
<div class="item">
<div class="left">
<img src="food.jpg" alt="">
</div>
<div class="right">
<p>going through</p>
<p>Contrary to popular belief, Lorem Ipsum is not</p>
</div>
</div>
<div class="item">
<div class="left">
<img src="food.jpg" alt="">
</div>
<div class="right">
<p>going through</p>
<p>Contrary to popular belief, Lorem Ipsum is not</p>
</div>
</div>
</div>
</div>
<div class="section5">
<div class="left">
<h1>Hampden-Sydney College</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, making</p>
<div class="container">
<div class="top">
<div class="box">
<div class="left">
<img src="food.jpg" alt="">
</div>
<div class="right">printer</div>
</div>
<div class="box">
<div class="left">
<img src="food.jpg" alt="">
</div>
<div class="right">McClintock</div>
</div>
</div>
<div class="bottom">
<div class="box">
<div class="left">
<img src="food.jpg" alt="">
</div>
<div class="right">variations</div>
</div>
<div class="box">
<div class="left">
<img src="food.jpg" alt="">
</div>
<div class="right">Contrary</div>
</div>
</div>
</div>
</div>
<div class="right">
<img src="sushi-8113165_640.jpg" alt="">
</div>
</div>
<div class="section6">
<div class="container">
<img src="strawberry-8214486_1280.jpg" alt="">
<img src="table-2600954_1280.jpg" alt="">
</div>
</div>
<div class="section7">
<h1>anything embarrassing</h1>
<p>Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum</p>
<div class="container">
<div class="top">
<div class="box">
<div class="left">
<img src="food.jpg" alt="">
</div>
<div class="right">
<p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,</p>
</div>
</div>
<div class="box">
<div class="left">
<img src="strawberry-8214486_1280.jpg" alt="">
</div>
<div class="right">
<p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,</p>
</div>
</div>
</div>
<div class="bottom">
<div class="box">
<div class="left">
<img src="sushi-8113165_640.jpg" alt="">
</div>
<div class="right">
<p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,</p>
</div>
</div>
<div class="box">
<div class="left">
<img src="table-2600954_1280.jpg" alt="">
</div>
<div class="right">
<p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,</p>
</div>
</div>
</div>
</div>
</div>
<div class="section8">
<div class="container">
<div class="left">
<h1> by injected humour, or randomised words which don't look even slightly believable</h1>
<p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words</p>
<p>combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition</p>
</div>
<div class="right">
<img src="woman-1.jpg" alt="">
</div>
</div>
</div>
<div class="section9">
<div class="contents">
<div class="left">
<h1>popular belief</h1>
<div class="box">
<p>College in Virginia</p>
<p>undoubtable source</p>
</div>
</div>
<div class="right">
<p>generator on the Internet.</p>
<p>many</p>
</div>
</div>
</div>
<footer>
<ul class="menu">
<li>type</li>
<li>scrambled</li>
<li>dummy</li>
<li>printer</li>
<li>printing</li>
</ul>
</footer>
</div>
</body>
</html>
■ Web 6일차 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>
<style>
body, h1, p{
margin: 0;
font-family: 'Times New Roman', Times, serif;
font-weight: 600;
}
header{
height: 100vh;
position: relative;
}
header > img{
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
z-index: -1;
}
header > nav{
width: 80%;
margin: 0 auto;
height: 100px;
align-content: center;
position: relative;
}
nav > .logo{
font-size: 3em;
color: #fff;
text-shadow: 1px 1px 3px black;
}
nav > .menu{
width: 70%;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
}
.menu > .menu1{
width: 20%;
text-align: center;
align-content: center;
font-size: 1.4em;
color: #fff;
text-shadow: 1px 1px 2px black;
}
header > section{
height: calc(100% - 100px);
background-color: #00000044;
align-content: center;
color: #fff;
}
section > h1{
width: 50%;
font-size: 4em;
line-height: 1.5;
margin: 0 auto;
text-align: center;
margin-bottom: 50px;
}
section > .container{
width: 80%;
height: 44%;
align-content: center;
margin: 0 auto;
background-color: #00000099;
border-radius: 20px;
}
.container > h1{
font-size: 2.6em;
text-align: center;
margin-bottom: 18px;
}
.container > p{
width: 70%;
margin: 0 auto;
text-align: center;
font-size: 1.4em;
line-height: 1.6;
margin-bottom: 20px;
}
.container > .button{
width: 180px;
height: 45px;
border-radius: 15px;
font-size: 1.6em;
text-align: center;
align-content: center;
background-color: #8c8ee2;
margin: 0 auto;
}
.features{
height: 100vh;
background-color: #ccc;
align-content: center;
}
.features > h1{
font-size: 3em;
text-align: center;
margin-bottom: 12px;
}
.features > p{
width: 50%;
font-size: 1.4em;
margin: 0 auto;
text-align: center;
margin-bottom: 24px;
}
.features > .container1{
width: 80%;
height: 45%;
border: 1px solid #000;
margin: 0 auto;
margin-bottom: 24px;
}
.features > .container2{
width: 80%;
height: 20%;
border: 1px solid #000;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<img src="table-2600954_1280.jpg" alt="">
<nav>
<div class="logo">logo</div>
<div class="menu">
<div class="menu1">text</div>
<div class="menu1">printing</div>
<div class="menu1">type</div>
<div class="menu1">specimen</div>
<div class="menu1">five</div>
</div>
</nav>
<section>
<h1>popularised in the 1960s with the release</h1>
<div class="container">
<h1>page when looking at its layout</h1>
<p>but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
<div class="button">Button</div>
</div>
</section>
</header>
<div class="features">
<h1>established fact</h1>
<p>will be The point distracted by the readable content of a page when looking at its layout</p>
<div class="container1"></div>
<div class="container2"></div>
</div>
</div>
</body>
</html>
■ Web 7일차 11-20
<!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, h1, p{
margin: 0;
font-family: 'Times New Roman', Times, serif;
font-weight: 600;
}
header{
height: 100vh;
position: relative;
}
header > img{
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
z-index: -1;
}
header > nav{
width: 80%;
margin: 0 auto;
height: 100px;
align-content: center;
position: relative;
}
nav > .logo{
font-size: 3em;
color: #fff;
text-shadow: 1px 1px 3px black;
}
nav > .menu{
width: 70%;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
}
.menu > .menu1{
width: 20%;
text-align: center;
align-content: center;
font-size: 1.4em;
color: #fff;
text-shadow: 1px 1px 2px black;
}
header > section{
height: calc(100% - 100px);
background-color: #00000044;
align-content: center;
color: #fff;
}
section > h1{
width: 50%;
font-size: 4em;
line-height: 1.5;
margin: 0 auto;
text-align: center;
margin-bottom: 50px;
}
section > .container{
width: 80%;
height: 44%;
align-content: center;
margin: 0 auto;
background-color: #00000099;
border-radius: 20px;
}
.container > h1{
font-size: 2.6em;
text-align: center;
margin-bottom: 18px;
}
.container > p{
width: 70%;
margin: 0 auto;
text-align: center;
font-size: 1.4em;
line-height: 1.6;
margin-bottom: 20px;
}
.container > .button{
width: 180px;
height: 45px;
border-radius: 15px;
font-size: 1.6em;
text-align: center;
align-content: center;
background-color: #8c8ee2;
margin: 0 auto;
}
.features{
height: 100vh;
align-content: center;
}
.features > h1{
font-size: 3em;
text-align: center;
margin-bottom: 12px;
}
.features > p{
width: 50%;
font-size: 1.4em;
margin: 0 auto;
text-align: center;
margin-bottom: 24px;
}
.features > .container1{
width: 80%;
height: 45%;
margin: 0 auto;
margin-bottom: 24px;
display: flex;
}
.features > .container1 > div{
width: 50%;
}
.features > .container1 > .contents1 > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.features > .container1 > .contents2{
box-sizing: border-box;
padding: 0 5%;
}
.features .contents2 > .item{
display: flex;
height: 25%;
}
.features .contents2 > .item > .item-l{
width: 80px;
text-align: center;
align-content: center;
}
.features .contents2 > .item > .item-r{
width: calc(100% - 80px);
align-content: center;
}
.features > .container1 > .contents2 img{
width: 50px;
height: 50px;
border-radius: 50%;
}
.features > .container2{
width: 80%;
height: 20%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.features > .container2 > .item{
width: 30%;
height: 70%;
display: flex;
border: 2px solid #686868;
border-radius: 20px;
}
.features > .container2 > .item > .item-l{
width: 25%;
align-content: center;
text-align: center;
}
.features > .container2 .item-l img{
width: 50px;
height: 50px;
border-radius: 50%;
}
.features > .container2 > .item > .item-r{
width: 75%;
align-content: center;
}
.features > .container2 > .item > .item-r > p:nth-child(1){
font-size: 1.1em;
font-weight: 800;
margin-bottom: 0.5em;
}
.features > .container2 > .item > .item-r > p:nth-child(2){
font-size: 0.8em;
}
.data{
height: 70vh;
align-content: center;
}
.data > .container{
width: 80%;
height: 80%;
margin: 0 auto;
display: flex;
}
.data > .container > .container-l{
width: 40%;
text-align: center;
align-content: center;
}
.data > .container > .container-l > img{
width: 300px;
height: 300px;
object-fit: cover;
border-radius: 50%;
}
.data > .container > .container-r{
width: 60%;
align-content: center;
}
.data > .container > .container-r > .box{
display: flex;
}
.data > .container > .container-r > .box:nth-child(1){
margin-bottom: 20px;
}
.data > .container > .container-r > .box > p:nth-child(1){
width: 30%;
font-size: 2em;
}
.data > .container > .container-r > .box > p:nth-child(2){
width: 70%;
font-size: 1.2em;
}
.info{
height: 100vh;
display: flex;
}
.info > div{
width: 50%;
}
.info > .left > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.info > .right{
box-sizing: border-box;
padding-left: 5%;
padding-right: 15%;
align-content: center;
}
.info > .right > h1{
font-size: 3em;
margin-bottom: 20px;
}
.info > .right > p{
font-size: 1.2em;
}
.info > .right > p:nth-child(2){
margin-bottom: 16px;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<img src="table-2600954_1280.jpg" alt="">
<nav>
<div class="logo">logo</div>
<div class="menu">
<div class="menu1">text</div>
<div class="menu1">printing</div>
<div class="menu1">type</div>
<div class="menu1">specimen</div>
<div class="menu1">five</div>
</div>
</nav>
<section>
<h1>popularised in the 1960s with the release</h1>
<div class="container">
<h1>page when looking at its layout</h1>
<p>but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
<div class="button">Button</div>
</div>
</section>
</header>
<div class="features">
<h1>established fact</h1>
<p>will be The point distracted by the readable content of a page when looking at its layout</p>
<div class="container1">
<div class="contents1">
<img src="food-7006591_1280.jpg" alt="">
</div>
<div class="contents2">
<div class="item">
<div class="item-l">
<img src="strawberry-8214486_1280.jpg" alt="">
</div>
<div class="item-r">
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
</div>
<div class="item">
<div class="item-l">
<img src="strawberry-8214486_1280.jpg" alt="">
</div>
<div class="item-r">
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
</div>
<div class="item">
<div class="item-l">
<img src="strawberry-8214486_1280.jpg" alt="">
</div>
<div class="item-r">
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
</div>
<div class="item">
<div class="item-l">
<img src="strawberry-8214486_1280.jpg" alt="">
</div>
<div class="item-r">
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
</div>
</div>
</div>
<div class="container2">
<div class="item">
<div class="item-l">
<img src="sushi-8113165_640.jpg" alt="">
</div>
<div class="item-r">
<p>Contrary to popular</p>
<p>variations of passages of Lorem Ipsum <br>available, but the majority</p>
</div>
</div>
<div class="item">
<div class="item-l">
<img src="sushi-8113165_640.jpg" alt="">
</div>
<div class="item-r">
<p>Contrary to popular</p>
<p>variations of passages of Lorem Ipsum <br>available, but the majority</p>
</div>
</div>
<div class="item">
<div class="item-l">
<img src="sushi-8113165_640.jpg" alt="">
</div>
<div class="item-r">
<p>Contrary to popular</p>
<p>variations of passages of Lorem Ipsum <br>available, but the majority</p>
</div>
</div>
</div>
</div>
<div class="data">
<div class="container">
<div class="container-l">
<img src="table-2600954_1280.jpg" alt="">
</div>
<div class="container-r">
<div class="box">
<p>Data One</p>
<p>going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections</p>
</div>
<div class="box">
<p>Data Two</p>
<p>going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections</p>
</div>
</div>
</div>
</div>
<div class="info">
<div class="left">
<img src="food-7006591_1280.jpg" alt="">
</div>
<div class="right">
<h1>Information</h1>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use</p>
<p>passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
</div>
</div>
</div>
</body>
</html>
■ Web 8일차 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>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<style>
body, h1, p{
margin: 0;
font-family: 'Times New Roman', Times, serif;
font-weight: 600;
}
header{
height: 100vh;
position: relative;
}
header > img{
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
z-index: -1;
}
header > nav{
width: 80%;
margin: 0 auto;
height: 100px;
align-content: center;
position: relative;
}
nav > .logo{
font-size: 3em;
color: #fff;
text-shadow: 1px 1px 3px black;
}
nav > .menu{
width: 70%;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
}
.menu > .menu1{
width: 20%;
text-align: center;
align-content: center;
font-size: 1.4em;
color: #fff;
text-shadow: 1px 1px 2px black;
}
header > section{
height: calc(100% - 100px);
background-color: #00000044;
align-content: center;
color: #fff;
}
section > h1{
width: 50%;
font-size: 4em;
line-height: 1.5;
margin: 0 auto;
text-align: center;
margin-bottom: 50px;
}
section > .container{
width: 80%;
height: 44%;
align-content: center;
margin: 0 auto;
background-color: #00000099;
border-radius: 20px;
}
.container > h1{
font-size: 2.6em;
text-align: center;
margin-bottom: 18px;
}
.container > p{
width: 70%;
margin: 0 auto;
text-align: center;
font-size: 1.4em;
line-height: 1.6;
margin-bottom: 20px;
}
.container > .button{
width: 180px;
height: 45px;
border-radius: 15px;
font-size: 1.6em;
text-align: center;
align-content: center;
background-color: #8c8ee2;
margin: 0 auto;
}
.features{
height: 100vh;
align-content: center;
}
.features > h1{
font-size: 3em;
text-align: center;
margin-bottom: 12px;
}
.features > p{
width: 50%;
font-size: 1.4em;
margin: 0 auto;
text-align: center;
margin-bottom: 24px;
}
.features > .container1{
width: 80%;
height: 45%;
margin: 0 auto;
margin-bottom: 24px;
display: flex;
}
.features > .container1 > div{
width: 50%;
}
.features > .container1 > .contents1 > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.features > .container1 > .contents2{
box-sizing: border-box;
padding: 0 5%;
}
.features .contents2 > .item{
display: flex;
height: 25%;
}
.features .contents2 > .item > .item-l{
width: 80px;
text-align: center;
align-content: center;
}
.features .contents2 > .item > .item-r{
width: calc(100% - 80px);
align-content: center;
}
.features > .container1 > .contents2 img{
width: 50px;
height: 50px;
border-radius: 50%;
}
.features > .container2{
width: 80%;
height: 20%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.features > .container2 > .item{
width: 30%;
height: 70%;
display: flex;
border: 2px solid #686868;
border-radius: 20px;
}
.features > .container2 > .item > .item-l{
width: 25%;
align-content: center;
text-align: center;
}
.features > .container2 .item-l img{
width: 50px;
height: 50px;
border-radius: 50%;
}
.features > .container2 > .item > .item-r{
width: 75%;
align-content: center;
}
.features > .container2 > .item > .item-r > p:nth-child(1){
font-size: 1.1em;
font-weight: 800;
margin-bottom: 0.5em;
}
.features > .container2 > .item > .item-r > p:nth-child(2){
font-size: 0.8em;
}
.data{
height: 70vh;
align-content: center;
background-color: #d7dfd4;
}
.data > .container{
width: 80%;
height: 80%;
margin: 0 auto;
display: flex;
}
.data > .container > .container-l{
width: 40%;
text-align: center;
align-content: center;
}
.data > .container > .container-l > img{
width: 300px;
height: 300px;
object-fit: cover;
border-radius: 50%;
}
.data > .container > .container-r{
width: 60%;
align-content: center;
}
.data > .container > .container-r > .box{
display: flex;
}
.data > .container > .container-r > .box:nth-child(1){
margin-bottom: 20px;
}
.data > .container > .container-r > .box > p:nth-child(1){
width: 30%;
font-size: 2em;
}
.data > .container > .container-r > .box > p:nth-child(2){
width: 70%;
font-size: 1.2em;
}
.info{
height: 80vh;
display: flex;
}
.info > div{
width: 50%;
}
.info > .left > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.info > .right{
box-sizing: border-box;
padding-left: 5%;
padding-right: 15%;
align-content: center;
}
.info > .right > h1{
font-size: 3em;
margin-bottom: 20px;
}
.info > .right > p{
font-size: 1.2em;
}
.info > .right > p:nth-child(2){
margin-bottom: 16px;
}
.adt{
height: 50vh;
align-content: center;
background-color: #d7dfd4;
}
.adt > .container{
width: 80%;
height: 80%;
margin: 0 auto;
display: flex;
}
.adt > .container > .left{
width: 40%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.adt > .container > .left > h1{
font-size: 2.6em;
}
.adt > .container > .left > p{
font-size: 1.2em;
}
.adt > .container > .right{
align-content: end;
box-sizing: border-box;
padding-left: 20px;
width: 60%;
}
.adt > .container > .right > .box{
height: 18%;
font-size: 1.4em;
display: flex;
}
.adt > .container > .right > .box:nth-child(2n-1){
background-color: #8c8ee2;
}
.adt > .container > .right > .box:nth-child(2n){
background-color: #b8b8f1;
}
.adt > .container > .right > .box > .box-l{
align-content: center;
box-sizing: border-box;
padding-left: 10px;
width: 40%;
}
.adt > .container > .right > .box > .box-l > span{
vertical-align: middle;
}
.adt > .container > .right > .box > .box-r{
width: 60%;
display: flex;
justify-content: space-around;
align-items: center;
}
.ct{
height: 80vh;
align-content: center;
}
.ct > .container{
width: 80%;
height: 85%;
margin: 0 auto;
display: flex;
}
.ct > .container > .left{
width: 60%;
align-content: center;
text-align: center;
}
.ct > .container > .right{
width: 40%;
align-content: center;
}
.ct > .container > .right > h1{
font-size: 2.6em;
margin-bottom: 30px;
}
.ct > .container > .right > p{
font-size: 1.4em;
margin-bottom: 14px;
}
footer{
height: 100px;
align-content: center;
}
footer > .container{
display: flex;
width: 80%;
height: 50px;
margin: 0 auto;
}
footer > .container > .left{
width: 70%;
display: flex;
}
footer > .container > .left > .flogo{
width: 30%;
}
footer > .container > .left > .flogo > span{
font-size: 2.4em;
vertical-align: middle;
}
footer > .container > .left > .fmenu{
width: 70%;
display: flex;
justify-content: space-between;
}
footer > .container > .left > .fmenu > .fsm{
font-size: 1.2em;
align-content: center;
}
footer > .container > .right{
width: 30%;
align-content: center;
text-align: end;
}
footer > .container > .right > span{
font-size: 2.4em;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<img src="table-2600954_1280.jpg" alt="">
<nav>
<div class="logo">logo</div>
<div class="menu">
<div class="menu1">text</div>
<div class="menu1">printing</div>
<div class="menu1">type</div>
<div class="menu1">specimen</div>
<div class="menu1">five</div>
</div>
</nav>
<section>
<h1>popularised in the 1960s with the release</h1>
<div class="container">
<h1>page when looking at its layout</h1>
<p>but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
<div class="button">Button</div>
</div>
</section>
</header>
<div class="features">
<h1>established fact</h1>
<p>will be The point distracted by the readable content of a page when looking at its layout</p>
<div class="container1">
<div class="contents1">
<img src="food-7006591_1280.jpg" alt="">
</div>
<div class="contents2">
<div class="item">
<div class="item-l">
<img src="strawberry-8214486_1280.jpg" alt="">
</div>
<div class="item-r">
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
</div>
<div class="item">
<div class="item-l">
<img src="strawberry-8214486_1280.jpg" alt="">
</div>
<div class="item-r">
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
</div>
<div class="item">
<div class="item-l">
<img src="strawberry-8214486_1280.jpg" alt="">
</div>
<div class="item-r">
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
</div>
<div class="item">
<div class="item-l">
<img src="strawberry-8214486_1280.jpg" alt="">
</div>
<div class="item-r">
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
</div>
</div>
</div>
<div class="container2">
<div class="item">
<div class="item-l">
<img src="sushi-8113165_640.jpg" alt="">
</div>
<div class="item-r">
<p>Contrary to popular</p>
<p>variations of passages of Lorem Ipsum <br>available, but the majority</p>
</div>
</div>
<div class="item">
<div class="item-l">
<img src="sushi-8113165_640.jpg" alt="">
</div>
<div class="item-r">
<p>Contrary to popular</p>
<p>variations of passages of Lorem Ipsum <br>available, but the majority</p>
</div>
</div>
<div class="item">
<div class="item-l">
<img src="sushi-8113165_640.jpg" alt="">
</div>
<div class="item-r">
<p>Contrary to popular</p>
<p>variations of passages of Lorem Ipsum <br>available, but the majority</p>
</div>
</div>
</div>
</div>
<div class="data">
<div class="container">
<div class="container-l">
<img src="table-2600954_1280.jpg" alt="">
</div>
<div class="container-r">
<div class="box">
<p>Data One</p>
<p>going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections</p>
</div>
<div class="box">
<p>Data Two</p>
<p>going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections</p>
</div>
</div>
</div>
</div>
<div class="info">
<div class="left">
<img src="food-7006591_1280.jpg" alt="">
</div>
<div class="right">
<h1>Information</h1>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use</p>
<p>passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
</div>
</div>
<div class="adt">
<div class="container">
<div class="left">
<h1>Advantages</h1>
<p>Contrary to popular belief, College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature 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</p>
<p>orem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"</p>
</div>
<div class="right">
<div class="box">
<div class="box-l">
<span class="material-symbols-outlined">radio_button_unchecked</span>
<span>randomised</span>
</div>
<div class="box-r">
<span class="material-symbols-outlined">expand_circle_down</span>
<span class="material-symbols-outlined">do_not_disturb_on</span>
<span class="material-symbols-outlined">arrow_circle_up</span>
</div>
</div>
<div class="box">
<div class="box-l">
<span class="material-symbols-outlined">radio_button_unchecked</span>
<span>randomised</span>
</div>
<div class="box-r">
<span class="material-symbols-outlined">expand_circle_down</span>
<span class="material-symbols-outlined">do_not_disturb_on</span>
<span class="material-symbols-outlined">arrow_circle_up</span>
</div>
</div>
<div class="box">
<div class="box-l">
<span class="material-symbols-outlined">radio_button_unchecked</span>
<span>randomised</span>
</div>
<div class="box-r">
<span class="material-symbols-outlined">expand_circle_down</span>
<span class="material-symbols-outlined">do_not_disturb_on</span>
<span class="material-symbols-outlined">arrow_circle_up</span>
</div>
</div>
<div class="box">
<div class="box-l">
<span class="material-symbols-outlined">radio_button_unchecked</span>
<span>randomised</span>
</div>
<div class="box-r">
<span class="material-symbols-outlined">expand_circle_down</span>
<span class="material-symbols-outlined">do_not_disturb_on</span>
<span class="material-symbols-outlined">arrow_circle_up</span>
</div>
</div>
</div>
</div>
</div>
<div class="ct">
<div class="container">
<div class="left">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7519.719191286766!2d127.00669519745338!3d37.58680076645411!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357cbcd3960f00f3%3A0x2bc5c7ca5775247d!2z7Zic7ZmU66y4KOuPmeyGjOusuCk!5e0!3m2!1sko!2skr!4v1732156562961!5m2!1sko!2skr" width="90%" height="90%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="right">
<h1>Contrary to popular</h1>
<p>discovered the undoubtable source</p>
<p>discovered the undoubtable source</p>
<p>discovered the undoubtable source</p>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="left">
<div class="flogo">
<span class="material-symbols-outlined">
swap_vertical_circle
</span>
<span>LOGO</span>
</div>
<div class="fmenu">
<div class="fsm">McClintock</div>
<div class="fsm">majority</div>
<div class="fsm">embarrassing</div>
<div class="fsm">generators</div>
<div class="fsm">making</div>
</div>
</div>
<div class="right">
<span class="material-symbols-outlined">
arrow_drop_down_circle
</span>
<span class="material-symbols-outlined">
heart_plus
</span>
<span class="material-symbols-outlined">
place_item
</span>
</div>
</div>
</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>
</head>
<style>
body{
margin: 0;
}
.wrap{
height: 100vh;
}
main{
height: 90%;
display: flex;
}
header{
width: 15%;
}
header > .logo{
height: 20%;
background-color: #999;
}
header > nav{
height: 80%;
background-color: #ccc;
}
section{
width: 85%;
}
section > .section1{
height: 60%;
display: flex;
}
section > .section1 > .s1-box1{
width: 85%;
background-color: #aaa;
}
section > .section1 > .s1-box2{
width: 15%;
background-color: #eee;
}
section > .section2{
height: 40%;
display: flex;
}
section > .section2 > .s2-box1{
width: 50%;
background-color: #eee;
}
section > .section2 > .s2-box2{
width: 50%;
background-color: #ccc;
}
footer{
height: 10%;
display: flex;
}
footer > .ft1{
width: 10%;
background-color: #444;
}
footer > .ft2{
width: 80%;
background-color: #888;
}
footer > .ft3{
width: 10%;
background-color: #444;
}
</style>
<body>
<div class="wrap">
<main>
<header>
<div class="logo"></div>
<nav></nav>
</header>
<section>
<div class="section1">
<div class="s1-box1"></div>
<div class="s1-box2"></div>
</div>
<div class="section2">
<div class="s2-box1"></div>
<div class="s2-box2"></div>
</div>
</section>
</main>
<footer>
<div class="ft1"></div>
<div class="ft2"></div>
<div class="ft3"></div>
</footer>
</div>
</body>
</html>
■ Web 9일차 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>
</head>
<style>
body{
margin: 0;
}
.wrap{
height: 100vh;
}
main{
height: 90%;
display: flex;
}
header{
width: 15%;
}
header > .logo{
height: 20%;
background-color: #999;
}
header > nav{
height: 80%;
background-color: #ccc;
}
section{
width: 85%;
}
section > .section1{
height: 60%;
display: flex;
}
section > .section1 > .s1-box1{
width: 85%;
background-color: #aaa;
position: relative;
}
.s1-box1 > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.s1-box1 > .button{
width: 150px;
height: 50px;
border: 3px solid #fff;
border-radius: 12px;
color: #fff;
font-size: 1.6em;
text-align: center;
align-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.s1-box1 > .button:hover{
cursor: pointer;
background-color: #ffffff7c;
border-color: #000;
font-size: 1.4em;
}
section > .section1 > .s1-box2{
width: 15%;
background-color: #eee;
}
section > .section2{
height: 40%;
display: flex;
}
section > .section2 > .s2-box1{
width: 50%;
background-color: #eee;
align-content: center;
}
.s2-box1 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.s2-box1 > .container{
width: 90%;
height: 40%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.s2-box1 > .container > .item{
width: 48%;
background-color: #444;
overflow: hidden;
}
.s2-box1 > .container > .item > img{
}
.s2-box1 > .container > .item:hover > img{
transition: 2s;
transform: scale(1.3);
}
.s2-box1 > .container:nth-child(1){
margin-bottom: 16px;
}
section > .section2 > .s2-box2{
width: 50%;
background-color: #ccc;
position: relative;
}
.s2-box2 > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.s2-box2:hover{
cursor: pointer;
}
.s2-box2:hover > .text{
color: #fff;
-webkit-text-stroke:0px;
transition: 1s;
}
.s2-box2 > .text{
color: transparent;
-webkit-text-stroke: 2px #fff;
font-size: 120px;
font-weight: 900;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
footer{
height: 10%;
display: flex;
}
footer > .ft1{
width: 10%;
background-color: #444;
}
footer > .ft2{
width: 80%;
background-color: #888;
}
footer > .ft3{
width: 10%;
background-color: #444;
}
</style>
<body>
<div class="wrap">
<main>
<header>
<div class="logo"></div>
<nav></nav>
</header>
<section>
<div class="section1">
<div class="s1-box1">
<img src="wasp-8916137_1280.jpg" alt="">
<div class="button">Click!</div>
</div>
<div class="s1-box2"></div>
</div>
<div class="section2">
<div class="s2-box1">
<div class="container">
<div class="item">
<img src="food-7006591_1280.jpg" alt="">
</div>
<div class="item">
<img src="sushi-8113165_640.jpg" alt="">
</div>
</div>
<div class="container">
<div class="item">
<img src="food-7006591_1280.jpg" alt="">
</div>
<div class="item">
<img src="sushi-8113165_640.jpg" alt="">
</div>
</div>
</div>
<div class="s2-box2">
<img src="table-2600954_1280.jpg" alt="">
<div class="text">FOOD</div>
</div>
</div>
</section>
</main>
<footer>
<div class="ft1"></div>
<div class="ft2"></div>
<div class="ft3"></div>
</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>
</head>
<style>
body{
margin: 0;
}
ul{
margin: 0;
list-style: none;
padding: 0;
}
a{
color: inherit;
text-decoration: none;
}
header{
height: 100px;
background-color: antiquewhite;
align-content: end;
}
.menu{
width: 80%;
height: 70px;
margin: 0 auto;
display: flex;
}
.menu > li{
width: 25%;
font-size: 1.6em;
}
.menu:hover > li .submenu{
display: block;
}
.submenu{
display: none;
}
.menu > li > a{
background-color: #fff;
width: 100%;
height: 100%;
text-align: center;
align-content: center;
display: inline-block;
position: relative;
}
.menu > li > a::after{
content: "";
width: 0px;
height: 4px;
background-color: black;
display: block;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%,0);
}
.menu > li:hover > a::after{
width: 100%;
transition: 1s;
}
.submenu > li{
text-align: center;
align-content: center;
height: 50px;
}
</style>
<body>
<header>
<ul class="menu">
<li><a href="#">menu1</a>
<ul class="submenu">
<li>submenu1-1</li>
<li>submenu1-2</li>
<li>submenu1-3</li>
<li>submenu1-4</li>
</ul>
</li>
<li><a href="#">menu2</a>
<ul class="submenu">
<li>submenu2-1</li>
<li>submenu2-2</li>
<li>submenu2-3</li>
<li>submenu2-4</li>
</ul>
</li>
<li><a href="#">menu3</a>
<ul class="submenu">
<li>submenu3-1</li>
<li>submenu3-2</li>
<li>submenu3-3</li>
<li>submenu3-4</li>
</ul>
</li>
<li><a href="#">menu4</a>
<ul class="submenu">
<li>submenu4-1</li>
<li>submenu4-2</li>
<li>submenu4-3</li>
<li>submenu4-4</li>
</ul>
</li>
</ul>
</header>
</body>
</html>
■ Web 10일차 11-25
<!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>
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Dongle&family=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&family=IBM+Plex+Sans+KR&family=Oswald:wght@200..700&family=Sunflower:wght@300;700&display=swap');
ul{
padding: 0;
margin: 0;
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
body, h1, p{
margin: 0;
font-family: "Oswald", sans-serif;
}
.wrap{
}
.contents1{
width: 80%;
height: 100vh;
margin: 0 auto;
position: relative;
}
.contents1 img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.contents1 header{
height: 150px;
position: relative;
background-color: #ffffff6b;
}
.contents1 .logo > .text{
height: 100px;
align-content: center;
font-size: 3em;
}
.contents1 nav{
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
/* 메뉴에 대한 내용들 */
.contents1 nav > .menu{
width: 60%;
height: 100%;
display: flex;
position: relative;
}
.contents1 nav > .menu:hover{
background-color: #fff;
}
.contents1 nav > .menu:hover::after{
display: block;
}
.contents1 nav > .menu::after{
content: "";
display: none;
position: absolute;
top: 100%;
background-color: #fff;
width: 100%;
height: 400%;
z-index: 2;
}
.contents1 .menu > li{
width: 20%;
position: relative;
}
.contents1 .menu > li > a{
display: block;
width: 100%;
height: 100%;
font-size: 1.2em;
letter-spacing: 1px;
align-content: center;
text-align: center;
}
.contents1 .menu > li > a:hover + .submenu{
display: block;
}
.contents1 .menu .submenu{
display: none;
position: absolute;
width: 100%;
z-index: 3;
}
.contents1 .menu .submenu > li{
}
.contents1 .menu .submenu > li > a{
display: block;
height: 40px;
font-size: 1.1em;
align-content: center;
text-align: center;
background-color: #fff;
}
.contents1 nav > .button{
width: 150px;
height: 80%;
background-color: rgb(76, 97, 212);
color: #fff;
font-size: 1.3em;
text-align: center;
align-content: center;
border-radius: 7px;
margin-right: 30px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="contents1">
<img src="content1.jpg" alt="">
<header>
<div class="logo">
<p class="text">LOGO</p>
</div>
<nav>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">classical</a>
<ul class="submenu">
<li><a href="#">classical1</a></li>
<li><a href="#">classical2</a></li>
<li><a href="#">classical3</a></li>
<li><a href="#">classical4</a></li>
</ul>
</li>
<li><a href="#">simply</a>
<ul class="submenu">
<li><a href="#">simply1</a></li>
<li><a href="#">simply2</a></li>
<li><a href="#">simply3</a></li>
<li><a href="#">simply4</a></li>
</ul>
</li>
<li><a href="#">passages</a>
<ul class="submenu">
<li><a href="#">passages1</a></li>
<li><a href="#">passages2</a></li>
<li><a href="#">passages3</a></li>
<li><a href="#">passages4</a></li>
</ul>
</li>
<li><a href="#">majority</a>
<ul class="submenu">
<li><a href="#">majority1</a></li>
<li><a href="#">majority2</a></li>
<li><a href="#">majority3</a></li>
<li><a href="#">majority4</a></li>
</ul>
</li>
</ul>
<div class="button">Good and Evil</div>
</nav>
</header>
<p class="title"> printing and typesetting industry</p>
<p class="text">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</p>
</div>
</div>
</body>
</html>
■ Web 11일차 11-27
<!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>
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Dongle&family=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&family=IBM+Plex+Sans+KR&family=Oswald:wght@200..700&family=Sunflower:wght@300;700&display=swap');
ul{
padding: 0;
margin: 0;
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
body, h2, p{
margin: 0;
font-family: "Oswald", sans-serif;
}
.wrap{
}
.contents1{
width: 80%;
height: 100vh;
margin: 0 auto;
position: relative;
}
.contents1 img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.contents1 header{
height: 150px;
position: relative;
background-color: #ffffff6b;
}
.contents1 .logo > .text{
height: 100px;
align-content: center;
font-size: 3em;
}
.contents1 nav{
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
/* 메뉴에 대한 내용들 */
.contents1 nav > .menu{
width: 60%;
height: 100%;
display: flex;
position: relative;
}
.contents1 nav > .menu:hover{
background-color: #fff;
}
.contents1 nav > .menu:hover::after{
display: block;
}
.contents1 nav > .menu::after{
content: "";
display: none;
position: absolute;
top: 100%;
background-color: #fff;
width: 100%;
height: 400%;
z-index: 2;
}
.contents1 .menu > li{
width: 20%;
position: relative;
}
.contents1 .menu > li > a{
display: block;
width: 100%;
height: 100%;
font-size: 1.2em;
letter-spacing: 1px;
align-content: center;
text-align: center;
}
.contents1 .menu > li > a:hover + .submenu{
display: block;
}
.contents1 .menu .submenu{
display: none;
position: absolute;
width: 100%;
z-index: 3;
}
.contents1 .menu .submenu > li{
}
.contents1 .menu .submenu > li > a{
display: block;
height: 40px;
font-size: 1.1em;
align-content: center;
text-align: center;
background-color: #fff;
}
.contents1 nav > .button{
width: 150px;
height: 80%;
background-color: rgb(76, 97, 212);
color: #fff;
font-size: 1.3em;
text-align: center;
align-content: center;
border-radius: 7px;
margin-right: 30px;
}
.contents1 .title{
font-size: 4em;
width: 50%;
margin: 0 auto;
margin-top: 4%;
text-align: center;
color: #fff;
text-shadow: 1px 1px 4px #000000;
margin-bottom: 3%;
}
.contents1 > .text{
width: 50%;
font-size: 1.4em;
color: #fff;
text-shadow: 1px 1px 4px #000000;
margin: 0 auto;
margin-bottom: 3%;
}
.contents1 > .search{
width: 60%;
margin: 0 auto;
border-radius: 10px;
padding: 20px;
box-sizing: border-box;
background-color: #00000062;
text-align: center;
}
.contents1 > .search input{
width: 70%;
height: 30px;
font-size: 1.2em;
padding: 0 10px;
margin-right: 20px;
border-radius: 6px;
border: none;
}
.contents1 > .search input:focus{
outline: none;
}
.contents1 > .search .button{
vertical-align: middle;
background-color: #3852e4;
display: inline-block;
padding: 5px 30px;
border-radius: 5px;
}
/* 컨텐츠2 설명과 이미지 */
.contents2{
width: 80%;
margin: 0 auto;
height: 50vh;
background-color: #e4f1f8;
}
.contents2 > .container{
width: 80%;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.contents2 > .container > .left-text{
width: 63%;
align-content: center;
}
.contents2 .left-text h2{
font-size: 3em;
margin-bottom: 3%;
}
.contents2 .left-text p{
font-size: 1.2em;
}
.contents2 .left-text p:nth-child(2){
margin-bottom: 2%;
}
.contents2 > .container > .right-contents{
width: 33%;
align-content: center;
}
.contents2 .item-container{
display: flex;
}
.contents2 .item-container:nth-child(1){
margin-bottom: 2%;
}
.contents2 .item-container > .left-img{
text-align: center;
align-content: center;
width: 30%;
}
.contents2 .item-container > .left-img > img{
width: 80%;
height: 60%;
object-fit: cover;
}
.contents2 .item-container > .right-text{
width: 70%;
}
.contents2 .item-container > .right-text > p:nth-child(1){
font-size: 1.1em;
font-weight: 600;
}
.contents2 .item-container > .right-text > p:nth-child(2){
text-align: justify;
}
/* 컨텐츠3 이미지들 */
.contents3{
height: 100vh;
width: 80%;
margin: 0 auto;
align-content: center;
}
.contents3 > .container{
width: 80%;
height: 90%;
margin: 0 auto;
}
.contents3 > .container > .item{
width: 100%;
height: 50%;
display: flex;
justify-content: space-between;
}
.contents3 > .container > .item:nth-child(1){
margin-bottom: 10px;
}
.contents3 > .container > .item > div{
position: relative;
overflow: hidden;
}
.contents3 > .container > .item > div:hover > img{
cursor: pointer;
transform: scale(1.2);
transition: 1s;
}
.contents3 > .container > .item > div > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.contents3 > .container > .item > div > p{
position: absolute;
left: 20px;
bottom: 20px;
color: #fff;
text-shadow: 1px 1px 3px #000;
font-size: 1.4em;
}
.contents3 > .container > .item > .b-box{
width: calc(100% / 3 * 2 - 5px);
}
.contents3 > .container > .item > .s-box{
width: calc(100% / 3 - 5px);
}
.contents4{
width: 80%;
height: 80vh;
margin: 0 auto;
align-content: center;
background-color: #e4f1f8;
}
.contents4 > h2{
font-size: 2.6em;
text-align: center;
margin-bottom: 3%;
}
.contents4 > .container1{
width: 60%;
margin: 0 auto;
display: flex;
justify-content: space-between;
margin-bottom: 2%;
}
.contents4 > .container1 > .circle{
width: 80px;
height: 80px;
border-radius: 50%;
align-content: center;
text-align: center;
font-size: 2em;
background-color: #fff;
}
.contents4 > .container1 > .circle:nth-child(2n-1){
background-color: #abcfe2;
color: #fff;
}
.contents4 > .container3{
width: 77%;
margin: 0 auto;
display: flex;
gap: 2%;
text-align: center;
}
.contents4 > .container3 > .item > p:nth-child(1){
font-size: 1.2em;
font-weight: 600;
margin-bottom: 2%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="contents1">
<img src="content1.jpg" alt="">
<header>
<div class="logo">
<p class="text">LOGO</p>
</div>
<nav>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">classical</a>
<ul class="submenu">
<li><a href="#">classical1</a></li>
<li><a href="#">classical2</a></li>
<li><a href="#">classical3</a></li>
<li><a href="#">classical4</a></li>
</ul>
</li>
<li><a href="#">simply</a>
<ul class="submenu">
<li><a href="#">simply1</a></li>
<li><a href="#">simply2</a></li>
<li><a href="#">simply3</a></li>
<li><a href="#">simply4</a></li>
</ul>
</li>
<li><a href="#">passages</a>
<ul class="submenu">
<li><a href="#">passages1</a></li>
<li><a href="#">passages2</a></li>
<li><a href="#">passages3</a></li>
<li><a href="#">passages4</a></li>
</ul>
</li>
<li><a href="#">majority</a>
<ul class="submenu">
<li><a href="#">majority1</a></li>
<li><a href="#">majority2</a></li>
<li><a href="#">majority3</a></li>
<li><a href="#">majority4</a></li>
</ul>
</li>
</ul>
<div class="button">Good and Evil</div>
</nav>
</header>
<p class="title"> printing and typesetting industry</p>
<p class="text">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</p>
<div class="search">
<input type="text">
<div class="button">Search</div>
</div>
</div>
<div class="contents2">
<div class="container">
<div class="left-text">
<h2>remaining</h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>he point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors</p>
</div>
<div class="right-contents">
<div class="item-container">
<div class="left-img">
<img src="content2-1.jpg" alt="">
</div>
<div class="right-text">
<p>popularised in the 1960s</p>
<p>Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC</p>
</div>
</div>
<div class="item-container">
<div class="left-img">
<img src="content2-2.jpg" alt="">
</div>
<div class="right-text">
<p>when an unknown printer</p>
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
</div>
</div>
</div>
</div>
</div>
<div class="contents3">
<div class="container">
<div class="item">
<div class="b-box">
<img src="content3-1.jpg" alt="">
<p>readable English</p>
</div>
<div class="s-box">
<img src="content3-2.jpg" alt="">
<p>Many desktop</p>
</div>
</div>
<div class="item">
<div class="s-box">
<img src="content3-3.jpg" alt="">
<p>Various versions</p>
</div>
<div class="b-box">
<img src="content3-4.jpg" alt="">
<p>suffered alteration</p>
</div>
</div>
</div>
</div>
<div class="contents4">
<h2>How it works?</h2>
<div class="container1">
<div class="circle">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
</div>
<div class="container2"></div>
<div class="container3">
<div class="item">
<p>Step1</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old</p>
</div>
<div class="item">
<p>Step2</p>
<p>Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage</p>
</div>
<div class="item">
<p>Step3</p>
<p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC</p>
</div>
</div>
</div>
</div>
</body>
</html>
■ Web 12일차 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>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Dongle&family=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&family=IBM+Plex+Sans+KR&family=Oswald:wght@200..700&family=Sunflower:wght@300;700&display=swap');
ul{
padding: 0;
margin: 0;
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
body, h2, p{
margin: 0;
font-family: "Oswald", sans-serif;
}
.wrap{
}
.contents1{
width: 80%;
height: 100vh;
margin: 0 auto;
position: relative;
}
.contents1 img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.contents1 header{
height: 150px;
position: relative;
background-color: #ffffff6b;
}
.contents1 .logo > .text{
height: 100px;
align-content: center;
font-size: 3em;
}
.contents1 nav{
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
/* 메뉴에 대한 내용들 */
.contents1 nav > .menu{
width: 60%;
height: 100%;
display: flex;
position: relative;
}
.contents1 nav > .menu:hover{
background-color: #fff;
}
.contents1 nav > .menu:hover::after{
display: block;
}
.contents1 nav > .menu::after{
content: "";
display: none;
position: absolute;
top: 100%;
background-color: #fff;
width: 100%;
height: 400%;
z-index: 2;
}
.contents1 .menu > li{
width: 20%;
position: relative;
}
.contents1 .menu > li > a{
display: block;
width: 100%;
height: 100%;
font-size: 1.2em;
letter-spacing: 1px;
align-content: center;
text-align: center;
}
.contents1 .menu > li > a:hover + .submenu{
display: block;
}
.contents1 .menu .submenu{
display: none;
position: absolute;
width: 100%;
z-index: 3;
}
.contents1 .menu .submenu > li{
}
.contents1 .menu .submenu > li > a{
display: block;
height: 40px;
font-size: 1.1em;
align-content: center;
text-align: center;
background-color: #fff;
}
.contents1 nav > .button{
width: 150px;
height: 80%;
background-color: rgb(76, 97, 212);
color: #fff;
font-size: 1.3em;
text-align: center;
align-content: center;
border-radius: 7px;
margin-right: 30px;
}
.contents1 .title{
font-size: 4em;
width: 50%;
margin: 0 auto;
margin-top: 4%;
text-align: center;
color: #fff;
text-shadow: 1px 1px 4px #000000;
margin-bottom: 3%;
}
.contents1 > .text{
width: 50%;
font-size: 1.4em;
color: #fff;
text-shadow: 1px 1px 4px #000000;
margin: 0 auto;
margin-bottom: 3%;
}
.contents1 > .search{
width: 60%;
margin: 0 auto;
border-radius: 10px;
padding: 20px;
box-sizing: border-box;
background-color: #00000062;
text-align: center;
}
.contents1 > .search input{
width: 70%;
height: 30px;
font-size: 1.2em;
padding: 0 10px;
margin-right: 20px;
border-radius: 6px;
border: none;
}
.contents1 > .search input:focus{
outline: none;
}
.contents1 > .search .button{
vertical-align: middle;
background-color: #3852e4;
display: inline-block;
padding: 5px 30px;
border-radius: 5px;
}
/* 컨텐츠2 설명과 이미지 */
.contents2{
width: 80%;
margin: 0 auto;
height: 50vh;
background-color: #e4f1f8;
}
.contents2 > .container{
width: 80%;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.contents2 > .container > .left-text{
width: 63%;
align-content: center;
}
.contents2 .left-text h2{
font-size: 3em;
margin-bottom: 3%;
}
.contents2 .left-text p{
font-size: 1.2em;
}
.contents2 .left-text p:nth-child(2){
margin-bottom: 2%;
}
.contents2 > .container > .right-contents{
width: 33%;
align-content: center;
}
.contents2 .item-container{
display: flex;
}
.contents2 .item-container:nth-child(1){
margin-bottom: 2%;
}
.contents2 .item-container > .left-img{
text-align: center;
align-content: center;
width: 30%;
}
.contents2 .item-container > .left-img > img{
width: 80%;
height: 60%;
object-fit: cover;
}
.contents2 .item-container > .right-text{
width: 70%;
}
.contents2 .item-container > .right-text > p:nth-child(1){
font-size: 1.1em;
font-weight: 600;
}
.contents2 .item-container > .right-text > p:nth-child(2){
text-align: justify;
}
/* 컨텐츠3 이미지들 */
.contents3{
height: 100vh;
width: 80%;
margin: 0 auto;
align-content: center;
}
.contents3 > .container{
width: 80%;
height: 90%;
margin: 0 auto;
}
.contents3 > .container > .item{
width: 100%;
height: 50%;
display: flex;
justify-content: space-between;
}
.contents3 > .container > .item:nth-child(1){
margin-bottom: 10px;
}
.contents3 > .container > .item > div{
position: relative;
overflow: hidden;
}
.contents3 > .container > .item > div:hover > img{
cursor: pointer;
transform: scale(1.2);
transition: 1s;
}
.contents3 > .container > .item > div > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.contents3 > .container > .item > div > p{
position: absolute;
left: 20px;
bottom: 20px;
color: #fff;
text-shadow: 1px 1px 3px #000;
font-size: 1.4em;
}
.contents3 > .container > .item > .b-box{
width: calc(100% / 3 * 2 - 5px);
}
.contents3 > .container > .item > .s-box{
width: calc(100% / 3 - 5px);
}
.contents4{
width: 80%;
height: 80vh;
margin: 0 auto;
align-content: center;
background-color: #e4f1f8;
}
.contents4 > h2{
font-size: 2.6em;
text-align: center;
margin-bottom: 3%;
}
.contents4 > .container1{
width: 60%;
margin: 0 auto;
display: flex;
justify-content: space-between;
margin-bottom: 2em;
}
.contents4 > .container1 > .circle{
width: 80px;
height: 80px;
border-radius: 50%;
align-content: center;
text-align: center;
font-size: 2em;
background-color: #fff;
}
.contents4 > .container1 > .circle:nth-child(2n-1){
background-color: #abcfe2;
color: #fff;
}
.contents4 > .container2 > .line{
width: calc(60% - 80px);
height: 3px;
background-color: #fff;
margin: 0 auto;
margin-bottom: 2em;
position: relative;
}
.contents4 > .container2 > .line > .circle-box{
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
}
.contents4 > .container2 > .line > .circle-box > .circle{
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
}
.contents4 > .container3{
width: 77%;
margin: 0 auto;
display: flex;
gap: 2%;
text-align: center;
margin-bottom: 5em;
}
.contents4 > .container3 > .item > p:nth-child(1){
font-size: 1.2em;
font-weight: 600;
margin-bottom: 2%;
}
.contents4 > .container4{
text-align: center;
}
.contents4 > .container4 > span:first-child{
font-size: 2em;
vertical-align: middle;
}
.contents4 > .container4 > .text{
font-size: 1.6em;
vertical-align: middle;
}
.contents5{
width: 80%;
height: 60vh;
margin: 0 auto;
align-content: center;
}
.contents5 > .container{
width: 80%;
height: 80%;
margin: 0 auto;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.contents5 > .container > div{
align-content: center;
text-align: center;
padding: 0 2%;
box-sizing: border-box;
}
.contents5 > .container > .item{
width: 32%;
height: 80%;
background-color: #c7e4f3;
}
.contents5 > .container > .item > p:nth-child(1){
font-size: 1.2em;
margin-bottom: 1em;
}
.contents5 > .container > .itemc{
width: 32%;
height: 100%;
background-color: #88b7d1;
}
.contents5 > .container > .itemc > span{
font-size: 4em;
color: #fff;
margin-bottom: 0.4em;
}
.contents5 > .container > .itemc > p{
font-size: 1.2em;
color: #fff;
margin-bottom: 2em;
}
.contents5 > .container > .itemc > .box{
width: 50%;
height: 40px;
margin: 0 auto;
background-color: #fff;
border-radius: 5px;
}
.contents5 > .container > .button{
position: absolute;
width: 120%;
top: 50%;
left: 50%;
display: flex;
justify-content: space-between;
transform: translate(-50%, -50%);
color: #88b7d1;
}
.contents5 > .container > .button > span{
font-size: 2.4em;
}
.contents6{
width: 80%;
height: 100vh;
margin: 0 auto;
display: flex;
}
.contents6 > div{
width: 50%;
}
.contents6 > .iteml{
box-sizing: border-box;
padding: 0 10%;
align-content: center;
}
.contents6 > .iteml > h2{
font-size: 3em;
margin-bottom: 0.4em;
}
.contents6 > .iteml > p:nth-child(2n){
font-size: 1.2em;
font-weight: 600;
margin-bottom: 0.3em;
}
.contents6 > .iteml > p:nth-child(2n+1){
margin-bottom: 1.8em;
}
.contents6 > .iteml > .button{
width: 40%;
height: 40px;
font-size: 1.3em;
border-radius: 20px;
text-align: center;
align-content: center;
color: #fff;
background-color: #4a61e4;
}
.contents6 > .itemr > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.contents7{
width: 80%;
height: 60vh;
margin: 0 auto;
align-content: center;
}
.contents7 > h2{
font-size: 3.2em;
text-align: center;
margin-bottom: 0.7em;
}
.contents7 > .container{
width: 80%;
margin: 0 auto;
display: flex;
}
.contents7 > .container > div{
width: 50%;
}
.contents7 > .container > .iteml > p{
margin-bottom: 0.8em;
}
.contents7 > .container > .iteml > .box{
height: 32px;
}
.contents7 > .container > .iteml > .box > span{
vertical-align: middle;
}
.contents7 > .container > .itemr{
display: flex;
flex-direction: column;
align-items: end;
justify-content: space-between;
}
.contents7 > .container > .itemr > div{
width: 80%;
height: 20%;
align-content: center;
border-radius: 20px;
box-sizing: border-box;
padding: 0 20px;
font-size: 1.4em;
}
.contents7 > .container > .itemr > div:not(:last-child){
background-color: #e4f1f8;
}
.contents7 > .container > .itemr > div:last-child{
background-color: #88b7d1;
text-align: center;
color: #fff;
}
.contents8{
width: 80%;
height: 10vh;
margin: 0 auto;
background-color: #e4f1f8;
text-align: center;
align-content: center;
}
.contents8 > span{
vertical-align: middle;
font-size: 2em;
}
.contents8 > .text{
font-size: 1.6em;
}
</style>
</head>
<body>
<div class="wrap">
<div class="contents1">
<img src="content1.jpg" alt="">
<header>
<div class="logo">
<p class="text">LOGO</p>
</div>
<nav>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">classical</a>
<ul class="submenu">
<li><a href="#">classical1</a></li>
<li><a href="#">classical2</a></li>
<li><a href="#">classical3</a></li>
<li><a href="#">classical4</a></li>
</ul>
</li>
<li><a href="#">simply</a>
<ul class="submenu">
<li><a href="#">simply1</a></li>
<li><a href="#">simply2</a></li>
<li><a href="#">simply3</a></li>
<li><a href="#">simply4</a></li>
</ul>
</li>
<li><a href="#">passages</a>
<ul class="submenu">
<li><a href="#">passages1</a></li>
<li><a href="#">passages2</a></li>
<li><a href="#">passages3</a></li>
<li><a href="#">passages4</a></li>
</ul>
</li>
<li><a href="#">majority</a>
<ul class="submenu">
<li><a href="#">majority1</a></li>
<li><a href="#">majority2</a></li>
<li><a href="#">majority3</a></li>
<li><a href="#">majority4</a></li>
</ul>
</li>
</ul>
<div class="button">Good and Evil</div>
</nav>
</header>
<p class="title"> printing and typesetting industry</p>
<p class="text">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</p>
<div class="search">
<input type="text">
<div class="button">Search</div>
</div>
</div>
<div class="contents2">
<div class="container">
<div class="left-text">
<h2>remaining</h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>he point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors</p>
</div>
<div class="right-contents">
<div class="item-container">
<div class="left-img">
<img src="content2-1.jpg" alt="">
</div>
<div class="right-text">
<p>popularised in the 1960s</p>
<p>Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC</p>
</div>
</div>
<div class="item-container">
<div class="left-img">
<img src="content2-2.jpg" alt="">
</div>
<div class="right-text">
<p>when an unknown printer</p>
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
</div>
</div>
</div>
</div>
</div>
<div class="contents3">
<div class="container">
<div class="item">
<div class="b-box">
<img src="content3-1.jpg" alt="">
<p>readable English</p>
</div>
<div class="s-box">
<img src="content3-2.jpg" alt="">
<p>Many desktop</p>
</div>
</div>
<div class="item">
<div class="s-box">
<img src="content3-3.jpg" alt="">
<p>Various versions</p>
</div>
<div class="b-box">
<img src="content3-4.jpg" alt="">
<p>suffered alteration</p>
</div>
</div>
</div>
</div>
<div class="contents4">
<h2>How it works?</h2>
<div class="container1">
<div class="circle">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
</div>
<div class="container2">
<div class="line">
<div class="circle-box">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
<div class="container3">
<div class="item">
<p>Step1</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old</p>
</div>
<div class="item">
<p>Step2</p>
<p>Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage</p>
</div>
<div class="item">
<p>Step3</p>
<p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC</p>
</div>
</div>
<div class="container4">
<span class="material-symbols-outlined">expand_circle_down</span>
<span class="text">Watch now!</span>
</div>
</div>
<div class="contents5">
<div class="container">
<div class="item">
<p>simply random text</p>
<p>he standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"</p>
</div>
<div class="itemc">
<span class="material-symbols-outlined">question_exchange</span>
<p>he standard used<br> since chunk of Lorem Ipsum </p>
<div class="box"></div>
</div>
<div class="item">
<p>anything embarrassing hidden</p>
<p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
</div>
<div class="button">
<span class="material-symbols-outlined">arrow_circle_left</span>
<span class="material-symbols-outlined">arrow_circle_right</span>
</div>
</div>
</div>
<div class="contents6">
<div class="iteml">
<h2>literature</h2>
<p>simply random</p>
<p>Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,</p>
<p>Finibus Bonorum</p>
<p>Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line</p>
<div class="button">button</div>
</div>
<div class="itemr">
<img src="content6.jpg" alt="">
</div>
</div>
<div class="contents7">
<h2>majority have suffered</h2>
<div class="container">
<div class="iteml">
<p>Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur,</p>
<p>Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance</p>
<div class="box">
<span class="material-symbols-outlined">check_small</span>
<span class="text">discovered</span>
</div>
<div class="box">
<span class="material-symbols-outlined">check_small</span>
<span class="text">undoubtable</span>
</div>
<div class="box">
<span class="material-symbols-outlined">check_small</span>
<span class="text">reproduced</span>
</div>
</div>
<div class="itemr">
<div class="box">through</div>
<div class="box">Hampden</div>
<div class="box">treatise</div>
<div class="box">Virginia</div>
</div>
</div>
</div>
<div class="contents8">
<span class="material-symbols-outlined">keyboard_command_key</span>
<span class="text">popular</span>
</div>
</div>
</body>
</html>
■ Web 13일차 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>
.container{
width: 80%;
height: 300px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.container > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.text{
left: 0;
top: 50%;
transform: translate(0, -50%);
width: 100%;
position: absolute;
}
.text > p{
margin: 0;
text-align: center;
color: aqua;
}
.text > p:nth-child(1){
font-size: 2.6em;
transform: translateX(100%);
animation: ani1 5s infinite;
}
.text > p:nth-child(2){
font-size: 1.6em;
transform: translateX(100%);
animation: ani2 5s infinite;
}
@keyframes ani1{
20%{transform: translateX(0%);}
60%{transform: translateX(0%); opacity: 1;}
80%{transform: translateX(0%); opacity: 0;}
100%{transform: translateX(100%); opacity: 0;}
}
@keyframes ani2{
20%{transform: translateX(100%);}
60%{transform: translateX(0%); opacity: 1;}
80%{transform: translateX(0%); opacity: 0;}
100%{transform: translateX(100%); opacity: 0;}
}
.box{
height: 500px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="container">
<img src="content2-1.jpg" alt="">
<div class="text">
<p>emaining essentially unchanged</p>
<p>It was popularised in the 1960s with the</p>
</div>
</div>
<div class="box"></div>
</body>
</html>
■ 체크박스 형태 클릭 이벤트 같은 효과 넣기
○ 체크 박스와 연동된 레이블 만들기
- 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>
■ Web 14일차 12-2
○ check 서브메뉴
<style>
.wrap{
width: 80%;
margin: 0 auto;
/* overflow: hidden; */
}
header{
height: 200px;
background-color: antiquewhite;
position: relative;
}
.menu{
width: 100px;
height: 50px;
font-size: 1.4em;
background-color: #ffffff;
text-align: center;
align-content: center;
border-radius: 10px;
position: absolute;
left: 20px;
bottom: 20px;
}
.submenu{
position: absolute;
top: 100%;
left: 0px;
width: 0px;
height: 500px;
background-color: blue;
transition: 1s;
overflow: hidden;
}
#b:checked ~ .submenu{
width: 200px;
}
.contents{
height: 100vh;
background-color: aquamarine;
}
#b{
display: none;
}
#b:checked + label .menu{
background-color: #000;
color: #fff;
}
</style>
<body>
<div class="wrap">
<header>
<input type="checkbox" name="a" id="b">
<label for="b">
<div class="menu">MENU</div>
</label>
<div class="submenu">
서브메뉴
</div>
</header>
<div class="contents"></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://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
</head>
<style>
body, h1, h2, p{
margin: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.wrap{
}
header{
height: 80vh;
position: relative;
}
header > nav{
height: 100px;
box-sizing: border-box;
padding: 0 10%;
display: flex;
justify-content: space-between;
align-items: center;
}
nav > .logo{
font-size: 2.4em;
}
nav > .icon > span:nth-child(1){
font-size: 1.8em;
margin-right: 10px;
}
nav > .icon > span{
vertical-align: middle;
font-size: 1.6em;
}
header > .header-box{
height: calc(100% - 100px);
align-content: center;
}
.header-box > h1{
text-align: center;
font-size: 4em;
margin-bottom: 20px;
}
.header-box > p{
text-align: center;
font-size: 1.6em;
margin-bottom: 100px;
}
.header-box > .button{
width: 180px;
height: 50px;
background-color: #000;
color: #fff;
margin: 0 auto;
text-align: center;
align-content: center;
font-size: 1.3em;
}
header > img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
left: 0;
top: 0;
z-index: -1;
}
</style>
<body>
<div class="wrap">
<header>
<nav>
<div class="logo">simply</div>
<div class="icon">
<span class="material-symbols-outlined"> play_circle</span>
<span>printing and typesetting</span>
</div>
</nav>
<div class="header-box">
<h1>survived not only</h1>
<p>but also the leap into electronic typesetting</p>
<div class="button">GET START</div>
</div>
<img src="header.jpg" alt="배경">
</header>
</div>
</body>
</html>
■ Web 15일차 12-3
<!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" />
<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" />
</head>
<style>
body, h1, h2, p{
margin: 0;
font-family: "Roboto"
}
.wrap{
}
header{
height: 80vh;
position: relative;
}
header > nav{
height: 100px;
box-sizing: border-box;
padding: 0 10%;
display: flex;
justify-content: space-between;
align-items: center;
}
nav > .logo{
font-size: 2.4em;
}
nav > .icon > span:nth-child(1){
font-size: 2.2em;
margin-right: 10px;
}
nav > .icon > span{
vertical-align: middle;
font-size: 1.6em;
}
header > .header-box{
height: calc(100% - 100px);
align-content: center;
}
.header-box > h1{
text-align: center;
font-size: 4em;
margin-bottom: 20px;
}
.header-box > p{
text-align: center;
font-size: 1.6em;
margin-bottom: 100px;
}
.header-box > .button{
width: 180px;
height: 50px;
background-color: #000;
color: #fff;
margin: 0 auto;
text-align: center;
align-content: center;
font-size: 1.3em;
}
.header-box > .button:hover{
cursor: pointer;
background-color: #fff;
color: #000;
font-weight: 700;
}
header > img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
left: 0;
top: 0;
z-index: -1;
}
.contents1{
height: 60vh;
align-content: center;
}
.contents1 > h2, .contents3 > h2{
font-size: 2.4em;
text-align: center;
margin-bottom: 3%;
}
.contents1 > p, .contents3 > p{
font-size: 1.2em;
text-align: center;
margin-bottom: 6%;
}
.contents1 > .container{
display: flex;
width: 35%;
height: 25%;
justify-content: space-between;
margin: 0 auto;
position: relative;
}
.contents1 > .container > img{
width: 31%;
height: 100%;
object-fit: cover;
}
.contents1 > .container::after{
content: "";
display: block;
background-color: #ffffff22;
width: 100%;
height: 0%;
position: absolute;
transition: 2s;
}
.contents1 > .container:hover::after{
height: 100%;
cursor: pointer;
}
.contents2{
height: 100vh;
background-color: #eff5e3;
align-content: center;
}
.contents2 > .container{
display: flex;
width: 80%;
margin: 0 auto;
justify-content: space-between;
height: 28%;
}
.contents2 > .container:nth-child(1){
margin-bottom: 12%;
}
.contents2 > .container > div{
width: 40%;
}
.contents2 > .container > div{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.contents2 > .container > .imgb > img{
width: 100%;
height: 40%;
object-fit: cover;
}
.contents3{
height: 100vh;
align-content: center;
}
.contents3 > .container{
width: 50%;
height: 50%;
margin: 0 auto;
display: flex;
align-items: center;
}
.contents3 > .container > img:nth-child(2n+1){
width: 25%;
height: 80%;
object-fit: cover;
}
.contents3 > .container > img:nth-child(2n){
width: 50%;
height: 100%;
object-fit: cover;
}
.contents4{
height: 60vh;
background-color: #eff5e3;
align-content: center;
box-sizing: border-box;
padding-left: 15%;
position: relative;
overflow: hidden;
}
.contents4 > h2{
font-size: 2.4em;
margin-bottom: 3%;
}
.contents4 > p{
width: 50%;
font-size: 1.2em;
margin-bottom: 6%;
}
.contents4 > .button{
width: 230px;
height: 50px;
font-size: 1.4em;
text-align: center;
align-content: center;
background-color: #fff;
}
.contents4 > .button:hover{
cursor: pointer;
background-color: #000;
color: #fff;
}
.contents4 > .button:hover ~ .icon > span{
color: #000;
}
.contents4 .icon{
position: absolute;
bottom: -100px;
right: 0;
}
.contents4 .icon > span{
font-variation-settings: 'FILL' 1;
color: #5f723a;
}
.contents4 .icon > span:nth-child(1){
font-size: 500px;
}
.contents4 .icon > span:nth-child(2){
font-size: 400px;
margin-left: -200px;
}
.contents5{
height: 60vh;
align-content: center;
box-sizing: border-box;
padding: 5% 10%;
text-align: center;
}
.contents5 > h2{
font-size: 2.4em;
margin-bottom: 3%;
}
.contents5 > p{
font-size: 1.2em;
width: 80%;
margin: 0 auto;
margin-bottom: 6%;
}
.contents5 > input{
width: 40%;
height: 50px;
font-size: 1.6em;
padding: 0 1%;
box-sizing: border-box;
}
.contents5 > input::placeholder{
color: rgb(207, 207, 207);
}
.contents5 > input:focus{
outline: none;
}
.contents5 > .button{
display: inline-block;
background-color: #5f723a;
width: 200px;
font-size: 1.4em;
height: 50px;
text-align: center;
align-content: center;
margin-left: 10px;
margin-bottom: 4%;
}
</style>
<body>
<div class="wrap">
<header>
<nav>
<div class="logo">simply</div>
<div class="icon">
<span class="material-symbols-outlined">play_circle</span>
<span>printing and typesetting</span>
</div>
</nav>
<div class="header-box">
<h1>survived not only</h1>
<p>but also the leap into electronic typesetting</p>
<div class="button">GET START</div>
</div>
<img src="header.jpg" alt="배경">
</header>
<div class="contents1">
<h2>Contrary to popular</h2>
<p>Maecenas suscipit hendrerit lacus, sit amet dignissim massa consectetur nec. <br> Suspendisse in urna sodales, maximus ante sit amet, feugiat sem. Pellentesque nec arcu tristique,</p>
<div class="container">
<img src="con1-1.jpg" alt="">
<img src="con1-2.jpg" alt="">
<img src="con1-3.jpg" alt="">
</div>
</div>
<div class="contents2">
<div class="container">
<div class="textb">
<h2>Maecenas suscipit<br>hendrerit lacus</h2>
<p>Sed mi sem, consequat a justo id, tempor sagittis urna. Nunc tristique urna nulla, malesuada eleifend libero laoreet at. Vivamus nec ipsum elit. Mauris blandit tortor dui, id luctus risus sollicitudin sit amet. Vivamus et magna tortor. Nam sagittis sed massa vel faucibus.</p>
</div>
<div class="imgb">
<img src="con1-1.jpg" alt="">
<img src="con1-2.jpg" alt="">
</div>
</div>
<div class="container">
<div class="imgb">
<img src="con1-2.jpg" alt="">
<img src="con1-3.jpg" alt="">
</div>
<div class="textb">
<h2>Cras pellentesque<br>consectetur viverra</h2>
<p>Nulla sed lectus est. Nam blandit metus at eleifend maximus. Mauris cursus, orci et vestibulum pretium, purus purus interdum eros, et pulvinar velit tellus viverra ipsum. Sed finibus ante ornare ipsum tempus posuere. Vestibulum ligula mauris, sollicitudin vitae magna consequat, malesuada vehicula turpis.</p>
</div>
</div>
</div>
<div class="contents3">
<h2>Maecenas suscipit hendrerit</h2>
<p>Sed mi sem, consequat a justo id, tempor sagittis urna. Nunc tristique urna nulla, malesuada eleifend libero laoreet at.<br>Vivamus nec ipsum elit. Mauris blandit tortor dui, id luctus risus sollicitudin sit amet</p>
<div class="container">
<img src="con1-1.jpg" alt="">
<img src="con1-2.jpg" alt="">
<img src="con1-3.jpg" alt="">
</div>
</div>
<div class="contents4">
<h2>Cras pellentesque<br>viverra</h2>
<p>ulla sed lectus est. Nam blandit metus at eleifend maximus. Mauris cursus, orci et vestibulum pretium, purus purus interdum eros, et pulvinar velit tellus viverra ipsum. Sed finibus ante ornare ipsum tempus posuere.</p>
<div class="button">venenatis ege</div>
<div class="icon">
<span class="material-symbols-outlined">person</span>
<span class="material-symbols-outlined">person</span>
</div>
</div>
<div class="contents5">
<h2>Vivamus nec ipsum elit</h2>
<p>Cras pellentesque consectetur viverra. Vivamus sed consequat erat. Donec neque mauris, vulputate nec eleifend a, malesuada sit amet justo. Donec faucibus finibus elementum. Quisque varius laoreet condimentum.</p>
<input type="text" placeholder="Enter email address">
<div class="button">GET START</div>
<p>ⓒ 2024. 12. 03 Web2</p>
</div>
</div>
</body>
</html>
■ backdropfilter
■ Web 16일차 12-4
■ padding으로 컨텐츠 통제하기 / 콘텐츠로 통제 하기
<!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;
}
.contents1{
background-color: #ccc;
padding: 40px 20%;
box-sizing: border-box;
}
.contents1 > p{
margin-bottom: 24px;
}
.contents1 > .container{
display: flex;
justify-content: space-between;
}
.contents1 > .container > .imgbox{
width: 30%;
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
position: relative;
}
.contents1 > .container > .imgbox:hover > img{
transform: scale(150%);
}
.contents1 > .container > .imgbox > img{
width: 100%;
height: 100%;
object-fit: cover;
transition: 2s;
}
.contents1 > .container > .imgbox:hover::after{
content: "button";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 10px 20px;
border-radius: 10px;
}
.contents2{
background-color: #999;
padding: 0.1px;
}
.contents2 > .container{
width: 60%;
margin: 40px auto;
display: flex;
justify-content: space-between;
}
.contents2 > .container > .item{
width: 30%;
height: 200px;
background-color: red;
align-content: center;
}
.contents2 > .container > .item::after{
content: "";
width: 80%;
aspect-ratio: 1;
border-radius: 50%;
display: block;
background-color: #fff;
margin: 0 auto;
}
.contents3{
height: 200px;
background-color: #777;
}
</style>
</head>
<body>
<div class="wrap">
<div class="contents1">
<h2>제목</h2>
<p>내용들</p>
<div class="container">
<div class="imgbox">
<img src="con1-1.jpg" alt="">
</div>
<div class="imgbox">
<img src="con1-2.jpg" alt="">
</div>
<div class="imgbox">
<img src="con1-3.jpg" alt="">
</div>
</div>
</div>
<div class="contents2">
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div class="contents3">
</div>
</div>
</body>
</html>
■ Web 17일차 12-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>
.container{
width: 700px;
height: 300px;
display: flex;
cursor: pointer;
}
.container:hover > .left{
width: 50%;
transition: 2s;
}
.container:hover > .right{
width: 50%;
transition: width 2s;
padding: 5%;
}
.left{
width: 100%;
}
.left > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.right{
width: 0%;
box-sizing: border-box;
padding: 0%;
background-color: #daaaaa;
overflow: hidden;
}
h2{
width: 250px;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<img src="con1-1.jpg" alt="">
</div>
<div class="right">
<h2>industry's standard dummy text ever since the 1500s</h2>
</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>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
body, h1, h2, h3, p{
margin: 0;
}
h1{
font-size: 4.2em;
font-family: "Lora";
}
h2{
font-size: 3.2em;
font-family: "Lora";
}
h3{
font-size: 1.8em;
font-family: "Roboto Condensed";
}
p{
font-size: 1.2em;
font-family: "Roboto Condensed";
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
color: inherit;
font-family: "Roboto Condensed";
font-size: 1.4em;
font-weight: 600;
}
/* 네비게이션 */
nav{
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
height: 80px;
align-items: center;
}
nav .logo{
font-size: 0.8em;
}
nav .menu{
display: flex;
width: 50%;
justify-content: space-between;
}
nav .button{
width: 120px;
height: 50%;
border: 1px solid #575757;
border-radius: 4px;
text-align: center;
align-content: center;
}
/* 첫번째 컨텐츠 */
.contents1{
height: calc(100vh - 80px);
display: flex;
}
.contents1 > div{
width: 50%;
}
.contents1 .left{
position: relative;
}
.contents1 .left .bgbox1{
position: absolute;
background-color: #365e4e;
left: 0;
top: 0;
right: 30%;
bottom: 5%;
}
.contents1 .left .bgbox2{
position: absolute;
background-color: #77ac96;
right: 0;
top: 10%;
left: 70%;
bottom: 15%;
}
.contents1 .left img{
width: 70%;
height: 80%;
object-fit: cover;
position: absolute;
bottom: 0;
left: 15%;
}
.contents1 .right{
box-sizing: border-box;
padding: 0 4%;
color: #2b5c48;
align-content: center;
}
.contents1 .right > h1{
margin-bottom: 40px;
}
.contents1 .right > h3{
line-height: 1.4;
}
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="logo">
<h2>AENEAN</h2>
</div>
<ul class="menu">
<li><a href="#">Curabitur</a></li>
<li><a href="#">Praesent</a></li>
<li><a href="#">Curabitur</a></li>
<li><a href="#">Nullam</a></li>
<li><a href="#">pharetra</a></li>
</ul>
<div class="button"><a href="#">Button</a></div>
</nav>
<div class="contents1">
<div class="left">
<div class="bgbox1"></div>
<div class="bgbox2"></div>
<img src="ct1.jpg" alt="배경">
</div>
<div class="right">
<h1>Vestibulum turpis<br>elementum</h1>
<h3>Maecenas pellentesque elit sit amet ipsum finibus<br> nec dapibus felis egestas mollis dolor</h3>
</div>
</div>
</div>
</body>
</html>
■ Web 18일차 12-6
<!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>
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
body, h1, h2, h3, p{
margin: 0;
}
h1{
font-size: 4.2em;
font-family: "Lora";
}
h2{
font-size: 3.2em;
font-family: "Lora";
}
h3{
font-size: 1.8em;
font-family: "Roboto Condensed";
}
p{
font-size: 1.2em;
font-family: "Roboto Condensed";
}
p.small{
font-size: 0.8em;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
color: inherit;
font-family: "Roboto Condensed";
font-size: 1.4em;
font-weight: 600;
}
/* 네비게이션 */
nav{
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
height: 80px;
align-items: center;
}
nav .logo{
font-size: 0.8em;
}
nav .menu{
display: flex;
width: 50%;
justify-content: space-between;
}
nav .button{
width: 120px;
height: 50%;
border: 1px solid #575757;
border-radius: 4px;
text-align: center;
align-content: center;
}
/* 첫번째 컨텐츠 */
.contents1{
height: calc(100vh - 80px);
display: flex;
}
.contents1 > div{
width: 50%;
}
.contents1 .left{
position: relative;
}
.contents1 .left .bgbox1{
position: absolute;
background-color: #365e4e;
left: 0;
top: 0;
right: 30%;
bottom: 5%;
}
.contents1 .left .bgbox2{
position: absolute;
background-color: #77ac96;
right: 0;
top: 10%;
left: 70%;
bottom: 15%;
}
.contents1 .left img{
width: 70%;
height: 80%;
object-fit: cover;
position: absolute;
bottom: 0;
left: 15%;
}
.contents1 .right{
box-sizing: border-box;
padding: 0 4%;
color: #2b5c48;
align-content: center;
}
.contents1 .right > h1{
margin-bottom: 40px;
}
.contents1 .right > h3{
line-height: 1.4;
}
.contents2{
width: 85%;
margin: 0 auto;
height: 250vh;
align-content: center;
}
.contents2 > .container1{
height: 15%;
background-image: url(ct2-1.jpg);
background-size: cover;
background-position: -10%;
position: relative;
margin-bottom: 26px;
}
.contents2 > .container1 > h2{
position: absolute;
top: 5%;
left: 3%;
}
.contents2 > .container1 > p{
position: absolute;
bottom: 5%;
left: 3%;
}
.contents2 > .container2{
height: 30%;
display: flex;
justify-content: space-between;
margin-bottom: 26px;
}
.contents2 > .container2 > div{
width: calc(50% - 13px);
}
.contents2 > .container2 > .left{
background-color: #77ac96;
align-content: center;
box-sizing: border-box;
padding-left: 3%;
color: #fff;
text-transform: uppercase;
}
.contents2 > .container2 > .right{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.contents2 > .container2 > .right > .item{
display: flex;
position: relative;
height: calc(50% - 13px);
box-sizing: border-box;
border: 3px solid #00000025;
box-shadow: 3px 3px 6px #00000025;
color: #2b5c48;
}
.contents2 > .container2 > .right > .item > .img-box{
width: 50%;
}
.contents2 > .container2 > .right > .item > .img-box > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.contents2 > .container2 > .right > .item > .text-box{
width: 50%;
align-content: center;
box-sizing: border-box;
padding: 0 3%;
}
.contents2 > .container2 > .right > .item > .text-box > p:nth-child(1){
margin-bottom: 12px;
}
.contents2 > .container2 > .right > .item > .text-box > p:nth-child(2){
font-weight: 700;
font-size: 1.4em;
}
.contents2 > .container2 > .right > .item > .circle{
position: absolute;
right: 5px;
top: 5px;
width: 60px;
height: 60px;
text-align: center;
align-content: center;
border-radius: 50%;
color: #fff;
background-color: #2b5c48;
}
.contents2 > .container3{
height: 15%;
position: relative;
cursor: pointer;
overflow: hidden;
margin-bottom: 26px;
}
.contents2 > .container3 > img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: 0 30%;
transition: 2s;
}
.contents2 > .container3 > .box{
position: absolute;
left: 100%;
top: 0;
background-color: #2b5c48;
width: 50%;
height: 100%;
box-sizing: border-box;
padding-left: 3%;
align-content: center;
color: #fff;
transition: 2s;
}
.contents2 > .container3 > .box > h2{
margin-bottom: 22px;
text-transform: uppercase;
}
.contents2 > .container3:hover > img{
width: 50%;
}
.contents2 > .container3:hover > .box{
left: 50%;
}
.contents2 > .container4{
display: flex;
justify-content: space-between;
}
.contents2 > .container4 > .item{
width: 23%;
box-sizing: border-box;
padding: 12px;
box-shadow: 3px 3px 8px #0000006b;
}
.contents2 > .container4 > .item > img{
width: 100%;
margin-bottom: 12px;
}
.contents2 > .container4 > .item > p{
margin-bottom: 16px;
}
.contents3{
background-color: #77ac96;
padding: 200px 7.5%;
color: #fff;
position: relative;
}
.contents3 > h2{
text-transform: uppercase;
margin-bottom: 48px;
}
.contents3 > .container{
display: flex;
justify-content: space-between;
}
.contents3 > .container p{
line-height: 1.6;
}
.contents3 > .container > .left > p,
.contents3 > .container > .right > img{
margin-bottom: 24px;
}
.contents3 > .container > div{
width: 49%;
}
.contents3 > .container > div > img{
width: 100%;
}
.contents3 > .box{
width: 60%;
height: 400px;
position: absolute;
background-color: #2b5c48;
right: 0;
bottom: 8%;
box-sizing: border-box;
padding: 5% 10%;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.contents3 > .box > .item{
width: 50%;
}
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="logo">
<h2>AENEAN</h2>
</div>
<ul class="menu">
<li><a href="#">Curabitur</a></li>
<li><a href="#">Praesent</a></li>
<li><a href="#">Curabitur</a></li>
<li><a href="#">Nullam</a></li>
<li><a href="#">pharetra</a></li>
</ul>
<div class="button"><a href="#">Button</a></div>
</nav>
<div class="contents1">
<div class="left">
<div class="bgbox1"></div>
<div class="bgbox2"></div>
<img src="ct1.jpg" alt="배경">
</div>
<div class="right">
<h1>Vestibulum turpis<br>elementum</h1>
<h3>Maecenas pellentesque elit sit amet ipsum finibus<br> nec dapibus felis egestas mollis dolor</h3>
</div>
</div>
<div class="contents2">
<div class="container1">
<h2>Praesent<br>posuere</h2>
<p>roin vel vulputate nisl. Praesent posuere, ante sit amet rhoncus mattis, lectus nisl tempor arcu</p>
</div>
<div class="container2">
<div class="left">
<h2>Aenean<br>massa ligula</h2>
</div>
<div class="right">
<div class="item">
<div class="img-box">
<img src="ct2-3.jpg" alt="">
</div>
<div class="text-box">
<p>Aenean massa ligula<br> porttitor at laoreet</p>
<p>pellentesque</p>
</div>
<div class="circle">Donec</div>
</div>
<div class="item">
<div class="img-box">
<img src="ct2-4.jpg" alt="">
</div>
<div class="text-box">
<p>Aenean massa ligula<br> porttitor at laoreet</p>
<p>pellentesque</p>
</div>
<div class="circle">Donec</div>
</div>
</div>
</div>
<div class="container3">
<img src="ct2-5.jpg" alt="">
<div class="box">
<h2>Maecenas<br>tincidunt</h2>
<p>Sed accumsan velit ex, id convallis quam scelerisque quis. In hac habitasse platea dictumst. Aenean eleifend rutrum aliquam. Morbi efficitur augue egestas, ornare massa ac</p>
</div>
</div>
<div class="container4">
<div class="item">
<img src="ct2-6.png" alt="">
<p>Duis scelerisque,<br>odio vitae tincidunt vehicula,<br>lorem ipsum scelerisque velit</p>
<h3>habitasse</h3>
</div>
<div class="item">
<img src="ct2-6.png" alt="">
<p>Duis scelerisque,<br>odio vitae tincidunt vehicula,<br>lorem ipsum scelerisque velit</p>
<h3>habitasse</h3>
</div>
<div class="item">
<img src="ct2-6.png" alt="">
<p>Duis scelerisque,<br>odio vitae tincidunt vehicula,<br>lorem ipsum scelerisque velit</p>
<h3>habitasse</h3>
</div>
<div class="item">
<img src="ct2-6.png" alt="">
<p>Duis scelerisque,<br>odio vitae tincidunt vehicula,<br>lorem ipsum scelerisque velit</p>
<h3>habitasse</h3>
</div>
</div>
</div>
<div class="contents3">
<h2>Curabitur eros purus</h2>
<div class="container">
<div class="left">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ac aliquet libero, ut aliquam sapien. Quisque suscipit vel metus at varius. Mauris eu fringilla dui, eget volutpat augue. Morbi ultrices lacus felis, et dignissim justo faucibus et. Phasellus mi orci, cursus ac leo sed</p>
<img src="ct3-1.jpg" alt="">
</div>
<div class="right">
<img src="ct3-2.jpg" alt="">
<p>Ut feugiat malesuada porta. Integer sit amet pretium eros, vitae eleifend lacus. Nam id libero dolor. Praesent varius egestas mattis. Cras sapien est, dictum vitae elementum in, ultrices id turpis. Aliquam erat volutpat. Proin sed arcu vitae eros pellentesque semper. Ut convallis lorem eget eros volutpat pretium. Sed viverra leo a quam lacinia, id ornare arcu sollicitudin. Aliquam tincidunt libero ac aliquam suscipit. Morbi posuere at eros nec tristique. Vivamus eros lectus, eleifend a nisi ac, pellentesque porta massa. Sed ut odio at arcu iaculis interdum. Vestibulum scelerisque tempor metus, at auctor tortor ornare molestie. Etiam sollicitudin orci non odio finibus maximus.</p>
</div>
</div>
<div class="box">
<div class="item">
<h2>2024</h2>
<p>Pellentesque habitant morbi</p>
</div>
<div class="item">
<h2>2024</h2>
<p>Pellentesque habitant morbi</p>
</div>
<div class="item">
<h2>2024</h2>
<p>Pellentesque habitant morbi</p>
</div>
<div class="item">
<h2>2024</h2>
<p>Pellentesque habitant morbi</p>
</div>
</div>
</div>
</div>
</body>
</html>
■ Web 19일차 12-09
■ 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>
■ 스크롤 변화에 따라 아래 요소들이 올라오는 듯한 변화주기
- 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>
■ 마우스 호버시 설명페이지 보이기
<!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">
</head>
<style>
body{
margin: 0;
}
.wrap{
background-color: #fff;
}
header{
height: 30vh;
}
footer{
height: 30vh;
}
.container{
width: 70%;
height: 200px;
display: flex;
margin: 0 auto;
justify-content: space-between;
}
.container > .box{
width: 23%;
height: 100%;
position: relative;
}
.container > .box:hover > .view{
z-index: 1;
cursor: pointer;
transform: translate(-50%, -50%) scale(100%);
transition: transform 1s;
}
.container > .box > .view{
position: absolute;
width: 160%;
height: 160%;
left: 50%;
top: 50%;
z-index: -1;
transform: translate(-50%, -50%) scale(70%);
}
.container > .box > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.container > .box > .view > .text{
background-color: #ffdfdf;
height: 30%;
}
.container > .box > .view > img{
width: 100%;
height: 70%;
display: block;
object-fit: cover;
}
</style>
<body>
<div class="wrap">
<header></header>
<div class="container">
<div class="box">
<img src="a1.jpg" alt="">
<div class="view">
<img src="a1.jpg" alt="">
<div class="text">내용에 대한 설명</div>
</div>
</div>
<div class="box">
<img src="a2.jpg" alt="">
<div class="view">
<img src="a2.jpg" alt="">
<div class="text">내용에 대한 설명</div>
</div>
</div>
<div class="box">
<img src="a3.jpg" alt="">
<div class="view">
<img src="a3.jpg" alt="">
<div class="text">내용에 대한 설명</div>
</div>
</div>
<div class="box">
<img src="a4.jpg" alt="">
<div class="view">
<img src="a4.jpg" alt="">
<div class="text">내용에 대한 설명</div>
</div>
</div>
</div>
<footer></footer>
</div>
</body>
</html>'Web 수업자료 > Web 정규' 카테고리의 다른 글
| Web 3 24-12 (0) | 2024.12.10 |
|---|---|
| UX/UI 디자인 24-11 (7) | 2024.11.16 |
| Web 1,2 저녁 24-10 (0) | 2024.11.08 |
| 웹디자인 기능사 (0) | 2024.10.15 |
| Web 4 24-09 (1) | 2024.09.10 |