코딩도 합니다/CSS · SCSS (5) 썸네일형 리스트형 [SCSS] SCSS로 반응형 작업하기 / Responsive with SCSS in Web 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 SCSS로 반응형 하는 방법에 대해 공유하려고 합니다. 웹 개발을 하거나 퍼블리싱을 할 때 반응형은 언제나 번거로운 작업이죠. SCSS로 반응형 프레임을 미리 잡아두면, 프로젝트마다 쉽게 미디어쿼리를 짤 수 있답니다. 먼저, SCSS가 CSS에 컴파일 되도록 설정이 되어 있어야 합니다. 만약 SCSS 설치가 안 되어 있다면, 아래 링크를 눌러주세요. 해당 포스팅을 따라하면, SCSS를 설치 및 연동할 수 있습니다 :) [SCSS] HTML에 SCSS 적용하는 법 / how to apply css to html 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 HTML에 SCSS 적용하는 방법.. [SCSS] HTML에 SCSS 적용하는 법 / how to apply scss to html 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 HTML에 SCSS 적용하는 방법에 대해 다뤄보겠습니다. CSS를 사용하다보면 각종 클래스 혹은 태그들을 나열하느라 시간이 오래 걸리죠. 그리고 반복적으로 클래스와 태그들을 적어줘야 하기 때문에 작업을 하다보면 굉장히 비효율적이란 느낌이 듭니다. 또 오타가 발생했을 때 오타를 찾기도 쉽지가 않죠? 이러한 이유들로 개발자들이 퍼블리싱 할 때 SCSS를 사용하는데요. SCSS를 사용하다보면, CSS 코드가 훨씬 간결해진답니다! 어떻게 간결해지는지는 이 과정을 따라하다보면 아실 수 있어요. 순서대로 설명글과 이미지를 보면서 따라해 주세요! 어렵지 않습니다 :) HTML에 SCSS 적용하는 방법 1. VSCODE에서 프로젝트를 생.. [css] 스크롤 시 위치에 맞게 이미지 보여지는 부분 변화 .max-height { min-height: calc(100vh - 76px); background: linear-gradient(var(--yellowTrans), var(--yellowTrans)), url("../img/headerBcg.png") center/cover fixed no-repeat; position: relative; } fixed !!!!!!! [css] :root 사용 예시 :root { --mainPink: #ef7998; --mainYellow: rgb(249, 228, 148); --mainWhite: #fff; --mainBlack: #000; --yellowTrans: rgba(249, 228, 148, 0.5); --mainGrey: rgb(238, 238, 238); } body { font-family: "Noto Sans KR"; background: var(--mainWhite); color: var(--mainBlack); } 템플릿을 지정하여 반복적으로 사용할 수 있다. [SCSS] npm scss 적용하기 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 npm으로 scss를 설치하여 사용하는 방법에 대해 다뤄보겠습니다. npm scss 설치하는 방법 $ npm install -g node-sass $ node-sass --watch scss/manager_index.scss css/manager_index.css --watch를 넣어야 scss파일 작성시 css파일에 반영이 됩니다. scss파일과 css파일을 미리 만들어주고 터미널에 입력해 주세요. 간략하세 npm으로 scss를 설치하는 방법을 적어놨는데요. 조금 더 scss 사용에 대해 개념을 잡고 싶거나, 상세한 설명을 원하신다면 아래 링크에 들어가서 확인해 주세요. html에 적용된 모습을 보시면 리액트나 뷰에서도 ..
