정보실

웹학교

정보실

css CSS 새로운 속성들

본문

놀라운 기능의 새로운 속성들이 추가되고 있지만 브라우저 지원은 확인해 봐야 합니다.


1. Box-decoration-break

이 CSS 속성은 여러 줄, 열 또는 페이지에서 여러 요소가 나뉘어 질 때 요소의 단편을 렌더링하는 방법을 지정합니다.

https://codepen.io/ananyaneogi/pen/GeRoRO 


2. attr()

attr()을 사용하여 CSS에서 선택된 요소의 값을 검색 할 수 있습니다. 이 방법은 접근성 목적에 도움이 될 수 있습니다.

https://codepen.io/ananyaneogi/pen/gEpeda 


3. backface-visibility

이 CSS 속성은 사용자 방향으로 돌릴 때 요소의 뒷면이 보이는지 여부를 설정합니다. 카드 뒤집기 UI를 생각하십니까?

https://codepen.io/ananyaneogi/pen/Ezmyeb 


4. conic-gradient

그라디언트는 멋진 것입니다. 

선형 그래디언트로 배경을 스타일링 한 적이 있지만 원뿔형 그라디언트를 사용하여 순수한 CSS를 사용하여 원형 차트를 만들 수 있다는 것을 알고 계십니까?

https://codepen.io/ananyaneogi/pen/mYmrMJ 


5. filter

CSS 필터가있을 때 포토샵 필터 효과가 필요한 사용자. 필터 기능은 입력 이미지의 모양에 그래픽 변경 사항을 적용합니다.

blur, brightness, contrast, grayscale, hue-rotate, opacity, invert, sepia, saturate, drop-shadow 등 우리가 얻을 수 있는 효과는 다음과 같습니다.

https://codepen.io/ananyaneogi/pen/YbVpyG 


드롭 섀도우 필터는 입력 이미지에 그림자를 적용 할 수 있습니다.

https://codepen.io/ananyaneogi/pen/PvmbeR 


6. mix-blend-mode

이 CSS 속성은 요소의 내용이 요소의 배경 또는 부모의 내용과 어떻게 혼합되어야 하는지를 설정합니다.

https://codepen.io/ananyaneogi/pen/rgwNLx 


7. first-letter

first-letter 가상 요소로 드롭을 만들 수 있습니다.

https://codepen.io/ananyaneogi/pen/oRWBBE 


8. shape-outside

이 CSS 속성은 간단한 직사각형 상자가 아닌 복잡한 객체를 중심으로 인접한 인라인 컨텐츠를 배치하도록 사용자 정의하는 방법을 제공합니다.

https://codepen.io/ananyaneogi/pen/ZNKepv 


9. writing-mode

이 CSS 속성은 텍스트 줄이 가로 또는 세로로 배치되는지 여부를 설정합니다. 

우리는 다음 값을 가질 수 있습니다.

  • horizontal-tb - 내용은 왼쪽에서 오른쪽으로 수평으로 흐르고 위쪽에서 아래쪽으로 수직으로 흐릅니다.
  • vertical-lr - 내용은 왼쪽에서 오른쪽으로 수평으로 흐르고 수직으로 위쪽에서 아래쪽으로 흐릅니다.
  • vertical-rl - 내용이 오른쪽에서 왼쪽으로 가로로, 세로로 위에서 아래로 흐릅니다.

https://ananyaneogi.github.io/css-experiments/quote.html 


10. Adding gradient to text

이것은 -webkit-background-clip : text 및 -webkit-text-fill-color : 투명한 CSS 속성의 조합으로 이루어집니다.

https://codepen.io/ananyaneogi/pen/pmPPpY 


11. Smooth scroll snap

scroll-snap-type CSS 속성은 스크롤 지점에 스냅 점이 적용되는 방식을 설정합니다.

https://codepen.io/ananyaneogi/pen/mYmodx 



페이지 정보

조회 87회 ]  작성일19-05-26 12:25

웹학교