52 :: 좋은 앱, React 스타일링, Sass, styles-components

엘리스 SW 엔지니어 트랙 52일차

온라인 강의날

 

 

좋은 앱이란?

1. 번들 사이즈에 대한 고려

HTML, CSS, JS가 차지하는 사이즈

번들 사이즈가 커지면 로딩 길어진다

 

2. 앱 성능

animation, transition 등 유저와 상호작용에서

스타일 코드 성능이 중요 요소

 

3. 사용자에게 유리한 UI/UX

스타일링에 대한 지식 필요

 

4. 자바스크립트와 스타일 적절하게 조합

UI 토글링, 애니메이션, 다크보드, 복잡합 UI 컴포넌트 등

자바스크립트 지식만으로 구현하기 힘들다

 

5. 유지보수가 용이하고 확장 가능한 코드

스타일 코드 작성하고, 관리하는 지식 필요

 

 

React 스타일링

방법 3가지

 

1. CSS import

CSS 파일을 import 해서 사용

자바스크립트 파일 분리

 

2. CSS module

하나의 CSS module 파일 안에 작성한 스타일은

하나의 namespace로 관리

class name 뒤에 겹치지 않는 hash가 랜덤으로 붙는다

 

CSS module 사용예시

// CSS module
import styles from "./input-with-button.module.css"

export function InputWithButton(){
	return(
    	<div className={styles.container}>
        	<input className={styles.input} />
            <button className={styles.button} >Submit</button>
        </div>
    )
}

 

 

3. CSS-in-js

컴포넌트 파일 안에서 스타일 작성

자바스크립트 문법 그대로 활용

Sass 문법 활용 가능

React 스러운 코드 작성 가능하다고 한다

 

import styled from "styled-components"

const Container = styled.div`
  background: rgba(0, 0, 0, 0.05)
  margin: 10px;
  padding: 5px;
`

 

 

CSS Box Model

• CSS layout 기본이 되는 모델
• content-box, padding-box, border-box, margin-box 순으로 하나의 Element 감싸고 있다
• box 타입 inline, block, inline-block

 

content + padding = border box

border box + margin = margin box

 

box-sizing: border-box

border-box를 기준으로 만든다는 뜻

쉽게 이해할 수 있어 많이 이용된다

reset.css에서 많이 본듯

 

 

CSS Position

• static
  default 값
  
  
• relative
  자기 자신에 상대적으로 위치
  
  
• absolute
  가장 가까운 ancestor에 상대적으로 위치
  여기서 ancestor는 static 제외한 다른 position
  
  
• fixed
  viewport에 상대적으로 위치
  viewport 스크린, 모바일 화면
  
  
• sticky
  가장 가까운 scrolling ancestor에 상대적으로 위치
  
  

 

CSS Units

• 절대적인 길이
  px, pt, cm, in
  
  
• 상대적인 길이
  em: 부모 폰트에 상대적인 크기
  rem: 가장 최상단의 부모의 em
  %: 부모의 크기 따라간다
  
  
• viewport 상대적인 길이
  vw, vh, vmin, vmax
  바라보는 viewport에 상대적인 길이
  
  

 

 

Sass(Syntactically Awesome Style Sheets)

CSS Preprocessor

SCSS, Sass 문법 지원해준다

 

CSS를 프로그래밍 언어적으로 활용하도록 확장

(모듈, 믹스인, nexted style, 변수, 조건문, 반복문 등)

 

styled-components 라이브러리는 Sass를 기본적으로 지원

 

& 문법

자기 자신을 나타내는 placeholder

기족 CSS selector 문법을 응용해서 복잡한 스타일 적용

/* Sass & 문법 */
.rest-button {
  &.active {}
  &:hover {}
  &:not(:first-of-type) {}
  & > button {}
}

 

 

Variable & Nested style

변수 사용

색상, 사이즈 등 자주 사용하는 값에 사용

 

Nested style

하나의 block 안에 여러 CSS 적용 가능

/* Sass 변수 */
$color-red: red;
$color-white: #fff;

.reset-button {
  color: $color-red;
  &:hover {
    color: $color-white
  }
}

 

 

mixins, import, include

여러 스타일들을 컴포넌트화 시켜놓은 것처럼 보인다

이 스타일 컴포넌트르 가져와서(import)

적용(include) 시키는 내용

파일명: font-styles.scss

/* mixins */
@mixins font-style-1 {
  font-size: 36pt;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.05;
}

/* import, include sass mixins */
@import './font-styles.scss'

.button {
  @include font-style-1
  background: red;
}

 

 

CSS Flexbox

반응형 디자인, 가운데 정렬, 비율로 정렬 유리

 

flex-direction

main axis 결정

 

justify-content

main axis에서 정렬 결정

 

align-items

cross axis에서 정렬 결정

 

flex-wrap

내부 item의 width가 컨테이너보다 커질 때 정렬 결정

 

flex-grow

컨테이너 커질 때 item 얼마나 늘어날지 결정

 

flex-shrink

컨테이너 줄어들 때 item 얼마나 줄어들지 결정

 

flex-basis

기준점이 되는 item 크기

 

justify-self

main axis에 따라 한 아이템 정렬

 

align-self

corss axis에 따라 한 아이템 정렬

 

order

컨테이너에서 item 순서 결정

 

 

flex: (flex-grow) (flex-shrink) (flex-basis)

flex: 1 은 flex : 1 1 auto

 

 

styles-components

자바스크립트 파인 안에 스타일 정의

React 컴포넌트처럼 활용

변수, 함수, 반복, 조건, 모듈 활용 가능

별도 CSS 파일 없이 하나의 파일 안에 스타일 관리하고 싶을 때 유리

 

tagged template literal 문법 활용

CSS 코드에 post-css, minification. Sass 적용

CSS 코드 겹치지 않게 처리 => 클래스 이름 hash

 

 

// styled components
const Button = styled.button`
  background: red;
  color: white;
  padding: 12px 40px;
  border: none;
`


// 사용을 컴포넌트처럼 한다

<Button>Submit</Button>