목록퍼블리싱 (10)

김코드의 웹디자인 세상

❏ scss - 변수선언하기!

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

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

안녕하세요! 오늘은 페이지 구현 시 제이쿼리를 사용하여, 페이지를 스크롤할 때마다 숨겨진 요소가 나타나게 하는 효과에 대해서 알아보겠습니다! 먼저 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..
⊹⠀𝚓𝚚𝚞𝚎𝚛𝚢 2023. 6. 27. 16:28
❏ Js - 스크롤 스파이 (scroll spy) 만들기!

안녕하세요! 오늘은 자바스크립트를 활용하여 웹페이지에 적용할 수 있는 스크롤 스파이를 만들어보겠습니다! 스크롤 스파이란(scroll spy)? 스크롤 위치에 기반하여 자동으로 네비게이션 대상을 갱신하는 가로형 UI입니다. 먼저 html 파일을 준비합니다. ✎ html 이 달의 에디박스 8만 반려견들의 후기 구성소개 QnA 테마소개 ✎css 간단하게 css도 입혀줍니다. header .menu{ display: flex; align-items: center; justify-content: space-around; } header .menu .menu_list{ display: flex; flex-direction: row; gap: 40px; font-size: 1.1rem; } 그럼 아래처럼 만들어집니다..
⊹⠀𝙹𝚂 2023. 6. 22. 15:58
이전 Prev 1 2 3 Next 다음