Python_WEB (436) 썸네일형 리스트형 HTML5 - 190623 Basic Study 59(풀화면 동영상 - 서브메뉴) 1. 추천 Site 대상주식회사 - https://www.daesang.com/kr/#DAESANG 대상주식회사 건강한 식문화로 행복한 미래를 창조하는 기업 - 대상주식회사 www.daesang.com 2. Webm Sample 3. HTML Code Company Logo Menu-1 SubMenu-1 SubMenu-2 SubMenu-3 SubMenu-4 SubMenu-5 SubMenu-6 SubMenu-7 Menu-2 SubMenu-1 SubMenu-2 Menu-3 SubMenu-1 SubMenu-2 SubMenu-3 Menu-4 SubMenu-1 SubMenu-2 SubMenu-3 4. CSS Code @charset "utf-8"; /* CSS Document */ ` html,body{ widt.. HTML5 - 190623 Basic Study 58(박스 그림자 / 테두리 동적효과) 1. HTML Code 2. CSS Code @charset "utf-8"; /* CSS Document */ * { margin: 0 auto; padding: 0; } /* 기본정의 */ h1 { margin-bottom: 30px; text-align: center; } div.box { background: gold; padding: 20px; width: 200px; height: 200px; } div.wrap-box { background: silver; position: relative; transition: 1.5s; width: 250px; height: 250px; padding: 10px; /* 그림자 삭제 */ box-shadow: 0 0 0 black; /* 위치 - 제자리 */.. HTML5 - 190623 Basic Study 57(Rotation Circle) 1. HTML Code 2. CSS Code @charset "utf-8"; /* CSS Document */ #wrapper { width: 960px; height: 500px; margin: 30px auto; } .circle-container { margin: 0 auto; position: relative; width: 440px; height: 440px; background: transparent; /* 밴더프릭스 */ -webkit-animation: rotation 6s linear 0s infinite normal none; -moz-animation: rotation 6s linear 0s infinite normal none; -ms-animation: rotation 6s lin.. HTML5 - 190623 Basic Study 56(3차원 회전 주사위) 1. HTML Code 회전하는 주사위 1 2 3 4 5 6 2. CSS Code @charset "utf-8"; /* CSS Document */ * { margin: 0; padding: 0; } header { width: 200px; height: 200px; position: relative; } header div { width: 200px; height: 200px; position: absolute; left: 0; top: 0; } header div:nth-child(1) { background: red; } header div:nth-child(2) { background: blue; } header div:nth-child(3) { background: green; } header .. HTML5 - 190623 Basic Study 55(Transform 3차원) 1. transform 3차원 translate3d(translateX, translateY, translateZ) : 특정한 크기만큼 이동 translateX(translateX) : X축으로 특정한 크기만큼 이동 translateY(translateY) : Y축으로 특정한 크기만큼 이동 translateZ(translateZ) : Z축으로 특정한 크기만큼 이동 scale3d(scaleX, scaleY, scaleZ) : 특정한 크기만큼 확대 및 축소 scaleX(scaleX) : X축으로 특정한 크기만큼 확대 및 축소 scaleY(scaleY) : Y축으로 특정한 크기만큼 확대 및 축소 scaleZ(scaleZ) : Z축으로 특정한 크기만큼 확대 및 축소 rotate3d(angleX, angleY, .. HTML5 - 190623 Basic Study 54(Transform 2차원) 1. transform 2차원 translate(translateX, translateY) : 특정한 크기만큼 이동 translateX(translateX) : X축으로 특정한 크기만큼 이동 translateY(translateY) : Y축으로 특정한 크기만큼 이동 scale(scaleX, scaleY) : 특정한 크기만큼 확대 및 축소 scaleX(scaleX) : X축으로 특정한 크기만큼 확대 및 축소 scaleY(scaleY) : Y축으로 특정한 크기만큼 확대 및 축소 skew(angleX, angleY) : 특정한 각도만큼 기울임 skewX(angleX) : X축으로 특정한 각도만큼 기울임 skewY(angleY) : Y축으로 특정한 각도만큼 기울임 rotate(angleZ) : 특정한 각도만큼 .. HTML5 - 190622 Basic Study 53(고정형 네비게이션 바) 1. HTML Code 고정형 네비게이션 바 section1 section2 section3 2. CSS Code @charset "utf-8"; /* CSS Document */ *{ margin:0 auto; padding:0; } ul, li{ list-style:none; } html, body{ width:100%; height:100%; } section{ width:100%; height:100%; } section:nth-of-type(1){ background:gold; } section:nth-of-type(2){ background:silver; } section:nth-of-type(3){ background:pink; } h1{ position:fixed; background:bl.. HTML5 - 190622 Basic Study 52(유동형 레이아웃 구조) 1. 단위 % 2. 유동형 레이아웃 구조 3. HTML Code 유동형 레이아웃 방식(와이어프레임) 회사로고 Menu-1 SubMenu-1 SubMenu-2 SubMenu-3 Menu-2 SubMenu-1 SubMenu-2 Menu-3 SubMenu-1 SubMenu-2 SubMenu-3 Menu-4 SubMenu-1 사이드메뉴(200px) 내용2 푸터 4. CSS Code @charset "utf-8"; /* CSS Document */ *{ margin:0 auto; padding:0; } ul, li{ list-style:none; } /* 데스크탑은 960px 이상 */ #wrap{ width:900px; border:1px solid black; } header{ width:95%; border.. 이전 1 ··· 45 46 47 48 49 50 51 ··· 55 다음
