개발입문뉴비 - 국비지원 ( Front End )/css

[2021/12/29]국비지원 CSS3 9-(1) gradient

gradient : 그라디언트 gradient property linear-gradient : 선형 그라디언트 background-image : linear-gradient () setting ( direction = deg ) linear-gradient ( to direction, start color, end color ) linear-gradient ( deg, start color, end color ) linear-gradient ( to direction, first color n%, nth color n%, last color n% ) direction : start ( direction ) or end ( to direction ) top left bottom right top left ..

[2021/12/27]국비지원 CSS3 8-(5) shadow

shadow : 그림자 text-shadow text-shadow1 text-shadow2 text-shadow3 text-shadow4 box-shadow box-shadow1 box-shadow2 box-shadow3 box-shadow4 1. text-shadow text-shadow : 텍스트에 그림자를 설정하는 property setting 순서 : x축offset y축offset blursize colorcode text-shadow1 HTML5 CSS3 결과물 text-shadow2 HTML5 CSS3 결과물 text-shadow3 HTML5 CSS3 JavaScript 결과물 text-shadow4 HTML5 HTML5 결과물 2. box-shadow box-shadow : 블록, 박스에 ..

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

border-image : 색 대신에 이미지파일을 이용해서 border를 출력하는 property ( 통합 ) border-image : url( 이미지 경로 ) x축-sprite값 y축-sprite값 repeat repeat-style border-image-source : url( 이미지 경로 ) border-image-slice : 3x3 size border-image-repeat stretch : 늘리기 repeat : 반복 round : 이미지의 마지막을 작게 출력해서 잘리지 않도록 space : 이미지 잘려도 상관없을 때 브라우저에 따라서는 css3 property를 완벽 구현하지 못 하는 경우가 있어서 식별 접두사가 필요한 property가 다수 식별 접두사 -webkit- : Safari..

[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