운영진 스터디 - 4주차

이번주에는 style에 대한 것을 배웠다!

Sass 란?

Syntactically Awesome Style Sheet의 줄임말로 CSS pre-processor이다.

• 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여준다!
• 또한 코드의 가독성을 높여주어 유지보수를 쉽게 해준다!

sass에서는 두 가지의 확장자 .scss / .sass 를 지원한다. 보통은 scss 문법이 더 많이 사용된다!

sass 설치

yarn add node-sass

CSS vs Sass

1. HTML을 작성할 때 우리는 중첩 혹은 시각적인 계층 구조가 있는 경우를 흔히 볼 수 있다.

CSS와 달리 Sass는 HTML의 동일한 시각적 계층 구조를 따르는 방식으로 CSS selectors를 이용해 중첩해 꾸밀 수 있다!

1. CSS와 달리 HTML의 부모-자식 관계에 따라 스타일 속성들도 네스팅할 수 있다.

   → 불필요한 클래스를 만들거나 선택자를 한 줄에 길게 써야 하는 수고를 덜어 준다.

   이게 무슨 말이냐 !

   nav li{
   	margin: 0 auto;
   	padding: 0;
   	list-style: none;
   }
   nav ul{
   	display: flex;
   }
   nav a{
   	display: block;
   	padding: 6px 12px;
   	text-decoration: none;
   }

   이렇게 nav 태그 안에 있는 li/ul/a태그에 대한 css를 작성하려면 저렇게 선택자를 한 줄에 길게 써주어야 한다.

   반면 Sass는

   nav{
   	li{
   		margin: 0 auto;
   		padding: 0;
   		list-style: none;
   	}
   	ul{
   		display: flex;
   	}
   	a{
   		display: block;
   		padding: 6px 12px;
   		text-decoration: none;
   	}
   }

   이런식으로 여러 태그를 한 줄에 길게 쓰지 않고 쓸 수 있다 !!

Sass 문법

• ‘$’ 란?

→ Scss는 $ 기호를 사용하여 변수를 만든다 .

`$변수명: 속성값` 이런식으로 변수를 만들 수 있다.

Example

$red: #fa5252;
$orange: #fd7e14;
$yellow: #fcc419;

• ‘mixins’란?

→ mixins는 스타일시트 전체에서 재사용할 CSS 선언 그룹을 정의하는 기능으로 스타일 블록을 함수처럼 사용할 수 있게 해준다!

• @mixin 은 재사용할 내용을 선언하는 부분
• @include 는 @mixin 에서 정의된 내용을 삽입하고 적용하는 부분

@mixin 믹스인이름 {
	스타일;
}

• ‘&’ 란?

→ 네스팅하고 있는 셀렉터를 치환하는데 ‘문자’를 치환하기 때문에 클래스명을 쪼개서 쓸 수도 있다!

---

Example

btn, btnBlue, btnRed 라는 클래스명을 가지는 변수들이 있을 때, 여기서 공통 속성은 btn이다.

개별 속성은 해당 네스팅 내에, &Blue, &Red로 또 네스팅해서 추가할 수 있다!

btn을 &으로 치환한 느낌이랄까?!

Styled-components

styled-components는 현존하는 리액트 CSS-in-JS 관련 라이브러리 중에서 가장 잘 나간다고 한다.

styled-components에서는 스타일을 입력할 떄 Tagged Template Literal 이라는 ES6 문법을 사용한다.

이 문법을 사용하는 이유는 이렇게 생긴 백틱?을 사용할 때 내부에 JavaScript 객체나 함수가 전달될 때 이를 따로 추출하기 위해서다

styled-components vs CSS vs Sass

styled-components는 하나의 자바스크립트 파일 안에 스타일까지 작성할 수 있다.

그래서 추가적인 .css나 .scss 같은 파일이 필요없다!

또한 styled-components 클래스 이름으로 스타일링을 하는 CSS와 달리 props 를 이용한 조건부 스타일링도 가능하다.

설치 : yarn add styled-components

