-
[엘카데미 챌린지] Bard로 만드는 MBTI 검사 웹사이트 5일차코딩 챌린지 2023. 8. 3. 23:58
이제 웹개발 기초강의를 다 듣고 실습으로 넘어가게 되었다. 첫 강의는 내가 웹사이트를 만들었을 때의 최종 결과물의 예시를 보여주며 이런 형태의 웹사이트가 나온다고 알려주는 것이었다. 주의할 점은 대부분의 코드를 Bard를 사용해서 짜기 때문에 전체적인 것은 비슷해도 디테일들을 다를 수 있다고 했다.
처음에는 html파일을 생성해서 웹페이지들의 기본적인 뼈대들을 만들었다. 그리고 html파일들의 기초 구조는 일일이 다 입력하면 시간이 너무 오래 걸리므로 미리 구조가 입력되어 있는 탬플릿 같은 것을 '!'를 입력해 불러온다.
이제 기본 폰트 대신에 내가 원하는 폰트를 적용시켜 주면 된다.
1. CSS를 이용하는 방법
폰트 사이트에서 '웹폰트로 사용'이라고 되어있는 칸이 있는데, 그 부분을 복사해서 html head부분에 style로 적용시켜 주면 된다.
<head> <style> @font-face { font-family: 'S-CoreDream-3Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff'); font-weight: normal; font-style: normal; } body { font-family: 'S-CoreDream-3Light'; } </style> </head>body윗부분은 CSS코드를 이용해 폰트를 다운로드하는 부분이고 body {} 부분이 폰트를 적용시켜 주는 부분이다.
2. link를 이용해 폰트를 적용하는 방법
<head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"> <style> body { font-family: 'Noto Sans KR', sans-serif; } </style> </head>구글 폰트에서는 link기능으로 폰트를 다운로드할 수 있는 기능을 구현해 놓았다. 그대로 복사 후 <head> 안쪽에 붙여 넣어준다. 그리고 다운로드한 폰트 적용을 위해 <style> 안쪽에 body 부분에 font-family: 이 부분을 붙여 넣어준다.
이제 부트스트랩을 적용해 주기 위해 부트스트랩 공식 사이트에서 https://getbootstrap.com/docs/5.3/getting-started/introduction/ 두줄의 코드를 각각 head와 body에 붙여 넣어준다.
<head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script> </body>'코딩 챌린지' 카테고리의 다른 글
[엘카데미 챌린지] Bard로 만드는 MBTI 검사 웹사이트 7일차 (0) 2023.08.05 [엘카데미 챌린지] Bard로 만드는 MBTI 검사 웹사이트 6일차 (0) 2023.08.04 [엘카데미 챌린지] Bard로 만드는 MBTI 검사 웹사이트 4일차 (0) 2023.08.03 [엘카데미 챌린지] Bard로 만드는 MBTI 검사 웹사이트 3일차 (0) 2023.08.01 [엘카데미 챌린지] Bard로 만드는 MBTI 검사 웹사이트 2일차 (0) 2023.07.31