css3

[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/27]국비지원 CSS3 7-(2) 메뉴 hover 효과 주기

메뉴 목록에 hover 효과 주기 background-image를 이용한 메뉴에 hover와 class를 이용한 focus고정 주기 ( pseudo-class가 아닌 html class명 ) Script_Navi ( header 메뉴 ) 1. 메뉴목록의 버튼에 hover 효과 주기 방법 : 클릭기능 없이, hover만 했을 때 변경되는 효과를 확인할 수 있도록. 메뉴1 COMPANY회사소개 PRODUCT제품소개 SERVICE유지보수 CUSTOMMER고객지원 EDUCATION교육세미나 메뉴2 홈 회사소개 뉴스 제품 서비스 고객 적용사례 메뉴3 COMPANY PRODUCT SERVICE CUSTOMMER EDUCATION 메뉴4 COMPANY PRODUCT SERVICE CUSTOMMER EDUCATION ..

[2021/12/27]국비지원 CSS3 7-(1) N사 오늘의 키친 2

과제로 제출한 내용 2022.01.30 - [개발입문뉴비의 기록 ( FrontEnd )/html] - [2021/12/14]국비지원 HTML5 코딩툴 기본학습 6-(3) 수업 중 과제 : N사 오늘의 키친 페이지 마크업 [2021/12/14]국비지원 HTML5 코딩툴 기본학습 6-(3) 수업 중 과제 : N사 오늘의 키친 페이지 마크업 앞서 올린 베이킹 파트를 html5 마크업 한 후에는 동일한 언제 적 키친의 파스타 파트를 마크업 해서 수업 중 제출한 과제이다. 본래의 구도는 이러하다. 본문 바로가기 오늘의 키친 imnewbiecoder.tistory.com 마찬가지로 이 파일을 이어서 작업함 작업내용 (sub.css) @import url(reset.css); /* sub.css */ /* commo..