"하엘파파"
1462
-
[비공개] 제이쿼리 강좌_jQuery 플러그인 살펴보기
제이쿼리 강좌_제이쿼리 플러그인 살펴보기 자바스크립트 vs. 제이쿼리 var tab1 = new TabMenu("#tabMenu1");tab1.setSelectMenuItemAt(1); $("#tabMenu1").selectTabItemAt(1); 제이쿼리 플러그인 기본 구조 분석 (function($){ $.fn.changeColor = function(){ this.each(function(index){ $(this).css("border", "4px solid #f00"); }); return this; } })(jQuery) $(document).ready(function(){ $("p").changeColor(); }); 제이쿼리 플러그인 기본 구조는 위와 같습니다. 구조를 살펴보면 this.each()가 맨 처음 나옵니다. 여기선 this는 changeColor를 호출한 jQuery객체를 가리키며 each()메소드를 호출하.......추천 -
[비공개] 그런트(Grunt)_자바스크립트 프로젝트 자동화 도구
그런트(Grunt)_자바스크립트 프로젝트 자동화 도구 그런트는 Task중심의 빌드 도구로서 많은 프론트 웹개발자에게 꼭 필요한 프로그램입니다. 대항마로는 Glup와 같은 새로운 도구가 있습니다. npm을 기반으로한 모듈의 의존성인 package.json 파일이 실행시 필요합니다. npm install -g grunt-cli 명령어를 사용하여 그런트 테스크 러너에 필요한 인터페이스를 먼저 설치한 뒤 grunt를 설치해 주시면 됩니다. package.json을 살펴보면 다음과 같습니다. 아래에서 grunt-contrib- 의 의미는 그런트 개발팀에서 개발한 공식 플러그인이라고 합니다. { "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.5", "g.......추천 -
[비공개] HTML5 강좌_ Data attribute 속성 사용하기 with ..
HTML5 강좌_ Data 속성 사용하기 data-* attributes의 등장으로 개발자는 더 이상 classList, 비기준 속성, setUserData 사용없이HTML 시멘틱 마크업게 맞게 엑스트라 정보를 엘리먼트/태그에 명시할 수 있게 되었습니다.놀랍게도, 이를 사용하는 문법은 매우 간단합니다.data-를 시작으로 뒤에는 어떠한 이름도 올 수 있습니다.주의할점이 있다면 뒤에는 대문자가 올 수 없으며 한 글자 이상을 꼭 써주셔야 합니다. 위의 데이터를 자바스크립트에서 읽는 방법또한 매우 간단합니다.바로, getAttribute() 메서드를 사용하면 됩니다.하지만, 좀 더 공식적으로는 dataset을 통한 DOMStringMap을 추천합니다. 우선 id로 해당 엘리먼트롤 불러온 뒤 변.......추천 -
[비공개] Node.js 강좌_ 서버설치 및 기본 사용법
Node.js 강좌_ 서버설치 및 기본 사용법 1. Node.js 소개/설치Node.js는 구글의 V8 자바스크립트 엔진을 기반으로 서버 사이드 웹 어플리케이션 제작을 위한 플랫폼 환경을 제공합니다. 특히, V8 가상 머신은 ECMA 스크립트 표준을 준수하기 때문에 자바스크립트의 새로운 기능을 브라우저가 항상 제공하고 있습니다. 기존 인터프리트 방식에서 JIT(Just in Time) 방식을 사용해서 즉시 기계어로 컴파일이 가능하기 때문에 큰 성능향상을 가져왔습니다. 또한, 단일 스레드 모델과 Non-blocking I/O를 채택하여 작업 수행 시간을 크게 단축 시켰습니다. 우선, 맥OS를 기준으로 Node.js를 설치하는 하도록 하겠습니다. 공식 사이트인 https://nodej.......추천 -
[비공개] 웹성능 최적화_브라우저 속도 향상
웹성능 최적화_브라우저 속도 향상 빠른 웹사이트를 구축하는데 메모리 관리는 매우 중요합니다. 오늘날, 대부분의 자바스크립트 런타임들은 가비지 컬렉션(garbage collection)을 구현하고 있습니다. 하지만 이러한 자동 메모리 관리로 인해 메모리를 찾는 동안 런타임 전체가 멈춰 버립니다. 응용프로그램의 사용량이 늘어나면서 사용되지 않는 객체를 찾아 힙(heap: 브라우저가 사용하는 메모리) 전체를 뒤지는 데 필요한 시간이 늘면서 결국 사용자는 불편함을 느낍니다. 웹 성능 최적화와 관련된 또 하나로 가상 메모리가 있습니다. 운영체제에는 실제 물리적 메모리와 가상 메모리가 있습니다. 물리적 메모리는 컴퓨터의 RAM에 할당되는 것.......추천 -
[비공개] CSS 강좌_폰트/텍스트 숨김처리
CSS 강좌_폰트/텍스트 숨김처리 마크업을 하다보면 화면상에서는 보이지 않지만스크린 리더기와 같은 보조기술을 통해 내용을 전달해야 할 때가 있습니다.이럴 때 사용하는 것이 바로 CSS 텍스트/폰트 숨김 처리 방법입니다. 숨김처리를 하는 방법에는 여러 가지가 있습니다.오늘든 간단한 것들에 대해 알아 보도록 하겠습니다.예전에 포스팅한 "이미지 대체텍스트 기법"을 참고하셔도 좋습니다.이번 포스팅은 css의 매우 기본적인 내용이라아마 이 글을 보시는 많은 분들에게 매우 쉬운 내용일 것입니다:)그냥 간단히, 복습 차원에서 봐주세요! 1. 우선 간단히, visibility:hidden 과 display:none에 대해 알아보겠습니다.두 스타일 모두 텍스트.......추천 -
[비공개] HTML강좌_웹접근성 교육_WAI-ARIA
HTML강좌_웹접근성 교육_WAI-ARIA 소개 웹콘텐츠는 위젯, 구조, 행동에 관한 시멘틱 정보가 필요합니다. 이러한 정보들은 스크린 리더기와 같은 도움을 주는 기계를 통해서 몸이 불편한 사람들에게 정확한 정보를 제공합니다. 이번 아티클에서는 이와 연관되어 있는 role, states, 그리고 properties 에 관한 내용을 알아 보도록 하겠습니다. 이러한 기능들은 접근성을 향상 시키며 웹 콘텐츠와 어플리케이션에 관한 명확한 정보를 전달해줍니다. 이 글의 내용은 다음 사이트를 참고하였습니다. http://www.w3.org/WAI/intro/aria.php WAI-ARIA를 사용함으로써 사용자는 커스텀 위젯에 관한 정확한 정보를 얻을 수 있습니다. 이는 웹에대한 접근.......추천 -
[비공개] HTML CSS강좌 _ 클래스 네이밍 방법 (SMACSS, BEM, ..
HTML CSS강좌 _ 클래스 네이밍 기법 SMACSS (Scalable and Modular Architecture for CSS) -소개SMACSS는 엄격한 프레임워크 보다는 스타일 가이드에 초점을 맞추었습니다. 다운로드와 인스톨없이 바로 사용가능하며, 디자인 프로세스 진단과 기존의 경직된 프레임워크를좀 더 유연하게 만드는 것을 목표로 하고 있습니다. -5가지 기본적인 규칙SMACSS의 핵심은 바로 분류, 또는 범주화 (categorization) 입니다. CSS룰에 대한 분류를 통해, 일정 패턴과 더 좋은 정의를 내릴 수 있습니다. 1. Base rules 초기값 설정을 의미합니다. 대부분 하나의 엘리먼트로 이루어져있으며, 속성 선택자, 가상 클래스 선택자, 후손 선택자, 자식 선택자 등으로.......추천 -
[비공개] 북카페_지식인의 서재
북카페_지식인의 서재 (이미지 출처: 스트리트H) 바쁜 일상 속에서도 "탐구"라는 행위를 놓치고 싶지않아평소 "알고" 싶어하는 내용들을 정리해보기로 했습니다.경제- 21세기 자본론 (피케티)- 디드로 효과 vs 베블런 효과 (저서, '유한계급론') + 밴드웨건효과 스노브효과 (하비 라이벤스타인)- 고전적 자본주의 (애덤 스미스) -> 수정자본주의 (케인즈) -> 신자유주의- 칼폴라니 (저서, '위대한 전환') 사회- 유리감옥 (니콜라스 카) 예술/철학-시뮬라크 (발전 단계: 플라톤's 이데아 -> 니체's 우상의 황혼 -> 장 보드리야르 -> Matrix/ 앤디워홀/ 르네 마그리트)-자크라캉 (욕망, 거울단계이론) 연구항목-언어의 기원과 발전.......추천 -
[비공개] HTML 강좌_div 엘리먼트 z-index 이해하기
HTML 강좌_div 엘리먼트 z-index 이해하기z-index는 위 그림에서 엘리먼트를 z 축으로 이동시키는 것을 말합니다. 어떻게 보면 굉장히 간단해 보이지만 복잡한 HTML 계층적 엘리먼트들에 z-index 속성을 지정할 경우 때로는 동작을 이해하거나 심지어 예측하기 어려울 때도 있습니다. *z-index는 다음 두 가지 용어를 명시하고 있습니다. 1. 현재 엘리먼트의 쌓임순서(stacking level) 2. 현재 엘리먼트가 새로운 쌓임맥락(stacking context)을 생성 z-index 속성은 오로지 포지션된 엘리먼트(relative, absolute, 또는 fixed)에만 적용이 되며 세 가지 값이 존재합니다. Value Description auto 쌓임순서를 0으로 설정하고 새로운 쌓임맥락을 생.......추천
1510개
1047708개
716240개
