까막눈코딩

1. 배경 검색어 자동완성 기능을 만들고자 한다. 미국의 주나 도시들 중, 입력하는 내용을 포함하는 주나 도시를 표시하도록 하고, 해당 글자에 색깔을 칠하며, 도시의 인구 수를 오른쪽에 입력할 것이다. 2. HTML Filter for a city or a state 3. CSS html { box-sizing: border-box; background: #ffc600; font-family: 'helvetica neue'; font-size: 20px; font-weight: 200; } *, *:before, *:after { box-sizing: inherit; } input { width: 100%; padding: 20px; } .search-form { max-width: 400px; marg..

Experience/[Javascript] JS 30 2021. 4. 17. 16:05

1. 배경 복수의 사진을 띄우고, 사진을 클릭하면 사진이 확대되면서 위아래에 숨겨진 단어가 드러나도록 하였다. 2. HTML Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion html은 위와 같이 단순하다. 다섯 개의 그림을 담을 부모 div가 하나 있고, 각각 그림 및 단어를 담을 자식 div가 있다. 3. CSS html { box-sizing: border-box; background: #ffc600; font-family: 'helvetica neue'; font-size: 20px; font-weight: 200; } body { margin: 0; } *, *:before, *:after {..

Experience/[Javascript] JS 30 2021. 4. 16. 13:28

1. Array APIs 배열의 API들을 연습하기 위한 문제들이다. 1) Filter the list of inventors for those who were born in the 1500's - 1500년대에 태어난 inventors들을 걸러내기 위해 filter API를 사용했다. filter는 배열의 모든 요소들 중, 괄호 안의 조건을 통과하는 요소만을 모은 배열을 반환한다. inventor의 출생년도(year)가 1500과 1600 사이에 있으면 된다. console.table로 조금 더 보기 쉽게 나타냈다. 2) Give us an array of the inventors first and last names - inventors의 성과 이름을 각각 모으기 위해, map API를 이용했다. m..

Experience/[Javascript] JS 30 2021. 4. 15. 19:57

1. 배경 :root로 CSS의 변수를 선언하고, 자바 스크립트를 통해 이미지의 spacing, blur, base color를 웹페이지에서 업데이트 할 수 있도록 만들어 볼 것이다. 2. HTML Update CSS Variables with JS Spacing: Blur: Base Color 3. CSS body { text-align: center; background: #193549; color: white; font-family: 'helvetica neue', sans-serif; font-weight: 100; font-size: 50px; } .controls { margin-bottom: 50px; } input { width: 100px; } HTML과 CSS는 위와 같이 주어져 있다...

Experience/[Javascript] JS 30 2021. 4. 14. 19:50

1. 배경 역시 클론 코딩 학습의 일환이다. HTML, CSS가 작성된 상태에서 CSS를 수정하고 Javascript를 작성하여 시계가 작동하게 할 것이다. 2. HTML 3. CSS html { background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5); background-size: cover; font-family: 'helvetica neue'; text-align: center; font-size: 10px; } body { margin: 0; font-size: 2rem; display: flex; flex: 1; min-height: 100vh; align-items: center; } .clock { width: 30re..

Experience/[Javascript] JS 30 2021. 4. 12. 23:54

1. 배경 클론 코딩 학습의 일환이다. HTML, CSS가 완성되어 있는 프로젝트에 javascript로 기능을 추가하려고 한다. 추가할 기능은 키보드의 특정 버튼을 누르면 해당 키보드에 부여한 사운드가 출력되고, 일시적으로 해당 버튼의 테두리를 테두리를 노랗게 바꾸는 애니메이션 효과가 나오는 것이다. 2. HTML A clap S hihat D kick F openhat G boom H ride J snare K tom L tink HTML은 위와 같이 입력되어 있다. 코드가 간단하므로 js 파일을 따로 만들지 않고, 하단의 script 태그에 입력하고자 한다. 위 HTML 코드에서 dataset 속성으로 각각 숫자가 주어진 것을 확인할 수 있는데, 이는 자바스크립트의 이벤트 키 코드로, 각각의 키에 ..

Experience/[Javascript] JS 30 2021. 4. 12. 13:06