개발기록

Ajax Type Ahead 인풋박스에 도시이름을 검색하면 아래 리스트에 검색관련 도시 이름이 나온다. 1. fetch().then 을 통해 api 호출하는 법 알기 2. blob.json 으로 데이터 다루기 3.RegExp() 정규식 생성자 만들어 문자열 확인하기 4..map()메서드를 이용하여 배열 묶기 코드 Filter for a city or a state 알게 된 문법 fetch().then Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능합니다. 또한 fetch() (en-US) 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있습니다.(MDN 참조) ->api를 호출하는 메서드 blob or blo..

Flex Panels Image Gallery 다섯개의 배너를 하나씩 클릭하면 커지고 다시 클릭시 작아진다. 1. flex를 활용하여 이미지및 글자 배치 2. transform과 transition을 이용한 애니메이션 효과 3. .includes()메서드의 활용 코드 Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion 알게된 문법 css flex:0 0 auto /*none*/ display:flex는 알았으나, flex:1; 로 크기를 설정하는 건 처음 알았다. flex:1 이렇게 설정시 모든 요소가 동일하게 커진다. JAVASCRIPT .includes() 배열이 특정 요소를 포함하고 있는지 확인하는..

Playing with CSS Variables and JS 설명 padding크기와 blur크기,색을 변경하면 아래 사진의 스타일이 변경된다. 1.input의 type과 dataset 설정 2. css 가상선택자를 사용하여 style설정 3.setProperty 메소드를 이용하여 사진의 스타일 변경 코드 Update CSS Variables with JS Spacing: Blur: Base Color 알게 된 문법 HTML input[type='range'] : 다이얼 컨트롤 input[type='color'] : 색상 선택기 input의 타입에 따라 유형이 변경되는게 많다. input[data-sizing='px'] : data-[자유롭게 작성가능한 작성요소] script에서 dataset요소를 사용..

javascript css+js Clock 설명 css에서 transform 과 javascript setInterval로 아날로그 시계를 만들면된다. 1.transform 으로 중심을 고정시키고 시,분,초만 각도를 조절할 수 있게 하기 2.setInterval로 시계 자동으로 움직이게 하기 3. new Date를 이용해 현재 시간을 불러와, 각도에 맞춰 계산하여 transform에 넣기 코드 음 근데 왜 강의 코드랑 github에 올라가 있는 코드가 좀 많이 다른지 잘 모르겠다 특히 계산부분 ;;;;; 알게 된 문법 CSS transform-origin transform 속성과 함께 사용되며 회전 축(중심)을 지정한다. 속성 값 left 0% center 50% right 100% top 0% bott..

자바스크립트 30을 하며 배웠던 것을 적어보고자 한다. 일단 공부는 https://javascript30.com/ 여기서 했고 로그인 하고 강의를 들으면 되는데 영어다. 영어..를 안듣고 딱히 들을 필요 없을 것 같아서 강의내용을 이해하면서 보기 시작했다. 1강이었던 javascript Drum Kit에서 배운것을 작성해보겠다. javascript Drum Kit 설명 키보드에 있는 순서대로 a s d f g h j k l 을 입력하면 각 코드에 맞는 상자에 불이 켜지고 코드에 맞는 드럼 소리가 들린다. 코드는 https://keycode.info/ 간편하게 여기서 가져올 수 있다고 설명해준다. 1. 키보드를 입력하면 오디오가 나와야하고, 각 div 값에 style값이 추가 되어야한다. 2. 한번 입력하..