Select

이프로젝트의 최종목표는 제가 웹 프론트엔드 기본기술(HTML, CSS, JS)을 사용해서 화면에 똥파리가 위이잉 소리를 내면서 날라다니는 효과를 만드는 과정을 일지로 기록하는 것 입니다. 왜 하필 똥파리? 똥파리가 갑자기 화면에 나타나서 위이이잉 소리를 내면서 날라다니면 황당하고 웃기지 않을까해서 똥파리를 선택 하게 됐습니다. 시작의 의미로 프로젝트 폴더를 만들고 폴더명을 'flying-fly'로 지었습니다.

소개 슬라이더 아이템수가 바뀔때마다 애니메이션 키프레임을 다시 계산 해주는게 번거로워서 SCSS를 이용하여 계산 부분을 함수화 시켰습니다. 아래사진은 완성된 슬라이더 모습입니다. 본론 HTML 구조 입니다 // .scene는 최상위 엘리멘트 입니다 // .slider는 자식들로 .item을 가집니다. // .item은 각각의 .slider 아이템들을 나타냅니다 // 첫번째 .item 엘리멘트를 마지막에 추가합니다. // 첫부분과 끝부분 엘리멘트를 똑같이 해주면 // 슬라이딩 애니메이션이 반복될때 무한히 반복하는 효과를 줄수 있습니다. 1 2 3 1 SCSS 부분 입니다. // 각변수들은 색갈을을 나타냅니다. $slider:#FFF493; $primary:#87E892; $secondary:#A1E3FF;..

Intro We are going to create a slider that automatically adjusts animation keyframes based on number of items to rotate through items, using only HTML5 and SCSS. Below example demonstrates desired outcome. Breakdown Let's make make our initial HTML structure as following. // .scene is a wrapper for .slider // .slider contains all the items. // .item selects each item // Duplicate the first item,..

Calculator made with JavaScript 자바스크립트로 만든 계산기 입니다. source at https://github.com/thesoundfromthesky/project1 위에 소스 링크 입니다.

CSS 단위글씨크기px, %, em 중 택1%와 em은 부모 크기에 비례에서 변함색깔 RGB(255,255,255) 3바이트#aabbcc 앞뒤가똑같으면 줄여서쓰기가능#abc 이런식 CSS 링크방법 h1{ color: red; }Hello world CSS 선택자들1. 요소선택자p { color: red; } 2. ID 선택자#abc { color: red; } 3. 클래스 선택자.abc { color: red; } 4. 선택자 선택적 사용p.box { color: red; } 5. 선택자 다중선택.abc, p, #box, h1, a { color: red; } 6. 후손 선택자.box2 .name{ color: red; }.box1 .name, .box2 .name{ color: red; } 7. 선택자..