본문으로 바로가기

Web Club

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

네비게이션

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

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

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

forEach, map, filter : 각 배열 원소에 함수 적용하기

forEach, map, filter 메서드 forEach 메서드 예제 살펴보기 javascript var charSets = ['ab', 'bb', 'cd', 'ab', 'cc', 'ab', 'dd', 'ab']; function replaceElement(element, idx, arr) { if (element == 'ab') { arr[idx] = '**'; } } charSets.forEach(replaceElement); console.log(charSets); charSets.forEach(function (el, idx, arr) { if (el == '**') { arr[idx] = '***' } }); console.log(charSets); map 메서드 : 배열의 모든 원소에 함수를..

JavaScript/연산자ㆍ메서드ㆍ프로퍼티 2017. 1. 23. 16:34

Infinite rolling slider type(무한 롤링 슬라이드), gallery

Slider Type아래의 소스는 무한 롤링이 되는 슬라이드 타입으로 플레이,정지버튼을 포함하고 있습니다.스터디 목적으로 작성한 코드로서 잠재적인 버그가 있을 수 있으니 참고바랍니다. Source PreviewSee the Pen 무한 롤링 배너(플레이버튼 포함) by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

Code Lab 2016. 12. 22. 09:32

thumbnail list banner #1 - (ver2. 함수형 타입)

썸네일 리스트형 배너이 포스팅의 코드는 thumbnail list banner #1 ver1을 업데이트한 함수형 타입 코드입니다. Source OverviewSee the Pen Thumbnail List Keyvisual #1(Ver.2) by jaeheekim (@jaehee) on CodePen. related links thumbnail list banner #1 (ver1. 함수형 타입) Jaehee's WebClub

Code Lab 2016. 12. 15. 09:25

vertical sliding tab type(세로형 탭타입의 슬라이딩 배너)

