2020-05-08 TIL May 08, 2020

오늘 할일

svg 사용법 글쓰기

svg를 별도의 컴포넌트로 만드는 것 vs img로 사용하는 것

• 어떤 것이 더 나은지 확인
• 각각 사용 방법 정리

오늘 한일

Bside project 코드 정리

• splash, login 페이지의 코드 중복 삭제
• 컴포넌트명을 좀 더 상황에 적합하게 수정
• BookInfoForm에서 버튼을 별도 컴포넌트로 분리

CSS background 확인

background는 단축 속성으로 다음의 내용을 하나의 선언으로 지정할 수 있다.

1. background-color
2. background-image
3. background-position
4. background-repeat
5. background-size

background-image: url(${imgMain});
background-repeat: no-repeat;
background-position: center;
background-size: cover;

background: no-repeat center/cover url(${imgMain});

background-size

• contain

  • 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정.

• cover

  • 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정.
  • 이미지의 가로세로비가 요소와 다르다면 이미지를 세로 또는 가로방향으로 잘라내어 빈 공간이 생기지 않도록 설정.

react + svg 사용법 글쓰기 완료

react + typescript + webpack 사용법 추가

내일 할일

웹폰트 사용법

노마드코더 진도 확인

Bside 프로젝트 진행 내용 글쓰기

• 삽질했던 CSS 정리
• routeUrl 별도 파일로 분리 -> 토요일로!
• 코드의 모든 path를 찾아 raw string이 포함되지 않도록 처리
• styled component global style 적용 방법 확인
• font 등 중복 코드를 global 적용하여 변경 시 최대한 간단하게