데이터타입? 전수업에서 변수를 선언하고 데이터를 할당해 주는 방법을 알았다. 하지만 데이터를 할당할때 문자열을 넣거나 숫자를 넣는 건 알겠다만 여러 객체를 넣거나 숫자를 넣었을때 계산을 하거나 할 수는 없을까? 해당 방법을 알기위해선 변수에 할당될 수 있는 데이터 타입에 대해서 알아야 한다 타입의 종류 변수 안에 들어갈 수 있는 데이터 타입에는 크게 3 가지를 배울 것이다. 문자열 String - ex) "윤원" , "승우" , "walter"등 "문자"로 이루어진 계산이 불가능한 데이터 숫자 Number - ex) 123456, 1000, 등 "숫자"로 이루어진 계산가능한 데이터 배열 Array - ex){123, "윤원" , 789} 등 숫자와 문자가 들어있는 데이터 집합 문자열과 숫자의 차이 먼저 ..

자바스크립트를 진행하기에 앞서 지난 과정 HTML과 CSS를 진행하며 우리는 웹사이트의 생김새 구조, 애니메이션, 디자인요소들의 배열 등등 즉 사이트의 "얼굴" 을만들어 냈다. 하지만 우리가 사용하던 여러 페이지들을 둘러봤을 때처럼 회원가입을 하거나 상품을 주문을 하거나 글을 작성을 하거나 페이지가 넘어가거나 하는 등 내가 만들어낸 사이트가 "기능적인 동작" 은하진 않았다. 그럼 우리가 만들어낸 얼굴에 기능을 더하려면 무엇을 알아야 할까. 우리는 이 기능적인 부분들을 자바스크립트를 통해 구현할 것이다. 변수 자바스크립트를 사용하기 위해선 기본개념인 변수에 대해서 알아야 한다. 실습을 위해 크롬창에서 f12를 눌러 콘솔창을 켜보자 해당 콘솔창에서 기본적인 구조와 문법을 학습할 수 있다. 변수란 데이터를 담..

애니메이션 속성이 필요할까? 블로그에 업로드하진 않았지만 transition 속성과 transform 속성을 결합하면 꽤나 그럴듯한 애니메이션 효과를 줄 수 있었다. 하지만 두조합으로도 한계점은 확실하게 있다. 여러 이유가 있겠다만 저 두 조합으로는 처음과 끝지점의 원상태와 움직인후의 상태까지만 조정이 가능하다. 중간지점에서의 효과나 모션그래픽등에서 종종 볼 수 있는 키프레임단위의 효과들은 어떻게 적용시켜야 할까? 시작과 끝 반복 횟수나 설정은? 이를 보완할 수 있는 속성이 애니메이션 속성이다. 기본 문법 keyframes 정의 애니메이션 속성을 사용하기 위해선 먼저 keyframes를 정의해줘야 한다. @keyframes move__box { from { } to{ } } 기본적인 구조는 이러하다. m..

시작하기 앞서 개발자는 다들 기술블로그라는 것을 가지고 있는 듯하다. 자신이 어느 기술스택을 가지고 있는지에 대한 기술스택에 대한 자기 증명, 취업을 위한 스펙, 잊히는 기초지식을 방지하기 위한 사전식기록 기타 등등 각자의 이유는 다르겠지만 개발자라고 부르기에도 아직은 민망한 비전공자인 필자는 이 블로그를 통해 하루하루 인강 등을 배운 지식을 복기하며 본인의 지식으로 만들기 위한 장으로써 이 블로그를 활용하고자 한다. transform 이란? CSS의 속성중 하나로써 대입되는 대상의 이동, 회전, 확대축소 ,비틀기 등의 변형 효과를 줄 수 있다. 일반적으로 알고 있는 사전적인 의미와 뜻은 같다고 할 수 있다. 기본 문법 transform: 변경요소(변경수치); 변경 요소중에 대표적인 4가지 이동 tran..