본문 바로가기

전체 글

 (64)
(CSS) @keyframe과 animation 사용 방법 정리 이전에 transition 사용 방법에 대해서 포스팅을 했다. 하지만 transition만으로는 복잡한 애니메이션을 만들기 어렵다.  이때 animation과 @keyframes을 사용하면 더 다양하고 복잡한 애니메이션을 만들 수 있다.  (CSS) transition 사용 방법 정리css를 적용하다 보면 특정 요소가 변화하게 만들어야 할 때가 있다. 근데 그냥 변화시키면 상당히 부자연스럽다. 한 상태에서 다른 상태로 바로 한 번에 변화해 버리기 때문이다. 이때 변화를 자lemu-devblog.tistory.com  transition , animation, @keyframe 차이설명하기 앞서 transition,  animation, @keyframe의 차이를 확실하게 정리하고자 한다. (꽤나 헷갈리기..
(CSS) 단위 정리, px, em, rem, vh, vw, % css에는 크기를 지정하는 다양한 단위가 있다.  각각의 단위는 어떤 특징을 가지고 있는지, 또 특정 상황에서 어떤 단위를 사용하면 좋을지 정리하고자 한다.      단위 분류 1. px 먼저 단위를 상대적인지 절대적인지 나누어 생각해 볼 수 있다. px은 절대적인 단위다. 크기가 고정되어 있다는 뜻이다.  주로 정확한 크기나 위치를 나타내야 할 때 사용된다.  단점으로는 고정되어 있으므로, 반응형 웹을 만들기 어렵다는 것이다.  상대적인 단위들은 고정되어 있지 않고, 유동적으로 변화하기에 반응형 웹을 만들기 용이하다.     2. %%는 부모 요소를 기준으로 백분율로 크기를 나타낸다. 만약 부모 높이가 200px이라면, 유저가 높이를  50%로 주면 높이가 100px로 적용된다.    3.  vh, v..
(Javascript) this란 무엇인가? this 사용방법 this는 객체 또는 함수와 같이 사용되는 키워드이다. 객체 내에서 사용되는 this는 호출방식에 따라 가리키는 것이 달라질 수 있다.   1. 함수가 객체의 메서드로 호출되는 경우this는 해당 객체를 나타낸다.const user = { name: 'Alice', hi: function() { console.log(`Hello, my name is ${this.name}`); }};user.hi(); // "Hello, my name is Alice"   2. 생성자(constructor)함수로 호출된 경우this는 새로 생성된 인스턴스를 가리킨다.function User (name, age) { this.name = name; this.age = age; this.hi: functio..
(Javascript) fetch를 이용해서 api 가져오기 , 사용법, 작동 과정 fetch() 함수를 이용하면 서버에서 데이터를 가져오거나 보낼 수 있다. 이 함수를 이용해 무료 api 정보를 받아올 수 있다. 나는 퀴즈 앱을 만들기 위해서 무료 퀴즈 api url을 받아왔다.   Open Trivia DBFree to use, user-contributed trivia questions!opentdb.com   fetch() 사용법fetch() 함수의 기본 문법은 아래와 같다.let promise = fetch(url, [options]); url(필수) : 접근하고 싶은 url 링크 [options] : 선택 매개변수 옵션은 다양하지만 아래 5가지가 가장 많이 사용된다.  또한 옵션을 적지 않으면 자동으로 Get 메서드로 처리되어 url로부터 정보를 받아오게 된다.  method..
(Javascript) promise, async&await의 이해와 활용 비동기란?자바스크립트는 위에서 아래부터 순차적으로 코드를 실행한다. 동기적(synchronus)으로 동작한다는 뜻이다. 그런데 서버에서 api 정보를 받아올 때 시간이 걸릴 수 있다.  이때 동기적으로 코드를 짜면 정보를 받아올 때까지 다음 코드가 작동하지 않기에 문제가 생길 수 있다. 이때는 코드를 비동기적(asynchronus)으로 처리하면 좋다. 비동기적으로 코드를 처리하는 데에는 여러 방법이 있다.  콜백함수를 사용해 처리할 수도 있으나 가독성이 떨어지기에 프로미스(promise)를 활용한다.  프로미스(promise)란? 프로미스(Promise)는 비동기 작업을 처리하기 위한 객체이다. new Promise() 생성자를 사용해 새 프로미스를 생성할 수 있다.  프로미스는 다음 세 가지 상태를 갖..
(CSS) position : absolute로 요소 정중앙에 위치 시키기 특정 요소를 absolute로 위치시킬 때, 부모 요소 기준으로 정중앙에 위치시키고 싶을 때가 있다.  이때 top과 left를 각각 50%를 주면 정중앙에 올 것이라고 생각하기 쉽다.  하지만 실제 적용시켜 보면 정 중앙에 오지 않는다.   See the Pen position : absolute로 요소 정중앙에 위치 시키기(before) by 김다영 (@xnpzlttb-the-solid) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스   이는 top과 left 등이 요소 왼쪽 상단 모서리를 기준으로 하기 때문이다.  따라서 위처럼  top과 left를 각각 50%를 주면 왼쪽 상단 모서리가 정중앙에 위치하..
(CSS) margin이 제대로 적용되지 않을 때, margin collapsing이란? margin collapsing이란? 가끔 margin을 설정하다 보면 위쪽과 아래쪽의 margin이 제대로 적용되지 않는 경우가 있다. 이는 "margin collapsing" 때문이다. 블록 요소의 상하단 margin이 서로 인접할 때, 두 마진 중 큰 값만큼만 표시되는 현상이다. 즉, 두 마진이 합쳐져 하나의 마진으로 표시되는 것이다. margin collapsing 해결 방법 이를 해결하기 위해서는 부모요소에 overflow : auto; 또는 overflow : hidden;을 적용하면 해결된다. 해당 코드를 적용하면 부모에 BFC가 형성되어 margin collapsing 현상이 방지되고, 겹쳐졌던 margin이 제대로 나오게 된다. div.container { overflow: hidden;..
(CSS) transition 사용 방법 정리 css를 적용하다 보면 특정 요소가 변화하게 만들어야 할 때가 있다. 근데 그냥 변화시키면 상당히 부자연스럽다. 한 상태에서 다른 상태로 바로 한 번에 변화해 버리기 때문이다. 이때 변화를 자연스럽게 주고 싶다면 transition을 사용하면 된다. transition 사용 위치 transition은 변화 하기전 상태에 적용해야 한다. 즉 변화 조건(state)가 없는 곳에 적용해야 한다는 뜻이다. 예를 들어 div가 하나 있고, 마우스를 올렸을 때(div:hover) div를 변화시키고 싶다면, div:hover가 아닌 div에 transition을 작성해야 한다는 뜻이다. transition 사용 방법 transition은 아래와 같이 사용한다. 속성 작성 순서는 큰 상관이 없지만 duration보다..

티스토리툴바