게임 랭킹화면처럼?타이틀이 먼저 나오고 내용이 순차적으로 텍스트 입력되듯 나오는 효과more info 버튼을 누르면 구글드라이브에 저장된 이력서를 볼 수 있다 각 항목을 동적으로 생성하고 setTimeout으로 출력 시간을 설정해 주면 끝 more information! .about-container { width: 100%; height: 40vh; display: flex; flex-direction: column; align-items: center; gap: 15vh; .resume { text-decoration: none; text-align: ce..
마우스를 올리거나 클릭 시 색상이 3가지로 변경되는 효과클릭한 메뉴 버튼은 색상변경 효과가 유지된 상태이다 js 안 쓰려했는데 , 태그로는 원하는 대로 토글을 만들 수 없을 거 같아 js를 적용했다이쁘니까 괜찮아.. @keyframes ToggleBlinky으로 색상을 지정해 주고 클릭한 li에 active 클래스명을 추가하면 끝 About Skill Projects Activities .toggleBtn-container { margin: 15vh 0 10vh 0; font-size: 2vw; ul { display: flex; justify-content: space-around; list..
자바스크립트 없이 포트폴리오를 만들기로 했다 컨셉은 레트로 오락기! keyframes을 활용해 글씨 먹는 팩맨 완성두 개의 keyframes을 엮는 게 css만으로 하기 힘들었지만 나름 자연스럽게 된 거 같아 뿌듯하다세밀한 조정을 원할경우 js를 추가하는 것을 권장한다 속도와 위치 조정이 핵심이기 때문에 시간을 꽤 많이 뺏겨버렸다@keyframescss문법 중 하나로 동작을 단계별로 정의할 수 있고 간단하게 애니메이션을 구현할 수 있다 from to ( 0% 시작 => 100% 끝 )to로만 쓸 수도 있다 (100% 일 때) Animation 속성 animation-name : @keyframes 이름 animation-duration : 애니메이션 시작부터 마지막까지 지속시간animation-timin..