# scss

oneuya

CSS 에서 제공하는 /* */, JS에서 제공하는 // 둘다 지원 /* */의 주석 방식은 compile 되어도 CSS 코드로 보여짐 //에 따른 주석은 compile 되면 보여지지 않음

oneuya

사이트명: 대학내일 작업 기간: 10일 소요 #gsap #scss #jquery 유형: 클론 코딩, 반응형 PC 특징: Gsap과 Scss를 활용한 반응형 웹사이트 url: https://oneuya.github.io/univ/ ‼️작업 목표 반응형 웹사이트 만들기! 📍POINT 자연스럽게 변경되는 메인 이미지 (GSAP) 스크롤 속도 조절하기 CSS를 활용한 무한 롤링 이미지 1. 자연스럽게 변경되는 메인 이미지 (GSAP) ✍️ GSA

agnusdei1207

약관의 경우 세로로 무한정 길어질 수 있으므로 max-h 를 설정합니다. 보통 80% 차지하도록 하는 게 일반적입니다.

crm03008

파이썬은 쉽다 라는 말이 있다. 파이썬은 모든 자료형을 객체화 하여 처리하기 때문에 C,C++ 보다는 느리지만 들여쓰기 문법으로 직관적이고 라이브러리도 잘 구성돼있기 때문에 초보자가 입문하기 쉽기 때문이다. 하지만 들여쓰기 문법이 누구에게나 편한것은 아닐 수 있다. 오늘 소개할 SASS도 위와 같은 들여쓰기 문법을 택하였지만 자리잡지는 못했다.. CSS SASS SCSS 셋다 스타일 시트를 작성하는 방법을 나타낸다. 기본적으로 웹을 배울때 CSS를 많이 배우지만 실무에서는 SCSS방식이 많이 사용된다고 한다. CSS Cascading Style Sheets 웹페이지 스타일을 정의하고 표현하는데 사용되는 언어. 정적 스타일링을 지원하며 중

syxxne

💻 Do-IT (팀 프로젝트) 📍 http://3.39.211.126/ 소개 개발자 스터디 플랫폼 원하는 CS 과목에 대해 면접 연습 진행 → Open AI api (Chat GPT) 평가 → 포인트 획득 면접 연습을 통해 얻은 포인트로 스터디 개설 (100 포인트) / 스터디 지원 (30 포인트) 가능 Main page, 연습하기 관련 page, 스터디 관련 page, Mypage로 구성 Header를 통해 페이지 간 이동 가능 Header 로그인하지 않은 경우에는 '로고, 연습하기, 스터디, 로그인' 으로 구성 로그인 완료한 경우에는 '로고, 연습하기, 스터디, 로그아웃, 프로필' 로 구성 (웹 버전) 각 버튼 위로 마우스를 올리면, 버튼이 파

whwodlf97

