Python_WEB/HTML (151) 썸네일형 리스트형 HTML5 - 190623 Basic Study 63(아코디언 네비게이션 바) 1. HTML Code Menu1 SubMenu1 SubMenu2 Menu2 SubMenu1 SubMenu2 Menu3 SubMenu1 SubMenu2 Menu4 SubMenu1 SubMenu2 Menu5 SubMenu1 SubMenu2 2. CSS Code @charset "utf-8"; /* CSS Document */ * { margin: 0; padding: 0; } ul, li, ol { list-style: none; } a { text-decoration: none; color: inherit; } /* 아코디언 디자인하기 */ #navi{ width:150px; } #navi ul>li{ background:orange; line-height:2.5; text-align:center; bo.. HTML5 - 190623 Basic Study 62(드롭다운 네비게이션 바) 1. HTML Code Menu1 SubMenu1 SubMenu2 Menu2 SubMenu1 SubMenu2 Menu3 SubMenu1 SubMenu2 Menu4 SubMenu1 SubMenu2 Menu5 SubMenu1 SubMenu2 2. CSS Code @charset "utf-8"; /* CSS Document */ * { margin: 0; padding: 0; } ul, li, ol { list-style: none; } a { text-decoration: none; color: inherit; } *{ text-align:center; } /* 부메뉴가 있는 네비게이션바 2depth 네비게이션바 */ #navi{ } #navi>ul{ display:flex; width:60%; } #nav.. 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 .. 이전 1 ··· 9 10 11 12 13 14 15 ··· 19 다음
