Python_WEB/HTML (151) 썸네일형 리스트형 HTML5 - 190623 Basic Study 55(Transform 3차원) 1. transform 3차원 translate3d(translateX, translateY, translateZ) : 특정한 크기만큼 이동 translateX(translateX) : X축으로 특정한 크기만큼 이동 translateY(translateY) : Y축으로 특정한 크기만큼 이동 translateZ(translateZ) : Z축으로 특정한 크기만큼 이동 scale3d(scaleX, scaleY, scaleZ) : 특정한 크기만큼 확대 및 축소 scaleX(scaleX) : X축으로 특정한 크기만큼 확대 및 축소 scaleY(scaleY) : Y축으로 특정한 크기만큼 확대 및 축소 scaleZ(scaleZ) : Z축으로 특정한 크기만큼 확대 및 축소 rotate3d(angleX, angleY, .. HTML5 - 190623 Basic Study 54(Transform 2차원) 1. transform 2차원 translate(translateX, translateY) : 특정한 크기만큼 이동 translateX(translateX) : X축으로 특정한 크기만큼 이동 translateY(translateY) : Y축으로 특정한 크기만큼 이동 scale(scaleX, scaleY) : 특정한 크기만큼 확대 및 축소 scaleX(scaleX) : X축으로 특정한 크기만큼 확대 및 축소 scaleY(scaleY) : Y축으로 특정한 크기만큼 확대 및 축소 skew(angleX, angleY) : 특정한 각도만큼 기울임 skewX(angleX) : X축으로 특정한 각도만큼 기울임 skewY(angleY) : Y축으로 특정한 각도만큼 기울임 rotate(angleZ) : 특정한 각도만큼 .. 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% 키프레임 :.. 이전 1 ··· 10 11 12 13 14 15 16 ··· 19 다음
