css3

[2021/12/29]국비지원 CSS3 9-(3) 과제1 + 버튼

과제1 형태 : a로 만든 메뉴 항목 주제 : linear-gradient, rgba 동작 활용 psuedo-class = :hover, :active 작업내용 Home HTML5 CSS3 BOARD PROFILE Home HTML5 CSS3 BOARD PROFILE 결과물 버튼 형태 : 버튼 활용 : div 동작활용 :hover HTML5 결과물 hover 했을 때 active 된 것처럼 착시 일으키도록 position : relative된 원본에서 hover할 때 1px 내려줌

[2021/12/29]국비지원 CSS3 9-(2) rgb, rgba, hsl, hsla, opacity

rgb : red, green, blue로 판단하는, 흔히 아는 색상 코드 0 ~ 255 = 총 256색 255 = ff rgba : red, green, blue, alpha = 색상 코드 + 투명도 alpha = 0.0 ~ 1.0 hsl : hue, saturation, lightness ( 색조, 채도, 명도 ) 70년대의 IT 개발자들에 의해 설계된 rgb 대체용 색상 코드로, 같이 개발된 것에 hsv라는 색상 코드도 있음 number, n%, n% hsla : hue, saturation, lightness, alpha = hsl색상 코드 + 투명도 opacity : 투명도 단독 property 0.0 ~ 1.0 ( 완전 투명 0.0 ~ 반투명 0.5 ~ 불투명 1.0 ) rgb 결과물 rgba..

[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..