Web
[JavaScript] 🖼️ JavaScript로 Flexbox를 이용한 이미지 갤러리 만들기
[JavaScript] 🖼️ JavaScript로 Flexbox를 이용한 이미지 갤러리 만들기
2019.02.05🖼️ Day5 - JavaScript로 Flexbox를 이용한 이미지 갤러리 만들기JavaScript 30의 다섯 번째 프로젝트는 Flexbox를 이용한 이미지 갤러리 만들기 프로젝트이다. 😊 HTML 코드123456789101112131415161718192021222324252627282930313233343536373839404142434445 Flex Panels 💪 Hey CAT Dance Give CAT Receive Experience CAT Today Give CAT You can Life CAT Motion Colored by Color Scriptercs🎨 CSS 코드1234567891011121314151617181920212223242526272829303132333435363738..
[JavaScript] 💪 Array관련 Method 완전정복 1탄
[JavaScript] 💪 Array관련 Method 완전정복 1탄
2019.02.05💪 Day4 - Array관련 Method 완전정복JavaScript 30의 네 번째 프로젝트는 프로젝트는 아니고, 잠시 공부시간이다. Array와 관련된 Method에는 무엇이 있는 지, 예제를 통하여 확인해보자 😃 HTML & JavaScript 코드 콘솔에 결과 값들이 출력 되어있다. 💁 💪 Array 관련 Method 1. filter()123const arr = [1,2,3,4,5]arr.filter( el => el el * 2 ) // [2,4,6]arr // [1,2,3] 원본이 바뀌지 않음csmap은 모든 요소를 특정 조작을 가한 데이터로 수정하여 새로운 배열을 만들어줍니다. 3. sort()123const arr = [3,20,12,1,4]arr.sort() // [1, 12, 20, ..
[JavaScript] 🎨 JavaScript로 CSS 업데이트하기
[JavaScript] 🎨 JavaScript로 CSS 업데이트하기
2019.02.04🎨 Day3 - JavaScript로 CSS 업데이트하기JavaScript 30의 세 번째 프로젝트는 JavaScript를 통해 이미지의 CSS를 업데이트하는 프로젝트이다. 😃 HTML 코드123456789101112131415161718192021222324252627282930313233343536373839404142 clock UPDATE CSS VARIABLES WITH JS Spacing: Blur: Base Color: Back to List Javascript30 Day3 Colored by Color Scriptercs😃 CSS 코드12345678910111213141516171819202122232425262728293031323334:root { --base: #ffc600; --sp..
디자인하면서 어떤 색 고를 지 고민한 적 있잖아?
디자인하면서 어떤 색 고를 지 고민한 적 있잖아?
2019.02.03🤯 CSS 색상 선정을 도와줄 사이트 모음 들어가기 전웹사이트 제작에서 가장 고민되는 순간 중하나가 CSS(Cascading Style Sheets, 연속적 스타일 시트)의 색상을 선정하는 순간일 것이다. 색상에 따라 웹사이트가 풍기는 이미지가 바뀔 수도 있기 때문에 다른 요소들이 잘 굴러간다고해도, 한 순간 거부감이 들 수 있는 부분이기 때문이다. 유명 브랜드들도 본인들만의 로고 색상을 통해 브랜드의 이미지를 표현하고 있다. 가산혼합가산 혼합이란 다른 색을 섞었을 때 더 밝은 색이 되는 것을 의미합니다. 예를 들어 빨강과 초록을 섞었을 때, 두 개의 컬러보다 밝은 노랑이 됩니다. 이런 방식은 주로 빛을 사용하여 컬러를 표현하는 장치, 텔레비전이나 스마트폰같은 디스플레이에 사용됩니다. 결론적으로 이것은 ..
[JavaScript] ⌚ JavaScript로 시계만들기
[JavaScript] ⌚ JavaScript로 시계만들기
2019.02.03⌚ Day 2 - JavaScript로 시계만들기JavaScript 30의 두 번째 프로젝트는 '시계 만들기'이다. JavaScript도 사용되지만 CSS 테크닉도 필요한 좋은 프로젝트이다. 😃 HTML 코드1234567891011121314151617181920212223242526272829 clock CLOCK Back to List Javascript30 Day2 Colored by Color Scriptercs 시침, 분침, 초침과 시계 테두리, 시계의 중앙부를 만들었다.😃 CSS코드123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646..
[JavaScript] 🎹 JavaScript로 악기 만들기
[JavaScript] 🎹 JavaScript로 악기 만들기
2019.02.02🎹 Day 1 - JavaScript로 악기 만들기 JavaScript 30의 첫 번째 프로젝트는 '드럼 킷 만들기'이다. 특정 키보드 버튼을 누르면 해당하는 드럼 소리가 나와서 연주를 할 수 있는 프로젝트이다. 😃 HTML 코드 SYNTH PIANO A S D F G H J K L ; ' Back to List Javascript30 Day1 😃 JavaScirpt 코드 playSound = e => { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`li[data-key="${e.keyCode}"]`); if (audio) { audio..
📅 30일간 30개의 JavaScript 프로젝트 도전기 / JavaScript 30
📅 30일간 30개의 JavaScript 프로젝트 도전기 / JavaScript 30
2019.02.02프로그래밍 언어를 가장 빨리 익히는 방법에 여러 방법론이 있지만, 여러가지를 만들어보면서 해당 언어를 체득하는 것이 가장 좋다고 알려져있다. 30일간 Vanilla JS( 프레임워크, 컴파일러, 라이브러리, 보일러 플레이트등이 없는 순수한 자바스크립트 )로 30개의 결과물을 만드는 JAVASCRIPT 30의 목적도 이와 같다.There is no formation without repetition반복 없이는 결과물도 없다JavaScript 30의 이용 방법은 매우 간단하다. 이메일을 이용해 가입하면, Wes Bos의 JavaScript 30 강의를 무료로 들을 수 있다. 유튜브 영상도 올라와있으니, 가입이 귀찮다면 유튜브를 통해 강의를 들어도 된다. 자 이제 매일 JavaScript 프로젝트를 만들며 J..
[⚛React] 🐶 이모지를 이용한 빙고게임 만들기
[⚛React] 🐶 이모지를 이용한 빙고게임 만들기
2019.01.31🐶 리액트(React)를 이용해 이모지 빙고게임 만들기 🐶 노마드 코더 슬랙을 둘러보던 중, 빙고 게임을 과제로 만드시던 분이 빙고 검증에 대한 구현을 질문하셨다. 처음에는 Codesandbox에 돌아가는 코드를 만들어서 보여드리면 어떨까 생각하다가, "내 사이드 프로젝트로 좋을 것 같은데?"라는 생각에 바로 당일 빙고게임 사이드 프로젝트 작업을 시작했다. 컴포턴트(Component)화 시작하기에 앞서 생각났던 프로젝트가 바로 리액트 공식 문서에서 제공하는 튜토리얼인 틱택토 게임이었다. Board와 Squrare로 컴포넌트화 되어있던게 빙고에 적용하기 딱이였고, 똑같이 Board와 Square라는 컴포넌트를 만들어서 진행했다. 함수구현 빙고에서 구현해야할 함수는 다음과 같다. 1. 특정 칸 클릭시 해당 ..
npx create-react-app ... 그래서 npx가 뭐길래?
npx create-react-app ... 그래서 npx가 뭐길래?
2018.12.26🤔 npx란 무엇인가? 우리가 리액트를 처음 시작할 때, 프로젝트를 만드는 패키지인 create-react-app이 있습니다. npx create-react-app my-app 여기서는 왜 npm이 아닌 npx를 사용하고 npx란 무엇일까요? 👨👦npm의 아들 npx는 자바스크립트 패키지 관리 모듈인 npm(Node Package Module)의 npm@5.2.0 버전부터 새로 추가된 도구입니다. 따라서 npm@5.2.0 이상 버전만 깔려 있다면 npx 커맨드를 사용 가능합니다. npx는 npm 레지스트리의 패키지 사용 경험을 파악하기 위한 도구입니다 - npm은 레지스트리에서 호스팅되는 종속성을 매우 쉽게 설치하고 관리할 수 있으며, npx는 레지스트리에서 호스팅되는 CLI 도구 및 기타 실행 파일을..
[⚛React] React 기본 개념
[⚛React] React 기본 개념
2018.12.26🤔 리액트란? 리액트(React, React.js 또는 ReactJS)는 선언적, 효율적으로 유연하게 유저 인터페이스를 만들기 위한 자바스크립트 라이브러리의 하나로, 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수되며 지금도 계속 업데이트 중인 프로젝트이다. 리액트의 개념은 다음과 같은 함수로 표현 가능하다. f(data) = View 페이지에 동적인 상호작용을 넣고 싶을 때 우리는 자바스크립트를 이용하게 된다. 하지만 웹 개발 시 DOM 관리 및 상태값 관리 작업은 프로젝트가 커질 수록 논리가 복잡해질 수록 귀찮고 머리 아파진다. 이러한 것들을 최소화하고 오직 기능 개발과 사용자 인터페이스(UI) 를 구현하는 것에 집중하기 위해 React 같은 라이브러리가 탄생되었다. 리액트의 특징 리액트는 ..
[CSS] em과 rem의 공통점, 차이점
[CSS] em과 rem의 공통점, 차이점
2018.12.26https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984 해당 글을 대부분 참고하여 간단하게 정리한 내용입니다. 더 자세한 내용을 원하신다면 해당 글을 참고해주세요. § html 태그의 font-size css 값에 따라 달라지는 px과 rem 그리고 em 유닛을 확인할 수 있는 예시 § em과 rem의 공통점 불변적인 px와는 달리 길이가 유연한 가변단위로 설정된 폰트 크기 혹은 브라우저에 의해 계산된 픽셀값으로 변환된다. 요소의 크기가 절대 변하면 안 되는 상황에서는 사용하지 말아야 한다. em과 rem의 차이점 구분 em rem 변환에 영향을 주는 값 스타일을 지정한 요소의 폰트 크기..
[CSS] 🐸 게임으로 Flex 박스 CSS 익혀보자! Flexbox Froggy
[CSS] 🐸 게임으로 Flex 박스 CSS 익혀보자! Flexbox Froggy
2018.12.24Flexbox Froggy Flexible 박스 레이아웃 모듈은 유연한 반응형 레이아웃 구조를 만들 수 있는 CSS의 매우 강력한 효과 중 하나이다. justify-content, align-items... 이런 저런 것들 어떻게 시작해야 할 지 모르겠다면 게임을 통해 재미있게 배울 수 있는 사이트가 있다. 바로 Flexbox Froggy이다. 이 게임의 목표는 단 하나 개구리를 수련 위에 올려놓는 것이다. 그리고 우리는 그 방법으로 CSS를 이용하게 된다. 위의 사진 스테이지를 예시로 들어보자 개구리는 display: flex 상태이고, 오른쪽 끝으로 가야 수련 위에 올라간다. 따라서 justify-content: flex-end로 오른쪽 끝으로 보내서 문제를 해결하면 된다. 약간 더 심화된 스테이지를..