SCSS(SASS) FLEX GRID 핵심이론(PDF) 교재 및 활용예제

[다운로드] SCSS(SASS) 핵심이론 교재(PDF)

scss 변수$ 속성 변환하는법 알려주세요

2021-09-22T07:25:19.291Z

535

oo !

작성한 질문수 19

$black: #333;

$white: #eee;

common.scss에 있는 식이에요.

그리고 style.scss에 이렇게

@import "common.scss";

연결시킨후에

제이쿼리로 이렇게 작성했습니다.

body.toggleClass("dark");

body가 .dark되면

.dark {

$black: #eee;

$white: #333;

}

.logo {

@include font-small;

color: $black;

font-weight: 700;

}

.logo의 color가 $black은 #eee이 되어야할텐데 컬러가 바뀌질 않습니다ㅠㅠ

어떻게 해아할까요?

scss flex HTML/CSS sass

답변 2

코딩웍스(Coding Works)

2021-09-23T02:54:31.526Z

.dark {

$black: #eee;

$white: #333;

}

이 부분이 잘못된거 같아요.
변수를 선택자 내에서 선언할 수 있지만 가장 상단에 전역변수로 아래로 선언되어 있으니까

$black: #333;

$white: #eee;

선택자 내에서는 아래처럼 해주면 될 것 같아요.

.dark {

color: $black;

}

oo !

2021-09-23T04:31:45.183Z

.dark {

color: $black;

}

위에처럼 써봐도 달라지질 않네요 ㅠ

.dark {
  color: $white;
  background-color: $black;
}

이렇게도 써봤지만 안되네요 ㅎㅎ ㅠ

선생님

background가 $white면 body가 .dark되었을때 $black이 되어야 하고

그 반대로 color가 $black이면 .dark되었을때 $white로 되어야하는데 어떻게 써야할까요?

common.scss 에는

$black: #333;

$white: #eee;

위에 처럼 써놓은 상태고

common.scss 를 style.scss 상단에 import 시켜놨습니다.

코딩웍스(Coding Works)

2021-09-23T04:37:43.287Z

html, scss, css , js 풀코드를 답글로 올려주세요. 풀코드 보고 확인해볼게요~

oo !

2021-09-23T04:46:02.769Z

html  
<body class="preload">
    <header>
      <a href="#none" class="logo">logo</a>
      <div class="rightSide">
        <div class="btn changeBtn">
          <ion-icon name="moon-outline"></ion-icon>
          <ion-icon name="sunny-outline"></ion-icon>
        </div>
        <div class="btn menuToggle">
          <ion-icon name="menu-outline"></ion-icon>
          <ion-icon name="close-outline"></ion-icon>
        </div>
      </div>
    </header>

    <section class="main">
      <video
        src="img/video.mp4"
        loop
        autoplay
        muted
        poster="img/video.png"
      ></video>
      <img src="img/mask.jpg" alt="" class="mask" />
      <h2>변화의 시작, 엘라로즈</h2>
      <p>Copyright @ Ellarose K.2021.All right reserved.</p>
      <div class="sns">
        <a href="#none"><ion-icon name="logo-facebook"></ion-icon></a>
        <a href="#none"><ion-icon name="logo-instagram"></ion-icon></a>
        <a href="#none"><ion-icon name="logo-twitter"></ion-icon></a>
        <a href="#none"><ion-icon name="logo-youtube"></ion-icon></a>
      </div>
    </section>

    <ul class="nav">
      <li><a href="#none">Home</a></li>
      <li><a href="#none">Aboot us</a></li>
      <li><a href="#none">Project</a></li>
      <li><a href="#none">Contact</a></li>
    </ul>
  </body>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
 
 
common.scss 
// 문자설정

$black: #333;
$white: #eee;
$font-base: 1.6rem;
$font-kr: "Noto Sans KR", sans-serif;
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
 
style.scss 
@import "common.scss";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&family=Noto+Sans+KR:wght@100;400;700&display=swap");

.dark {
  color: $white;
  background-color: $black;
}

