전체적인 css - B05-group-plus-project/seongsimdangsajo GitHub Wiki

Description

폰트, 공통 css 관련하여 공지드립니다.

폰트

기본 폰트

  • font-weight : 타이틀 (700), 기본(400) 사용하시면 됩니다.

포인트 폰트 이미지 설명

  • font-weight: normal로 사용하시면 됩니다.
  • class명 추가하여 사용하시면 됩니다. (포인트 폰트사용시 클레스명: font-secondary)

폰트 사이즈

  • 필요한 폰트사이즈의 클래스명으로 변경하여 사용하시면 됩니다. ex) text-(basics 또는 subtitle 또는 title)
  • 기본 : basics
  • 서브타이틀: subtitle
  • 타이틀 : title

컬러

  • 클레스명 추가하여 사용하시면 됩니다.

  • ex) 텍스트 변경: text(main 또는 base 또는 point), 배경색 변경 : bg-(main 또는 base 또는 point)

  • 베이스 컬러: #FFF7DB image

  • 메인 컬러 : #FFF7DB image

  • 포인트 컬러: #A16040 image

전체영역

  • 전체영역을 지정해주는 (ex) layout 파일에 전체 영역에 지정하면 됩니다.
  • 'main-desktop': '1020px': 데스크탑에서 너비 1020픽셀
  • 'main-tablet': '710px': 태블릿에서 너비 710픽셀
  • 'main-mobile': '82%': 모바일에서 너비 82%

사용 예시

<div class="w-main-desktop md-max:w-main-tablet sm-max:w-main-mobile">
  <!-- 내용 -->
</div>

Button, Input

  • 클래스명을 추가하여 사용하시면 됩니다. (버튼 높이는 37로 지정)

사용 예시

 <button class="h-37 bg-point text-white">버튼</button> 

애니메이션

  1. tailwind.config.ts 에 애니메이션을 아래 처럼 설정합니다.
  2. 클래스명 animate-(지정한 애니메이션 이름) 추가합니다.

추가 및 수정

  • 작업 전에 작성된 공지여서, 추후에 수정될 수 있습니다.
  • 공통영역 이여서, 추가 및 수정해야할 시 팀원들과 상의 후에 추가 및 수정하는게 좋을거 같습니다!

작업 위치

파일 위치 : src/app/globals.css

/* 기폰 폰트 */
@font-face {
    font-family: 'LINESeedKR-Bd';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/LINESeedKR-Bd.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'LINESeedKR-Bd';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/LINESeedKR-Bd.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* 포인트 폰트 */ 
@font-face {
    font-family: 'Ainmom';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/Ainmom.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@layer base {
    body {
        @apply font-primary;
    }
}

파일 위치 : /tailwind.config.ts (최상위 레벨)

import type { Config } from 'tailwindcss';

const config: Config = {
    content: [
        './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
        './src/components/**/*.{js,ts,jsx,tsx,mdx}',
        './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    ],
    theme: {
        extend: {
            fontFamily: {
                primary: ['LINESeedKR-Bd', 'sans-serif'],
                secondary: ['AnotherFont', 'sans-serif'],
            },
            colors: {
                'main': '#FFF7DB', 
                'base': '#FBF8EE',
                'point': '#A16040',
            },
            fontSize: {
                'basics': '1rem',  
                'subtitle': '1.5rem',  
                'title': '2rem', 
            },
            screens: {
                'md-max': {'max': '1068px'},
                'sm-max': {'max': '734px'},
            },
            width: {
                'main-desktop': '1020px',
                'main-tablet': '710px',
                'main-mobile': '82%',
            },
            height: {
                '37': '37px'
            },
            animation: {
                'baked': '',
            },
            keyframes: {
                shake: {
                },
            },
        },
    },
    plugins: [],
};
export default config;
⚠️ **GitHub.com Fallback** ⚠️