김코드의 웹디자인 세상

안녕하세요! css하나로 부드러운 스크롤링을 하는 속성을 가지고 왔습니다. 바로scroll-behavior라는 속성입니다. scroll-behavior 속성은 보통 auto라는 기본 값을 가지고 있습니다. 오늘은 부드럽게 움직이는 화면 스크롤을 구현하기 위해서 smooth라는 속성값을 주도록 하겠습니다. 속성을 적용했을 때와 아닐 때의 차이에 대해서 알아볼까요?? 1. scroll-behavior : auto; 그전에 사용했던 코드를 그대로 사용하겠습니다. 먼저 우선으로 기본적인 속성값을 적용한 화면을 알아볼까요? 1 2 3 4 5 html{ scroll-behavior: auto; } 지금은 스크롤 속성없이 일반적인 모습으로 올라갑니다. 2. scroll-behavior : smooth; 이번에는 기본..

안녕하세요! 오늘은 텍스트 문단의 단을 나누는 css의 속성입니다! html로 글을 작성하다 보면 길게 늘어지는 상황이 나타날 때 flex로 처리를 하려고 하면 지저분합니다... 단 설정을 해서 더 깔끔하게 처리를 하고 싶을 때 사용합니다! ✎ column-count : 단 설정 .div{ column-count: n; /*만들고 싶은 단의 수*/ } 이렇게 길게 늘어진 문단이 있습니다. column-count를 한번 사용해 볼까요?? 정해진 단의 수만큼 정리되는 것을 볼 수 있었습니다! ✎ column-gap : 단 사이 간격 설정 .div{ column-gap: 000px; /*늘리고 싶은 단의 간격*/ } ✎ break-after: 다단 위치 지정하기 만약 다단을 내가 원하는 위치에서 지정하고 싶을..

안녕하세요! css속성 중 그림자를 주는 속성에 대해서 가지고 왔습니다. css에서 그림자는 주는 속성은 text-shadow와 box-shadow와 drop-shadow가 있는데요 text-shadow는 글자에 그림자를 주는 속성이고 box-shadow와 drop-shadow는 오브젝트에 그림자를 주는 속성입니다. 오늘은 box-shadow와 drop-shadow에 대해서 알아보며, 둘 속성에 대한 차이점과 용도에 대해서 알아보도록 하겠습니다! 1. box-shadow 박스 쉐도우 먼저 첫 번째로 box-shadow입니다. 이 속성의 용도는 오브젝트에 그림자를 주어 입체감을 주는 속성입니다. 이 속성은 오브젝트를 하나의 박스로 보고 그 박스 영역에 그림자를 주는 속성입니다. box-shadow: 2px..