개발새발 로그

1. webpack.config.js에서 우리가 작성한 sass-loader을 지워준다. 2. 아래와 같이 import를 생략할 scss파일을 명령어로 additionalData에 추가해줌 3. 그럼 아래 명령어 없이도 _variables.scss 의 코드를 사용가능! 하지만 주의점! - @use를 통해 color 모듈을 사용하려고 했는데 아래와 같이 에러가 뜬다! - @use는 무조건 다른 규칙보다 먼저 작성되어야한다는 것인데 현재 우리가 작성한 import보다 뒤에 적용돼서 그렇다. @use를 사용하려면 전역으로 만들어줘야한다. - 위처럼 미리 등록하면된다!

1. 사이트 들어가기 https://www.jsdelivr.com/package/npm/reset-css?tab=files jsDelivr - A free, fast, and reliable CDN for JS and Open Source Optimized for JS and ESM delivery from npm and GitHub. Works with all web formats. Serving more than 150 billion requests per month. www.jsdelivr.com 2. 아래와 같이 클릭 3. 적용할 HTML 에 삽입하기

사용법 @use "sass:color" 내장 모듈의 종류1 1.color 2. list 3. map 4. math 5. meta 6. selector 7. string GlobalFunctions hsl($hue,$saturation,$lightness); hsla($hue,$saturation,$lightness , $alpha : 1); if($condition,$if-true,$if-false); rgb($red,$green,$blue); rgba($red,$green,$blue,alpha : 1); rgba($color,$alpha); - 전역 함수로는 위 종류들이 있다. 1. sass:color 내장모듈 먼저 위 코드에 대해 설명할 것이 있다. 일단 color.adjust와 adjust-colo..

SCSS를 visual studio code에서 사용하기 1. nodejs와 npm을 설치하기 2. sass설치하기 npm install -g sass - g: global이라는 플래그, 전역으로 sass라는 패키지를 설치해 scss파일을 css로 컴파일할 수 있게하는 것 3. sass 사용하기 sass [output.css] sass : - 띄어쓰기나 콜론을 사용해서 사용가능하다. - sass scss:css를 입력하면 현재 생성된 scss폴더를 css폴더로 컴파일해서 만들겠다는 뜻이다. -> scss가 바뀔때마다 컴파일 해줘야한다. 4. 이제 사용가능하다! SCSS module사용하기 1. 변수만 있는 variables.scss파일을 만들어준다! 2. import로 모듈 가져오기 - 확장자 .scss..

if 조건문 사용법 - 아래와 같이 흑백 테마의 기능을 만들 수도 있다. -else if문도 사용이 가능하다. -위 기능은 요소의 너비와 높이를 0으로 만들어서 요소에는 border만 남게한다. -그럼 아래와 같이 삼각형 4개로 boreder부분이 형성된다. - 이때 border의 한 부분만 색칠하게 되면 삼각형이 나오는 것이다. 반복문 @each ... in구문 -.List와 Map을 반복하는 예제다. - $sizes는 List - $fruits는 Map List - for...of문과 유사하다. - List는 List모듈의 list.index를 사용한다.(index값을 추출한다.) -> 숫자가 나온다 (1, 2, 3 ...) - 보간을 통해서 클래스를 추가한다. Map - @each 키, 값 in 객..

@mixin 규칙과 유사하다. 함수 사용법 응용법 - 아래와 같이 기본값을 넣을 수 있다. 조건 -아래와 같이 조건을 주고 에러를 발생시킬 수도 있다. - 전개연산자를 사용해서 불필요한 매개변수를 받지않을 수 있다. 함수는 두 개 이상의 단어를 활용해서 커스텀한 함수를 만드는 것이 좋다! - 겹치기 때문에

exntend를 이용해서 확장이 가능하다. 하지만 extend는 선택자 폭발이라는 주의점이 있다. - .box 의 중첨된 부분에서 또 extend를 사용하면 item이 가지고 있는 color : red뿐 만아니라 .box 부분도 상속이 되면서 문제가 발생한다. placeholder 선택자 % - extend 만을 위한 선택자를 만들 수 있다 - 이때 extend는 제한사항이 있다. - 아래 예제에서 처럼 만약 media 규칙안에서 extend규칙을 사용하려고 하면 오류가 발생한다. - extend 규칙을 media 내에서 선언해야지 사용가능하다는 뜻이다. 그래서 extend보다는 mixin 규칙을 사용하는 것을 권장한다. 하지만 mixin 규칙을 사용하면 코드가 extend 규칙보다 길어지게 된다.(CS..

@mixin 규칙 - CSS스타일을 재활용할 수 있게한다. 매개변수도 넣을 수 있다! 하지만 아래처럼 매개변수를 넣게되면 해당 함수를 호출할 때는 반드시 매개변수의 값을넣어줘야한다. 다른 방법으로는 매개변수의 default값을 설정하는 방법이 있다. 아래와 같이 default 값을 매개변수에 설정해서 매개변수가 빈 mixin을 호출해도 에러가 나지 않게 한다. 조건을 활용한 @mixin - @if 대신 if문으로 삼항연산자를 구현할 수 있다. - if( 조건, 참, 거짓) 으로 사용한다. @mixin에서의 중첩 구문도 사용가능하다. -아래와 같이 mixin을 응용해서 사용이 가능하다. - 또한 아래 응용처럼 사용할 수도 있다. rest 파라미터( 나머지 매개변수) 기능 (전개연산자) - 위와 같이 자바스..