Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                # 사이트 주소 : to2.kr/a8d
- [포트폴리오](https://qwer2711.github.io/jy_web/jy-pf-7/)
---
# 브라켓확장플러그인
emment
- 빠른자동입력

Brackets Color Picker
- 컬러 피커 ctrl shift K

Beautify
- 코드 정리 ctrl shift L 

Brackets Icons
- 파일별로 앞에 아이콘 표시

Color Highlighter
- 컬러코드 색으로 알려줌

CSSFier
- HTML 구조대로 CSS 구조 짜줌 

Indent Guides
- 가이드 선

Live Preview for Responsive
- 반응형뷰

# BNX 사이트구현

- [사이트구현](https://codepen.io/qwer273/pen/vYERqga)

# [12/6 발표] 1조 팀프로젝트 발렌시아가
- [상단바메뉴](https://codepen.io/qwer273/pen/NWWZGoy?editors=1100)
- [하단메뉴](https://codepen.io/qwer273/pen/LYEEQbV)

- [스토리페이지 1차](https://codepen.io/qwer273/pen/mddYxom)
- [스토리페이지 2차](https://codepen.io/qwer273/pen/vYYqNzG?editors=1100)
- [스토리페이지_서브메뉴1_브랜드스토리](https://codepen.io/qwer273/pen/ExaaQOj)
- [스토리페이지_서브메뉴2_포토앨범](https://codepen.io/qwer273/pen/abzzYdm?editors=0100)
- [스토리페이지_서브메뉴3_뉴스](https://codepen.io/qwer273/pen/KKwpaqj?editors=0100)
- [발렌시아가 콜렉션 페이지](https://codepen.io/qwer273/pen/abzbgNJ)

# [12/12]나이키 메뉴구현
- [나이키 상단메뉴](https://codepen.io/qwer273/pen/ExaKbMx)
- [나이키 상단메뉴 애니메이션효과](https://codepen.io/qwer273/pen/vYEGjjR?editors=1100)
- [나이키상단메뉴](https://codepen.io/qwer273/pen/bGNWaqd)

- [나이키 메뉴구현1](https://codepen.io/qwer273/pen/qBEmpYJ)
- [나이키 메뉴구현2](https://codepen.io/qwer273/pen/PowmEaw)
- [나이키 메뉴구현3](https://codepen.io/qwer273/pen/qBEmzzP?editors=0100)

- [나이키메뉴합침](https://codepen.io/qwer273/pen/MWYmNrm?editors=0100)
# [12/27] 파이버프로 슬라이더
- [슬라이더](https://codepen.io/qwer273/pen/yLyoOgz?editors=1000)
- [슬라이더2](https://codepen.io/qwer273/pen/VwYzpRE?editors=0100)
- [슬라이더3](https://codepen.io/qwer273/pen/WNbEBaj?editors=0100)
- [슬라이더4](https://codepen.io/qwer273/pen/YzPxozX?editors=0100)

# [12/31] 스테이폴리오 슬라이드
- [스테이폴리오 슬라이더 js길게](https://codepen.io/qwer273/pen/LYEzxoZ?editors=0100)
- [스테이폴리오 슬라이더 js축약](https://codepen.io/qwer273/pen/WNbZpRm)
- [스테이폴리오 슬라이더 js축약2](https://codepen.io/qwer273/pen/rNaGEaK?editors=0010)
- [스테이폴리오 슬라이더 js축약3](https://codepen.io/qwer273/pen/povWXvd)

# [1/2] 탭박스 , 좌우버튼슬라이더
- [탭박스](https://codepen.io/qwer273/pen/mdyBYZd)
- [탭박스2](https://codepen.io/qwer273/pen/XWJevqd?editors=0010)
- [탭박스3](https://codepen.io/qwer273/pen/WNbXjNV?editors=0100)
- [좌/우버튼 슬라이더](https://codepen.io/qwer273/pen/rNaYBaj?editors=0010)

# [1/3] 스테이폴리오 슬라이더 완성
- [좌우 버튼과 페이지 버튼이 함께 있는 슬라이더 만들기](https://codepen.io/qwer273/pen/PowOmrq)
- [축약](https://codepen.io/qwer273/pen/gObXRRM?editors=0010)

# [1/6] 비비엔느 사이트구현

- [1.비비엔느 최 상단바](https://codepen.io/qwer273/pen/ZEYvyLa)
- [2.비비엔느 로고바](https://codepen.io/qwer273/pen/vYEpZgq?editors=0100)
- [3.검색창](https://codepen.io/qwer273/pen/vYEpZpB)
- [4.메인메뉴](https://codepen.io/qwer273/pen/NWPXvqX)
- [메인메뉴 연습](https://codepen.io/qwer273/pen/jOEYgeQ)
- [1~4합침,css축약](https://codepen.io/qwer273/pen/zYxpzpJ)
- [1~4합침,css풀버전](https://codepen.io/qwer273/pen/bGNarNo?editors=1100)
- [비비엔느메인메뉴 합침연습](https://codepen.io/qwer273/pen/abzqvvq?editors=0100)
- [비비엔느 배너구현](https://codepen.io/qwer273/pen/GRgQdLv)
- [비비엔느 최종 합친 메인사이트](https://codepen.io/qwer273/pen/ExaQLzx?editors=1100)
---

# 배웠던 소스들 활용

- [빈페이지](https://codepen.io/qwer273/pen/JjoLqOX?editors=1000)
- [시작소스코드](https://codepen.io/qwer273/pen/NWPEpNB)

- [그리드이미지](https://codepen.io/qwer273/pen/rNabVZa)

- [팝업창](https://codepen.io/qwer273/pen/jOEqxWd)

- [백그라운드 이미지 픽스](https://codepen.io/qwer273/pen/ExaGJEx)

- [반응형박스](https://codepen.io/qwer273/pen/bGVreWq?editors=1100)

- [반응형 이미지](https://codepen.io/qwer273/pen/NWPemrX)
- [반응형 이미지2](https://codepen.io/qwer273/pen/YzPdMEp)
- [슬라이드](https://codepen.io/qwer273/pen/zYxdOee?editors=0010)
- [세로 슬라이드](https://codepen.io/qwer273/pen/MWYZRZd)
- [자동슬라이드jq](https://codepen.io/qwer273/pen/KKwBRoM?editors=0010)
- [마우스올렸을때 이미지교체](https://codepen.io/qwer273/pen/GRgwrBN)
- [앵커이동](https://codepen.io/qwer273/pen/jOEXJXG?editors=1010)
- [애니메이션효과_샘플 커졌다가돌아오기](https://codepen.io/qwer273/pen/ZEYjxed?editors=0100)

- [기본홈페이지구성/메뉴&자동슬라이드](https://codepen.io/qwer273/pen/WNxNxWv?editors=1100)

- [제품슬라이드](https://codepen.io/qwer273/pen/dyXjRKO)
---

# 메인메뉴효과
- [모바일용 메뉴구현 사이드바](https://codepen.io/qwer273/pen/QWwLLQe)
- [상단바 fixed](https://codepen.io/qwer273/pen/yLyrNjW)
- [메인메뉴리스트가 전부내려옴](https://codepen.io/qwer273/pen/abzxOjN)
---

# 스크롤
- [배경이미지가 스크롤바를 따라다니는 예제](https://codepen.io/qwer273/pen/gObNowq)
- [아이폰 스크롤리](https://codepen.io/qwer273/pen/BaygJze)
- [스크롤리](https://codepen.io/qwer273/pen/vYEMOVe)
- [스크롤시나오는 메뉴들](https://codepen.io/qwer273/pen/xxbmeOv)
- [스크롤을 내릴때는 헤더가 사라지고 올릴때는 헤더가 생김](https://codepen.io/qwer273/pen/bGNOJBY)
- [스크롤파이상단탑바](https://codepen.io/qwer273/pen/WNbLWXy)
- [따라다니는 페이지메뉴](https://codepen.io/qwer273/pen/PowXgxQ)
- [따라다니는 사이드메뉴_동국제약](https://codepen.io/qwer273/pen/LYEMvwx?editors=0010)
- [휠로 페이지이동](https://codepen.io/qwer273/pen/OJPGVZZ)
- [마우스이동에 따른 슬라이드](https://codepen.io/qwer273/pen/VwYqNqp)
- [스크롤 높이에따른pagination이벤트](https://codepen.io/qwer273/pen/rNeMWKP)
---

# 캐러셀
- [캐러셀기본](https://codepen.io/qwer273/pen/NWPemNw)
- [캐러셀활용1](https://codepen.io/qwer273/pen/KKwbYaB)
- [캐러셀활용2-1](https://codepen.io/jangka44/pen/aEwpMK)
- [캐러셀활용2-2](https://codepen.io/qwer273/pen/RwNEOgK)
- [캐러셀활용2-3](https://codepen.io/jangka44/pen/OBbBZw)
- [캐러셀 반응형](https://codepen.io/jangka44/pen/mgYrog)
- [커스터멜로우 캐러셀](https://codepen.io/qwer273/pen/povqBrx)
- [설화수_캐러셀](https://codepen.io/qwer273/pen/gObZyPg)
- [설화수_캐러셀_설명동영상](https://youtu.be/QJeeJe9zbYY)
- [탭+캐러셀 기본소스](https://codepen.io/qwer273/pen/xxbNgGO)
---

# 좌우버튼슬라이더
- [좌/우버튼 슬라이더-틀](https://codepen.io/qwer273/pen/rNaYBaj?editors=0010)
- [좌/우버튼만있는 슬라이더-틀2](https://codepen.io/qwer273/pen/yLaYGVb?editors=1010)
- [좌우 버튼과 페이지 버튼이 함께 있는 슬라이더 만들기](https://codepen.io/qwer273/pen/PowOmrq)
- [좌우 버튼과 페이지 버튼이 함께 있는 슬라이더 만들기-축약](https://codepen.io/qwer273/pen/gObXRRM?editors=0010)
---

# 탭박스
- [탭박스](https://codepen.io/qwer273/pen/mdyBYZd)
- [탭박스2](https://codepen.io/qwer273/pen/XWJevqd?editors=0010)
- [탭박스3](https://codepen.io/qwer273/pen/WNbXjNV?editors=0100)
- [탭안에 캐러셀슬라이드](https://codepen.io/qwer273/pen/RwNOWNy?editors=1100)
- [탭의 위치와 상관없이 콘텐츠와 연결되는 탭메뉴 데모](https://codepen.io/qwer273/pen/RwPedqB?editors=1010)
---

# 애니메이션
- [효과1](https://codepen.io/qwer273/pen/jOPxwYG)
- [폰트 효과](https://codepen.io/qwer273/pen/jOPxRGv?editors=1010)
- [폰트 효과2](https://codepen.io/qwer273/pen/OJVZYXa?editors=1010)
- [로딩 애니메이션](http://rwdb.kr/css_text_2/)
- [글자밀고나오기](https://codepen.io/qwer273/pen/XWbLwyd?editors=1100)
---
# 여러가지 소스
- [모바일용 메뉴구현](https://codepen.io/qwer273/pen/QWwLLQe)
- [팝업창](https://codepen.io/qwer273/pen/jOEqxWd)

- [슬라이드](https://codepen.io/qwer273/pen/zYxdOee?editors=0010)

- [자동슬라이드](https://codepen.io/qwer273/pen/KKwBRoM?editors=0010)

- [마우스올렸을때 이미지교체](https://codepen.io/qwer273/pen/GRgwrBN)

- [테이블](https://codepen.io/qwer273/pen/poyMBZK)

---

# 소스페이지
- [수업페이지](https://codepen.io/jangka44/live/WNeWeYb)
- [소스페이지1](https://codepen.io/jangka44/live/XWWBedN)
- [소스페이지2](https://codepen.io/jangka44/live/KKPQeEW)
- [자바연습](https://cdpn.io/jangka44/debug/bzeJOO)
- [컬러피커](https://shaeod.tistory.com/565)
- [애니메이션](https://daneden.github.io/animate.css/)

---

# 참고 사이트
- [이미지호스팅](https://ko.imgbb.com/)
- [CDNJS](https://cdnjs.com/)
- [RWDB](http://rwdb.kr/)
- [코딩공부1](https://kutar37.tistory.com/)
- [코딩공부2](http://tcpschool.com/)
- [캐러셀옵션](https://m.blog.naver.com/PostView.nhn?blogId=blontenote&logNo=30183353169&proxyReferer=https%3A%2F%2Fwww.google.com%2F)
- [애니메이션 효과모음](http://rwdb.kr/interestedeffects/)
- [버튼애니메이션 효과](https://m.blog.naver.com/PostView.nhn?blogId=tokyomari&logNo=220990155818&proxyReferer=https%3A%2F%2Fwww.google.com%2F)
- [이미지 효과 모음](http://rwdb.kr/mouseoverinteraction/)
              
            
!

CSS

              
                @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

html {
    font-family: "Noto Sans KR", sans-serif;
}

              
            
!

JS

              
                $('a').attr('target', '_blank');

setTimeout(function() {
    $(window).scrollTop(100000);
}, 500);
              
            
!
999px

Console