본문으로 바로가기

Web Club

현재위치 :: HOME BLOG CATEGORY SEARCH ARCHIVE TAGS MEDIA LOCATION GUESTBOOK

네비게이션

  • 홈
  • 태그
  • 미디어로그
관리자
  • 블로그 이미지
    jaiyah

    변화는 과거와의 이별로부터 시작된다 ..

    링크추가
  • 글쓰기
  • 환경설정
  • 로그인
  • 로그아웃

[Node.js] TIP : Node.js 와 NPM 최신버전으로 업데이트

Node.js 와 NPM 최신버전으로 업그레이드 하기 이번 포스트는 기존에 node.js 가 설치 되어있는 상태에서 Node.js 와 NPM 을 최신버전으로 업그레이드 하는 방법에 대한 팁 입니다. 주의: 일부 모듈에선 v6.0.0 을 지원하지 않습니다. Node.js 업그레이드 다음 절차에 따라서 업데이트를 진행하세요. 현재 NodeJs 버전 확인하기 CLI $ node -v v5.6.0 강제로 캐시 삭제하기 CLI $ sudo npm cache clean -f npm WARN using --force I sure hope you know what you are doing. n 모듈 설치하기 CLI $ sudo npm install -g n /usr/local/bin/n -> /usr/local/lib..

Web Tech/node.js 2016. 11. 25. 09:11

include html with jQuery

HTML 인클루드하기 이 포스팅에서는 제이쿼리를 이용하여 html 파일을 인클루드 해보록 하겠습니다.(웹서버에서 동작) HTML html #wrap #container .snb #content .aside header_inc.html header #Header Include 헤더 인클루드입니다. footer_inc.html footer #Footer Include 푸터 인클루드입니다. Script javascript 스크립트는 body 하단에 위치시키는 것을 권장합니다. test CSS css /* Common */ p,div { margin:0; padding:0; } /* 임시 비주얼 스타일 정의 */ div{margin-bottom:10px;padding:10px 0;color:#2d2c2d;fon..

Web Tech/jQuery 2016. 11. 24. 00:30

chat component

Chat Style See the Pen chat component by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

StyleSheet/SASSㆍSCSS 2016. 11. 23. 08:30

Button Drop Shadow with animation

Button Drop Shadow with SCSS and animation See the Pen Button Drop Shadow with animation by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

StyleSheet/SASSㆍSCSS 2016. 11. 23. 07:00

Animated Login Form

애니메이션 로그인 폼 See the Pen Animated Login Form by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

Web Tech/jQuery 2016. 11. 22. 16:53

Responsive navigation with CSS3 animations and jQuery

RWD with CSS3 & jQuery & SCSS See the Pen Fully responsive navigation with CSS3 animations and jQuery by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

StyleSheet/SASSㆍSCSS 2016. 11. 22. 16:35

Button Style with SCSS

Button Style See the Pen Button style by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

StyleSheet/SASSㆍSCSS 2016. 11. 22. 16:27

Negative margins(음수 마진)

Negative margins이 포스팅에서는 음수마진이라고 Negative margins 에 대해 알아보도록 합니다.음수 마진은 문서 내의 정상적인 흐름(document flow) 를 건들이지 않습니다.다시말해, 요소를 이동하기 위해 음수 마진을 사용하면, 그 뒤에 오는 모든 요소들도 같이 이동하게 됩니다. floats 이 적용되면 다르게 동작하므로 음수 마진을 사용할 경우에 좀 더 주의를 기울여야 합니다. 먼저 일반적인 요소인 static 요소에 음수마진을 사용하는 경우에 대해 알아보도록 하겠습니다.static 요소는 일반적으로 float 이 적용되지 않은 요소라고 정의한다면, static 요소의 top/left 에 음수 마진을 주면, 그 방향으로 원소가 이동하게 됩니다.예컨데, 요소에 margin-t..

StyleSheet/CSS 2016. 11. 22. 15:52

Step state(단계별 상태바) CSS :nth-child 활용

