까막눈코딩

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

해당 디렉토리에 접근하여 'git init .'을 입력함으로써, 해당 디렉토리는 깃의 버전 관리를 받게 된다. 해당 디렉토리는 Working tree라고 할 수 있는데, 아직 깃의 버전 관리 받지 않는 Untracked files이거나, 버전 관리를 받고 있으나 수정 중인 파일들이다. 이러한 파일들은 'git add 파일명' 명령을 통해 Staging Area에 있는 상태로 변경할 수 있다. Staging Area는 새로운 버전으로 업데이트 될 파일들을 모아 놓은 곳이라고 할 수 있다. 'git commit -m 버전명' 명령을 통해, Staging Area에 있는 파일들이 새로운 버전으로서 Repository에 등록된다. 'git status' 명령어를 통해 Working tree와 Staging Ar..

Knowledge/Git 2021. 4. 13. 14:57

깃을 배우고 사용하기 위해 기본적인 포직스 명령어들을 기록하고자 한다. 윈도우 환경에서는 깃을 설치하면 딸려서 오는 git bash라는 에뮬레이터를 통해 POSIX 환경에서 운영체제에 명령어를 전달할 수 있다. pwd: 현재 디렉토리 확인 ls: 현재 디렉토리의 파일 목록 확인 ls -l: 현재 디렉토리의 파일 목록 상세 확인 ls -a: 현재 디렉토리의 파일 목록과 숨김 파일 확인 mkdir 디렉토리명: 디렉토리 생성 mv 디렉토리명 변경할디렉토리명: 디렉토리명 변경 rm 디렉토리명 -r: 디렉토리 삭제 cd 경로: 해당 경로로 이동 cd ..: 부모 디렉토리로 이동 cd /: 루트 경로로 이동

Knowledge/Git 2021. 4. 13. 13:51

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

정말 간단한 기능이고 최종 완성 단계도 아니지만, 처음으로 혼자서 생각하고 만들어낸 결과물이라 몹시 뿌듯하다. 1. HTML 생년월일을 입력해 주세요 년 월 일 2. CSS :root { /* color */ --color-black: #2c3e50; --color-white: #ecf0f1; /* size */ --size-20px: 20px; --size-5px: 5px; } body { background-color: var(--color-black); color: var(--color-white); text-align: center; } .comment { margin-top: calc(var(--size-20px)*5); font-size: var(--size-20px); } .input { d..

Experience/[Javascript] Age Calculator 2021. 4. 9. 14:27