Ankiwoong (1841) 썸네일형 리스트형 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.. Python Learn the basics Quiz 92 Q> You are the owner of a cafe where 3 chefs work: a JapaneseCook, RussianCook and ItalianCook. (당신은 3 명의 요리사가 일하는 카페의 주인 인 JapaneseCook, RussianCook 및 ItalianCook입니다.) Each of them can prepare the national food and beverage: (그들 각각은 국가 음식과 음료를 준비 할 수 있습니다 : ) - JapaneseCook: Sushi and Tea;(초밥과 차; ) - RussianCook: Dumplings and Compote;( 만두와 콩트) - ItalianCook: Pizza and Juice.(피자와 주스. Your task .. 이전 1 ··· 180 181 182 183 184 185 186 ··· 231 다음
