#13 CSS z-index로 앞뒤로 보내기(feat. parallax효과) - 웹 코딩 강좌

웹 디자이너를 위한 웹 코딩 강좌 열세 번째 시간입니다.
오늘도 포토샵 레이어 순서와 비슷한 개념으로 css z-index를 통해 앞뒤 순서 정할 수 있는 방법을 배워볼게요. 아주 쉽습니다. 포지션을 배웠다면, 같이 알아두면 되는 개념이에요.
z-index의 기본값은 0이고, z축 기준으로 앞으로 보내려면 수치를 크게 하면 됩니다. 음수로도 표현이 가능합니다.
z-index를 사용하려면 꼭 position에 relative, absolute, fixed와 같이 값이 있어야 적용 됩니다.

간단한 자바스크립트를 통해 스크롤시 패럴렉스 효과 주는 방법도 맛보기로 보실 수 있습니다.

🌟예제 다운은 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.🌟

🚀 디자인베이스 멤버십 가입하면 다양한 고급 강좌와 예제 파일을 받아볼 수 있어요 🚀
┗    / @designbase  

*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.

누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자이너로서 웹 코딩 공부의 첫단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다.

☞ 디자인베이스 소개 : http://designbase.co.kr/about/
☞ 공식 웹사이트 : http://designbase.co.kr/
☞ 네이버블로그 : https://blog.naver.com/designbasekorea


*BGM 사용 출처

Music: Upbeat Inspiring Corporate by Wavecont

Video Link:    • Wavecont - Upbeat Inspiring Corporate...  

Song: LAKEY INSPIRED - Chill Day (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
Video Link:    • LAKEY INSPIRED - Chill Day (Vlog No C...  

Lights by Sappheiros   / sappheirosmusic  
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream: https://bit.ly/LightsSappheiros
Music promoted by Audio Library    • Lights – Sappheiros (No Copyright Music)  


Music: Tokyo Music Walker - Way Home