[html, css] 효과와 애니메이션, 포트폴리오-nav
Section 8 CSS 효과와 애니메이션
1. 속성효과
1)가시성 속성
어떤 요소를 보이거나 보이지 않게 함
차지하는 공간은 그대로
visibility:hidden;
visibility:visible;
2)디스플레이 속성
①none
요소를 보이지 않게 하고 차지하는 공간도 사라짐
display:none;
②inline
가로배치
width, height x
③block
세로배치
width, height o
④inline-block
가로배치, width, height o
3)그레디언트 효과(css 제너레이터 사용 권장)
2. 2차원 변환 효과
2차원 변환 함수의 종류
| 함수 | 설명 | 사용 예 |
| translate() | 평행 이동 변환 | transform: translate(50px, 100px); |
| rotate() | 회전 변환 | transform: rotate(20deg); |
| scale() | 크기 변환 | transform: scale(2, 3); |
이외에도 skew와 matrix가 있으나 직접 사용하기보다는 css 제너레이터를 사용하는 것을 권장한다.
3. 3차원 변환 효과
| 함수 | 설명 | 사용 예 |
| translateX(x) | 평행 이동(X축) | transform: translateX(50px); |
| translateY(y) | 평행 이동(Y축) | transform: translateY(50px); |
외에는 css 제너레이터 사용을 권장한다.
4. 변화 속성
효과 적용 과정을 부드럽게 보여주거나 시간을 조정
1)transition-property: 변화 효과 적용할 속성 나열
2)transition-duration: 변화 지속 시간 지정
3)transition-timing-function: 변화의 시작과 끝 타이밍 지정
4)transition-delay: 변화 효과 지연 시간 지정
단축형
div{
transition: property duration timing-function delay;
}
기본형
div{
transition-property: width, color;
transition-duration: 1s;
transition-timimg-function: ease;
transition-delay: 3s;
}
확장 기본형
div{
transition-property: width, height, border-width, color;
transition-duration: 1s, 2s, 1s, 3s;
transition-timing-function: ease, ease-in, ease-out, linear;
transition-delay: 3s, 1s, 1s, 2s;
}
duration 속성값
linear: 처음부터 끝까지 같은 속도
ease: 느림→빠름→느림
ease-in: 느림→빠름
ease-out: 빠름→느림
ease-in-out: 느림→느림
cubic-bezier(n, n, n, n): 처음과 끝의 속도를 설정
키프레임
@keyframes animationname{
keyframes-selector {css-styles;}
}
위에서 아래로 움직이는 키프레임 설정
@keyframes box_animation{
from{top:0px;}
to{top:200px;}
}
퍼센트 단위로 애니메이션 설정(권장)
@keyframes animationname{
keyframes-selector
0%{시작값}
25%{변경값}
50%{변경값}
75%{변경값}
100%{종료값}
}
애니메이션 속성의 종류
animation-name: @keyframes 애니메이션의 이름 지정
animation-duration: 애니메이션의 지속 시간 설정(초 단위)
animation-timing-function: 시작과 끝 타이밍 지정
animation-delay: 시작 지연시간 설정(초 단위)
animation-iteration-count: 반복 재생 횟수 설정
숫자, infinite
animation-direction: 방향 설정
- normal: 순방향
- reverse: 역방향
- alternate: 홀수에서 순방향, 짝수에서 역방향 재생
- alternate-reverse: 홀수에서 역방향, 짝수에서 순방향 재생
animation-fill-mode: 재생하고 있지 않을 때 속성값
animation-play-state: 애니메이션 재생 상태 설정
포트폴리오 웹페이지-nav
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fish the Fish</title>
<script src="https://kit.fontawesome.com/f70c884d31.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@100;300;500&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div id="logobox">
<div id="logo"><a href=""><i class="fas fa-fish"></i></a></div>
<div id="title"><a href="">Fish the Fish</a></div>
</div>
<div id="listbox">
<ul>
<li><a href="">Home</a></li>
<li><a href="">serviceoffers</a></li>
<li><a href="">skills</a></li>
<li><a href="">work</a></li>
<li><a href="">Testimonials</a></li>
<li><a href="">contact</a></li>
</ul>
</div>
</nav>
</body>
</html>
css
*{
font-family: 'IBM Plex Sans KR', sans-serif;
list-style: none; /*li 스타일 없앰(동그라미가 사라짐)*/
margin: 0px;
padding: 0px; /*브라우저마다 기본값이 다르기 때문에 초기화*/
}
/*내비게이션 바 시작*/
nav{
/*부모->자식 설정*/
display: flex;/*자식을 가로로 펼침*/
justify-content: space-between;/*가로정렬
left, center, right
space-around: 요소 좌우 공백 1/n, space-between: 양끝 정렬, space-evenly: 공백을 똑같이 생성*/
align-items: center; /*상하 정렬 -
flex-start: 위쪽, center: 중앙, flex-end: 아래쪽*/
/*자신 설정*/
padding: 0px 20px 0px 20px;
background-color:cornflowerblue;
color: white;
height: 100px;
font-size: 20px;
}
a{
display: inline-block;
text-decoration: none;
color: white;
padding-bottom: 20px;
padding-top: 20px;
}
#logobox{
/*이 요소가 부모일 때 자식 설정*/
display: flex;
justify-content: left;
align-items:flex-end;
/*자기자신 설정*/
width: 30%;
}
#logo>a{
padding-right: 10px;
}
#listbox{
/*부모 설정*/
/*자신 설정*/
width: 70%;
}
#listbox ul{
/*부모 설정*/
display: flex;
justify-content: right;
align-items:flex-end;
}
#listbox>ul>li>a{
padding: 20px 10px 20px 10px;
/* 패딩을 줬는데 사이즈가 부모를 넘어서서 반영되지 않을 경우
블록요소가 아니면 종종 반영되지 않을 수 있다.
이럴 경우 inline-block으로 변경한다. */
display: inline-block;
text-decoration: none;
color: white;
}
/*내비게이션 바 끝*/