Ankiwoong (1836) 썸네일형 리스트형 HTML5 - 190623 Basic Study 61(세로 네비게이션 바) 1. HTML Code Menu1 Other Menu SubMenu1 Sub_SubMenu1 Sub_SubMenu2 SubMenu2 Sub_SubMenu1 Sub_SubMenu2 Menu2 SubMenu1 Sub_SubMenu1 Sub_SubMenu2 SubMenu2 Sub_SubMenu1 Sub_SubMenu2 Menu3 SubMenu1 Sub_SubMenu1 Sub_SubMenu2 SubMenu2 Sub_SubMenu1 Sub_SubMenu2 Menu4 SubMenu1 Sub_SubMenu1 Sub_SubMenu2 SubMenu2 Sub_SubMenu1 Sub_SubMenu2 Menu5 SubMenu1 Sub_SubMenu1 Sub_SubMenu2 SubMenu2 Sub_SubMenu1 Sub_Sub.. HTML5 - 190623 Basic Study 60(풍선 도움말) 1. HTML Code css3 구현 예제 실습하기 풍선 도움말 힌트! css실전예제1 css만으로 구현하는 풍선 도움말 2. CSS Code @charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; } ul,li,ol{ list-style:none; } a{ text-decoration:none; color:inherit; } /* 풍선도움말 만들기 */ a.tooltip, a.tooltip h3{} a.tooltip span{ display:none; padding:5px 10px; margin-left:10px; border-radius:5px; box-shadow:5px 5px 8px gray; } a.tooltip:hover span{ posi.. 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) : 특정한 각도만큼 .. 이전 1 ··· 178 179 180 181 182 183 184 ··· 230 다음
