Python_WEB (436) 썸네일형 리스트형 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.. 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.. 이전 1 ··· 46 47 48 49 50 51 52 ··· 55 다음
