몽땅뚝딱 개발자

간단한 페이지를 하나 구현해보려고 한 것 뿐인데 장벽이 많았다. 주로 scope로 주고있는 vue.js만 사용하다보니 리액트는 도대체 css를 어떻게 주는 것인지 알 수가 없었다. 그리고 scss를 어떻게 적용할 것인가에 대한 것도! 찾아본 방법들은 아래와 같다. 1. styled component 2. {모듈명}.module.css 3. css를 전역으로 선언 여기서 나는 2번 방법을 먼저 사용해보기로 했다. 📄 WatchedItem.module.css "{적용할 모듈명}.module.css" 형식으로 작성해준다. modules로 작성하지않도록 주의! .watched__item { color: red; } 📄 WatchedItem.js className에 "{import 해온 이름.클래스 이름}"을 넣..

이 속성은 HTML 요소들의 hover/active, click/tap, cursor, drag 등의 이벤트를 조정할 수 있는 속성이다. 나의 경우 index가 다른 요소들 때문에 문제를 겪었는데, z-index가 높은 요소때문에 그 아래에 있는 요소의 hover 이벤트가 작동하지 않아 해당 옵션을 주었다. ◽ 사용하기 /* none: HTML 요소에 정의된 각종 이벤트(클릭, 상태, 커서 옵션)가 비활성화 된다. */ pointer-events: none; /* auto: 비활성화된 이벤트들이 다시 발생하게(기본 기능으로 원복) 한다. */ pointer-events: auto; /* inherit: 부모 요소로부터 pointer-events값을 상속받는다. */ pointer-events: inher..

◽ z-index란? HTML 요소가 겹치는 순서를 정의하는 CSS 속성으로 인덱스가 높은 요소는 인덱스가 낮은 요소 위에 배치된다. ◽ z-index의 적용 방법 z-index는 position의 속성이 relative, absolute, fixed처럼 위치가 지정된 요소에서만 작동된다. static에서는 동작하지 않으므로 주의하자! 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

Sass에 대한 간단한 소개와 문법은 이 글에서 볼 수 있다. [CSS] Sass(SCSS)란 ◽ Sass(Syntactically Awesome Style Sheets)란? - 대표적인 CSS 전처리기 중 하나이다. - CSS가 동작하기 전에 사용하는 기능으로 CSS Preprocessor라고 부른다. - CSS 문법과 유사하지만 선택자의 중첩이나 조.. be-a-weapon.tistory.com ◽ Sass 설치 npm i sass npm i sass-loader@10 ◽ Sass 사용하기 아래와 같이 변수를 선언하고 사용할 수 있다. ◽ 변수 분리하기 변수가 많아지는 경우 변수를 따로 모아놓는 파일을 만든다. 📄 src/assets/_variabled.scss /* _variabled.scss */..

◽ CSS3란? 차세대 HTML5 제안과 함께 CSS3라는 이름의 새로운 스타일이 나왔다. 차세대 웹 개발을 위한 새로운 표준이다. ◽ CSS3의 사용 CSS3 속성은 속성 앞에 브라우저를 식별할 수 있는 접두사인 벤더 프리픽스(CSS3 Vendor Prefix)를 붙여서 사용한다. .example { background: -webkit-gradient(linear, left top, left bottom, from(#06f), to(#f0f)); background: -o-linear-gradient(top, #06f, #f0f); -moz-border-image:url(images/border.png) 27 repeat stretch; } ◽ Prefix의 종류 webkit- 웹킷 방식 브라우저용으로..