Web Club

사용자 정의 생성자 함수를 이용한 아코디언 메뉴

생성자 함수를(객체생성) 이용한 아코디언 메뉴

Code Lab 2015. 9. 22. 10:51

아코디언 메뉴 세가지 패턴으로 구현

세가지 패턴의 아코디언 메뉴 객체 리터럴을 사용한 아코디언 메뉴 일반적인 패턴의 아코디언 메뉴 삼항 연산자를 사용한 아코디언 메뉴 Jaehee's e-room

Code Lab 2015. 9. 22. 10:44

탭메뉴 플러그인(자동롤링)

탭 메뉴 자동 롤링되는 탭메뉴 플러그인jquery 1.x.x 지원 (function($){ $.extend($.fn, { tabModule : function(options) { $.fn.tabModule.defaults = { selector : 'a', tabContWrap : 'tabGroup', tabContents : 'tab-cont', speed : 400, visibleCont : 1, autoRolling : false, roofTime : 2000, animate : false, autoControl : false }; return this.each(function(){ var that = $(this), opts = $.extend({}, $.fn.tabModule.defaults, ..

Code Lab 2015. 9. 22. 10:25

Sass 활용(웹폰트,PX2EM, accessivility )

Sass 웹폰트 모듈 호출하기 /** * ------------------------------- * 변수 * ------------------------------- */ // Typography $base: 16; // 글꼴 $serief: 'Tiems New Roman', Serief; $sans-serief: Verdana, Sans-Serief; $serief-ko: Gulim, Serief; $sans-serief-ko: 'Nanum Gothic', Dotum, Sans-Serief; // 구글 웹폰트 $noto-serif: 'Noto-Serief:400,700'; $noto-sans: 'Noto+Sans:400,700'; $monoton: 'Monoton'; $webfont: $sans-se..

StyleSheet/SASSㆍSCSS 2015. 9. 14. 17:57

jQuery CLI 에서 다운로드하기

jQuery 를 npm & bower 를 이용하여 다운받기 // 물결을 이용하여 해당 버전까지에서 최신버전을 설치 $ npm install jquery@~1.11 $ bower install jquery#~1.11 /** * 위와 같이 버전별로 설치할 경우에 npm 은 @, bower 는 # 으로 설치합니다. */ $ npm install jquery $ bower install jquery

Dev Environment/개발 기타 자료 2015. 9. 9. 16:50

명령어 기반 인터페이스 도구(CLI)

CLI (Command Line Interface)node.js 를 활용하기 위해서는 명령어 기반 인터페이스에 익숙해져야 한다. front-ui 를 다루는 입장에서 이 인터페이스는 정말 낯설다. 하여 이렇게 포스팅하며 개인적으로 공부해 본다. 일반적으로 CMD는 Window 운영체제에서 기본으로 제공하는 명령어 기반 인터페이스 도구이다.window키 + R 을 누르고 cmd를 입력하면 CMD창이 실행된다. CMD 창에 ipconfig를 입력한 후 엔터를 누르면 IP Configuration을 확인할 수가 있다. 즉, 컴퓨터에 연결된 IP Address와 인터넷 연결정보를 확인할 수가 있다. 그리고 CMD 도구를 대체할 수 있는 CLI로는 마이크로소프트사에서 개발한 확장 가능한 명령어 기반 인터페이스로Po..

Dev Environment/개발 기타 자료 2015. 9. 9. 13:49

[Window] cmd 명령어 & DOS Command

cmd(Command)@ 시작 -> 실행 에서 cmd 또는 cmd dos 입력 주로 사용하는 명령어 notepad : 메모장 msconfig : 시스템 구성 유틸 sysedit : 시스템 구성 편집기 shutdown -s -t 60 : 60초로 컴퓨터 강제 종료. regedit : 레지스트리 calc : 계산기 control : 제어판 start or start . : 다른 cmd 열기 또는 해당 디렉토리의 윈도우 탐색기 열기 프로그램 명령어 개체 포장기 : packager 그림판 : mspaint , pbrush 디스크 관리 : diskmgmt.msc 디스크 정리 : cleanmgr 디스크 조각 모음 : dfrg.msc 돋보기 : magnify 마스터 볼륨 : sndvol32 마우스 등록 정보 : co..

Dev Environment/개발 환경 2015. 9. 9. 13:34

.bashrc 문서 별칭(Alias) 등록 및 CLI 에서 유효성검사하기

.bashrc 문서에 Alias 등록 .bashrc 파일을 생성하여 단축어을 별칭 등록하여 CLI 에서 간편 사용하기.bashrc 를 생성하기 위해 사용자 계정이 있는 위치로 이동$ cd ~/ => 사용자 계정으로 이동.bashrc 파일을 사용자 폴더에 생성한다. # Alias alias ls='ls -ph --show-control-chars' alias lsa='ls -al --color=auto --show-control-chars' alias cls='clear' # Sass Alias (Sass 명령어를 별칭으로 등록) alias sass='sass -w -t compact -E utf-8' alias sass-e='sass -w -t expaned -E utf-8' alias sass-c='s..

Dev Environment/개발 환경 2015. 9. 9. 10:15

[Chapter 07] Sass 조건문, 반복문

Conditions @if, @else if, @else 문법 및 활용 @ JS 의 if ~ else 문과 유사한 조건문을 처리할 수 있습니다.(JS 코드에서 조건부분의 괄호를 사용하지 않습니다.) $value: null; #condition { @if $value == false { color: #eee; } } #demo { @if $value == false { color: #434343; } @else { color: #8c8d8a; } } $custom-red: #e44351; $custom-green: #3ce1cd; $custom-blue: #4524dd; $custom-dark: #161515; // 배경 컬러 설정 변수 $bg-color: $custom-red; #demo { @if $b..

StyleSheet/SASSㆍSCSS 2015. 9. 8. 15:23

[Chapter 05] Sass Mixin 응용

Mixin(믹스인) 활용하기 # Scss @mixin reset-html5-block($html5-block) { #{$html5-block} { display: block; } } # CSS @include reset-html5-block('h1, p, div'); h1, p, div { display: block; } # Scss @mixin reset-box-model { margin: 0; bottom: 0; padding: 0; } @mixin reset-font (){ font:inherit; font-size: 100%; vertical-align: baseline; } @mixin nested-reset($html-selector) { #{$html-selector} { @include r..

StyleSheet/SASSㆍSCSS 2015. 9. 1. 17:59

네트워크 기초

네트워크 기초 네트워크여러대의 컴퓨터를 통신 회선으로 연결한 것 ㆍ 홈 네트워크 : 컴퓨터가 방마다 있고, 이들 컴퓨터를 유,무선등의 통신 회선으로 연결한 것ㆍ 지역 네트워크 : 회사, 건물, 특정 영역에 존재하는 컴퓨터를 통신 회선으로 연결한 것ㆍ 인터넷 : 지역 네트워크를 통신 회선으로 연결한 것 서버와 클라이언트▶ 서버 : 서비스를 제공하는 프로그램 웹서버, FTP 서버, DBMS, 메신저 서버클라이언트의 연결을 수락하고, 요청 내용을 처리한 후 응답을 보내는 역할을 합니다. ▶ 클라이언트 : 서비스를 받는 프로프램 웹브라우저(웹서버로부터 서비스를 받음), FTP 클라이언트, 메신저네트워크 데이터를 필요로하는 모든 애플리케이션이 해당모바일 앱도 네트워크 데이터를 필요로 한다면 모바일앱도 클라이언트가..

Dev Environment/개발 기타 자료 2015. 9. 1. 08:18

keycode 체크하기

KeyCode (function(global, doc){ 'use strict'; var page = doc.querySelector('#page'); page.classList.add('grid'); doc.onkeydown = function(evt) { evt = evt || window.event; var key = evt.keyCode || evt.which, shift = evt.shiftKey; // Shift + G(71) if (shift && key === 71) { page.classList.toggle('grid'); } } })(window, window.document);

Code Lab 2015. 8. 22. 18:34

Math 클래스 - random 메서드 활용하기

random 메소드 Math 객체의 메서드 중에 random 메서드에 대해 알아봅니다. Math.random() 랜덤 숫자 생성하기 random 메서드는 0과 1사이의 랜덤한 수를 리턴합니다. 문법(Syntax) JavaScript Math.random() 인자(Parameters) 없음 반환값(Return) number 설명(Description) 0과 1사이의 수를 리턴함 Math.random()의 리턴값에 수를 곱하면 0부터 곱한 수 사이의 랜덤한 값을 구할 수 있습니다. 랜덤한 수를 발급하거나, 시스템적으로 불규칙한 행위가 필요할 때 사용할 수 있습니다. 예제 코드(Example) JavaScript console.log(Math.random()*100); // number, 0~100 사이의 랜..

JavaScript/연산자ㆍ메서드ㆍ프로퍼티 2015. 8. 20. 09:54

Sass 명령어 기초 배우기

Sass 명령어 알아보기 이 포스팅에서는 사스에서 자주사용되는 명령어에 대해 알아봅니다. CSS 출력 style 지정 사용방법.scss 파일을 작성한 후에 css로 컴파일을 하기 위해서는 간단한 sass 명령어를 사용해야하는데 이에 대해 알아보도록 하자. 명령어 작성ㆍ cmd 창에서 아래의 명령어를 입력한다.sass –-style style종류 (작성된)파일명.scss (변환될)파일명.css $ sass –-style compact test.scss:test.css 다음의 코드는 예를 들어서 본인의 로컬 디렉토리에 sass 폴더가 있고 컴파일된 css파일을 다른 디렉토리로 이동하고자 할때 (주의 : 터미널,cmd 창에서 sass 파일이 있는 디렉토리를 기준으로 작성한 것입니다) 그리고 해당 .scss 파..

StyleSheet/SASSㆍSCSS 2015. 8. 7. 13:34

빠른 마크업을 위한 Emmet 사용법(sublime text 기준)

Emmet - 빠른 HTML 마크업 & CSS 스타일링 빠른 마크업을 위한 Emmet 에 대한 사용법을 알아보겠습니다. http://emmet.io 에밋에 대한 자세한 내용은 위 링크를 참고 바랍니다. Emmet HTML - '표준 DTD 문서' 유형별 생성 HTML 문서 기본형 축약코드로 예를 들어 단축어 doc + tab 키를 치면 문서타입이 출력됩니다. doc : HTML5 문서 기본 골격 [DTD 제외]doc4 : HTML4 문서 기본 골격 [DTD 제외]html:4t : HTML4 문서 관용모드 기본 골격html:4s : HTML4 문서 엄격모드 기본 골격html:xt : XHTML1 문서 관용모드 기본 골격html:xs : XHTML1 문서 엄격모드 기본 골격html:5 또는 ! : HTML5..

Dev Environment/sublimeText3 2015. 8. 7. 10:01