김코드의 웹디자인 세상

안녕하세요! css를 사용하다 보면 반복되는 배경색을 하나하나 추가하거나, 선택자로 선택을 해서 코드의 줄이 늘어나는 등등 약간의 번거로움이 있습니다. scss 그러한 점을 해결하는 방법이 있습니다. 바로 변수를 선언하는 방법인데요! 오늘은 scss에서 변수선언하는 방법과 사용방법에 대해서 알아보겠습니다! 1. 변수선언 scss에서의 변수선언은 아래와 같습니다. /*scss의 변수선언*/ $변수명: 변수값; /*ex*/ $background01: #fff; $background02: #f0f0f0; $mainfont: 'SUITE-Regular'; $maincolor: orange; $font_size: 1.1rem; 2. 변수 사용하기 변수를 사용하는 방법은 원하는 곳에 지정한 변숫값을 넣어주면 됩니다..

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

안녕하세요! 오늘은 페이지 구현 시 제이쿼리를 사용하여, 페이지를 스크롤할 때마다 숨겨진 요소가 나타나게 하는 효과에 대해서 알아보겠습니다! 먼저 html로 간단한 구조를 만듭니다. ✎html 1 2 3 4 5 ✎css section div{ width: 100%; height: 100vh; } section #container1{ background: orange; } section #container2{ background: green; } section #container3{ background: salmon; } section #container4{ background: black; } section #container5{ background: greenyellow; } 하나의 섹션 안에 cont..

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