HTML5

[2021/12/27]국비지원 CSS3 8-(3) border-radius

border-radius 과제2 : 태극문양, 달 border-radius : border의 모서리 곡률 property 모서리 방향 : top-left, top-right, bottom-left, bottom-right 원 size : box 사이즈의 1/2 ex ) border-radius : 100px 0 0 0 = border-top-left-radius : 100px 윗 반원 : width: 200px; height : 100px ; border-radius : 100px 100px 0 0 1/4 원 : width : 100px; height : 100px ; border-top-left-radius : 100px box 출력 후 곡률 줄 모서리 방향 1. border-radius 작업내용 cs..

[2021/12/27]국비지원 CSS3 8-(2) 탭메뉴, 퀵메뉴

탭메뉴 ( 원본 O ) 탭메뉴2 ( 원본 X ) 탭메뉴2-1 탭메뉴2-2 탭메뉴2-3 퀵메뉴 ( 원본 O ) 원본 ▶ 기능 구현을 위해 제공 받은 js 코드 ◀ 더보기 더보기 tab.js function initTabMenu(tabContainerID){ var myList=document.getElementById(tabContainerID); var myTab=myList.getElementsByTagName("dt"); var myDD=myList.getElementsByTagName("dd"); for(var i=0; i

[2021/12/27]국비지원 CSS3 8-(1) 과제1 : 버튼 클론

버튼 클론 코딩 주제 : psuedo-class :active 사용하기 psuedo-class :active : 버튼을 클릭하고 있는 동안에만 작동하도록 하는 기능 이 기능에서 버튼이 눌려 있고, 눌렸을 때 나타난 창이 유지되도록 하려면 javascript, onclick 명령이 필요하다. 원본 이미지 작업내용 Blue Button » Red Button » Yellow Button » 결과물

[2021/12/23]국비지원 CSS3 5-(4) travelzoo 해외 사이트 클론

travelzoo 라는 해외사이트 main 클론 이 날은 하루 종일 수업 중 제출하는 과제들이었다. 수강생 오지게 바쁜 날이었음 원본 (체크박스 색 무시) 작업내용 본문 바로가기 The Deal Experts. Over 21 million Subscribers Worldwide. Select Your Site select your site this selection my default Travelzoo site and skip this page in the future. Asia Pacific Australia www.travelzoo.com.au 中国 cn.travelzoo.com 香港特區 www.travelzoo.com.hk 日本 www.travelzoo.co.jp Americas Canada www..

[2021/12/22]국비지원 CSS3 4-(5) 정책꾸러미 클론

정책꾸러미라는 메인노출 게시판 클론 코딩 ( 대략 과거 어떤 정부기관의 사이트에서 퍼온 이미지가 아닌가 하는. 이 역시 원본 이미지 X ) 작업내용 우측통행실시 우측보행, 7월1일부터 본격 시행 안전한 보행방법 우측통행 홍보 동영상 우측보행이 교통안전, 보행효율면에.. 시범시행 주인 "우측보행 " 호응도... 더보기 결과물