본문 바로가기

MENU

03. CSS + Clock 3번째 예제에는 input을 통해서 즉각적으로 값을 변경하고 적용하며 CSS에서는 공통적으로 색상을 적용하는 방법에 대해서 나왔다.1234567891011121314:root { --base: #ffc600; --spacing: 10px; --blur: 10px;}img { padding: var(--spacing); background: var(--base); filter: blur(var(--blur));}/*var(--base)이 부분은 :root {--base:#ffc600;}에 설정된 색상값을 모두 적용한다.*/.h1 { color: var(--base);}Colored by Color Scriptercs일단 국내에서 쓰는 CSS랑은 좀 차이가 있어보인다. 내가 에이전시에서 할때는 크로스브라우징.. 더보기
02.Javascript + css Clock 이번에는 자바스크립트와 CSS스타일을 이용해서 간단하게 시계를 만들어 보려고 한다. 12345678 cs일단 html의 구조는 위와 같다.시,분,초를 각각 나눠서 html div 태그로 만들어 두고 중심을 맞춰야하기 때문에 'hand'라는 클라스를 공통적으로 적용한다.12345678910111213.hand { width:50%; height:6px; background:black; position: absolute; top:50%; transform-origin: 50%; transform:rotate(90deg); transition: all 0.5s; transition-timing-function:cubic-bezier(0.1, 2,7, 0.58 ,1);}/*시,분,초의 중심을 맞추기위해서는 tr.. 더보기
01.Drum Kit Javascript30 Javascript30 영상을 보고 개인적으로 정리 하는 글입니다.제 이해가 틀린 부분도 있을 수 있으니 틀린 부분이 있다면 댓글로 적어주시면 감사하겠습니다.자바스크립트30은 총 30개의 예제를 따라해보면서 순수 자바스크립트만 사용해서 이벤트를 작동시킨다.요즘 React,Vue.js 등 프레임워크가 많아지고 제이쿼리로 사용이 편해지면서 접할 기회가 없어져가는데 가장 중요한기본기를 다질 수 있는 예제인거 같다. 앞으로 예제를 하나씩 따라해보면서 내가 몰랐던것에 대해서도 배워보고응용해서 다른것도 만들어보는 시간을 가지려고한다. 1 - Javascript Drum Kit Keycode.info - 컴퓨터에 입력되는 키의 event.which값을 쉽게 확인할 수 있다.12345678910.. 더보기
웹팩의 기본 개념과 주요 4가지 웹팩 자바스크립트 코드가 많아짐에 따라 관리의 한계, 코드 스코프 침범, 변수 충돌 위험성 모듈을 IIFE스타일로 변경해주는 과정, 하나의 파일로 묶음(bundled)로 비용감소 웹팩의 장점 다른 module bundle에 비해 perfomance가 우수 Code Split:chunk(코드 혹은 모듈을 묶는 하나의 단위) 단위로 의존성 트리를 동기적, 비동기적으로 분활 Loader가 존재하여 다른 리소스를 순수 Javascript로 변환하고 모든 리소스에 대한 모듈을 구성한다. babel을 사용하여 ES6와 같이 브라우저에서 지원되지 않는 script code를 변환하여 사용할 수 있다 3rd-party library에 대해 모듈로 통합하는 기능을 제공 Module bundler의 대부분의 기능을 사용자.. 더보기
GDG 17년 8월26일 - 03 3. Angular 기본 개념 잡기 (한장현) 1)Angular는 AngularJS와 다르다.TS를 도입하면서 프레임워크 이름 변경 정기적인 버전업 철학은 비슷, 개발방법도 비슷 버전 정책은 SemVer 숫자에 겁먹을 필요는 없다. 2)Angular는 종합 프레임 워크다.전체를 아우르는 구조를 제공 경쟁 프레임워크와 가장 큰 차이 뷰, 데이터 풀, 폼, 라우터, Http, 애니메이션(+머티리얼 디자인), 서버 사이드 랜더링, CLI, 테스트 각 모듈의 정합성, 자연스러운 데이터 연결이 보장 MEAN 스택에서 Json객체 사용이 자유로운 것과 비슷한 느낌 3)프론트엔드 SPA를 만든다.페이지 내부에서 라우터로 뷰를 전환 전통적인 HTML 페이지 전환 방식과 다름 해당 주소일 떄 동작하는 컴포넌트를 등록 자.. 더보기
GDG 17년 8월26일 - 02 2. 엔터프라이즈 프로젝트와 리엑트(김훈민, 네이버 스마트에디터) 오늘 할 이야기는? react에 대한 몇가지 생각 정리 "한가지를 잘한다"는, "그것밖에 못한다"의 다른 말-React만 가지고 무얼 만들 수 있을까?-도구들이 흥하는 이유 Create-react-app-공식 CLI도구 Next.js - 서버사이드 렌더링 프레임워크추상화의 함점은 조심! 가져다쓴다? 참여한다!-홍익인간 뜻이 넘쳐나는 인터넷 세계​ 장점과 단점은 동전의 앞과 뒤-완전 귀찮아! 단방향 플로우를 내려주기위함 데이터의 흐름 파악이 힘듬 기술과 개발자 사이의 경계-팀원간의 기술적 이해도의 눈높이 React Way를 이해하되,기술에 기대지는 마세요~ 더보기
GDG 17년 8월26일 - 01 원모먼트 Vue.js - 김우현(kim woohyun) 1.원모먼트 소개 원모먼트 - 온라인 당일 꽃배달 서비스 2.vue.js소개 사용자 인터페이스를 만들기 위한 진보적인 프레임워크장점 단일 컴포넌트 - template + script + style= .vue 낮은 러닝커브 - 하루만에 문서 정독하고 다음날 바로 실무에 적용 한국어 문서 친절한 커뮤니티 사용하기1.직접 에 추가 CDN제공 Npm -npm install vue CLI 3.레거시와의 전쟁​4.오픈소스 만들기과정 webpack 설정하기 Yarn 사용 데모작성 더보기
코딩을 지탱하는 기술 - 4 문법의 탄생 문법이란 스택 머신과 FORTH 구문트리와 LISP 중위 표기법 정리 문법이란? 프로그래밍 언어에는 여러 가지 규칙이 있으며 그 규칙 또한 프로그래밍 언어가 사람을 편리하게 하기 위해 만들어 진것처럼 무언가를 편하게 하기 위해서 만들어졌다.'식'을 표현하는 규칙을 통해 설명하며 언어는 FORTH 와 LISP를 통해서 설명한다.FORTH의 경우 문법이 거의 없으며 LISP는 괄호로 코드 구조를 표현한다.이 두 언어가 가지고 있는 기능은 현재의 프로그래밍 언어에서도 중요한 역활을 한다. 연산자 우선순위 1 + 2 * 3 라는 소스코드가 있다면 이것은 9인가 7인가?그건 아마도 '( 1 + 2 ) * 3 와 1 + ( 2 * 3 ) 의 규칙중 어떤것을 적용하였는가?' 에 따라서 다를 것이다.하지만.. 더보기

티스토리툴바