[개인 포트폴리오] [클라이밍 커뮤니티 SNS] 2. 코드 분석 <App.css & index.css>

App.css

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

/* 레이아웃 전체 */
body, html, #root {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  font-family: 'Pretendard-Regular';
  display: flex;
  overflow-y: scroll; /* 세로 스크롤 가능 */
  ::-webkit-scrollbar {
    display: none; /* 스크롤바 숨기기 */
  }
}
/* 반응형 디자인 */
@media (max-width: 600px) {
  body, html, #root {
    flex-direction: column; /* 세로 방향 정렬 */
    font-size: 14px; /* 글꼴 크기 축소 */
  }

  .header, .footer {
    padding: 10px;
    text-align: center;
  }

  .main-content {
    margin: 0;
    padding: 10px;
    width: 100%;
  }
}

 

index.css

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

code {
  font-family: 'Pretendard-Regular';
}