전체 글 (1854) 썸네일형 리스트형 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) : 특정한 각도만큼 .. Python Learn the basics Quiz 93 Q> On the chest keypad is a grid of numbered dots. (가슴 키패드에는 번호가 매겨진 점들로 구성된 격자가 있습니다.) The grid is comprised of a square shaped array of dots and contains lines that connect some pairs of adjacent dots. (그리드는 정사각형 모양의 도트 배열로 구성되며 인접한 도트 쌍을 연결하는 선을 포함합니다.) The answer to the code is the number of squares that are formed by these lines. (코드에 대한 대답은이 선들에 의해 형성된 제곱의 수입니다.) For example, in the figu.. 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.. 이전 1 ··· 181 182 183 184 185 186 187 ··· 232 다음
