Frontend (46) 썸네일형 리스트형 CSS: Transition 트랜지션은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것이다. 이벤트에 맞추어 즉시 일어나는 것이 아니라 서서히 변화가 일어나기 때문에 더욱 자연스러워 보이는 효과가 있다. transition: all 2s; 위 코드에 대해서 설명을 해보자면 첫 번째 값을 transition을 적용할 이벤트의 범위를 의미한다. all은 모든 프로퍼티 변화에 트렌지션을 적용하겠다는 의미가 된다. 두 번째 값인 2s은 2초의 지연 시간을 준다는 의미를 지니고 있다. transition이 지정된 범위 역시 중요하다. div:hover와 같이 특정 이벤트 안에 지정한 경우에는 해당 이벤트가 발생할 때에만 트렌지션이 적용되고 hover-off가 되는 경우에는 트렌지션이 적용되지 않.. Project03: Naver API 응용 이번 프로젝트의 주제는 naver의 open api를 이용한 싱글페이지 웹 애플리케이션을 만드는 것이였다. 이때까지 작성했던 단순 html css js로는 해당 작업을 수행할 수 없었고 네이버에서 발급해준 코드를 담은 요청을 하여야만 응답을 받을 수 있었다. 네이버 Open API에 대한 사용은 다음 링크에서 더 자세히 적어놨다. seyoung8239.tistory.com/28 오랜만에 node.js의 express을 사용해보았다. 코딩에 앞서 Udemy 강의의 Section 24 ~ 27에 해당하는 강의를 부분적으로 들으며 짧게 복습했으며, Section 27에서 작성한 코드와 네이버 Open API에서 제공한 레퍼런스와 구현예제 코드를 참고했다. developers.naver.com/docs/papa.. Naver API 사용하기 이번 프로젝트에서 네이버 api를 응용한 페이지를 만들어 보기로 했다. 네이버 오픈 API목록은 다음과 같다. 이번 프로젝트에서 내가 사용할 API는 파파고 번역 api로 번역 인공신경망 기반의 기계 번역을 처리해준다고 한다. 단순 스태틱한 웹으로는 해당 api를 사용할 수 없다. 따라서 서버요청을 통해서 해당 작업을 수행해야 하는데, 본인은 node.js의 express를 활용했다. 서버요청시 네이버에서 발급해준 Client ID와 Client Secret코드를 입력해야만 code 200의 response를 받을 수 있는데, 위 코드는 상단 navigation bar의 Application 안의 애플리케이션 등록을 하면 발급된다. 그리고 서버요칭 시 위 코드를 req의 option란에 담아서 보내면 된다. Flexbox Display Property display의 프로퍼티는 레이아웃 정의에 사용되는 아주 중요한 프로퍼티이다. 해당 프로퍼티에 속하는 키워드는 다음과 같다. flex 프로퍼티 키워드 설명 block -새로운 라인에서 시작한다 -width: 100%, height: auto (default) -width, height, margin, padding 프로퍼티 지정이 가능하다. inline -다른 요소들과 같은 행에 위치한다 -width, height, margin등의 프로퍼티를 저정할 수 없다. -content의 너비만큼 가로폭을 차지한다. line-block inline 요소와 같이 한 줄에 표현되면서 width, height, margin과 같은 프로퍼티를 설정할 수 있다. display 프로퍼티는 상속되.. 200824 Promise Object https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises 동시다발적으로 일어나는 작업 중에서 성공 또는 실패를 나타낸다. 대부분의 경우 우리는 promise객체를 사용하는 사용자 입장이 된다. call back? 동시다발적인 함수에 대해 콜을 할 때 이에 응해 돌아도는 값? 예전 방식의 함수에서는 해당함수의 인자에 성공 또는 실패에 대한 callback function이 삽입이 되었지만, 최근 방식의 함수에서는 promise를 반환받기 때문에 .then() method를 통해 반환 받을 수 있다. callback들은 반드시 JS코드가 다 수행된 뒤 리턴된다. callback들은 then()메서드를 .. 200816 DOM project 1; material: Udemy 1. DOM(Document Object Model) ;interface between js and html css browser turns every HTML tag into a JS object that we manipulate. It is controled under tree data structure. top node of DOM is documnt. in the console of browser, you can search like document.URL or document.link, It will return current page's URL and appended link (or document.body) 2. Selector Methods .. 이전 1 ··· 3 4 5 6 다음
