그누보드 설치 완료 이후, 페이지 연결하는 방법부터 게시판 연결까지! A to Z 무작정 따라하기입니다.

<aside> 🐣 그누보드 설치방법

**0️⃣ [**그누보드 샘플파일 다운로드](<https://temhamanual.notion.site/277796fab7a08049b2f6cecc154f4471>)

**1️⃣ [](<https://temhamanual.notion.site/277796fab7a08049b2f6cecc154f4471>)**[샘플파일 압축해제와 서버 업로드](<https://temhamanual.notion.site/277796fab7a08049b2f6cecc154f4471>)

****2️⃣ [그누보드 설치시작](<https://temhamanual.notion.site/277796fab7a08049b2f6cecc154f4471>)

**3️⃣** [그누보드 테마설정](<https://temhamanual.notion.site/277796fab7a08049b2f6cecc154f4471>)

💯 A to Z 무작정 따라하기 ****

**0️⃣ [](<https://temhamanual.notion.site/277796fab7a08049b2f6cecc154f4471>)**[영상으로 보는 가이드](<https://temhamanual.notion.site/A-to-Z-277796fab7a0811189d5fe76593a90f1>)

**1️⃣ [](<https://temhamanual.notion.site/277796fab7a08049b2f6cecc154f4471>)**[VSCode FTP 세팅](<https://temhamanual.notion.site/A-to-Z-277796fab7a0811189d5fe76593a90f1>)

**2️⃣** [샘플 그누보드 파일 위치](<https://temhamanual.notion.site/A-to-Z-277796fab7a0811189d5fe76593a90f1>)

**3️⃣** [그누보드 로그인 페이지 연결하기](<https://temhamanual.notion.site/A-to-Z-277796fab7a0811189d5fe76593a90f1>)

****4️⃣ [그누보드 게시판 연결 방법과 적용](<https://temhamanual.notion.site/A-to-Z-277796fab7a0811189d5fe76593a90f1>)

****5️⃣ [그누보드 게시판 상단 비주얼 설정 방법](<https://temhamanual.notion.site/A-to-Z-277796fab7a0811189d5fe76593a90f1>)

****6️⃣ [그누보드 게시판 상단](<https://temhamanual.notion.site/A-to-Z-277796fab7a0811189d5fe76593a90f1>)

비주얼 이미지 경로 설정

****7️⃣ [그누보드 게시판 컨테이너 크기 정의](<https://temhamanual.notion.site/A-to-Z-277796fab7a0811189d5fe76593a90f1>)

****8️⃣ [메인 최신글 연결 방법](<https://temhamanual.notion.site/A-to-Z-277796fab7a0811189d5fe76593a90f1>) 
     [(템플릿하우스 × 그누보드)](<https://temhamanual.notion.site/A-to-Z-277796fab7a0811189d5fe76593a90f1>)

**9️⃣** [게시판 만들기 & 적용 가이드](<https://temhamanual.notion.site/A-to-Z-277796fab7a0811189d5fe76593a90f1>)

</aside>

0️⃣ 영상으로 보는 가이드

https://www.youtube.com/watch?v=aPMz0IacVJY

1️⃣ VSCode FTP 세팅

그누보드 연결 전에 코드를 수정하려면 코드 편집기가 필요합니다. 저희는 Visual Studio Code(VSCode)를

사용하고 있으며, VSCode 공식 홈페이지 에서 사용 중인 운영체제에 맞는 버전을 다운로드 후 설치해 주세요.

10.png

VSCode다운로드 완료 후 실행 시 위와 같은 화면이 노출됩니다. 우측 메뉴에서 ‘확장’ 이라는 아이콘을 클릭해주세요.

11.png

번호 타이틀 내용
1 검색창 확장탭에서 ‘ftp’를 입력해 주세요.
2 확장프로그램 ftp입력 시 노출되는 ‘ftp-simple’을 설치해주세요.

12.png

번호 타이틀 내용
1 상단 검색창 상단 가운데에 위치한 검색창을 클릭해주세요.
2 명령 표시 및 실행 ‘명령 표시 및 실행’을 클릭해 주세요. (또는 컨트롤+쉬프트+P 단축키 사용)

13.png

번호 타이틀 내용
1 명령어 >ftp 입력 후 ② 화면과 같은 명령어를 찾아주세요.
2 명령어 선택 ftp-simple : Config - FTP connection setting 을 클릭해 주세요.

14.png

번호 타이틀 내용
1 name 나 자신이 알아볼 수 있도록 적는 사이트명으로, 자유롭게 적어주세요.
2 host FTP 연결할 Host번호를 입력해 주세요.
3 port FTP 연결할 포트 번호를 입력해 주세요.
4 username FTP 연결할 ID를 입력해 주세요.
5 password FTP 연결할 비밀번호를 입력해 주세요.

위 FTP설정이 완료되면 [컨트롤+S] 단측키를 눌러 저장해줍니다.

15.png

그리고 다시 상단 검색을 눌러 이번엔 이미지와 같은 명령어를 찾아줍니다.

클릭 후 엔터를 눌러주세요.

번호 타이틀 내용
1 명령어 >ftp 입력 후 ② 화면과 같은 명령어를 찾아주세요.
2 명령어 선택 ftp-simple : Remote directory open to workspace

16.png

그럼 이미지와 같은 화면이 뜨면서, 내가 저장한 사이트 목록이 뜰겁니다. (1개만 등록하면 1개만 뜨겠죠?)

맞는 사이트를 찾아 클릭해 주세요.

image.png

위 이미지가 나오면 최상위에 있는 메뉴를 클릭 시, 연결이 시작되며 작업 공간에 저장할까요?

라는 문구와 함께 팝업이 뜹니다. [저장안함]을 클릭 해주세요.

image.png

이제 마지막으로, 연결이 완료 되었다는 토스트 팝업이 뜰때까지 기다려 주시면 됩니다.

2️⃣ 샘플 그누보드 파일 위치

테마 디렉토리에서 아래 경로를 열어주세요.

/theme/sample/skin/pages/basic/about.skin.php