[ToyProject-Todomate] 투두메이트 클론 프로젝트 34

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트

 

---

---

1. 폰트 적용

2. 색상 변수 적용

---

 

 

아무래도 블로그를 자세하게 쓰면 시간을 많이 빼앗기는거 같아서 한 일 위주로 간단하게 작성해보려고 한다.

 

 

어제 밤 

 

- 글씨체를 적용했다.

- SCSS로 이용할 색상 변수들도 작업했다.

 

 

 

1. 폰트 적용

 

stylesheet 폴더에 abstracts 폴더를 생성했다.

내부에 색상 변수를 사용하기 위해_variable.scss 파일과 믹스인을 지정하는 _mixin.scss 파일을 생성했는데 현재까지는 변수만 사용하고 있다. 

그리고 글꼴도 변수화 하기 위해 별도로 _font.scss 파일을 만들었다.

 

 

 

font-face를 적용해서 자동으로 한, 영 폰트가 적용되도록 해보려고 했는데 잘 적용이 안되었다.

unicode-range | CSS-Tricks

 

_font.scss 파일을 이용해서 scss파일들에게 포함해주는 방식으로 사용하고 있는데 이것도 css 변환 시 매번 불러오는 방식이라 그냥 index.html 에 <style></style> 태그 만들고 내부에 선언해서 한번에 쓸 수 있도록 하는 것이 더 나은 방식인 것 같아서 고민이다.

 

 

선택한 폰트는 

 

한글 : Pretendard

영문 : Hahmelt

 

이고 추후 변경될 수 있어 다운받지 않고 눈누를 이용해서 font-face를 선언했다. (한 번 다운받았다가 눈누에서 url 따올 수 있는거 보고 지운건 안비밀)

 

작업하다가 폰트도 npm으로 설치할 수 있다는걸 알았다. 아직 css로 어떻게 선언하는지는 테스트 해보지 못했다.

 

 

@font-face {
  font-family: 'Pretendard';
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard';
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard';
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard';
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard';
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard';
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard';
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard';
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Hahmlet';
  src: local(※), url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/Hahmlet-ExtraBold.woff2") format("woff2");
  unicode-range: U+0041-005A, U+0061-007A;
  font-weight: 800;
}

 

그래서 지금은 아래와 같이 약~간 투두메이트와 비슷하게 작업을 해보고 있다.

여기서 포인트는 영문 폰트가 어떤건지 아직 못 찾았다는 점.... 😓

 

 

 

 

 

2. 색상 변수 적용

 

 

폰트처럼 색상도 투두메이트와 유사하게 하기 위해 그래픽 도구를 이용해서 헥사코드를 따왔다.

그리고 해당 헥사코드들을 _variables.scss 변수 선언 시트에 변수로 선언했다.

 

// 변수 선언
// 색상

$bg-white: #ffffff; // 배경 흰색 (default)
$main-navbar-gray: #fafafa; // main-navbar bg
$goal-btn-gray: #f5f5f5; // main-feed 목표 버튼
$goal-btn-border-gray: #f3f3f3; // main-feed 목표 버튼 테두리

$text-black: #1c1c1c; // 텍스트
$text-gray: #afafaf; // 텍스트
$icon-black: #000000; // 아이콘

 

해당 시트를 사용하는 SCSS 파일들에게 import 시켜서 변수를 쓰면 된다.

 

@import './abstracts/variables';

 

위 두 가지를 적용한 App.scss 파일은 이렇다.

 

@import './abstracts/variables';
@import './abstracts/font';

.App {
  text-align: center;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 100vh;
  margin: auto;

  .header{
    width: 90%;
    margin-bottom: 50px;
      .main_img{
        width: 400px;
      }

      h1{
        font-family: 'Hahmlet';
      }
  }
  
  .start_btn{
    width: 90%;
    
    button{
      width: 80%;
      font-weight: 400;
      font-size: 12px;
      background-color: $goal-btn-gray;
  
      &:nth-child(1){
        margin-bottom: 1em;
      }
      &:hover{
        box-shadow: none;
      }
    }
  }
}

 

 

오늘은 목표를 클릭하면 아래에 Input이 뜨도록 하는 .... 그런 일을 해야 한다 😥 화이팅~!