저번엔 그라데이션 배경을 만들어보았고 (https://makeit80.tistory.com/8)
이제 첫 페이지 제목을 디자인할 차례였다.
제목과 짧은 부제같은 설명을 적고나니
뭔가 심심했다.
그래서 페이지를 열었을 때 투명에서 불투명으로 변하는 애니메이션을 추가해
그라데이션 배경과 어울리게 만들어보았다.
나름 잘 어울리는듯,,
/*텍스트 애니메이션*/
.gradient-box {
opacity: 1;
color: #ffffff;
animation: animate 3s;
font-size: 1.5vw;
}
@keyframes animate {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
이렇게 하고 창을 축소하니 글자가 겹쳐서 나왔다..
찾아보니까 px 로 하면 고정값이어서 글자가 깨질 수도 있다고 나오더라.
브라우저 창의 비율에 따라 폰트 크기가 변할 수는 없을까?
라는 바람이 있었는데
마침 딱 원하는게 있었다.
vw 단위를 사용하면 비율에 따라 크기가 변화한다는 것이다.
이렇게..!!
#subject {
height: 30vh;
font-size: 8vw;
font-weight: bold;
padding-bottom: 8vw;
}
모르는 걸 하나하나 알아간다는 게 너무 뿌듯하고 짜릿했다.
'개발일지' 카테고리의 다른 글
| 2023.10.12. TIL JavaScript 1주차 (0) | 2023.10.12 |
|---|---|
| 미니프로젝트 A-03 KPT 회고 (0) | 2023.10.12 |
| 2023.10.11. TIL 그라데이션 (0) | 2023.10.11 |
| SQL TIL 4주차 : Subquery, 그 외 (1) | 2023.10.11 |
| SQL TIL 3주차 : Join (0) | 2023.10.11 |