Vertical Slide TabType 다음의 소스는 세로형 탭 형식의 슬라이딩 배너입니다. HTML 다음의 마크업은 슬라이딩 배너에 사용되는 소스입니다. html 스포츠 포토 패션 포토 동물 포토 CSS 다음의 소스는 css 소스로 사용자 정의에 맞게 다시 정의하여 사용하기 바랍니다. css *{margin: 0;padding: 0;} body {font-size: 12px;margin: 50px;} li {list-style: none;} .slide-v {margin-top: 30px} .slide-v:after {clear: both; display:block; content:""} .slide-v .tab {float: left; width: 122px;height: 114px;border: ..

Code Lab 2016. 12. 14. 12:38

Pure CSS Tabs

No JS, Just CSS Tabs이 포스팅에서는 스크립트를 사용하지 않고 CSS 만으로 탭 메뉴를 구현해 보도록 합니다. Source OverviewSee the Pen Pure CSS Tabs #1 CSS by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

StyleSheet/CSS 2016. 12. 12. 14:44

JavaScript : 프로토타입(prototype) 이해

JavaScript Prototype JavaScript는 클래스라는 개념이 없습니다. 그래서 기존의 객체를 복사하여(cloning) 새로운 객체를 생성하는 프로토타입 기반의 언어입니다. 프로토타입 기반 언어는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어냅니다. 이렇게 생성된 객체 역시 또 다른 객체의 원형이 될 수 있습니다. 프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 해줍니다. 프로토타입은 크게 두 가지로 해석됩니다. 프로토타입 객체를 참조하는 prototype 속성과 객체 멤버인 proto 속성이 참조하는 숨은 링크가 있습니다. 이 둘의 차이점을 이해하기 위해서는 JavaScript 함수와 객체의 내부적인 구조를 이해 해야합니다. 이번 글에서는 JavaScript의..

JavaScript/Core & 개념ㆍ용어 2016. 12. 9. 12:05

login form with animation

로그인 폼 애니메이션 효과 구현 이 포스팅에서는 jQuery와 함께 레이블에 transition, transform 을 적용하여 간단한 애니메이션을 구현해 보도록 합니다. Source Overview See the Pen 로그인 폼 레이블 애니메이션 by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

StyleSheet/CSS 2016. 12. 6. 07:00

CSS triangle

단계별 타입을 css 삼각형으로 표현해 보기이 포스팅에서는 삼각형을 이용하여 단계별 타입 디자인을 표현해 보도록 합니다. Source viewSee the Pen 삼각형 테스트 by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

StyleSheet/CSS 2016. 12. 5. 08:38

CSS3 :nth-child() - 의사 클래스(Pseudo-Classes)

의사(가상) 클래스는 :hover와 :before, :active와 같은 형태로 많이 사용되고 있습니다. 그리고 현재 CSS3는 새로운 의사(가상) 클래스들을 상당히 많이 제공하여 웹을 좀 더 유연하게 제어할 수 있도록 해주고 있습니다. 이 글에서는 nth-child에 대해 중점적으로 다룰 것이고 그 외의 몇 가지 가상 클래스를 소개해 보도록 하겠습니다. CSS3 가상 클래스를 IE 구형 브라우저에서도 사용할 수 있는 Selectizr 포스팅보기 처음과 마지막 요소 선택 일반적으로 많이 사용하는 선택자들로 간단히 짚고 넘어가겠습니다.:first-child는 요소 유형(타입)에 상관없이 요소의 첫 번째 자식을 선택합니다. 이 가상 클래스는 CSS2.1에서 먼저 정의되었고 IE7+ 모든 브라우저들이 지원하고..

StyleSheet/CSS 2016. 12. 2. 17:19

다양한 코드를 활용한 텍스트 말줄임 효과(Pure CSS) #2

Pure CSS - text-ellipsis, line-clamp이 포스팅에서는 다양한 방법으로 말줄임 효과를 나타내는 CSS 를 참고하실 수 있습니다. Source PreviewSee the Pen 텍스트 말줄임 효과 by jaeheekim (@jaehee) on CodePen. related links 텍스트 말줄임 효과 #1 Jaehee's WebClub

StyleSheet/CSS 2016. 12. 2. 07:00

CSS3 를 이용한 캡슐 효과

Using box-shadow and linear-gradient 이 포스팅에서는 box-shadow 그리고 linear-gradient 를 이용하여 캡슐효과를 나타내 봅니다. Source preview See the Pen 캡슐 효과 by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

StyleSheet/CSS 2016. 12. 1. 08:59

CSS3를 이용한 폼 요소 스타일

form using CSS3 폼 요소 디자인에 CSS3 를 이용한 효과를 적용해 보도록 합니다. Source viewSee the Pen Form using CSS3 by jaeheekim (@jaehee) on CodePen. SEND 버튼 효과만 알아보기See the Pen The Button Animation that use float and css3 by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

StyleSheet/CSS 2016. 11. 30. 08:48

모바일 및 반응형에서 유용한 박스 레이아웃

Useful box layout in mobile and RWD다음의 소스를 통해 박스모델을 이해하면서 레이아웃을 정의해 보도록 합니다. 로컬 테스트 시 다음의 뷰포트를 설정하고 테스트 바랍니다. html Box layout #1로컬 상에서 소스 테스트 시 위의 뷰포트 설정을 확인하고 개발자 도구에서 에뮬레이터를 통해 확인해 보세요.See the Pen 모바일에서 유용한 박스 레이아웃 #1 by jaeheekim (@jaehee) on CodePen. Box layout #2See the Pen 모바일에서 유용한 박스 레이아웃 #2 by jaeheekim (@jaehee) on CodePen. related links 음수 마진(Negative margins) 활용하기 Jaehee's WebClub

StyleSheet/CSS 2016. 11. 29. 17:00

CSS3를 이용한 버튼 스타일

Multi share button in pure CSS3 See the Pen multi share button by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

StyleSheet/CSS 2016. 11. 28. 17:10

Responsive Background Image Fade on Scroll

스크롤시 백그라운 이미지 페이드인 처리하기 Source PreviewSee the Pen 스크롤시 백그라운드 이미지 페이드인 처리 by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

Code Lab 2016. 11. 26. 07:00
  • 이전
  • 1
  • ···
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • ···
  • 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

  • Utility
  • 웹표준/웹접근성
  • sublimetext3
  • JS 문법
  • 모듈로더
  • Library
  • requirejs
  • javascript
  • CSS
  • Plug-in
  • 자료실
  • jquery
  • Less
  • Git
  • code
  • CLI
  • html
  • Sass
  • 크로스 브라우징
  • RWD
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 오늘 / 전체
  • 글쓰기
  • 환경설정
  • 로그인
  • 로그아웃
  • 취소

검색

티스토리툴바