# scss
Visual Studio Code에서 SCSS 셋팅하기
Visual Studio Code에서 SCSS compiler를 적용하기 위해 테스트를 진행했다.extension은 Live Sass Compiler와 Easy Sass를 비교했고, 최종적으로 Live Sass Compiler를 선택했다.css formatexpand
Js React 비디오 태그를 그림처럼 넣기
비디오태그를 넣고 싶으면,video를 div로 이해하면 이해하기 쉽다태그를 위에서부터 뜯어보면,위의 코드처럼 style태그를 안에 넣어줘도 되지만 클래스네임을 부여해서 scss에 따로 코드를 떼어주는 것이 좋다클래스네임을 줘서 scss속성을 줬을때 scss속성으로 넣어
[Day 32] SCSS 필수 개념 정리
정일멘토님이랑 Nosè refactoring 하면서 완전 중요한 개념을 배웠다SCSS 수업 들으면서 위 사진 중요도를 이론적으로 배웠으나 text로 와닿지 않았다. 하지만 프로젝트 하면서 직접 내 코드에 적용 안 되는 것을 보고 멘토님이랑 같이 코드 고치면서 깨달았다.
css hover (마우스 올리면 속성변하게 하기)
css hover마우스를 위로 올리면 속성이 바뀌게하고 싶을때&:hover {css내용} 안에 올리면 나오게하고 싶은 css값을 넣어준다마우스를 올리면 border, background color: 폰트컬러는 css&:hover { border-color:
@mixin
@mixin을 이용해서 scss에서 반복되는 요소를 한번만 쓰도록 바꾸기loginAbled와 loginDisabled안에 배경색빼고는 모두 같은 코드들이 반복된다이럴때는 공통적인 부분을 컴포넌트화 시켜주는 것이 @mixin컴포넌트화 시킨 다음에는 가져다가 쓰기만 하면
Sass (SCSS)
CSS로 컴파일 되는 스타일 시트 확장 언어이며 CSS 전처리기의 하나다. 브라우저가 Sass를 직접 로딩하는 것이 아니라 개발은 Sass를 기반으로 한 후, CSS로 익스포트하는 과정을 거친다. 브라우저가 Sass 파일을 직접 읽지 못하기 때문에 일반 CSS로 컴파일
SCSS
SCSS: Sass의 모든 기능을 지원하는 SupersetSass(Syntehtically Awesome StyleSheets): CSS 전처리기: 변수, 상속, 혼합, 중첩 등의 다양한 기능 제공: CSS로 컴파이을 거친 뒤 실행 가능Sass vs SCSS \- S
[CSS] SCSS와 styled-component의 mixin 그리고 사용법
꽤 오래전부터 듣기만 했던 scss와 styled-component에서의 mixin을 한번 알아보고자 정리를 해보았다!사실 10개월간 회사에서 styled-component를 쓰면서 믹스인을 쓴적은 없지만 이전부터 css를 간결하게 써보고 싶었던 욕구를 해소해보고 싶어
[CSS Module] css 이름 꼬이지 않고 편하게 쓰기
CSS Module이란? 컴포넌트 별로 CSS를 적용해주어 다른 컴포넌트의 동일 이름과 충돌하지 않게 해주는 편리한 기능
웹 반응형 및 다크모드
반응형 제작을 끝 마친 후 바로 다크모드 제작에 돌입했다. 반응형 작업은 언제나 시간이 많이 든다. 그래도 매번 '조금만 더 가성비 있게 작성해보자' 라는 마음으로 작업하다보니 돌아보니 시간도 시간이지만 조금 더 코드도 짧아진 것 같다. 블로그를 제작하면서 반응형 작업