나아가는 길에 발자국을 찍어보자

애니메이션을 만들면서 알게된 것인데, 생각보다 엄청 충격이었다. 지금까지 html과 css는 모두 특정 속성을 가지고 정적으로만 사용했기때문에 변수에 어떤 값을 담거나 계산하는과정이 있을 것이라 생각을 못했었는데 그게 아니라고 한다. 변수도 쓸 수 있고, 계산도 할 수 있다. 쌩으로 알아낸 것은 아니고 참고 사이트에서 코드를 분석하다가 이효과는 어떻게 만들어진건지 알아보면서 알게된 것 인데 상당히 신선하고 충격적이었다. 역시... 내가 모르는 것은 참 방대한것같다 ㅜ 해당 문법들을 여기다 정리하고 내가짠 코드를 복기해보면서 애니메이션 페이지는 마무리 지을까 한다. [1] 변수 선언 1) 기본 선언 방법 사용자 지정 속성은 두개의 붙임표로 시작하는 속성의 이름과 함께, 유효한 css 값이라면 아무거나 그 ..

첫번째 페이지인 애니메이션을 추가하면서 정말 알게 되 것이 많다. 하나하나 정리해 가면서 다시 복습해야겠다. 1. 애니메이션 추가하기 animation은 animation자체의 속성과 애니메이션 중간 상태를 정의할 수 있는 @keyframes로 구성되어 있다. 1.1 animation 속성 animation-name 애니메이션의 중간 상태를 지정하기 위한 이름을 정의하는 속성. 중간 상태는 @keyframes를 사용하여 정의한다. 이름을 설정해야 애니메이션을 재생할 수 있다.(==호출) animation-duration 한 싸이클의 애니메이션이 동작하는데 걸리는 시간을 지정.(==한번 재생하는 데 걸리는 시간) 0이나 음수로 설정하면 애니메이션은 재생되지 않는다. animation-delay 엘리먼트가 ..

우선 내가 만들 페이지에 원하는 폰트를 사용해야 했기 때문에 `@font-face`를 통해 웹 브라우저가 폰트를 다운 받게 해야했다. Syntax @font-face { font-family: ; src: [,]*; [font-weight: ]; [font-style: ]; } font 속성에서 사용할 폰트명을 지정한다. 다운받을 웹폰트가 있는 파일 위치를 나타내는 url 값을 지정하거나 local 컴퓨터에 설치된 폰트명을 `local("폰트명")` 형식으로 지정한다. 폰트 굵기의 값 (해당 프로젝트에선 사용 x) 폰트 스타일 값. [내 코드] @font-face { font-family: "NEWtro_T"; src: url("./font/newtrotfonttestGX.ttf"); } @font-fa..

미대생과 만났을 당시 미대생이 준비해온 요구사항 그림들 1. 조절바가 있는 타이핑 페이지 - 사용자들이 들어와서 타이핑을 해보고 밑의 바를 움직이면 바에서 조절되는 값으로 입력된 글자들의 모습이 바뀌는 것을 볼 수 있는 페이지 - 베리어블 폰트의 변수는 한개 이상 설정할 수 있는데, 우리 미대생은 2개로 만들어서 2개의 값에 따라 폰트의 모양이 바뀐다. (+) 추가 사항 - 미대생이 만든 폰트는 변수가 2개라서 극점이 4가지이다. 해당 극점의 폰트를 보여줄수있게 4가지 버전의 폰트가 타이핑하는대로 해당 슬라이드기능 밑에 나왔으면 좋겠다고 한다. 2. 애니메이션 페이지 - bgm이 깔리고 해당 노래에 맞게 가사들이 나오면서 박자와 포인트에 맞게 글자들이 변하면서 시각적으로 bgm을 즐길수있는 페이지 - 노..