반응형 css6 [Issue 해결] React Slick 사용 시 Prev 버튼이 동작하지 않는 경우 ❗️ Issue React Slick 라이브러리 사용 시, Next 버튼은 정상적으로 작동하는데, Prev 버튼은 마우스 오버 시 CSS도 동작하지 않고, 클릭을 하여도 슬라이드되지 않음 💡 Solution Prev 버튼의 css 속성인 z-index를 수정해 주면 됨. Prev 버튼의 클래스명이 'slick-prev'로 설정되어 있으므로 아래의 코드를 삽입해 주면 해결 됨! .slick-prev { z-index: 9999; } 충분히 큰 숫자인 9999를 넣어주었는데, 9999로 설정 시에도 정상적으로 작동하지 않을 시, 더 큰 수를 입력해볼 수 있다. 2021. 6. 20. 프론트엔드 개발자를 위한 Visual Studio Code 확장 프로그램(Extension) 설치 방법 및 추천 안녕하세요 😁 이번 포스팅에서는 Visual Studio Code에서 제가 유용하게 사용하고 있는 확장 프로그램을 추천해드리려고 합니다. 저는 홈페이지 관리를 하고 있어서 주로 HTML, CSS, JavaScript 코딩 작업들을 하고 있어서 프론트엔드 쪽 작업하시는 분들께 유용할 것 같아요~! 목차 Visual Studio Code 확장 프로그램(Extentions) 설치 방법 Visual Studio Code가 이미 다운로드 된 상태라고 생각하고 시작할게요! 우선 확장 프로그램 설치하는 방법부터 보여 드릴게요. 1. Visual Studio Code 좌측에서 아래 모양과 같은 아이콘을 클릭해주세요. 2. 검색창에 원하는 확장 프로그램명을 검색하고, Install 을 클릭해 주면 끝입니다. 엄청 간단해.. 2021. 1. 19. [Sass/SCSS] 변수(Variables) 혼자 공부하고 정리하려고 만들었지만 혹시나 누군가에게 도움이 될 수 있지 않을까 해서 공개로 올리는 블로그입니다. 📝 전문가가 아니기 때문에 잘못된 내용이 있을 수도 있습니다. 저를 너무 믿지 말아주세오.. $변수이름 변수를 사용하여 단순한 속성값 뿐만 아니라, 복잡한 수식 실행, 라이브러리 구성 등의 작업을 수행할 수 있다. ⚡ CSS에서의 변수와 Sass에서의 변수 차이점 (잘 이해한 건지 모르겠다) Sass 변수 - imperative : 변수를 사용한 다음에 값을 변경하면 영향을 미치지 않는다. CSS 변수 - declarative : 변수를 사용한 다음 값을 변경하더라도 영향을 미친다. 💡 Sass 변수는 하이픈( - )과 언더바( _ )를 구분하지 않는다. Ex > $font-size와 $fo.. 2020. 3. 26. [Sass/SCSS] Sass/SCSS 세팅 - Sass 프로그램 설치 혼자 공부하고 정리하려고 만들었지만 혹시나 누군가에게 도움이 될 수 있지 않을까 해서 공개로 올리는 블로그입니다. 📝 전문가가 아니기 때문에 잘못된 내용이 있을 수도 있습니다. 저를 너무 믿지 말아주세오.. Scout-App 깔아서 잘 하고 있었는데 @use 플래그가 작동하지 않아서 Sass 프로그램을 설치해서 컴파일 해보기로 했다. 결론부터 말하자면,, 이 방법도 실패하긴 했다 ㅠㅠㅠㅠㅠ 흑 우선 컴파일 방법은 아래와 같이 진행했다. 1. Ruby 설치 (Windows) - https://rubyinstaller.org/downloads/ * Mac은 기본적으로 ruby가 설치되어 있다고 한다. 2. 윈도우 버튼 + R 누르고 cmd 입력해서 Command 창으로 들어간다. 3. Sass 설치 gem .. 2020. 3. 26. [Sass/SCSS] 기초 문법 공부 혼자 공부하고 정리하려고 만들었지만 혹시나 누군가에게 도움이 될 수 있지 않을까 해서 공개로 올리는 블로그입니다. 📝 전문가가 아니기 때문에 잘못된 내용이 있을 수도 있습니다. 저를 너무 믿지 말아주세오.. https://sass-lang.com/guide를 참고하였습니다. 변수(Variables) - $변수이름 자주 사용하는 정보들을 변수에 저장하여 사용할 수 있다. example : $main-color: #aaa $font-color: #555 nav{ background-color : $main-color; color : $font-color; } 중첩(Nesting) HTML에서는 중첩 및 계층 구조가 분명하게 구분되지만, CSS는 그렇지 않다. 😥 그러나, Sass(SCSS)는 HTML에서와 .. 2020. 3. 26. [Sass/SCSS] Sass/SCSS 세팅 - Scout-App 혼자 공부하고 정리하려고 만들었지만 혹시나 누군가에게 도움이 될 수 있지 않을까 해서 공개로 올리는 블로그입니다. 📝 전문가가 아니기 때문에 잘못된 내용이 있을 수도 있습니다. 저를 너무 믿지 말아주세오.. Sass(SCSS) 란? CSS 전처리기 중 한 종류. CSS 문법과 아주 유사하지만, 선택자의 중첩, 조건문, 반복문 등의 추가적인 기능을 제공한다. Sass와 SCSS의 차이점 SCSS는 CSS와 거의 같은 문법으로 Sass의 기능을 지원한다. 가장 큰 차이점은 아래와 같다. - Sass : 중괄호와 세미콜론 사용 X, 들여쓰기로 선택자의 유효범위를 구분한다. - SCSS : 중괄호로 선택자의 유효범위를 구분한다. Sass(SCSS) 컴파일러 - Scout-App 설치 Sass(SCSS)를 실행하.. 2020. 3. 26. 이전 1 다음 반응형
