본문 바로가기

전체 글87

css @Keyframe 사용법 @keyframes keyframes는 CSS 애니메이션 사용시, 구간을 정해 각 구간별로 어떠한 스타일을 적용할 지 작성하는 문법이다. @keyframes 필요요소 animation-name: @keyframes가 적용될 애니메이션 이름. 사용자 임의로 부여 stage: 0~100%의 구간 css style: 각 구간에 적용될 style animation 속성 animation-name animation-duration: 2s; 애니메이션 완료까지 소요 시간 animation-delay: 1s; 애니메이션이 시작 전 지연시간 animation-iteration-count: infinite; 반복횟수 animation-timing-function: ease-out; 애니메이션 실행 속도 animation.. 2022. 6. 7.
자바스크립트 사용자의 위치 가져오기 How to get a user's location in JS 자바스크립트로 사용자의 위치 가져오기 Geolocation API geolocation API 사용자의 위치정보를 반환한다. 크롬 f12키 -> Application 에서 확인 코드 const COORDS = 'coords' // 좌표 function save(coordsObj) { localStorage.setItem(COORDS, JSON.stringify(coordsObj)); } function geoSuccess(position) { // 위치정보 수락했을 때 const latitude = position.coords.latitude; // 위도 const longitude = position.coords.lon.. 2022. 6. 4.
Media Query 미디어 쿼리 사용 Media Query 미디어 쿼리 사용 미디어 쿼리의 사용 반응형 웹을 만들기 위해 사용한다. 크롬의 개발자 도구(f12)로 확인할 수 있는 모바일 기기의 크기 등, 웹 사이트를 각 단말에 맞게 적용하기 위해 사용한다. 사용방법 1) css 내부 삽입 ()괄호 안에 넣은 조건이 될 때 웹이 유동적으로 변한다. @media (max-width:700px) { .container { margin: 0; padding 0; } }2) 링크 연결 연산자 and 여러 미디어 특징을 하나로 결합 , 개별적인 미디어 쿼리 not 전체 미디어 쿼리를 부정 only 미디어 쿼리를 지원하는 클라이언트만 미디어 쿼리를 해석하라는 명령어. 생략 가능. 기본값은 only로 주어지기 때문에 일반적으로 명시해 작성하지 않음. Me.. 2022. 6. 3.
Express 설치 Express 설치 - VSCode 설치 Node.js 가 먼저 설치되어 있어야 한다. 1. Express-generator 설치 express 프로젝트의 기본 형식을 만들어주는 커멘드 모듈 패키지를 통해 프레임워크에 필요한 package.json과 기본 구조도 설정된다. C:\nodejs > npm install express-generator -g -g 명령어를 통해 글로벌로 설치한다. 설치된 파일은 C:\Users\사용자명\AppData\Roaming\npm\node_modules\express-generator에서 확인 가능. 2. 프로젝트 생성C:\nodejs 폴더 아래 myapp 폴더가 생성된다. 웹 템플릿으로 ejs모듈 사용하고, css모듈로 sass사용 3. C:\nodejs > expre.. 2022. 6. 2.