styled-components 문법

• styled.태그명 → 스타일링된 엘리먼트를 만들 때, 상단에서 styled-component로부터 styled를 import 해주고 styled.태그명 을 사용해 구현한다.

  import styled from 'styled-components';
  
  const MyComponent = styled.button`
  	padding: 20px;
  	color: black;
    (스타일 작성)
  `;
  

  태그명 자리에 div , input등 원하는걸 넣어서 사용하면 된다. 만약 보여줘야 할 태그 형식이 유동적이거나, 아니면 특정 컴포넌트에 스타일링 을 해야 하는 상황이라면 다음과 같이 구현할 수 있다.

  import styled from 'styled-components';
  
  // 문자열로 styled 의 인자로 전달
  const MyInput = styled('input')`
  	background: gray;
  `;
  // 컴포넌트 형식의 값을 넣어준다
  const MyLink = styled(Link)`
  	color: blue;
  `;

emotion

JavaScript로 CSS 스타일을 작성하도록 설계된 라이브러리로 소스 맵, 레이블 및 테스트 유틸리티와 같은 기능이 있다. 문자열 및 개체 스타일 모두 지원 가능.

• emotion 사용방법
  • 프레임워크 사용 x
  • React 사용
• styled-component vs emotion
  • emotion이 더 편리한 듯 싶다!
  • jsx안에서 emotion은 어떤 태그인지 바로 알 수 있다!
  • styled-components는 component 이름에 div , ul 등의 태그를 써놓지 않으면 이게 어떤 태그인지 바로 알기는 어렵다!

반응형

특정 조건에서 브라우저 화면의 넓이나 높이가 어떤 기기에서 실행되고 있는지를 파악해서 기기별로 서로 다른 스타일을 제공하는 방법을 선택하는 것을 반응형 프로그래밍이라고 한다~!

방법에는 두 가지가 있다 (react-responsive / Mediaquery)

1. react-responsive

   yarn add react-responsive or

   npm install react-responsive

   반응형 웹을 만들고 디자인하다 보면 구조나 기능 자체를 다르게 해야 하는 경우에 사용!!

   ex) PC에서는 길게 늘어진 메뉴 → 모바일에서는 메뉴 버튼

   참고 : https://velog.io/@pyo-sh/React-Responsive

2. Mediaquery

@media screen and (max-width: 768px) {
  font-size: 15px;
  font-weight: bold;
}

이런식으로 사용한다 !

위의 코드를 설명해보자면 768px 전!! 까지의 width에서는 font-size는 15px, font-weight는 bold 속성을 적용한다는 의미이다!

React에서의 사진삽입

주로 개발할 때는 svg 아이콘을 많이 사용하는 것을 확인할 수 있다.

• 그 이유는? 왜냐하면 깨지지 않고 출력이 빠르며 수정과 애니메이션이 가능하기 때문이다!
  
• SVG의 장점 코드를 수정함으로써 크기와 색깔 등을 쉽게 변경할 수 있다. → 재사용이 가능 !
  
• SVG 사용법

  1. svg 파일로 저장하고 img태그의 속성값에 넣어 사용하기

     import React from 'react';
     import smile from '../assets/smile.svg';
     const SaleItem = () => {
        return (
           <div>
     				 //src 속성값에 넣어준다
              <img src={smile} alt="smile" />
           </div>
        );
     };
     
     export default SaleItem;

  2. svg 파일로 저장하고, 불로와서 svg를 컴포넌트처럼 사용하기

     • svg 속성값을 변경하려는 경우 svg 파일에서 속성값을 current로 작성해주고 svg 컴포넌트에서 원하는 속성값으로 변경이 가능하다!

     import React from 'react';
     import { ReactComponent as Smile } from '../assets/smile.svg';
     const SaleItem = () => {
        return (
           <div>
              <Smile fill="blue"/>
           </div>
        );
     };
     
     export default SaleItem;

  3. svg 태그를 바로 사용하기

     npm install file-loader --save-dev