CH4- sec4태그를 표현하는 CSS와 Advanced CSS3

<section 04 :Advanced CSS의 추가기능 >

 

▶현재 CSS는 실렉터, 박스모델, 배경과 테두리, 이미지 관련, 텍스트 효과, 2D/3D 트랜스폼, 애니메이션, 폰트, 다단기능을 제공함

 

▶ Advanced CSS사용할 때는 속성에 벤더 프리픽스를 추가하고 스타일 구문의 마지막에 표준규약을 기술함

벤더 프리픽스	해당 웹 브라우저
-ms-	인터넷 익스플로러
-o-	오페라
-moz-	파이어폭스
-webkit-	크롬, 사파리

 

▶ 테두리와 배경 : border-radius, box-shadow, border-image, backgroun-size 속성, 배경 이미지 중첩 기능 등이 추가됐으며, 텍스트 효과에는 텍스트에 그림자를 주는 text-shadow속성이 추가

 

▶ 그래디언트를 사용할 수 있도록 선형 그래디언트 linear- gradient와 원형 그래디언트 radial-gradient를 제공함

 : gradation효과를 지원, 그라데이션은 선형과 원형 두개의 타입으로 제공

 

▶ 트랜스폼은 transform 속성의 값으로 이동할 때는 translate(), 회전할 때는 rotate() , 확대/축소할 때는 scale(), 왜곡을 할 때는 skew() 를 사용함

 

▶ Advenced CSS에서 애니메이션은 애니메이션 규칙 등을 @keyframes규칙에 정의하고 이 정의한 규칙을 필요한 곳에서 애니메이션을 사용해서 씀

 

▶ 필터는 이미지 등에 사진에서 사용하는 블러, 밝기조절, 세피아와 같은 필터 기능을 필터속성에서 지정해서 사용할 수 있음

 

▶이미지 스타일에서는 CSS3의 속성 등을 사용해서 라운드 이미지, 썸네일 이미지, 반응형 이미지, 이미지에 텍스트 추가, 폴라로이드 이미지, 이미지 모달 등을 작성할 수 있음

: 이미지 편집 프로그램을 사용하지 않고도 이미지를 꾸밀 수 있음

 

▶ 웹 폰트는 @font-face를 사용해서 사용할 폰트명과 폰트파일명을 정의한 후 정읟된 웹 폰트명을 적용할 태그에 font-family 속성을 사용해서 씀

 

▶ 다단은 신문과 같은 텍스트의 다단으로 , CSS3에서 다단을 나누는 방법에는 column-count 속성과 column-width 속성을 사용하는 방법이 있음