css3

[2021/12/30]국비지원 CSS3 10-(1) 29일 과제

폴라로이드 겹치기 주제 : transform, webfont 활용 : position, z-index 작업내용 여름이 깊어가고 있었다 여름이 깊어가고 있었다 여름이 깊어가고 있었다 결과물

[2021/12/29]국비지원 CSS3 9-(7) transform, transform-origin

transform : 변형 rotate : 회전각 필요한 것 transform-origin : 회전 기준점 scale : 사이즈 scale scale-x scale-y skew : 기울기각 skew skew-x skew-y translate : 이동 translate translate-x translate-y translate, skew 특 : 1개 값만 있으면 x축 우선권 transform-origin 미반영 transform-origin 반영 ( scale, skew,translate 경로 변경으로 이미지 숨김 ) 결과물 결과물2

[2021/12/29]국비지원 CSS3 9-(6) 웹폰트

배포 기준 유료 DaFont - Download fonts DaFont - Download fonts www.dafont.com 무료 ( 상업적 사용 가능 여부 및 저작권 확인 중요 ) 전체 안심글꼴 - 무료폰트(목록) | 공유 마당 (copyright.or.kr) 무료폰트(목록) | 공유 마당 gongu.copyright.or.kr 눈누 (noonnu.cc) 눈누 상업용 무료한글폰트 사이트 noonnu.cc Browse Fonts - Google Fonts Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 확장자 otf ttf woff 기타 woff2 : Chromium 베..

[2021/12/29]국비지원 CSS3 9-(5) 과제2

과제2 메뉴 활용 psuedo-class :first-child, :last-child 동작 활용 :hover 기능 : 첫번째 a를 클릭하면 N사 메인화면으로 이동 작업내용 Home HTML5 CSS3 JQuery Mobile Profile 결과물

[2021/12/29]국비지원 CSS3 9-(4) psuedo-element, psuedo-class :first

12월 31일자 내용에서 한 번에 정리할 계획 psuedo-element : 가상요소 ( 쌍 콜론 :: ) ::first-line : 해당 element 첫번째 줄의 콘텐츠 ::first-letter : 해당 element 의 첫번째 글자 psuedo-class : 가상클래스 ( 단일 콜론 : ) :first-child ( 첫째놈 ) :last-child ( 막둥이 ) ::first-line, ::first-letter 요소의 첫번째 줄에 있는 콘텐츠만 선택하여 스타일을 지정할 때 사용하는 선택자 방식으로 first-line 가상 요소 선택자라고 부릅니다. first-line 가상요소 선택자를 지정할 경우 고정된 영역이 아닌 웹브라우저 크기에 따라 유동적으로 스타일이 적용됩니다. 요소의 첫번째 글자만 선..