- http://stackoverflow.com/questions/16629561/css-vertical-align-middle-not-working
- Vertically Align text in a Div
- HTML divs, how to wrap content?
- Text Blocks Over Image
- Design Considerations: Text on Images
- How to find the next element which has an ID attribute using jQuery
- Simple HTTP request handler
- Google Fonts
- Chrome DevTools Overview # Audits
- Google Analytics
- 움짤로 이해하는 반응형 웹디자인의 9가지 요소
- Process CSS with ease e.g. Vendor prefix
- Single Page Site with Smooth Scrolling, Highlighted Link, and Fixed Navigation [demo]
- jQuery: Event, when User stops scrolling
- jQuery scroll() detect when user stops scrolling
- jQuery 1.9.1 $.event.handle.apply alternative
- Media Queries: How to target desktop, tablet and mobile?
- Detect IF hovering over element with jQuery
- How to Create a Block Hover Effect for a List of Links
- Cascading Style Sheets home page
- CENTERING THINGS
- CSS-TRICKS
- Quick CSS Trick: How To Center an Object Exactly In The Center
- CSS3 Animation Cheat Sheet
- How do I view events fired on an element in Chrome Web Developer?
- Chrome Developer Tools – monitorEvents
Examples
-
- Examples #1, #2
- Chrome addEventListener animation events
- [demo] [github]
- An Introduction To CSS3 Keyframe Animations May 17, 2011
- Keyframe Animation Syntax July 18, 2014
-
- Examples #1, #2
- CSS Masking
- Clipping and Masking in CSS December 2, 2014
-
Assignment
-
Solution
-
Tips
- 첫 keyframe 과 마지막 keyframe 부드럽게 연결
시키기 [바로보기]
- 0% 와 100% 를 같은 이미지로 하면 되네요..
- 이미지로 화면을 가득 채우는건 감싸고 있는 요소(예제에선 .images)와 안에 요소(background-size)의 넓이와 높이를 모두 100% 로 하면 되네요..
- 마우스를 올려놓으면 위로 올라가는 메뉴 Live Demo
- 두번 째 숙제에 나온 hover 효과 따라하기 [Live Demo]
- The Semantic, Responsive Navicon October 8, 2012 Live demo, CSS
- 강의 내용 정리
- 첫 keyframe 과 마지막 keyframe 부드럽게 연결
시키기 [바로보기]
- Layout 구성
- CSS 레이아웃을 배웁시다
- CSS Transparency Settings for All Browsers November 4, 2007
- 코드로 디자인하기 - Spoqa Blog
- 자동으로 들여쓰기 맞춰주는 Brackets Extensions 설치하기
- Browser 에서 바로 코딩 해보기