태그 밑에다가 아래와 같이 적어주기 ```html <link rel="stylesheet" href="/resource/common.css" /> ``` - href에 폰트 파일의 경로를 적어주면 됨 (resource 폴더부터 적어주기) 2. 나중에 js를 적용할 파일도 있어야 하므로 css 태그 밑에다가아래와 같이 적어주기 (현재 js를 아직 구현하지 않는다면 common.js 파일 생성과 \<script> 태그 적는 부분은 다 건너뛰어도 됨) ```html <script src="/resource/common.js" defer="defer"></script> ``` - `defer="defer"`는 이 스크립트 파일이 저 위치에서 바로 실행되는 것이 아니라 html이 다 실행된다음에 맨 나중에 자바스크립트를 실행시키도록 하는 것 - 즉, defer를 써주면 html 먼저 실행이 된 후 마지막에 자바스크립트가 실행되게 한다고 생각하면 된다. 3. `/resource/common.js` 라는 경로를 \<script>태그에 적어줬으니 resource 폴더의 하위에 `common.js` 파일도 미리 생성해놓기 - 아직 js는 구현하지 않음 4. 폰트 적용이 필요한 페이지마다 아래 코드 다 넣어주기! ```html <link rel="stylesheet" href="/resource/common.css" /> <script src="/resource/common.js" defer="defer"></script> ``` - 모든 페이지에 폰트를 적용하고 싶으면 모든 페이지의 똑같은 자리(head 태그 안에서 title 태그 바로 밑)에 위 태그들을 넣어주어야 한다. - 즉... 페이지마다 아래와 같은 코드를 일일이 넣어주어야 css 및 js가 적용된다 5. 하지만, 페이지가 한 두개여야 넣어주지 몇백개 몇천개 페이지면 저렇게 다 일일이 넣어주는게 말이 안된다. 그래서 따로 `head.jspf`, `foot.jspf` 로 따로 jspf 파일을 만들어 공통되는 상단과 하단 부분을 따로 뺀다. - jspf에서 f는 그냥 공통된 부분을 따로 뺀 파일을 뜻한다.</article></body></html>

$$config title: [SpringBoot] 스프링부트에 폰트 적용하기 keywords: - IT - 스프링부트 - CSS - 폰트 $$ # 스프링부트 폰트 적용하는 방법 ## 폰트 코드를 저장할 common.css 파일 만들기 1. `src/main/resources` 폴더 안에 `static 폴더 > resource 폴더 > common.css` 파일 만들기 2. common.css 파일에 눈누에서 복사한 폰트 코드 붙여넣기 3. 코드를 보고 `src: url('//cdn.jsdelivr.net~~~~~)` 부분에서 // 앞에 `https:` 붙여주기 (3개 다!) 4. 마지막 코드에서 `.lottemartdream *` 이렇게 되어 있는 부분을 지우고 `html > body` 쓰기 (다른 폰트 적용하면 다른 폰트명 적혀있음) - 예시) 아래처럼 코드가 되어있어야 함 > common.css ```css @font-face { font-family: 'LotteMartDream'; font-style: normal; font-weight: 400; src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff') format('woff'); } @font-face { font-family: 'LotteMartDream'; font-style: normal; font-weight: 700; src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff') format('woff'); } @font-face { font-family: 'LotteMartDream'; font-style: normal; font-weight: 300; src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff') format('woff'); } html > body { font-family: 'LotteMartDream', sans-serif; } ``` ## 폰트 적용하여 화면단에 보여주기 ### jsp 파일에 폰트 적용하기 1. \ 태그 안의 \ 태그 밑에다가 아래와 같이 적어주기 ```html <link rel="stylesheet" href="/resource/common.css" /> ``` - href에 폰트 파일의 경로를 적어주면 됨 (resource 폴더부터 적어주기) 2. 나중에 js를 적용할 파일도 있어야 하므로 css 태그 밑에다가아래와 같이 적어주기 (현재 js를 아직 구현하지 않는다면 common.js 파일 생성과 \<script> 태그 적는 부분은 다 건너뛰어도 됨) ```html <script src="/resource/common.js" defer="defer"></script> ``` - `defer="defer"`는 이 스크립트 파일이 저 위치에서 바로 실행되는 것이 아니라 html이 다 실행된다음에 맨 나중에 자바스크립트를 실행시키도록 하는 것 - 즉, defer를 써주면 html 먼저 실행이 된 후 마지막에 자바스크립트가 실행되게 한다고 생각하면 된다. 3. `/resource/common.js` 라는 경로를 \<script>태그에 적어줬으니 resource 폴더의 하위에 `common.js` 파일도 미리 생성해놓기 - 아직 js는 구현하지 않음 4. 폰트 적용이 필요한 페이지마다 아래 코드 다 넣어주기! ```html <link rel="stylesheet" href="/resource/common.css" /> <script src="/resource/common.js" defer="defer"></script> ``` - 모든 페이지에 폰트를 적용하고 싶으면 모든 페이지의 똑같은 자리(head 태그 안에서 title 태그 바로 밑)에 위 태그들을 넣어주어야 한다. - 즉... 페이지마다 아래와 같은 코드를 일일이 넣어주어야 css 및 js가 적용된다 5. 하지만, 페이지가 한 두개여야 넣어주지 몇백개 몇천개 페이지면 저렇게 다 일일이 넣어주는게 말이 안된다. 그래서 따로 `head.jspf`, `foot.jspf` 로 따로 jspf 파일을 만들어 공통되는 상단과 하단 부분을 따로 뺀다. - jspf에서 f는 그냥 공통된 부분을 따로 뺀 파일을 뜻한다.</article></body></html>