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

반응형 웹페이지를 만들기 위해 미디어 쿼리를 사용하여 화면 배치와 구성(css )을 수정하고 화면 크기를 감지하여 페이지에서 제공되는 기능의 종류(js)를 구별하였다. 모바일 화면 크기의 기준을 여러번 바꾸다가 화면을 돌리거나 탭으로 들어올수도 있다는 생각이들어 800px로 했다. 좀더 알아보니 페이지에 들어오는 브라우저의 종류를 따져 만들 수도 있다고 했지만 그렇기엔 복잡해질수도 있을것같아 화면 크기를 기준으로 잡았다. 1.미디어 쿼리 적용 (@media) @media(min-width:800px){ /*여기가 웹일때 폰트 크기 지정하는 곳이야 800px보다 화면이 크면 웹이라고 인식한다.*/ } min-width: 화면의 최소 넓이를 지정하는 것. 즉 화면의 넓이가 800px이상일때 적용. 시작 폰트..

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