Step state progress bar CSS 가상 선택자인 nth-child 와 가상요소인 ::before, ::after 를 이용한 스텝바를 구현해 보도록 합니다. Source View See the Pen 단계별 상태바 스타일 by jaeheekim (@jaehee) on CodePen. CSS css * {box-sizing:border-box} ul { list-style:none; } /* 단계별 상태 스타일 */ .step-box { padding:0 10px 10px 10px; border:1px solid #ddd; background:#fff } .step-state { padding:10px 0 15px; margin-top:15px; background:#f7f7f7 } .ste..

StyleSheet/CSS 2016. 11. 21. 16:57

Hamburger Icon Animations

햄버거 아이콘(메뉴) 애니메이션다양한 햄버거 아이콘 애니메이션을 활용해 보세요. Preview SourceSee the Pen 햄버거메뉴 애니메이션 by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

StyleSheet/CSS 2016. 11. 11. 14:50

insertAdjacentHTML() 메서드

insertAdjacentHTML - HTML 인접(adjacent)요소에 삽입하기 이 메서드를 사용하면 시작 태그의 앞, 시작 태그의 뒤, 종료 태그 앞, 종료 태그 뒤에 노드를 삽입하는 것이 가능합니다. 다음의 코드에서는 insertAdjacentHTML() 메서드를 사용해서 구성한 코드입니다. html how javascript var elm = document.getElementById('elm'); elm.insertAdjacentHTML('beforebegin', 'Hey-'); // 타켓 요소 전(형제레벨)에 생성- 시작 태그의 앞(형제 레벨로) elm.insertAdjacentHTML('afterbegin', 'jaehee-'); // 타켓 요소 다음(자식요소)에 생성 - 시작 태그의 뒤(..

JavaScript/연산자ㆍ메서드ㆍ프로퍼티 2016. 11. 3. 11:27

Flexbox 알아보기

플렉스 박스 모델 다음 코드에서 display: flex 를 살펴보도록 합니다. Flexbox Overview See the Pen Flexbox by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

StyleSheet/CSS 2016. 11. 3. 09:36

인라인, 인라인 블럭요소 사이의 빈 공간 제거하기

Fighting the Space Between Inline Block Elements이 포스팅에서는 인라인 블럭 요소사이에 생겨나는 빈 공백을 제거하는 방법에 대해 알아보도록 합니다. 일반적으로 인라인 요소(블럭요소를 인라인요소로 변경 포함)를 다음과 같은 스타일을 적용한다고 가정해봅니다. html One Two Three css nav a { display: inline-block; padding: 5px; background: red; color: white; } Will result in:See the Pen 인라인 블럭 빈공간 데모 by jaeheekim (@jaehee) on CodePen. 예를 들어 디자인상에서 버튼이 촘촘하게 붙어 있다거나 또는 li 요소를 탭으로 사용하는데 인라인 처리를..

StyleSheet/CSS 2016. 11. 2. 08:31

커스텀 파일업로드 타입(file-upload) -접근성고려 #2

웹 접근성 파일업로드 타입 이 포스팅의 인풋 타입의 파일 업로드는 디자인 커스텀이 가능할 뿐만 아니라 접근성 포커스 이동까지 준수한 파일 업로드입니다. 현재 포커스시의 색상은 빨간색 타입의 dotted 로 정의되어 있습니다. HTML html 파일 업로드 찾아보기 CSS css * { margin: 0; padding: 0; } body { width: 700px; margin: 40px auto; } /* input file type */ .input-file { display: inline-block; } .input-file [type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: h..

Code Lab 2016. 11. 1. 17:10

custom input[type="file"] - 폼 커스텀 파일업로드 #1

input file type (디자인된 파일 업로드 타입) 기본 패턴의 파일 업로드 #1 - jQuery See the Pen 기본 패턴 파일 업로드 - jQuery by jaeheekim (@jaehee) on CodePen. 기본 패턴의 파일 업로드 #2 - jQuery See the Pen 파일 업로드 타입 #4 by jaeheekim (@jaehee) on CodePen. 기본 패턴의 파일 업로드 - javaScript See the Pen 기본 패턴 파일업로드 - Only javaScript by jaeheekim (@jaehee) on CodePen. 프로토타입 패턴의 파일 업로드 /** * -------------------------------- * Designed input[type=fi..

Code Lab 2016. 11. 1. 17:10
  • 이전
  • 1
  • ···
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • ···
  • 40
  • 다음

사이드바

ABOUT

WEBCLUB KimJaeHee

CATEGORY

  • Total Category (598)
    • HTMLㆍ웹표준ㆍ 웹접근성 (27)
    • StyleSheet (178)
      • CSS (142)
      • SASSㆍSCSS (15)
      • Compass (5)
      • Susy (3)
      • LESS (12)
    • HTMLㆍCSS 기초 강좌 (16)
      • HTML (5)
      • CSS (11)
    • JavaScript (163)
      • ES6+ (8)
      • DOM(Document Object Model) (4)
      • Core & 개념ㆍ용어 (52)
      • 연산자ㆍ메서드ㆍ프로퍼티 (21)
      • 위치 프로퍼티와 메서드 (4)
      • JS 객체지향 프로그래밍 (36)
      • this 키워드 (11)
      • 정규표현식(RegExp) (2)
      • JS 활용 & etc.. (25)
    • Web Tech (70)
      • jQuery (34)
      • node.js (5)
      • Ajax (8)
      • Webpack (3)
      • Gulp (7)
      • Vue.js (1)
      • AngularJS (6)
      • RequireJS (5)
    • Dev Environment (42)
      • 개발 환경 (10)
      • 개발 기타 자료 (17)
      • sublimeText3 (5)
      • Git (6)
    • Code Lab (96)
    • Private Zone (3)
    • Study Group (3)
      • javaScript 기초 (3)

RECENTLY

  • 최근 글
  • 최근 댓글

최근 글

최근댓글

Trackback

TAG

  • CLI
  • Less
  • 웹표준/웹접근성
  • JS 문법
  • Plug-in
  • RWD
  • Utility
  • 모듈로더
  • 자료실
  • Sass
  • Git
  • html
  • sublimetext3
  • requirejs
  • code
  • 크로스 브라우징
  • jquery
  • CSS
  • javascript
  • Library
MORE+

ARCHIVE

CALENDAR

«   2026/03   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

LINK

  • [Sitepoint] 웹 최신 기술 뉴스와 정보
  • [Smashing Magazine] 웹 자료
  • CSS의 현재 상태
  • html5 local 환경 테스트

VISITOR

현재 실시간 방문자
오늘
어제
전체
  • 홈으로
  • 방명록
  • 로그인
  • 로그아웃
  • 맨위로
SKIN BY COPYCATZ COPYRIGHT Web Club, ALL RIGHT RESERVED.
Web Club
블로그 이미지 jaiyah 님의 블로그
MENU
  • 홈
  • 태그
  • 미디어로그
CATEGORY
  • Total Category (598)
    • HTMLㆍ웹표준ㆍ 웹접근성 (27)
    • StyleSheet (178)
      • CSS (142)
      • SASSㆍSCSS (15)
      • Compass (5)
      • Susy (3)
      • LESS (12)
    • HTMLㆍCSS 기초 강좌 (16)
      • HTML (5)
      • CSS (11)
    • JavaScript (163)
      • ES6+ (8)
      • DOM(Document Object Model) (4)
      • Core & 개념ㆍ용어 (52)
      • 연산자ㆍ메서드ㆍ프로퍼티 (21)
      • 위치 프로퍼티와 메서드 (4)
      • JS 객체지향 프로그래밍 (36)
      • this 키워드 (11)
      • 정규표현식(RegExp) (2)
      • JS 활용 & etc.. (25)
    • Web Tech (70)
      • jQuery (34)
      • node.js (5)
      • Ajax (8)
      • Webpack (3)
      • Gulp (7)
      • Vue.js (1)
      • AngularJS (6)
      • RequireJS (5)
    • Dev Environment (42)
      • 개발 환경 (10)
      • 개발 기타 자료 (17)
      • sublimeText3 (5)
      • Git (6)
    • Code Lab (96)
    • Private Zone (3)
    • Study Group (3)
      • javaScript 기초 (3)
VISITOR 오늘 / 전체
  • 글쓰기
  • 환경설정
  • 로그인
  • 로그아웃
  • 취소

검색

티스토리툴바