CSS

기존의 css 스타일링에 있어서 불편함이 없고, 새로운 기술을 배우는 것이 불필요하다고 생각할 때 사용

sass

css pre-processor로서, 복잡한 작업을 쉽게 할 수 있게 해주며, 코드의 재활용성 및 가독성을 높여주어 유지보수에 용이

scss기본 용법

• $
  - 변수 선언
  - $변수명: 속성값
• mixins
  - 스타일시트 전체에서 재사용할 css 선언 그룹을 정의하는 기능
  • 스타일 블록을 함수처럼 사용할 수 있음
• &
  - 네스팅하고 있는 셀렉터 치환

style-component

CSS파일이 아닌, Javscript내에서 CSS를 사용할 수 있는 기법
yarn add styled-components 를 이용하여 설치 후 사용한다.

@emotion/styled

JavaScript로 CSS스타일을 작성하도록 설계된 라이브러리
문자열 및 개체 스타일 모두 지원
jsx안에서 emotion은 어떤 태그인지 바로 알 수 있음.

반응형

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

react-responsive

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

mediaquery

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

와 같은 방식으로 사용한다.

react에서 사진 삽입

사진의 종류는 .jpg, .png파일이 있으나 개발할 때 보통 SVG아이콘으로 많이 사용!

이유는? 화질이 깨지지 않고, 출력이 빠르며 수정과 애니메이션이 가능하다!

svg

Scalable Vector Graphics의 약어로 각 위치 값을 표시하는 벡터와 같은 방식의 2차원 그래픽용 xml기반의 형식

xml이란? html과 같은 마크업 언어

xml은 웹페이지에서 데이터를 주고받기 위한 태그들로 기술된 문서
svg같은 경우에는 이미지가 코드로 표현되었다고 생각할 것!

React에서 svg사용법?

• 파일로 저장 후, img태그로 사용

import React from 'react';
import smile from '../assets/smile.svg';
const SaleItem = () => {
   return (
      <div>
         <img src={smile} alt="smile" />
      </div>
   );
};

export default SaleItem;

• svg컴포넌트처럼 사용하는 방법

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

export default SaleItem;