inflearn logo
강의

講義

知識共有

Tailwind CSSで作る素敵なWeb UIスタイリング

HTML ワイヤーフレーム構造作成 (レスポンシブウェブ)

메인 폰트 사용법이 궁금합니다.

193

ddingjo1429

投稿した質問数 4

1

4.0 기준으로 학습하고 있습니다.

input.css 파일을 아래와 같이 작성하면

자동으로 Montserrat 폰트 즉 첫번째 줄 폰트가

적용되는건가요?

메인 폰트 적용 방법을 모르겠습니다.

@theme {

--font-mont: "Montserrat", "sans-serif";

--font-noto: "Noto Sans KR", "Arial", "sans-serif";

/* Color */

--color-deepgreen:#6ab04c;

--color-deeporange:#f0932b;

}

HTML/CSS 반응형-웹 tailwindcss

回答 2

0

ddingjo1429

아 확인했습니다. ai가 많은 도움 되네요.ㅎ

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다. 좀 해님.

Tailwind CSS에서 폰트를 적용하는 방법에 대해 궁금하시군요. 아래 질문과 답변을 참고하시길 바랍니다.

  1. Tailwind CSS에서 폰트 설정: Tailwind CSS는 커스터마이즈된 구성 파일을 통해 폰트를 설정할 수 있습니다. theme.extend를 통해 폰트를 설정할 수 있으며, extend 섹션에 추가한 후 해당 클래스를 사용하여 HTML 요소에 적용됩니다.

  2. 글꼴 로딩:

    • 폰트가 제대로 적용되기 위해서는 해당 폰트가 브라우저에 로드되어야 합니다. Google Fonts나 기타 웹폰트 서비스에서 폰트를 가져와 index.html<head><link> 태그로 추가할 수 있습니다.
    • 예시 (Google Fonts 사용):
      
      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
      

  3. Tailwind 구성파일에서 폰트 설정:

    • tailwind.config.js 파일이 있다면 다음과 같이 수정합니다:
      
      module.exports = {
      theme: {
       extend: {
         fontFamily: {
           mont: ['Montserrat', 'sans-serif'],
           noto: ['Noto Sans KR', 'Arial', 'sans-serif'],
         },
       },
      },
      }
      

    • 그 이후로 HTML에서 class="font-mont"와 같은 클래스로 해당 폰트를 적용할 수 있습니다.

관련된 질문들을 참고하면 도움이 될 것입니다:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

7강 도형+펜툴 중 막혔습니다ㅠㅠㅠ

0

17

1

안녕하세요! 작업 속도를 높여주는 단축키와 플러그인 강의는 없는걸까요?!

0

15

1

part3. spy 쪽 / part3,part4 강의자료

0

31

2

최종 코드

0

37

2

Open AI 결제

0

39

2

figma 파일을 받을 수가 없어요

0

48

1

다운로드 연결이 되지 않을 때는 어떻게 해야할까요?

0

36

1

Visual Studio Code 대신 Pycharm 써도 되나요?

0

42

2

커서, 클로드, 피그마는 모두 유료버전을 사용해야하나요?

0

54

1

구글 서치콘솔 도메인 소유권 확인 실패

0

37

2

antigravity로 하던 작업 이제 visual code로 하면 되는 거죠?

0

57

1

다음 강의 얼른 올려주세요

0

44

2

선생님 섹션 2의 색상 설명 자료는

0

35

2

일반 강의와 차이점?

1

52

1

중요하진 않지만 설명하신부분에서 안된부분..

1

34

1

그리드 레이아웃 관련 질문드립니다.

1

135

2

유틸리티 클래스 외부 링크

1

159

2

반응형 레이아웃 문의 드려요.

1

131

2

섹션 1 - 3강 화면이 안나오는것 같네요

1

209

2

text가 border 밖에 형성되는 이유와 해결방법을 알고싶습니다

1

181

1

단축키 질문입니다!

1

226

1

섹션1 Animation에서 실습에 활용되는 svg 파일이 images 폴더 안에 안 들어 있습니다.

1

276

1

저도 윗 분과 마찬가지로 폴더구성이 다릅니다.

1

373

2

첨부파일 누락확인

1

469

2