sm 기술 블로그

[스프링 부트] 폰트적용 본문

스프링부트

[스프링 부트] 폰트적용

sm_hope 2022. 7. 13. 19:01

1. common.css 생성

main/resources/static/resource/common.css 에 css파일을 생성한다.

2. 폰트 기입 눈누

=> 강원도 교육튼튼체 적용

@font-face {
    font-family: 'GangwonEduPowerExtraBoldA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduPowerExtraBoldA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html > body,
html > body input,
html > body select,
html > body textarea,
html > body pre,
html > body button {
  font-family:"GangwonEduPowerExtraBoldA";
  line-height:1.3;
  text-underline-position:under;
}

다음과 같이 작성한다.

3. 적용

원하는 페이지에 다음과 같이 추가한다.

  • html 태그 수정
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" class="light" data-theme="light">
  • link 추가 1
<link href="https://cdn.jsdelivr.net/npm/daisyui@2.14.0/dist/full.css" rel="stylesheet" type="text/css" />
  • link 추가 2
<link rel="stylesheet" href="/resource/common.css">

3-1 최종 추가 모습(레이아웃에 추가)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" class="light" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title layout:title-pattern="$LAYOUT_TITLE | $CONTENT_TITLE">게시판</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/daisyui@2.14.0/dist/full.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" href="/resource/common.css">
</head>

'스프링부트' 카테고리의 다른 글

[스프링 부트] 에러 모음  (0) 2022.07.14
[스프링 부트] CascadeType.REMOVE  (0) 2022.07.14
[스프링 부트] 양방향 관계 엔티티 사이클 방지(JsonIdentityInfo)  (0) 2022.07.13
[스프링부트] JSP와 Thymeleaf  (0) 2022.07.11
[스프링 부트] 타임리프 URL  (0) 2022.07.10
'스프링부트' Related Articles more
Comments