본문 바로가기

Python_WEB/HTML

(73)
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..
HTML5 - 190622 Basic Study 45(transition 효과 주기) 1. Transition transition transition-delay transition-duration transition-property : 전환효과가 적용될 속성을 지정(기본값 all) transition-timing-function: ease linear ease-in ease-out ease-in-out 2. HTML Code transition 효과 주기 box 3. CSS Code @charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; } .box{ width:100px; height:100px; background:red; } /* 글자중앙으로 맞추기 */ .box{ text-align:center; line-height:100px..
HTML5 - 190616 Basic Study 44(WebSite Layout Basic 2) 1. Section HTML Code Main Article Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pell..
HTML5 - 190616 Basic Study 43(WebSite Layout Basic 1) 1. Website 제작 실습 - 구성 요소 : Header / Section / Footer / Navigation-gnb / Navigation-gnb-submenu Navigation-lnb / Navigation-lnb-submenu / aside - 총 3행 분할 구조 ㄱ. 1행 : Header / Navigation-gnb / Navigation-gnb-submenu / Navigation-lnb / Navigation-lnb-submenu ㄴ. 2행 : Section / aside ㄷ. 3행 : Footer 2. CSS 초기화 코드(동일한 출력 만들기) *{ margin:0 auto; padding:0; } ul,li,ol{ list-style:none; } a{ text-decoration..
HTML5 - 190616 Basic Study 42(박스 가로 방향 배치) 1. HTML Code 박스 가로 방향으로 배치하기 주메뉴1 서브메뉴1 주메뉴2 서브메뉴2 주메뉴3 서브메뉴3 박스 가로 방향으로 배치하기 2. CSS Code @charset "utf-8"; /* CSS Document */ /* CSS 초기화 선수작업 */ *{ margin:0; padding:0; } ul,li,ol{ list-style:none; } a{ text-decoration:none; color:black; } /* 박스 가로방향으로 배치하기 */ /* 1) float:left */ #papa{ /* float:left; */ } /* 2) display:inline-block */ #papa li{ /* display:inline-block; */ border:1px solid red;..