본문 바로가기
반응형

전체 글

 (522)
색 디자인에서 색은 너무 중요한 요소이죠. 색에 대한 기본이론과 활용가능한 툴들을 알아볼까요? 색의 이론 색의 이론이란 색과 색의 조합에 대해 사람이 느끼는 감정에 관한 이론으로 이를 설명하기 위해 원색인 빨강, 파랑, 노랑과 이의 조합으로 만들어진 주황, 보라, 초록을 담은 동그란 판을 활용합니다 (뉴턴이 개발했다고 하네요). 참고로, 원색은 다른 색의 조합으로 만들 수 없습니다. 용어들 먼저, 색의 이론과 관계된 용어들을 먼저 볼까요 ▶ 색조 (Hue) 기본이 되는 여섯 가지 색 빨강, 주황(오렌지), 노랑, 초록, 파랑, 보라의 고유한 색을 의미합니다. ▶ Tint 기본이 되는 여섯 가지 색 빨강, 파랑, 노랑, 주황, 보라, 초록에 흰색을 가미한 정도를 의미합니다. ▶ 음영 (Shade) 기본이 되는..
인터페이스 인터페이스는 지정할 타입만 분리하여 지정할 수 있게 해 주는 기능으로 클래스와 비슷하게 생겼지만 다른 점은 타입지정만 가능하고 값을 지정할 수 없다는 점입니다(다른 언어와 동일). 사용하기 아래와 같이 객체에 지정된 타입을 인터페이스를 활용하여 분리해 보겠습니다. let object: { name: string; age: number; married?: boolean } = { name: 'tom', age: 20, } 먼저 인터페이스를 생성하고 값과 타입을 지정합니다. 인터페이스도 메서드를 가질 수 있는 데 예시를 위해 메서드도 추가하였습니다. interface Person { name: string age: number married?: boolean walk?: () => void // method..
CSS 컴포넌트 - 로딩 CSS 애니메이션을 사용해서 로딩 효과를 만들어보겠습니다. 구현 로딩효과를 추가할 요소를 아래와 같이 추가합니다. 해당 컴포넌트는 애니메이션의 딜레이 효과와 before 및 after Selector를 사용하고 시간차로 효과를 주어 하나의 요소만 사용하여 로딩효과를 완성하였습니다. /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; align-items: center; justify-content: center; height: 100vh; } .loading { border: 30px solid transparent; border-radius: 50%; position: relative; bord..
패키지 매니저 웹 애플리케이션을 개발할 때 일반적인 기능이라면 이미 구현된 기능을 가져와서(다운로드해서) 쓰는 것이 직접 개발하는 것보다 관리나 시간적 측면에서 효율적이겠죠? 이미 구현된 기능들을 라이브러리(또는 패키지)라고 하며 프로젝트에서 사용하기 위해 다운로드된 라이브러리의 목록들을 dependency라고 합니다. dependecy의 작동을 위해 dependency가 사용하는 다른 도구들이 있다면 해당 파일도 다운로드하여야 하므로 사용하는 기능들이 많아지면 파일들의 관리가 개발보다 더 힘들어지겠죠. 패키지 매니저는 소프트웨어 개발도구의 설치, 업그레이드 및 구성을 자동화하고 정형화된 방식으로 관리할 수 있게 해 줍니다. 또 다른 장점은 패키지 매니저는 각 dependency의 이름과 버전 정보를 담은 리스트 파일..
엔피엠 npm은 자바스크립트에서 활용 가능한 기능을 구현한 코드 라이브러리(패키지)입니다. 자바스크립트를 위한 라이브러리인 만큼 세계에서 가장 큰 규모를 자랑합니다. 오픈소스로 누구나 패키지를 사용할 수 있으며 자신의 패키지를 만들어서 제공하는 것도 가능합니다 (private 패키지의 경우 유료). npm을 사용하려면 node.js를 설치하여야 합니다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 패키지 사용하기 npm사이트에서 사용하고자 하는 패키지를 검색하고 안내에 따라 사용합니다. https://www.npmjs.com/ npm Bring the ..
타입스크립트 자바스크립트는 타입변형이 자유로운 언어입니다. 코드를 작성할 때 타입을 지정하지 않아도 자동으로 타입을 변경해 주기 때문에 코드작성은 쉬우나 동시에 발견하기 어려운 로직에러로 이어질 수 있는데요. 타입스크립트는 자바스크립트와 모든 기능과 문법을 사용하지만 타입제한을 강화한 언어로 개발과정에서 상기 언급한 에러의 가능성을 사전에 차단해 줍니다(자바스크립트의 모든 코드는 타입스크립트에서 사용가능하며 타입스크립트는 타입만 체크). 설치하기 타입스크립트를 브라우저가 인식하기 위해서는 타입스크립트를 자바스크립트로 컴파일해야 합니다. 타입스크립트 컴파일러는 타입스크립트 공식페이지(https://www.typescriptlang.org/)에서 가능한데요. 메인페이지에서 하얀 버튼을 누르면 로컬환경에 설치 (선택 시 ..
자바스크립트 컴포넌트 - 스탭퍼 구현 먼저 HTML에 필요한 만큼 단계를 지정합니다. 해당 애플리케이션에서 다음단계 또는 이전단계로 이동은 버튼을 사용했습니다. 1 2 3 4 Prev Next 아래와 같이 스타일을 지정합니다. 단계를 표시할 선은 바탕선이 될 요소와 단계진행에 따라 채워질 선을 표현할 요소 두 가지가 필요한데 '::before'를 사용해서 바탕선을 표시했습니다. '::before'의 경우 JS에서 사용할 수 없으므로 채워질 선으로 사용하기에는 적합하지 않습니다. /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; background-color: rgb(224, 242, 236); ali..
구글 시그널 구글 시그널은 세션을 기반으로 한 구글 사용자정보로 구글 My Ad Center에서 맞춤광고를 사용으로 설정한 사용자가 구글 제품에 로그인하였을 때 수집됩니다. ※ My Ads Center 링크 https://myadcenter.google.com/ Google 광고 관심설정 쿠키가 비활성화됨 브라우저의 쿠키가 비활성화되어 있는 것 같습니다. 브라우저의 쿠키를 활성화해야만 광고 관심설정 기능을 사용할 수 있습니다. 쿠키 활성화 방법 www.google.com 맞춤광고 사용설정은 우측에 'Personalized ads' 버튼을 누르고 'on'으로 바꾸면 됩니다. 기능 1. 교차기기 정보 수집 구글시그널은 사용하는 다른 기기들이 해당 사용자 정보를 공유할 수 있게 해 줍니다. 예를 들어 'Personaliz..
728x90

티스토리툴바