컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그

트랜지션이란? CSS의 프로퍼티 즉 속성값이 바뀔 때 그 변화가 바로 일어나지 않고 시간차를 두고 일어나게 하는 것이다. 위 코드와 같이 설정하면 div 요소에 마우스 커서가 올라가면 사각형의 크기가 줄어든다. 그런데 여기선 트랜지션을 설정해줘서 div가 변화하는 과정을 순식간이 아닌 2초로 느리게 변화하게 바꿨다. 트랜지션의 발동 조건 트랜지션은 혼자서 발동하지 않는다. 그냥 CSS를 적용한다고 끝이 아니라 자바스크립트를 이용하거나 가상 클래스 선택자(hover)와 같은 추가적인 코드 작성이 필요하다.

CSS를 이용해서 주로 하게 되는 작업 중 하나는 바로 각종 글자, 이미지의 크기를 조절하는 일이다. 그럴때마다 다양한 크기 단위가 있어서 고민하게 된다. 일반적으로 word 프로그램을 쓸 때는 'pt'라는 단위 하나만 사용하면 됐다. 하지만 CSS에서 크기 단위는 'px', 'rem', 'em', '%' 등 다양한 크기 단위가 존재한다. 사실 사용하면서 이들을 구분해서 사용하기 쉽지 않다. 그래도 이를 잘 활용하면 더 이쁘게 웹페이지를 꾸밀 수 있다. 단위의 구분 다양한 크기 단위는 크게 둘로 나뉜다. 바로 절대 단위와 상대 단위다. 절대 단위의 경우 말그대로 그 단위 자체로 어떠한 크기를 나타낼지 딱 정해진 단위를 말한다. 반대로 상대 단위는 기준을 어디에 두느냐에 매번 달라지는 크기를 말한다. 사실..

시중에서 사용 중인 다양한 브라우저 (엣지, 크롬, 파이어폭스 등)은 각자 다른 디폴트 스타일을 가지고 있다. 기본적으로 가진 태그들끼리의 간격이 다르다든지 하는 등의 문제가 있다. 결국 개발을 할 때 한 가지 브라우저를 중심으로 개발을 하는데, 만약에 이러한 부분을 고려하지 않았다면 다른 브라우저를 통해 내가 만든 웹 사이트를 접속했을 때 조금씩 디자인이 어긋나게 된다. 이를 방지하기 위해 미리 이러한 요소들을 초기화를 통해 통일해주는 것이 Reset CSS다. 즉 각 브라우저 별로 다른 값들을 본격적으로 코드를 짜기 전에 CSS를 통해 초기화 시켜 통일 시켜주는 것이다. 아래와 같이 미리 CSS 값을 초기화해줌으로써 브라우저 별로 다를 수 있는 값들을 통일 시켜준다. 이를 통해 자신이 설정한 디자인적..

클로저(closure)란? 클로저란 함수를 일급객체로 취급하는 함수형 언어(하스켈, 스칼라 등)에서 쓰이는 일종의 테크닉이다. "클로저는 함수와 그 함수가 선언됐을 때 렉시컬 환경과의 조합이다"라는 유명한 말이 있다. 그런데 해당 내용으론 이해하기가 힘들고, 중첩된 함수에서 외부 함수는 이미 종료됐지만, 외부 함수에 있는 내부 함수는 그대로 살아있는 상황을 말한다. 이해하기 쉬우면 코드를 보면 더 편하다. 위 코드는 외부 함수에서 반환값으로 내부 함수를 반환하거나, 외부 함수에서 내부 함수를 호출해준 경우다. 이때 잘 보면 내부함수 inner()를 호출했는데 10이 출력됐다. 근데 잘 생각해보면 좀 이상하다. 왜냐면 외부 함수는 내부 함수를 리턴하면서 종료됐다. 근데 내부 함수는 이때 외부 함수가 가진 ..

