인터렉티브 웹 4 - z축 원근감

box1 ~ box5는 실제로는 크기가 같지만, z축을 이용해 원근감을 준다. HTML Home Info About Community Contact Player 1 Player 2 Player 3 Player 4 Player 5 Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ips..

2022.03.16

인터렉티브 웹 3 - 영상제어

HTML Paris Exceptional Creation French Jewelry & Watch Maker Jewelry Jewelry Nulla ex risus, varius at mauris quis, fringilla accumsan urna. Cras eleifend tempor nunc id cursus. Mauris in elit ut risus feugiat tincidunt a nec erat. Donec ornare finibus massa. In facilisis finibus rutrum. Sed tempor vitae erat sit amet molestie. Integer eros tellus, molestie a dictum sit amet, lobortis non turpis..

2022.03.16

인터렉티브 웹 2 - 원페이지 슬라이드

HTML Full Blossom Be Colorful Time on Board Shiny Addict FULL BLOSSOM Lorem Ipsum is simply dummy text of the printing and typesetting industry BE COLORFUL Lorem Ipsum is simply dummy text of the printing and typesetting industry TIME ON BOARD Lorem Ipsum is simply dummy text of the printing and typesetting industry SHINY ADDICT Lorem Ipsum is simply dummy text of the printing and typesetting in..

2022.03.15

인터렉티브 웹 1 - 3D rotate

HTML point 1 - script src에 defer를 사용하면 브라우저가 페이지의 파싱을 모두 끝내면 스크립트가 실행된다. Homme Girl Kids Vogue Homme Travis Crown Best Qualified Goods Sports tremendous Vogue Girl Accessories Jewelry Play & Dolls Vogue Kids Clothes CSS point 1 - 풀스크린 모드에서는 body와 wrap에 아래와 같이 스타일을 주는게 포인트다. body{width:100%; height:100%;} .wrap{position:fixed; width:100%; height:100%;} point 2 - height 값을 %로 줄 때는 상위계층(부모, 최소 body..

2022.03.15

반응형 네비게이션 2

반응형 네비게이션 2 해상도 별 다르게 표현되는 네비게이션 햄버거먹구잡다 조아란1 조아란2 조아란3 조아란4 조아란5 CSS /* 와이드 pc */ header{ height:60px; background:#F90; padding-top:20px} header .menuOpen{position:absolute; right:20px; top:20px; display:none} header .mainMenu{width: 450px; margin:0 auto; background:#FC3;} header .mainMenu ul{overflow:hidden;} header .mainMenu li{ float:left; margin-right:15px} header .mainMenu li a{display:blo..

2022.01.11

반응형 네비게이션 1

jQuery 반응형 네비게이션 1 해상도 별 다르게 표현되는 네비게이션 menu01 menu02 menu03 menu04 menu05 CSS /* CSS Document */ html,body{height: 100%;} *{margin:0; padding:0} a{ color:#333; text-decoration:none} ul{ list-style:none} #wrap{position:relative; width:1200px; height:100%; margin:0 auto; border:1px solid #ccc; overflow:hidden;} header{width:300px; height:100%; background:#ccc} .btn{ font-size:1.2rem; color:#333; ..

2022.01.11