문제 해결 과정 scss를 해당 프로젝트에서 처음 써보기 때문에 프로젝트를 본격적으로 들어가기전 storybook에 잘 적용되는지 실험해봤다. 그래서 위와 같은 버튼을 만들고 storybook을 실행시켜서 제대로 나오는지 확인하는 작업을 거쳤다 먼저 storybook 공식문서에 scss 관련해서 무엇을 설정해야하는지 보았다 이런 내용을 보았고, 먼저 WEBPACK 5인지 아닌지 부터 알아야겠네🧐 라고 생각하고 확인 했다. 에러는 나겠지만 일단 실행부터 해보았다.![](https://velog.velcdn.com/images/wh

ryushin0

Sass Syntactically Awesome Style Sheets Less, Stylus와 같은 CSS 전처리기(CSS Preprocessor)의 일종 네스팅, 변수 사용, 조건문 등 다양한 기능 내장 Sass 3.0을 Scss라고 부름 설치 및 적용 문법(Syntax)

namyeji

이전에 SCSS 문법을 정리했었다. https://velog.io/@namyeji/Sass-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EA%B8%B0%EB%B3%B8-%EB%AC%B8%EB%B2%95 리액트에서 Scss를 사용하려고 하니 방법이 좀 다르다. 1. SCSS를 프로젝트에 설치하기 프로젝트 디렉토리에서 다음의 명령어를 실행하여 node-sass를 설치한다. >npm install node-sass --save 또는 yarn add node-sass 2. SCSS 파일 작성하기 리액트 컴포넌트와 함께 사용할 .scss 파일을 생성한다. 예를 들면, App.scss라는 이름으로 파일을 생성할 수 있다. 3. 리액트 컴포넌트에서 SCSS 파일 임포트하기 .scss 파일을 생성했다면 해당 파일을 리액트 컴포넌트에서 임포트하여 스타일을 적용할 수 있다. 4. 프로젝트 실행하기 이제 모든 것이 설정되었으므로, npm st

iooi_alice

📌 node-sass 설치하기 https://www.npmjs.com/package/node-sass 위 방법으로 설치했으나 설치 오류로 인해 코드 한 줄도 못 치는 상태^0^ 📌 설치 오류 해결하기 노드 버전에 맞춰서 버전 지정해서 설치해도 오류 났다^^ 하.... 여러 가지 방법을 시도했지만 설치가 안 돼서 낙담할 때 인프런 질문&답변 보고 재설치를 해주었더니 설치 성공했다😻 답변해 주신 분 중에 6버전, 7버전이 설치 시 오류 발생한다고 알려주셨는데 나는 위 코드로 설치해서 잘 사용하고 있다. 설치할 때마다 느끼는 거지만 쉽게 쉽게 넘어가는 법이 없다ㅠㅠ ✅ node_modules 파일 생성되었다면 설치 성공! <img align = "center" src="https://velog.velcdn.com/images/iooi_alice/post/e6b7d88d-df02-4e54-86a4-52e05a33f144/image.png" width="50

becoding96

SASS나 SCSS를 사용하고 있다면, justify-content나 align-items에 start나 end대신 flex-start, flex-end를 사용해야 한다.

pkook7

문제발생 : 페이지마다 css를 줬어도, 겹치는 문제가 발생했다..! 문제해결 : 리액트는 결국에 index.html에서 js와 css가 합쳐지기 때문에, css가 겹쳐진다. 따라서 scss를 사용하면 좋다. scss는 sass(문법적으로 개쩌는 스타일 시트)의 문법이다. scss, css 활용법 : 등으로 파일을 불러와준다. 최상위 태그를 만들어 Nesting을 활용한다. 변수 활용법 :

leecwee

아래파일~!! 위 코드로 작성을하였고 https://velog.io/@leecwee/Html-Css 첫번째 올렸던 블로그에서 구현하였던것을 React , Router , SCSS , JSX 문법을 적용하여 재구성하였고! 위결과 위에 화면 처럼 구성하였고!! 위 화면 처럼 Router를 적용 하였고! Link 컴포넌트 useNavigate 둘다 적용해보았다. 그결과

k_gi

라우팅(Routing) 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것 SPA(Single Page Application) html이 하나인 웹 애플리케이션 React-Router 설치 방법 >npm install react-router-dom 설치 후 package.json의 dependencies항목에 react-router-dom가 추가 되었는지 확인 필요 Router.js 작성 react-router-dom 패키지에 BrowserRouter, Routes, Route 컴포넌트를 import한다. BrowserRouter 컴포넌트로 전체를 감싸준다. BrowserRouter 컴포넌트의 자식 요소로 Routes 컴포넌트를 넣어준다. Routes 컴포넌트의 자식 요소로 Route 컴포넌트를 넣어준다.

mjieun

조건문 if SCSS에서 조건문은 자바스크립트와 마찬가지로 조건의 값은 참(true), 거짓(false) 2가지로 표현되며, 둘 중에 조건에 따라 1개를 표현한다. width 크기에 따라 다른 배경색을 나타내도록 디자인을 만들어보자. index.html style.scss style.css 다중 조건문 @if, @else if, @else 자바스크립트처럼 조건이 여러 개일 때 @if, @else if, @else로 조건별로 값은 참(true), 거짓(false)을 판단해 참일 경우를 표현 조건이 늘어날 때 @else if를 추가 조건을 감싸는 괄호는 생략 가능 다중 조건문을 활용하여 박스 width에 따라 다른 배경색을 나타내도록 디자

mjieun

컨텐츠 블록 @content @mixin 내부에 @content가 있으면 해당 부분의 컨텐츠(스타일)을 블록형태로 전달한다. 기존 믹스인의 기능에 선택자 또는 속성을 추가할 때 사용한다. @content로 속성을 추가한 경우 style.scss style.css 단순히 속성만 @content를 이용해서 추가할 경우 아래와 같이 @include가 있는 선택자에 바로 CSS 속성을 추가해도 컴파일된 CSS 코드는 동일하다. style.scss style.css @content로 선택자, 속성을 함께 컨텐츠 블록으로 전달하는 경우 style.scss @content에 의해 @include 내에 .add 선택자와 .add 선택자가 가진 모든 속성이 CSS 선택자로 컴파일 된다. style.css @content로 부모요소에 자식요소 구조의

cl0ud

목표 UI 구성 및 배치 미리보기 전체코드 후기 컴포넌트 구조가 너무 복잡하게 나와서 보기 불편하지만.. 개발 편의성을 위해 구조를 포기했다. 만약 이게 회사 프로젝트 였고, 전임자가 이렇게 해놓고 퇴사했다면 정말 막막했을 것 같다. 최적화하는 방법은 없을까? 시간날 때 조금씩 고민해 보는걸로... 그래도 슬슬 프론트가 거의 끝나간다..! 깃 허브 링크 Github

reeze

Sass란 Sass란, Syntactically Awesome Style Sheets의 약자이다. css의 단점을 보완하기 위해 만든 CSS전처리기이다. 보통 css를 사용하다보면 단순 반복되는 부분이 많고, 일일이 연산을 해서 클래스를 선언 해줘야 하는 등 불편함이 느껴지기 마련인데, Sass는 이 부분을 거의 완전히 해소시켜주는 스타일시트 언어다. CSS Preprocessor란 CSS전처리기(CSS Preprocessor)는 전처리기가 가진 특별한 syntax으로 css를 생성하고, css문서 작성에 도움을 주는 프로그램이다. CSS전처리기를 사용하면, css의 문제점들을 Programmatically한 방식으로 사용할 수 있다. 즉 변수, 함수, 상속 등 일반적인 프로그래밍 개념을 사용하여 해결해 나갈 수 있다. 선택할 수 있는 많은 CSS전처리기가 있지만, 대부분의 CSS전처리기는 기본 css에 존재하지 않는 특징(믹스인(mixin), 중첩 셀렉터(nesti

hanseungjune

⭐ 사이드 프로젝트 시작 말은 E-commerce PJT 라고 거창하지만, 그냥 쇼핑몰 웹사이트를 만들어 보는 것이다. 다만 최대한 백엔드와 프론트엔드 모두를 구현해보려고 한다. 이번에 현대오토에버 이커머스에 지원하면서, 이커머스에 지원했지만... 해당 도메인과 관련된 경험을 해본 적이 없었다. 예상대로 서류 및 코테 탈락을 겪으면서 경험부족에 대한 확신을 가지게 되었다. 물론 코테도 3문제 중 2솔이라서 좀 아쉬운 부분이 있다. 아무튼 이력서를 계속해서 지원하는 동안 코딩을 놓기에는 내 손가락이 공허하고 심심해서 과제테스트가 없는 동안에는 계속해서 진행해볼 생각이다. 📃 작성 코드 및 해석 1. 목표 - 기본 세팅을 yarn 으로 해보기 - Next.js 라우팅 구조로 Pages 폴더와 index.tsx 파일의 형태로 디렉토리 구조를 형성 - fake API 사용 **- React-Query 사용에 queryClient 세팅 해

speciallunch

scss CSS : Cascading Style Sheets SASS : Syntactically Awesome Style Sheets SCSS : "Sassy" CSS typed-scss-modules scss 파일을 type definitions으로 생성 　　　　　　　　　▽ https://velog.io/@jch9537/CSS-SCSS-SASS https://www.npmjs.com/package/typed-scss-modules

cl0ud

목표 UI 구성 및 배치 미리보기 전체코드 후기 대충 전체적인 구조만 구상하고 작업을 시작했다. 포스트 부분은 생각보다 괜찮게 나왔지만, 아무리봐도 프로필 부분이 마음에 안든다. 나중에 수정할 듯 하다. 프로필 아래쪽으로는 카테고리 같이 글을 구분해서 분류해줄 수 있는 무언가를 넣으려고 한다. 생각하고 있는 방식으로는 태그로 분류 -> velog 방식 직접 게시판을 선택해서 등록 시 분류 -> velog의 시리즈, 네이버블로그의 게시판 대표적인 두 가지의 형식을 따르고자 한다. 기능은 최대한 익숙하고 심플할수록 좋기 때문에.. 뭐가 됐든 넣어보고 디자인에 따라 우측으로 배치할 수도 있을 것 같다. 깃 허브 링크 [Github](https://github.com/