나만의 무료 웹사이트 제작 2부 – 상단메뉴(navbar)

1부에 기초작업으로 제작했던 웹사이트 초기화면에 이어, quarto 홈페이지에 가서 관련 문서(quarto.org/docs/websites)를 보면서 우리의 홈페이지를 하나씩 바꿔 보도록 해보겠습니다. (혼자서 해보는 독립성! 그 독립성을 키워봅시닷~!)

혹시 1부를 안보시고 여기 2부 페이지에 바로 접속하셨다면 먼저 아래의 1부 페이지(여기를 클릭)를 먼저 읽고 오시면 좋습니다.

Quarto 웹사이트 제작 안내 페이지

렌더링을 통해 팝업된 브라우저 초기화면에서 Quarto 웹사이트주소가 보이시나요? (To learn more about Quarto websites visit https://quarto.org/docs/websites.) 클릭해서 접속해보시죠. 위와 같이 Creating a Website라고 꼬부랑 글씨가 보입니다.

영어가 거슬리는 분은 오른쪽 마우스를 클릭 > 한국어로 번역 을 선택하시면 한결 수월하게 보실 수 있습니다. 마이크로소프트의 엣지나 구글의 크롬 브라우저 모두에서 번역화면을 보여줍니다.

이제 눈이 편해서 좋은데 문제는 이게 무슨 말이지 당췌! Quarto 용어 자체도 익숙치 않은데 한글로는 더 못 알아 먹겠네! 여기서 Quarto 홈페이지 보는 건 중단하겠어!(나중에 쿼토가 익숙해 지시면 세부적인 내용을 한번 찬찬히 읽어보시기 바랍니다.)

웹사이트 이름 바꾸기

일단, 오늘은 우리가 만든 작품의 상단 메뉴(quarto-website, Home, About)를 한번 바꿔 보도록 하겠습니다. 이 메뉴를 대개 navbar(네비게이션바)라고 합니다.

먼저, 메인 타이틀 바꾸기! quarto-website <-이걸, IT Playground <- 요렇게 바꿔보겠습니다. RStudio를 실행하고 우측 하단의 Files창 root 폴더(제 /경우 C:\R\Project\quarto-website\)에서 웹사이트 초기화면을 맡고 있는 index.qmd 파일을 클릭해서 코드 소스 중에서 title을 IT Playground로 바꿔줍니다. 당연히 여러분은 원하시는 웹사이트 이름으로 변경하시면 됩니다.

네비게이션바(navbar) 메뉴 추가하기 – talks

Files창의 제일 상단에 보면 _quarto.yml 파일이 보이시죠? yml은 야믈(YAML) 파일을 말하는 것으로 타이틀, 메뉴 등 웹사이트의 전체적인 설정을 다루고 있는 파일입니다. 참고로, YAML 은 Yet Another Markup Language의 약어입니다. 그 파일을 클릭해서 소스 코드를 아래와 같이 변경합니다. 변경전과 변경후를 보시면 차이를 아시겠죠? 웹사이트 타이틀 변경(quarto-website -> IT Playground)하고, navbar에 talks 메뉴를 생성하기 위해talks.qmd를 추가했습니다.

그런데 찬찬히 생각해보면 root 폴더에 index.qmd는 있는데 talks.qmd는 없는데요? 마~앚습니다! 그래서 그 파일을 만들고 내용도 넣어 보겠습니다. 아래 그림처럼 Files창에서 Blank File > Quarto Doc 을 따라가시면 새창이 뜨고 거기에 talks.qmd를 입력하고 OK! 그러면 root 폴더에 talks.qmd가 생겨납니다.

새로 생성된 talks.qmd 파일을 클릭해서 /yaml 입력후 엔터를 칩니다. 그리고 다음 그림처럼 — 사이에 navbar에서 talk를 클릭했을 때 나타날 웹페이지에 나올 메인 제목(talks)과 본문내용(IT Playground에서….)를 입력합니다.

단축키로 렌더링 하기

윗 단계까지 수행하고 난뒤 Crtl + Shift + B를 누르면 웹사이트가 렌더링 되면서 웹브라우저에서 아래와 같이 변경 및 추가한 내용을 확인할 수 있습니다. 사이트 제목이 바뀌고, 초기화면 메인 타이틀이 바뀌고 talks 메뉴가 생겼고 그 메뉴를 누르면 talks 페이지가 나타납니다.

정리하기

정리하면, 이번 회차에서는 index.qmd의 title을 바꾸고, yaml 파일의 title 변경 및 talks.qmd를 삽입하고, talks.qmd를 root 폴더에 생성하고 그 파일에 ‘/yaml’을 입력하여 talk.qmd 섹션의 title과 본문 내용을 입력했습니다. 그리고 렌더링 했더니 우리가 하려고 했던게 짠 하고 나타났습니다. 참 쉽죠잉~

추가1 – icon 삽입하기

추가로 navbar에 아이콘을 넣어보겠습니다. Quarto 홈페이지 내 navbar 관련 페이지(여기를 클릭)를 보시면 아래와 같은 옵션과 설명 표가 있습니다. icon이 보이시나요?

Quarto에서 Bootstrap 5 icons을 사용하네요.

right:
  - icon: github
    href: "#"
    aria-label: R Playground

_quarto.yml 파일에서 위 그림과 같이 입력해주시면 됩니다. href는 아이콘을 클릭했을 때 연결해주고 싶은 곳의 주소를 넣어주시면 됩니다. 저는 일단 “#”으로 세팅해서 클릭해도 아무런 반응이 없도록 해두었습니다.(아참! navbar에서 icon은 오른쪽(right), 그 외 메뉴는 왼쪽(left)에 나타나도록 설정해 놨습니다. 그리고 navbar 백그라운드는 white로 해두었습니다.) 이 설명은 아래 그림을 보시면서 이해가 되시리라 생각합니다.

렌더링해서 웹 브라우저로 확인하려면 단축키가 뭐였죠? 네! Ctrl+Shift+B입니다. 그러면 아래와 같이 우측 상단 돋보기 옆에 깃허브 아이콘이 짠~ 하고 나타나게 됩니다. 이것도 뭐 그리 어렵지 않았죠?

제 2의 인생이 활짝 웃는 그날까지! 테리였습니다. 감사합니다~ 하고 인사를 드리려는데 한가지 빠진게 있네요. 윽. 저기요~ 메인 타이틀 IT Playground 옆에 저 로고는 뭔가요. 빙다리 핫바지로 보이시나 어디 그냥 밑장빼고 슬쩍 지나가시려고 그러시나요~?

추가2 – 웹사이트 로고 삽입하기

자! 웹사이트 로고를 삽입해 보겠습니다. 우선, root폴더에 로고 파일을 넣을 img 폴더를 만듭니다.

그리고 그 폴더에 자신이 원하는 logo를 가져다 놓습니다. 픽사베이(pixabay) 혹은 푸래티콘(flaticon) 에서 원하시는 키워드로 검색해서 로고 파일을 받으시면 될 것 같습니다. 저는 테리의 로고(놀이블록)을 img 폴더에 가져다 놓겠습니다. 그리고 _quarto.yml 에 logo: ./img/tere-logo.png 하고 입력한 뒤 렌더링 하시면 끝! 오늘 수업도 여기서 끝!(휴~ 길다.)

*추가*
logo: 다음에 입력하는 ./ 의 의미는 _quarto.yml 파일의 폴더 위치(root, C:\R\Project\quarto-website)를 의미합니다.

‘secondlife.lol’의 모든 콘텐츠는 저작권법의 보호를 받습니다. 무단 전재와 복사, 배포 등을 금합니다.