까막눈코딩

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

정말 간단한 기능이고 최종 완성 단계도 아니지만, 처음으로 혼자서 생각하고 만들어낸 결과물이라 몹시 뿌듯하다. 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

1. 배경 일본인과 관계를 만들어 가면서 만 나이를 사용하다 보니, 종종 내가 몇 살인지 헷갈릴 때가 있다. 그렇지 않아도 나이가 들수록 내가 몇 살인지 의식하지 않는 경향이 커졌는데, 그나마도 만 나이와 한국 나이를 바꿔 가면서 이야기하다 보니 헷갈리게 되는 듯하다. 구조도 간단하여 초보자 레벨에서 시도해 보기 좋다고 여겨 도전해 보려고 한다. 2. 구조 아직 배운 것이 HTML, CSS, Javascript, python 정도이고 깊이가 얕다. 현재 가진 지식으로 웹 앱을 만들 것이다. 이런 간단한 페이지에서 생년월일 값을 입력받아서 이런 간단한 결과 창을 띄우고, 이전 화면으로 돌아갈 수 있도록 만들고자 한다. 만 나이를 계산하는 정말 간단한 로직이다. 한국 나이는 생일과 관계없이 '현재 year ..

Experience/[Javascript] Age Calculator 2021. 4. 8. 10:57