Ankiwoong (1841) 썸네일형 리스트형 HTML5 - 190623 Basic Study 58(박스 그림자 / 테두리 동적효과) 1. HTML Code 2. CSS Code @charset "utf-8"; /* CSS Document */ * { margin: 0 auto; padding: 0; } /* 기본정의 */ h1 { margin-bottom: 30px; text-align: center; } div.box { background: gold; padding: 20px; width: 200px; height: 200px; } div.wrap-box { background: silver; position: relative; transition: 1.5s; width: 250px; height: 250px; padding: 10px; /* 그림자 삭제 */ box-shadow: 0 0 0 black; /* 위치 - 제자리 */.. HTML5 - 190623 Basic Study 57(Rotation Circle) 1. HTML Code 2. CSS Code @charset "utf-8"; /* CSS Document */ #wrapper { width: 960px; height: 500px; margin: 30px auto; } .circle-container { margin: 0 auto; position: relative; width: 440px; height: 440px; background: transparent; /* 밴더프릭스 */ -webkit-animation: rotation 6s linear 0s infinite normal none; -moz-animation: rotation 6s linear 0s infinite normal none; -ms-animation: rotation 6s lin.. HTML5 - 190623 Basic Study 56(3차원 회전 주사위) 1. HTML Code 회전하는 주사위 1 2 3 4 5 6 2. CSS Code @charset "utf-8"; /* CSS Document */ * { margin: 0; padding: 0; } header { width: 200px; height: 200px; position: relative; } header div { width: 200px; height: 200px; position: absolute; left: 0; top: 0; } header div:nth-child(1) { background: red; } header div:nth-child(2) { background: blue; } header div:nth-child(3) { background: green; } header .. 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.. 이전 1 ··· 179 180 181 182 183 184 185 ··· 231 다음
