[쉽게 배우는 H.C.J] Chapter 4 - Advanced CSS 추가 기능

1. Advanced CSS(CSS3)

• 공식적으로 CSS3 모듈의 표준 규격이 존재하지 않아, 브라우저 벤더들이 독자적으로 자신들의 브라우저에 맞게 기능 구현 -> 벤더 프리픽스(vendor prefix)가 포함된 브라우저별 코드를 모두 나열해야 한다는 불편함 존재
• 브라우저별 벤더 프리픽스를 알고 있어야 하고, 표준 규약은 브라우저별로 나열한 코드 마지막에 작성해 주어야 한다.
• 모두 나열하기 힘들기 때문에 가장 많이 쓰는 브라우저 위주로 쓰도록 하자

※ 대표적 벤더 프리픽스

-ms-	인터넷 익스플로러
-o-	오페라
-moz-	파이어폭스
-webkit-	크롬, 사파리

 

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

 

3. 그래디언트를 사용할 수 있도록 선형 그래디언트 linear-gradient와 원형 그래디언트 radial-gradient를 제공한다.

 

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

 

5. 트랜지션은 어떤 형태에서 다른 형태로의 변환을 주는 기능으로, transition 속성에 형태변환 내용과 지속 시간을 기술해서 사용한다.

 

6. Advances CSS에서 애니메이션은, 애니메이션 규칙 등을 @keyframes 규칙에 정의하고 이 정의한 규칙을 필요한 곳에서 animaation을 사용해서 쓴다.

 

7. 필터는 이미지 등에 사진에서 사용하는 블러, 밝기 조절, 세피아와 같은 필터 기능을 filter 속성에 blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() 등을 지정해서 사용한다.

 

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

 

9. 웹 폰트는 @font-face를 사용해서 사용할 폰트명(font-family)과 폰트 파일명(src)을 정의한 후 정의된 웹 폰트명을 적용할 태그에 font-family 속성을 사용해서 쓴다.

 

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