위와 같은 예시를 보면 전역 변수, 전역 함수를 선언하고 실행까지 하는 것을 볼 수 있다. 일반적으로 함수명, 변수명을 이용하면 해당 함수와 변수에 설정된 데이터를 이용할 수 있다. 그렇다면 다음은 어떨까? 변수와 함수를 호출할 때 앞에 window라는 단어가 붙었다. 그러나 실행은 똑같이 된다. 이게 무슨 뜻일까? 자세히 보면 그것을 알 수 있다. 우리는 지금까지 객체를 만들고 그 안에 프로퍼티를 불러올 때 점 ( . )을 찍었던 것을 기억할 것이다. 위의 예시를 봐도 그렇다. 즉 함수나 변수를 점을 찍어서 불러올 수 있다는 것은 window의 정체는 객체란 것을 알 수 있다. window란 자바스크립트가 브라우저에서 돌아갈 때 모든 객체들의 최상위 객체로서 전역객체라(Global Object)라고도 ..

자바 스크립트의 객체(Object)란? 보통 자바(java)를 생각하면 객체는 클래스와 함께 짝지어 다닌다고 생각할 수 있다. 하지만 자바스크립트의 클래스는 최근 도입된 개념이다. 그래서 그 전에는 클래스 없이 객체를 클래스처럼 이용했다. 자바 스크립트 객체는 'key'와 'value'로 이뤄진 프로퍼티(property) 그리고 메서드의 집합이다. 일반적으로 한 개의 변수는 한 개의 값만 저장이 가능하다. 이럴 경우 변수가 가진 데이터를 명확히 알 수 있으나 여러 면에서 불편함이 생긴다. 또한 필요에 따라 변수 한개에도 여러 자료를 담아야할 경우가 생긴다. 그래서 생겨난 것이 객체(Object)다. 아래 예시를 보면 더 쉽게 이해할 수 있다. 객체(Object)의 구성 자바 스크립트 객체는 크게 둘로 나..

자바 스크립트의 클래스 활용 자바 스크립트도 자바처럼 클래스(class)와 객체(Obejct)를 갖는다. 하지만 자바스크립트의 클래스는 ES6에 새로 추가된 개념이다. 클래스가 있기전 클래스를 통해 객체를 사용하지 않고 직접 객체를 만들어서 사용했다. 그리고 이런 객체를 복제하여 사용하며 이것을 상속의 개념으로 사용했다. 하지만 자바 스크립트에서도 클래스 사용이 가능해지면 자바의 문법과 비슷하게 구현이 가능하다. 자바 스크립트의 클래스 작성 자바 스크립트의 경우 자바와 비슷하게 대부분이 진행된다. 아래는 자바 스크립트에서 클래스를 선언하고 생성자로 객체를 생성하는 과정이다. 자바 스크립트 클래스의 상속과 다형성, 오버라이딩 자바스크립트의 클래스도 이제 상속이 가능하고 이를 통해 자바의 기능을 그대로 구현..

매개변수의 타입 자바 스크립트에서 함수를 정의할 때 매개 변수의 타입은 따로 명시하지 않는다. 어차피 변수 자체도 타입을 명시하지 않기 때문에 전달되는 파라미터 값도 데이터를 가려받진 않는다. 다만 그와 별개로 함수에서 처리가 되지 않는 값을 줬을 경우 함수 내부에서 처리가 불가능해서 오류가 난다. 자바 스크립트의 인수(argument) 자바 스크립트에선 매개 변수로 전달되는 인수가 기본 자료형(primitive)일 경우에는 기본 자료형 데이터가 바로 전달되고, 기본 자료형 이외의 객체가 전달될 경우는 객체의 참조값이 전달된다. 추가로 인수의 경우 다른 언어와 달리 원하는 숫자보다 적게 전달되더라도 오류가 나지 않는다. 그저 인수가 배정되지 않는 매개변수는 'undefined'값을 갖게 될 뿐이다. 위와..