본문 바로가기

Python_WEB/HTML

(149)
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..
HTML5 - 190622 Basic Study 51(고정형 레이아웃 구조) 1. 단위 px 2. 고정형 레이아웃 구조 2. 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 내용1 내용2 내용3 푸터 3. 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:1px..
HTML5 - 190622 Basic Study 50(이미지 슬라이드 - 상하좌우) 1. 상하 HTML Code 회전 2. 좌우 HTML Code 회전 3. 상하 CSS Code @charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; } div#wrap{ width:300px; height:400px; border:2px solid blue; position:relative; } #wrap ul{ list-style:none; width:300px; height:400px; position:relative; } #wrap ul li{ list-style:none; width:100%; height:100%; position:absolute; top:100%; } #wrap ul li img{ width:100%; height:100%..
HTML5 - 190622 Basic Study 49(이미지 슬라이드 구현 - 액자형) 1. HTML Code 이미지슬라이드 시작 이미지슬라이드 끝 2. CSS Code @charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; } .box{ width:100px; height:100px; background:red; } div.canvas{ width:500px; height:500px; position:relative; border:3px solid blue; overflow:hidden; } div.panel{ width:3000px; position:absolute; left:0; top:0; height:500px; } div.panel img{ width:500px; height:500px; float:left; } @keyfra..
HTML5 - 190622 Basic Study 48(Animation Box - 연습문제) 1. 사전조건 너비 100px / 높이 100px / 색상 orange box1 위치 : position:relative / top 50px / left 0px box2 위치 : position:relative / top 50px / left 200px box1 0% 키프레임 : left 0px / 색상 orange box1 50% 키프레임 : top 100px / left 0px / 색상 blue / 180도 회전 box1 100% 키프레임 : left 200px / 색상 orange / 360도 회전 box2 0% 키프레임 : left 200px / 색상 orange box2 50% 키프레임 : top 100px / left 100px / 색상 blue / 180도 회전 box3 100% 키프레임 :..
HTML5 - 190622 Basic Study 47(Animation 효과) 1. animation animation : 통합 속성 animation-delay : 몇 초 후에 재생 animation-direcition : 진행방향 animation-duration : 몇 초 동안 재생 animation-iteration-count : 반복 횟수 animation-name : 이름 지정 animation-play-state : 재생 상태 지정 animation-timing-function : 함수 2. @keyframes animation과 함께 사용 3. HTML Code 애니메이션 속성 Rotation 4. CSS Code @charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; } div#ani{ width:200px; h..
HTML5 - 190622 Basic Study 46(Transition Graph) 1. HTML Code 움직이는 그래프 만들기 data1 data2 data3 data4 data5 2. CSS Code @charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; } #graph{ width:610px; border:3px solid black; } .bar{ width:10px; height:50px; background-color:red; margin:5px; transition-duration:5s; } #graph:hover>div.bar{ width:600px; transition-timing-function:linear; background-color:orange; } div.bar:nth-child(1){ transition..