오늘은 position을 복습하고 z-index, animation에 대해서 배워보도록 하겠습니다
| 목차 | |
| 1. | position 복습 |
| 2. | z-index |
| 3. | animation |
| 4. | 예제 문제 |
| 5. | 느낀 점 |
1. position 복습
▣ 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>
.pbox{
height: 150px;
background-color: beige;
position: relative;
}
.box{
width: 100px;
height: 100px;
position: absolute;
top: 25px;
}
.box:nth-child(1){
background-color: aqua;
left: 25px;
}
.box:nth-child(2){
background-color: gold;
left: 50%;
transform: translate(-50%);
}
.box:nth-child(3){
background-color: chocolate;
right: 25px;
}
.pbox1{
position: relative;
width: 500px;
height: 500px;
background-color: violet;
}
.boxx{
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="pbox">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="pbox1">
<div class="boxx"></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>
<style>
.pbox{
position: relative;
width: 100%;
height: 50px;
}
.box{
position: absolute;
width: calc(100% / 4);
height: 50px;
text-align: center;
text-decoration: none;
font-size: 25px;
font-weight: 700;
line-height: 50px;
color: black;
border: 1px solid black;
box-sizing: border-box;
}
.box:hover{
background-color: yellowgreen;
}
.box2{
border-left: none;
border-right: none;
left: 25%
}
.box3{
border-right: none;
left: 50%
}
.box4{
left: 75%
}
</style>
</head>
<body>
<div class="pbox">
<a href=""><div class="box box1"><b>menu1</b></div></a>
<a href=""><div class="box box2"><b>menu2</b></div></a>
<a href=""><div class="box box3"><b>menu3</b></div></a>
<a href=""><div class="box box4"><b>menu4</b></div></a>
</div>
</body>
</html>
▷ 출력
▣ 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>
<style>
.menu-box{
/* position: relative; */
width: 200px;
height: 200px;
float: left;
}
.box{
border: 1px solid black;
box-sizing: border-box;
width: 200px;
height: 50px;
text-align: center;
font-size: 20px;
font-weight: 700;
line-height: 50px;
}
.box:hover{
background-color: yellowgreen;
}
.r{
border-bottom: none;
}
.img-box{
width: calc(100%-200px);
float: right;
margin-right: 100px;
}
</style>
</head>
<body>
<div class="menu-box">
<div class="box r">menu1</div>
<div class="box r">menu2</div>
<div class="box r">menu3</div>
<div class="box ">menu4</div>
</div>
<div class="img-box"><img src="../image/푸바오.jpg" alt="푸바오"; ></div>
</body>
</html>※ box - sizing: border -- box;
크기에 border 선을 포함시킴
▷ 출력
2. z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
z-index 속성
- 요소가 겹쳐있을 때 어느 요소를 위로 보낼지 결정하는 속성
- 정수의 값을 가짐 (양수만 가능)
- 숫자가 높을 수록 위로 올라감. (별로 의미 없음)
-->
<style>
.box{
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
}
.box1{
top: 0px;
left: 0px;
background-color: aqua;
z-index: 3;
}
.box2{
top: 15px;
left: 15px;
background-color: blue;
z-index: 2;
}
.box3{
top: 30px;
left: 30px;
background-color: cornflowerblue;
z-index: 1;
}
.box4{
top: 45px;
left: 45px;
background-color: dodgerblue;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></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>
.round{
width: 300px;
border: 1px solid black;
text-align: center;
margin: 0 auto;
}
.top, .bt{
width: 90%;
height: 50px;
border: 3px solid black;
margin: 10px auto;
font-size: 20px;
font-weight: 700;
line-height: 50px;
}
.mid{
width: 90%;
height: 260px;
border: 3px solid black;
margin: 10px auto;
position: relative;
}
.red, .green, .blue{
width: 100px;
height: 100px;
box-shadow: 5px 5px 5px gray;
position: absolute;
}
.red{
top: 40px;
left: 40px;
background-color: red;
z-index: 3;
}
.green{
top: 80px;
left: 80px;
background-color: green;
z-index: 2;
}
.blue{
top: 120px;
left: 120px;
background-color: blue;
z-index: 1;
}
</style>
</head>
<body>
<div class="round">
<div class="top">텍스트</div>
<div class="mid">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
<div class="bt">텍스트</div>
</div>
</body>
</html>※ margin : 0 auto;
가로 길이를 자동으로 변경해줌 => 자주 사용함
▷ 출력
※ F12
웹 사이트에서 'F12'를 이용해서 웹 사이트를 바꾸어 적용시킬 수 있지만 저장되지 않음
3. animation
▣ 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>
<!--
애니메이션(animation)
1. 애니메이션 동작 등록 (@keyframes)
- 시간 비율 0 ~ 100%, 0% = from / 100% = to
@keyframes 애니메이션 이름{
시간 비율{
스타일;
}
시간 비율{
스타일;
}
시간 비율{
스타일;
}
}
2. 애니메이션을 요소에 적용
- animation-name : 동작할 애니메이션 이름
- animation-duration : 동작 시간
- animation-interation-count : 동작 횟수 infinite(무한)
-->
<style>
@keyframes scaleFont{
0%{
font-size: 20px;
}
50%{
font-size: 50px;
color: blue;
}
100%{
font-size: 20px;
}
}
.ani{
font-size: 20px;
animation-name: scaleFont;
animation-duration: 2s;
animation-iteration-count: 3;
}
</style>
</head>
<body>
<div class="ani">animation</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>
<style>
@keyframes move{
from{
left: 10%;
}
50%{
left: 80%;
background-color: violet;
}
to{
left: 10%;
}
}
.box{
width: 100px;
height: 100px;
background-color: blueviolet;
position: absolute;
left: 10%;
top: 20px;
animation-name: move;
animation-duration: 3s;
animation-iteration-count: 2;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
▷ 출력
▣ 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>
<style>
@keyframes move{
0%{
bottom: 0%;
}
25%{
bottom: 50%;
}
50%{
bottom: 0%;
}
75%{
bottom: 25%;
}
100%{
bottom: 0%;
}
}
.ani{
left: 47%;
position: absolute;
font-size: 50px;
animation-name: move;
animation-duration: 3s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div class="ani">(｡•̀ᴗ-)✧</div>
</body>
</html>
▷ 출력
◈ transform & transition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
transform : 회전, 이동, 확대 등 속성을 사용할 때
- translate(x,y) : x축으로 x만큼, y축으로 y만큼 이동
- translateX / translateY / translateZ
- scale(w,h) : 가로로 w배, 세로로 h배 확대 0으로 주면 안 보임.
- scaleX / scaleY
- rotate(a) : a 각도만큼 시계방향 회전 (단위: deg)
- skew(xa, ya) : 기울림 (단위: deg)
- skewX / skawY
transition : 속성값이 변화할 때 서서히 변화
(애니메이션 효과가 발생한 것처럼 보임)
- transition 속성명 전환시간;
- 속성명이 전환시간동안 서서히 변화
-->
<style>
@keyframes translate{
0%{transform: translate(0,0);}
50%{transform: translate(50px,50px);}
100%{transform: translate(0,0);}
}
@keyframes scale{
0%{transform: scale(1,1);}
50%{transform: scale(2,2)}
100%{transform: scale(1,1)}
}
@keyframes rotate{
0%{transform: rotate(0deg);}
50%{transform: rotate(180deg)}
100%{transform: rotate(0deg)}
}
@keyframes skew{
0%{transform: skew(0,0);}
50%{transform: skew(30deg,30deg)}
100%{transform: skew(0,0)}
}
.box{
width: 200px;
height: 50px;
background-color: blueviolet;
animation: skew 2s 2;
}
.font{
font-size: 20px;
transition: 1s;
}
.font:hover{
font-size: 50px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="font">Hello</div>
</body>
</html>
▷ 출력
4. 예제 문제
◎ 문제
▶ 1번
▶ 2번
◎ 정답
▶ 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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
.search-box{
margin: 10px;
}
.search-left{
width: 350px;
height: 50px;
border: 1px solid #03c75a;;
border-radius: 5px 0px 0px 5px;
float: left;
box-sizing: border-box;
}
.search-left>input{
width: 270px;
height: 30px;
border: none;
outline: none;
margin: 9px 0 0 10px;
}
.search-left>input::placeholder{
color: rgb(158, 157, 157);
font-weight: 600;
}
.search-left>.bi-keyboard{
color: gray;
margin: 0 10px;
}
.search-left>.bi-caret-down-fill{
color: gray;
}
.search-btn{
width: 50px;
height: 50px;
background-color: #03c75a;
border: none;
border-radius: 0px 5px 5px 0px;
}
.search-btn>.bi-search{
color: white;
}
</style>
</head>
<body>
<form action="">
<div class="search-box">
<div class="search-left">
<input type="text" name ="search" placeholder="검색어를 입력하세요">
<!-- 키보드 아이콘 -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-keyboard" viewBox="0 0 16 16">
<path d="M14 5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zM2 4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"/>
<path d="M13 10.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm0-2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm-5 0A.25.25 0 0 1 8.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 8 8.75zm2 0a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25zm1 2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm-5-2A.25.25 0 0 1 6.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 6 8.75zm-2 0A.25.25 0 0 1 4.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 4 8.75zm-2 0A.25.25 0 0 1 2.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 2 8.75zm11-2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm-2 0a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm-2 0A.25.25 0 0 1 9.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 9 6.75zm-2 0A.25.25 0 0 1 7.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 7 6.75zm-2 0A.25.25 0 0 1 5.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 5 6.75zm-3 0A.25.25 0 0 1 2.25 6h1.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-1.5A.25.25 0 0 1 2 6.75zm0 4a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm2 0a.25.25 0 0 1 .25-.25h5.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-5.5a.25.25 0 0 1-.25-.25z"/>
</svg>
<!-- 세모 아이콘 -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
<path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
</svg>
</div>
<button type="submit" class="search-btn">
<!-- 돋보기 아이콘 -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
</svg>
</button>
</div>
</form>
</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>
<style>
body{
position: relative;
background-color: rgb(73, 167, 135);
}
.login-box{
position: absolute;
width: 500px;
height: 300px;
left: 50%;
/* bottom: 50%; */
transform: translate(-50%, 100%);
background-color: rgb(99, 194, 170);
border-radius: 10px;
}
.login-id{
width: 450px;
height: 50px;
background-color: white;
border-radius: 10px;
margin: 30px 25px 5px 25px;
float: left;
}
.login-id>input{
width: 430px;
height: 30px;
margin: 10px 10px;
color: rgb(167, 167, 167);
border: none;
outline: none;
}
.login-password{
width: 450px;
height: 50px;
background-color: white;
border-radius: 10px;
margin: 10px 25px 5px 25px;
float: left;
}
.login-password>input{
width: 430px;
height: 30px;
margin: 10px 10px;
color: rgb(167, 167, 167);
border: none;
outline: none;
}
.login{
width: 450px;
height: 50px;
background-color: rgb(46, 117, 90);
color: white;
border-radius: 10px;
margin: 10px 25px 0px 25px;
float: left;
text-align: center;
font-size: 20px;
font-weight: 500;
line-height: 50px;
}
.password-find{
width: 450px;
height: 30px;
text-align: center;
margin-left: 25px;
margin-top: 30px;
color: rgb(77, 37, 77);
float: left;
}
.password-find>a{
text-decoration: none;
}
</style>
</head>
<body>
<form action="">
<div class="login-box">
<div class="login-id">
<input type="text" name="id" placeholder="아이디"></div>
<div class="login-password">
<input type="password" name="password" placeholder="비밀번호"></div>
<button class="login" type="button">
<b>로그인</b></button>
<div class="password-find"><a href=""><small>비밀번호를 잊어버리셨나요?</small></a></div>
</div>
</form>
</body>
</html>
5. 느낀 점
오늘 네이버 검색창(구버전)을 제작해보면서 검색창을 유사하게 제작하지는 못했지만 웹 사이트에서 내가 볼 수 있던 요소를 내가 직접 만들어 볼 수 있어서 재미있게 할 수 있었던 같다. 오늘 배웠던 내용들을 복습해보면서 네이버 검색창(신버전)을 새로 만들어봐야겠다.
'Front-end > Css' 카테고리의 다른 글
| Css 기초(실습) - AWS 풀스택 과정 15일차 (0) | 2024.08.02 |
|---|---|
| Css 기초(flex) - AWS 풀스택 과정 14일차 (0) | 2024.08.01 |
| Css 기초(media) - AWS 풀스택 과정 13일차 (0) | 2024.07.31 |
| Css 기초(font, box, position) - AWS 풀스택 과정 11일차 (0) | 2024.07.29 |
| Html & Css 기초(div) - AWS 풀스택 과정 10일차 (0) | 2024.07.26 |