본문 바로가기

Python_WEB/HTML

(73)
HTML5 - 190701 Basic Study 65(프린터, 모니터 CSS) 1. HTML Code 안녕하세요 welcom to welcome to world 감사합니다 2. 모니터용 CSS @charset "utf-8"; /* ex01-mo.css - 모니터용 스타일시트 */ /* CSS Document */ h1{ background:red; } @font-face { font-family: '나눔고딕'; src: local('NanumGothic'), url('NanumGothic.eot'), url('NanumGothic.ttf'), url('NanumGothic.woff'); } h1{ font-family:'나눔고딕' } 3. 프린터용 1 CSS @charset "utf-8"; /* ex01-pr.css - 프린터용 스타일시트 */ /* CSS Document */ @..
HTML5 - 190623 Basic Study 64(에릭마이어 reset.css) 1. CSS Code html, body, div, span, applet‎, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure..
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; /* 위치 - 제자리 */..