Mong dev blog

전체 글207

잔상 애니메이션을 만들어보자! (with, animation-delay)
이번 시간에는 animation-delay을 이용해, 움직이는 이미지에 잔상을 남기는 애니메이션을 만들어보았다. 1. preview See the Pen airplane playing by KumJungMin (@kumjungmin) on CodePen. 2. 코드 분석 1) html cloud는 배경으로 사용될 구름 이미지이며, 총 2개를 준비한다.(2개인 이유는 scss에서 알 수 있음) shadow-box는 비행기의 잔상, 그러니까 그림자를 담기 위한 공간이다. shadow-box에 class="shadow"인 img를 추가할 건데, 이건 js로 추가할 예정이다. airplane는 메인 이미지인 비행기이다 ✈️ 2) js 앞서 html파트에서 말했듯이, shadow-box에 자식으로 이미지 태그를 ..
2021. 10. 10.
타입스크립트, 함수와 매개변수 특성
타입스크립트에서 함수의 타입은 어떤 방식으로 선언되는지, 그리고 파라미터들의 특성에 대해서도 알아보자 :) 함수 1) 타입 선언 타입스크립트 함수에서는 총 3가지 타입을 정의할 수 있다. 매개변수 타입 반환값 타입 구조 타입 이 중, 매개변수와 반환값 타입 선언에 대해 알아보자 (1) 매개변수 타입 설정 js의 경우 타입을 선언하지 않고 함수를 정의한다. //js function sum1(a, b) { return a + b; } 하지만 타입스크립트의 경우 매개변수:타입 형태로 타입을 선언한다. //ts function sum2(a:number, b:number) { return a+ b; } 매개변수에서 spread 문법을 사용할 수도 있는데 방법은 아래와 같다. //ts function firstEl..
2021. 10. 9.
타입스크립트 기초, 타입
타입스크립트는 자바스크립처럼 여러 타입을 가진다. 오늘은 여러 타입 중 string, number, array, tuple에 대해 알아본다. 1. 기본 타입 (1) string 문자 데이터의 타입을 말한다. 큰 따옴표(""), 작은 따옴표('')을 사용한다. // js 문자열 선언 const str1 = 'hello'; //ts 문자열 선언 const str2:string = 'hello'; (2) number 숫자 데이터 타입을 말한다. js와 마찬가지로 16, 10진수, 8진수 등을 지원한다. // js 숫자 const num1 = 1; // ts 숫자 const num2: number = 1; (3) array array(배열)은 하나의 변수(배열)에 여러..
2021. 10. 9.
물결치는 애니메이션을 만들어보자! (with, rotate)
이번 시간에는 물결치는 애니메이션을 만들어봅시다! 1. preview See the Pen wave_alphacon_2 by KumJungMin (@kumjungmin) on CodePen. 2. 코드 분석 1) html wrap는 wave의 부모로, 배경 역할을 한다. wave들은 물결 역할을 한다. 총 2개의 wave를 겹쳐서 사용한다. 2) scss (1) 기본 속성 부여하기 A. wrap 클래스에 기본 스타일 주기 .wrap { width: 300px; /*[1]*/ height: 300px; /*[1]*/ position: relative; /*[2]*/ border-radius : 50%; /*[3]*/ background: ...; ... } [1] 부모역할을 하는 wrap 클래스에 높이 넓..
2021. 10. 9.
무한히 움직이는 원 애니메이션 (with, animation-delay)
이번 시간에는 animation-delay를 이용해 각각의 원이 다르게 움직이는 메이션을 만들어보았다. 1. preview See the Pen infinite-circle by KumJungMin (@kumjungmin) on CodePen. 2. 코드 분석 1) html center는 내부 자식들이 수직, 수평 중앙 정렬 시키기 위해 사용된다. 화면에 보이는 여러 개의 원은 loader클래스의 자식이다. 이 자식들(원)은 js를 이용하여 loader의 자식으로 추가할 예정이다! 2) js 앞서 html파트에서 말했듯이 loader에 19개의 자식을 생성할 것이다. 이 자식들은 circle클래스를 가지며, 움직이는 원 역할을 한다.const parent = document.querySelector("...
2021. 10. 9.
타입스크립트 기초(1), 타입스크립트란?
타입 스크립트는 자바스크립트에 타입이 적용된 언어이며, 자바스크립트와 달리 컴파일을 거쳐야 사용가능하다. 이러한 타입스크립트를 사용하면 자바스크립트에서 직면하던 오류를 미연에 방지할 수 있다 :) 1. 타입스크립트란? js에 타입을 부여한 언어이다. 자바스크립트의 확장된 언어이다. ts는 브라우저에서 실행하기 위해 파일을 변환(컴파일)해 줘야 한다. 2. 타입스크립을 왜 써야할까? 1) 자바스크립트에서는... js의 경우, 유효치 않은 값을 불러오면 undefined가 뜨게 되는데, 이게 문제를 발생시킨다. function getData() { const user = { address: "Kulas Light", company: { name: "Romaguera-Crona" }, id: 1, name: ..
2021. 10. 2.
[css, js] focus blur 효과(with. clip-path, blur)
css의 clip-path, blur 속성을 사용해 focus blur 효과를 만들어보자! 1. 미리보기 See the Pen by KumJungMin (@kumjungmin) on CodePen. 2. 코드 분석 1) html 전체를 감싸는 부모를 만들기 위해 을 선언한다. section의 자식으로 box1, box2, circle을 생성한다. circle은 미리보기에 있는 돋보기 역할을 한다. 두 box클래스는 같은 이미지와 자식을 가진 html로, 겹쳐서 사용된다. focus focus 2) css (1) (1) 내부 요소 중앙 배치시키기 wrap내부와 box내부의 요소들이 수직, 수평 중앙 배치시키고자 한다. 먼저 display:flex를 설정한다. 그 다음 수평 중앙 정렬을 위해 justify-..
2021. 10. 2.
css100 챌린지, day6 구현하기 (with dom 이벤트)
1. 미리보기 버튼을 클릭했을 때 Dom이벤트를 어떻게 줄 수 있을까? css100 챌린지의 day 6를 구현하면서 알아보자! See the Pen css100_day6 by KumJungMin (@kumjungmin) on CodePen. 2. 코드 설명 1) js와 css로 이벤트 주는 법? 우리는 preview(혹은 gif)에서, 버튼 클릭시 이벤트가 발생하는 걸 보았다. 그렇다면, 어떻게 dom에 이벤트를 줄 수 있을까? preview에서 살펴 본 이벤트 중, 검색창 이벤트 코드를 분석해보자. 2) 검색창 등장 이벤트 (1) 이벤트 발생시, 적용할 클래스 선언하기 search 버튼 클릭시, 검색창(search-bar)에 이벤트를 적용하고자 한다. 이 경우, 검색창에 적용하고 싶은 class을 cs..
2021. 10. 1.
css100 챌린지, day3 (with animation)
1. 미리보기 css100 챌린지의 day3을 구현해보자! 해당 구현을 통해 세 개의 원에 각각 다른 애니메이션을 주는 방법을 알 수 있다. See the Pen css100_day3 by KumJungMin (@kumjungmin) on CodePen. 2. 코드 분석 (1) html 원 역할을 하는 div를 3개 생성한다. (2) scss 반복적으로 사용되는 코드는 mixin으로 선언하고 include로 사용한다. animation에서 alternate를 사용해 정해진 순서로 진행했다가 반대 순서로 진행하게 한다. infinite를 사용해 반복적으로 애니메이션을 진행시킨다. @mixin circle { position: absolute; top: 50%; left: 50%; border: 1px so..
2021. 10. 1.

티스토리툴바