.dark .mask {
  filter: invert(1);
  mix-blend-mode: multiply;
}

header {
  position: fixed;
  z-index: 888;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 40px;
  & .logo {
    @include font-small;
    color: $black;
    font-weight: 700;
  }
}
.rightSide {
  display: flex;
  & .btn {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    & ion-icon {
      @include font-small;
      color: $black;
      &:nth-child(2) {
        display: none;
      }
    }
    &.active ion-icon:nth-child(2) {
      display: block;
    }
    &.active ion-icon:nth-child(1) {
      display: none;
    }
  }
}

section.main {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  & video {
    @include object-f;
    object-fit: cover;
  }
  & .mask {
    @include object-f;
    user-select: none;
    mix-blend-mode: screen;
    z-index: 555;
  }
  & h2 {
    position: absolute;
    z-index: 777;
    @include font-large;
    color: $white;
    width: 80%;
    text-align: center;
    user-select: none;
  }
  & p {
    position: absolute;
    z-index: 555;
    left: 3em;
    bottom: 20px;
    @include font-basic;
  }
  & .sns {
    position: absolute;
    z-index: 555;
    right: 3em;
    bottom: 20px;
    font-size: 2rem;
    & a {
      color: $black;
      &:hover {
        color: crimson;
      }
    }
  }
}
ul.nav {
  @include object-f;
  left: -100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 777;
  background-color: $white;
  transition: 0.5s;
  &.active {
    left: 0;
  }
  & li a {
    color: $black;
    @include font-small;
    display: block;
    padding: 0.5em 3em;
    border-radius: 50px;
    &:hover {
      background-color: $black;
      color: $white;
    }
  }
}
----------------------------------------------------------------------------
 
style.css 
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&family=Noto+Sans+KR:wght@100;400;700&display=swap");
.dark {
  color: #eee;
  background-color: #333;
}

.dark .mask {
  -webkit-filter: invert(1);
          filter: invert(1);
  mix-blend-mode: multiply;
}

header {
  position: fixed;
  z-index: 888;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  padding: 40px;
}
header .logo {
  font-family: "Montserrat", sans-serif;
  font-size: 3.2rem;
  color: #333;
  font-weight: 700;
}

.rightSide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.rightSide .btn {
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}
.rightSide .btn ion-icon {
  font-family: "Montserrat", sans-serif;
  font-size: 3.2rem;
  color: #333;
}
.rightSide .btn ion-icon:nth-child(2) {
  display: none;
}
.rightSide .btn.active ion-icon:nth-child(2) {
  display: block;
}
.rightSide .btn.active ion-icon:nth-child(1) {
  display: none;
}

