takeU

개발 좋은 글 모음 보시는 분들에게 도움이 되었으면 좋겠습니다. 프로그래밍 Developer-roadmap - kamranahmedse 님 [입문]초보 개발자로의 입문 / 개발이라는 세계에 첫 발 내딛기 - _Jbee 님 [번역]당신의 코딩 학습 방식을 바꿀 사진 - Captain Pangyo 님 [번역]좋은 코딩을 위한 13가지 간단한 규칙 - mingrammer 님 훌륭한 프로그래머와 코드 품질 - 이즈군 님 프로그래밍 재미있게 공부하기 - 조인석 님 소프트웨어 개발자가 되기까지 - 조인석 님 비 개발자를 위한 웹 개발 기초 - Gihyo Joshua Jang 님 [웹개발자 기준]비전공자 신입으로서 전공자한테 안밀리고 살아남는법 - OKKY 은하수 님 [번역]성공적인 웹 개발자가 되기 위한 21단계 ..

정보 http://www.venturesquare.net/ - 스타트업 전문 미디어 서비스 플랫폼, 각종 스타트업 관련정보, 기술 등을 얻을 수 있음 http://platum.kr/ - 세계의 스타트업 관련 기사, 정보 http://www.k-startup.go.kr/ - 스타트업 공고, 소식, 가이드 모임, 채용 http://onoffmix.com/ - 세미나, 포럼, 해커톤등 각종 행사 정보 및 참가신청 http://dcamp.kr/ - 스타트업 관련 행사, 매칭, 이벤트 https://www.rocketpunch.com/ - 스타트업 전문 채용정보, 구인구직 사이트 https://www.wanted.co.kr/ - 스타트업 전문 채용정보, 구인구직 사이트 http://www.elancer.co.kr..

Flex Panel Gallery flex-box를 이용한 레이아웃 및 효과를 공부 기본 코드 Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion 목표 CSS 속성인 display: flex를 사용해 레이아웃을 구성해보고 자바스크립트 효과를 익힘 과정 display: flex 적용 각 패널의 크기, 내용의 위치 조정 패널 안의 구성요소 정렬 패널의 효과 적용 자바스크립트 효과 적용 코드 분석 1. display: flex 적용 .panels { display: flex; } 위 코드를 적용 시키면 각 패널의 레이아웃이 다음과 같이 바뀐다 2. 각 패널의 크기, 내용의 위치 조정 .panel { displ..

Array Cardio Day 1 제목처럼 자바스크립트 배열과 배열제어에 대해서 공부 기본코드 Psst: have a look at the JavaScript Console 💁 Psst: have a look at the JavaScript Console 💁 목표 자바스크립트의 배열제어 방법을 코드로 구현해보며 익힘 과정 filter() map() sort() reduce() 코드 분석 1. filter // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's const fifteen = inventors.filter(inventor => (inventor.year >= 1500 &..

3. CSS Variables CSS 변수 활용 기본코드 Update CSS Variables with JS Spacing: Blur: Base Color 목표 사진에서 두가지의 레인지 조절 기능과 colorpicker 넣기 과정 1. CSS 변수를 만든다(base색상, 기본 여백(spacing), 기본 흐림정도(`blur)) :root { --base: #ffc600; --spacing: 10px; --blur: 10px } :root - HTML 요소중 가장 상위 요소에 적용한다는 뜻 --base - base라는 CSS 변수를 생성 위와같이 :root에 변수를 선언하는 것은 전역변수를 생성한다는 뜻 2. CSS변수를 통한 이미지, 텍스트 효과 지정 img { padding: var(--spacing)..

CSS + JS Clock 자바스크립트 + CSS로 아날로그 시계를 구현할 수 있어서 신기했다 자바스크립트공부를 하려고 시작했는데 CSS도 많이 알게 되는것 같음. 기본 코드 목표 현재 시간을 아날로그 시계로 구현 과정 1. 시계바늘 중심위치 잡기, 효과 적용 .hand { transform-origin: 100%; transform: rotate(90deg); transition: all 0.05s; transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } transform - 변형 효과를 줄 때 기준 설정 hand 클래스에 위의 코드를 추가해 기준축을 100% 즉 가장 오른쪽으로 잡고, 방향을 90도만큼 돌려서 시침, 분침, 초침이 12시 방향에..

JavaScript Drum Kit 아래 첨부한 사진처럼 해당하는 키보드를 누르면 화면에 효과와 함께 소리가 나는 드럼 킷을 만드는 것 기본 코드 A clap S hihat D kick F openhat G boom H ride J snare K tom L tink 여기서 div 속성중 data-key 는 어떤 키를 눌러서 실행 시킬수 있는지 설정하는 것이며 http://keycode.info/ 에서 각 키의 키코드를 알 수 있다. 태그는 키보드 입력을 지정할 때 쓰는 코드이다. data-key 속성은 위의 div와 아래 audio를 하나로 묶어주는 속성이라 할 수 있다. 목표 키보드 키 입력시 애니메이션효과와 소리를 출력해 드럼 킷을 만드는 것 과정 1. 해당 키 입력시 효과음 추가하는 함수 생성 co..

JavaScipt30 챌린지 하루에 한 가지 자바스크립트 프로젝트를 하면서 30일간 30개의 프로젝트를 순수 자바스크립트로만 구현해보는 연습 사이트 https://javascript30.com/

JavaScript 정리 짧고 간단하게 나열하는 식으로 작성 JavaScript의 위치 태그 사이에 작성하며, 와 둘다 위치 가능 JavaScript Output Window.alert() 경고창 documnet.write() HTML출력 (테스트용) HTML로드 후 작성시 기존 문서 삭제 innerHTML HTML출력 요소로 작성 console.log() 브라우저 콘솔에 작성 JavaScript 문법(Syntax) 세미콜론(;)으로 구문 구별/ 텍스트는 " 또는 ' 안에 작성 변수는 const나 let으로 선언 ex) const x = 2; 주석은 //(한줄) /* */(여러줄) 로 작성 // 주석 /* 여러줄 */ 대소문자 구별하여 사용 첫 번째 문자는 문자, _, $ 세가지만 가능/ 예약어 사용 불..

알고리즘 문제 풀이시 자주 사용되는 테크닉 알고리즘 문제 해결시 자주 사용되는 테크닉들을 정리 ( 매우 주관적 ) 배열이나 문자열에서 중복을 제거할 때 Set 자료형을 활용해 중복을 제거할 수 있다. // 배열 const arr = [1,3,2,4,3,1,5,6,2,1]; const newArr = [...new Set(arr)]; console.log(newArr); // [1,3,2,4,5,6] 중복이 제거된 배열을 얻을 수 있다. // 문자열 const str = "abcdacbe"; const newStr = [...new Set(str)].join(''); console.log(newStr); // "abcde" 중복이 제거된 문자열을 얻을 수 있다. 배열이나 문자열에서 유니크한 원소 뽑아내기 ..