nana_log

좋아하는 걸 좋아하는 나나 🤟

Blog/JavaScript

Document 🔥Javascript 30 - Day 06🔥이번에는 Javascript30의 Day 06에 해당하는 'Ajax Type Ahead'를 정리해봅니다@@@@ json 내용 가져오기 우선은 json 내용을 가져와 봅시다. const endpoint = "https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json"; const cities = []; fetch(endpoint) .then(blob => blob.json()) .then(data => cities.push(...data)); 이게 뭔 소린가 싶죠..... 하나하나 살펴보면 ..

2019. 2. 6.

Blog/Design

2019.02.02 다 끝나고 든 생각 : 나 뭐한 거지...? 어쩌다보니 닛뽄스타일의 혼종이 탄생☆ 벤치마킹 https://www.pinterest.co.kr/ppphlox/1d1d/day2/

2019. 2. 2.

Blog/Design

2019.02.01 메가 타이포!!!라고 멋대로 작명해보앗따ㅇ>-< 타이틀이 큼직큼직하니 참 좋다. 강약조절에 힘 쓰고, 채도에도 신경써야지! 앵무새 몰이를 도와준 vid님에게 감사인사를 :3 벤치마킹: (1) https://dribbble.com/shots/4214289-Fish-UI (2) https://heydesign.com/2017/04/web-and-mobile-design-inspiration-by-giga-tamarashvili/ (3) https://dribbble.com/shots/4945589-Wild-Life-Landing-Page/

2019. 2. 2.

Blog/etc.

이번에는 생활코딩 내 PHP 강의를 기반으로 한 실험(?!)입니다. PHP를 정말 정말 쬐애끔 맛만 보는 정도이지만, JS가 아닌 다른 언어를 알게 됐다는 데 의의를 두겠습니다ㅋㅋㅋㅋ 생활코딩에게 무한한 감사를 드리며, 실험일지 스타트! PHP 설치 (Windows) 윈도우는 Bitnami가 제공하는 WAMP라는 걸 사용해 PHP를 사용합니다. WAMP는 아마 Window, Apach, MySql, Php의 약자로, 여기에 접속해서 설치합니다. PHP는 서버 사이드 언어라 웹 서버 바탕 위에서 돌아가기 때문에 Apache 웹 서버를 돌릴 필요가 있습니다. WAMP Stack Manager Tool을 이용해 서버를 껐다 키는 등 관리를 할 수 있는데, PHP를 재구동하려면 Apache(아파치) 웹 서버를 ..

2019. 1. 24.

Blog/CSS

1. Flexbox를 지원하는 브라우저Flexbox를 쓰면 훨씬(!) 더 쉽게(!!) 레이아웃을 스타일링할 수 있습니다. 기존에는 일반적으로 float 속성을 이용했는데, 이건 clearfix라는 핵이 필요했죠. 그밖에 display:table-cell 등, 원래 이러라고 만든 게 아닐텐데... 하는 속성을 써야 했습니다. 이제 Flexbox를 쓰면 가운데 정렬이고 뭐고 손쉽게 가능합니다. 다만 국내에서는 Flexbox가 그렇게 보편적이지 못한데, 그 이유는 아마 IE에 대한 지원이 영 좋지 못하기 때문인 것 같습니다. 우선 Flexbox는 IE 10부터 지원합니다. 단, prefix로 -ms-가 필요합니다. IE 10과 11에서 몇 가지 버그가 있다고 알려져 있고, 이때문에 사용하기 영 꺼려지는 것도 ..

2019. 1. 7.

Blog/JavaScript

🔥Javascript 30 - Day 04🔥 Day 04는 배열 관련 메서드를 갖고 노는 시간이 되겠습니당 :->기본 html, js 내용은 여기에서 확인 가능합니다. 1. filter() - 특정 조건을 만족하는 새 배열 만들기 const people = [ { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },..

2019. 1. 7.

Blog/JavaScript

🔥Javascript 30 - Day 03🔥 1. 마크업/스타일링 이번에는 CSS를 JS로 제어해 봅시다! 우선 적당히 마크업하고 적당히 스타일링 합니다(참 쉽죠?). 자세한 html, css코드는 Codepen 결과물 에 있어요! > 제어 가능한 옵션은 '폰트 사이즈/메인 컬러/이미지 블러처리' 요렇게 3가지입니다. Update CSS Variables With JS Option Font size Main Color Background Blur {텍스트} {텍스트} {텍스트} 2. :root 속성 작성하기 그 다음, 아래와 같이 CSS를 추가 작성해 줍니다. :root { /*코드 작성*/ } 잠깐!!! 도대체 :root가 뭐지?! 싶은 사람(바로 접니다)을 위해 짚고 넘어가죠! :root 선택자는 문..

2019. 1. 7.