앵커 링크에 부드러운 스크롤 효과를 추가합니다. scroll-behavior: auto|smooth|initial|inherit; scroll-behavior 속성은 사용자가 스크롤 가능한 박스 내의 링크를 클릭할 때, 스크롤 위치를 곧바로 점프하는 대신 부드럽게 애니메이션할지 여부를 지정할 수 있습니다. 값 설 명 auto 기본값. 스크롤 박스 내의 요소 간에 직선 점프 "스크롤 효과"를 허용합니다. smooth 스크롤 박스 내의 요소 간에 부드러운 애니메이…

float 속성은 문서 내부에서 이미지 등을 띄워 출력하기 위해 만들어진 속성입니다. 그런데 이를 활용하다 보니 레이아웃에도 사용할 수 있어서 20년 넘게 사용되어 왔던 것입니다. 하지만 레이아웃 구성을 위해 만들어진 속성이 아니다 보니 처음 보면 납득하기 힘들고, 어떻게 활용해야 할지 잘 모르는 경우가 많습니다. 그래서 CSS3에서는 레이아웃을 구성할 때 사용할 수 있는 전용 속성을 추가했는데, 그게 바로 Flex 속성과 Grid 속성입니다.  Flex 속성과 Grid 속성은…

CSS 그라디언트에 –moz- 나 –webkit- 같은 프리픽스가 많이 사용됩니다. 속성에 사용되는 프리픽스는 마이크로소프트, 모질라, 구글, 애플, 오페라 등 개발사들이 배포하는 브라우저에 실험적인 기능이 필요할 때 사용됩니다. 이것을 벤더 프리픽스(Vendor Prefix)라 부르며 번역하면 “공급업체 접두사”라는 뜻으로 풀이됩니다. 과거에는 실험적인 기능이 많아서 프리픽스가 굉장히 많이 사용되어 왔지만 현재는 실험적인 기능 대부분이 표준으로 자리 잡아 준 덕에 프리픽스가…

CSS3 필터를 재미있게 사용할 수 있는 몇 가지 예를 보여 드리겠습니다. 원본 이미지 Blur(); .blur { -webkit-filter: blur(5px); filter: blur(5px); } Brightness(); .brightness { filter: brightness(0.9); } Contrast(); .contrast { -webkit-filte…

filter 속성은 웹 페이지에 있는 이미지에 필터 효과를 적용할 수 있습니다. 마치 포토샵과 같은 효과를 적용할 수 있습니다. 예를 들어 흐림 효과나 흑백, 그림자나 채도를 조작할 수 있습니다. 페이지가 렌더링되기 전에 요소에 적용됩니다. 형식은 다음과 같습니다. filter: <filter-function> [<filter-function>]* | none 필터 filter-function 에 사용할 수 있는 함수는 다음 표를 참고합니…

@charset 은 스타일 시트에 사용되는 문자 인코딩을 지정하는데 사용됩니다. 문자 집합 및 인코딩이란 무엇입니까? 문자 집합은 쓰기 시스템에서 사용되는 문자와 기호의 모음입니다. 예를 들어 ASCII 문자 세트는 영어 텍스트의 문자 및 기호를 다루고, ISO-8859-6은 아랍어 스크립트를 기반으로 하는 많은 언어에 필요한 문자 및 기호를 다루며, 유니코드 문자 세트는 대부분의 살아있는 언어 및 스크립트의 문자를 포함합니다. 문자 집합의 문자는 컴퓨터에서 하나…