section.main {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
section.main video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.main .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  mix-blend-mode: screen;
  z-index: 555;
}
section.main h2 {
  position: absolute;
  z-index: 777;
  font-family: "Montserrat", sans-serif;
  font-size: 9.6rem;
  color: #eee;
  width: 80%;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
section.main p {
  position: absolute;
  z-index: 555;
  left: 3em;
  bottom: 20px;
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
}
section.main .sns {
  position: absolute;
  z-index: 555;
  right: 3em;
  bottom: 20px;
  font-size: 2rem;
}
section.main .sns a {
  color: #333;
}
section.main .sns a:hover {
  color: crimson;
}

ul.nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: -100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 777;
  background-color: #eee;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
ul.nav.active {
  left: 0;
}
ul.nav li a {
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-size: 3.2rem;
  display: block;
  padding: 0.5em 3em;
  border-radius: 50px;
}
ul.nav li a:hover {
  background-color: #333;
  color: #eee;
}
--------------------------------------------------------------------
 
js 
$(document).ready(function () {
  const jq = $.noConflict();

  let changeBtn = jq(".changeBtn");
  let menuToggle = jq(".menuToggle");
  let body = jq("body");
  let menu = jq(".nav");

  changeBtn.click(function () {
    body.toggleClass("dark");
    changeBtn.toggleClass("active");
  });

  menuToggle.click(function () {
    menuToggle.toggleClass("active");
    menu.toggleClass("active");
  });
});
 
 

oo !

2021-09-23T04:48:08.499Z

많이 부족한 실력이지만 선생님이 알려주신것 공부하면서 scss적용시켜보는데 쉽지가 않네요 ㅠㅠ!

그리고 선생님 밑에처럼 쓰면 잘되는데

  menuToggle.click(function () {

 menuToggle.toggleClass("active");

 menu.toggleClass("active");

});

  menuToggle.click(function () {
 menuToggle,menu.toggleClass("active");
 
});
 
위에 써놓은것처럼 그룹으로 선택자를 묶으면 적용이 안됩니다 ㅠㅠㅠ
단축해서 쓰는 방법은 없을까요?

코딩웍스(Coding Works)

2021-09-22T07:52:48.921Z

일단 제이쿼리 구문이 아래와 같을 수는 없습니다..

body.toggleClass("dark");

아래처럼 되어야 하는데요.

$("body").toggleClass("dark");

이 부분 먼저 체크해보셔야 할 것 같아요.

oo !

2021-09-22T13:54:37.318Z

아 제가 변수를 써서요.

let body = $("body") 로 해놨습니다 .

선생님 강의자료를 받을수 없어요! 메일보냈어요.

2026-10-05T10:22:45.811Z

1강 동영상 재생 오류

2026-09-29T05:15:34.376Z

헤더에서 empty column이 삭제가 안되고, 헤더 레이아웃을 동영상처럼 선택하는 옵션이 안나오는데 어떻게 하나요?

2026-09-28T03:46:31.753Z

Composition단계에서 `Layer`는 누가 만드는지

2026-09-27T08:18:37.588Z

Strict Mode 예시 질문!

2026-09-22T10:10:24.334Z

해당 플러그인을 설치했는데 추가 지원 안될 수 있다고 다른 플러그인을 깔아보라는데 어떻게 해야하나여?

2026-09-17T05:30:01.975Z

만일 실물을 택배로 배송해야 할 경우 주소지 입력하는 방법이 궁금해서요.

2026-09-08T01:55:38.771Z

설명이 잘못된거같습니다.

2026-09-06T01:44:16.272Z

31강 학습자료에 프롬프트가 엉뚱한것이 있어요

2026-09-03T01:10:47.445Z

bitnami 설치

2026-09-01T04:35:32.702Z

강의 소스 코드는 어디서 볼수 있나여?

2026-08-30T05:20:34.780Z

자료집 관련

2026-08-29T11:09:02.274Z

13. (App 2) 기본기 훈련 에서

2026-08-29T01:21:36.181Z

17강 강의에 목데이터 첨부파일이 없습니다.

2026-08-28T10:35:11.289Z

2. 어떤 도구를 사용하는 것이 가장 유리할까? 강의 중

2026-08-28T09:06:21.555Z

11차시 Antigravity IDE 설치 후

2026-08-27T23:16:06.402Z

처음 에이전트 설정을 잘못 했을 경우 수정 하는 방법

2026-08-27T11:58:31.627Z

선생님 왜 설정에서 요런게 뜨는지 모르겠습니다ㅏ

2021-12-06T05:43:01.891Z

411

vc프로그램 이미지가 표시 안되는 것에 대한 질문

2021-10-10T08:54:46.332Z

411

선생님 scss설치한 후로 자꾸 패널이 scss 수정하고 컴파일될때마다 딸려올라오네요 ㅠㅠㅠㅠ

2021-09-15T12:39:29.016Z

294

선생님 저장경로에 관해서도 질문있습니다.

2021-09-15T06:56:08.664Z

343

선생님 조건문관련 패딩에 관해 질문드립니다.

2021-09-15T05:52:09.287Z

300

선생님 저 #은 무엇을 의미하는 건가요?

2021-09-15T05:44:33.949Z

291

선생님 강의 너무 알찹니다 이번에도 구매! 파일에도 정성이 느껴져요 ㅎㅎ

2021-09-15T04:50:08.793Z

321