새 페이지 또는 섹션에 게시판 위젯을 추가하고, 디자인 및 게시판 설정을 진행합니다.

1. 디자인 모드에 접속합니다. 접속방법

2. 레벨 업! 디자인 모드 Feat. 테오 다시보기 영상에 따라 그리드형 게시판을 추가하고 설정합니다.

   참고: 포트폴리오 게시판을 추가하는 방법은 36:14초부터 확인할 수 있습니다.

코드가 특정 게시판 위젯에서만 동작하도록 게시판 위젯의 ID 값을 찾아 복사하는 과정을 설명합니다.

1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
2. 그리드형 게시판을 추가한 메뉴로 이동합니다.

3. 브라우저 개발자 모드를 켭니다.

   참고: 이 도움말에서는 Google 크롬 브라우저를 사용하며, 크롬 브라우저의 개발자 모드를 여는 방법은 Google 크롬 개발자 도구 활용하기 도움말에서 알아볼 수 있습니다.

4. 아래의 애니메이션과 같이 개발자 모드에서 선택 아이콘을 클릭하고, 게시판을 클릭하면, 개발자 모드에 게시판 소스 코드가 표시됩니다. 여기서 위젯ID를 찾아 마우스로 더블-클릭 후, 키보드 단축키 CTRL + C 를 눌러 복사합니다.

   

5. 복사한 위젯ID는 메모장 등에 보관해 둡니다. (위젯ID는 나중에 4단계에서 사용됩니다.)

게시판 위젯이 포함된 섹션의 ID 값을 찾는 과정을 설명합니다.

1. 그리드형 게시판을 추가한 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.

   

2. 컨텍스트 메뉴가 나오면 섹션 설정 을 클릭합니다.

3. 섹션 설정 창이 나오면 오른쪽 중간에 위치한 섹션ID 값을 마우스 드래그 후 복사합니다. (키보드 단축키: CTRL + C)

   

4. 복사한 섹션ID는 메모장 등에 보관합니다. (섹션ID는 나중에 4단계에서 사용됩니다.)

교육에서 제공한 샘플 코드를 내 사이트에 붙여넣고, 샘플 코드에서 내 사이트에 맞게 수정해야 할 항목을 설명합니다.

1. 디자인 모드 오른쪽 상단의 나가기 버튼을 클릭해 관리자 페이지로 돌아갑니다.
2. 관리자 페이지 왼쪽 메뉴에서 [환경설정 > SEO(검색엔진최적화)]를 클릭해 이동합니다.
3. 마우스 휠 스크롤을 움직여 Header code 입력 칸으로 이동합니다.

4. 아래의 코드를 모두 드래그하여 복사합니다. (키보드 단축키: CTRL + C)

   <style>
   /*  CULTURE MIX ART  */
   #위젯ID em {
       font-size: 12px;
       font-weight: bold;
       border: 1px solid #000000;
       padding: 4px 12px;
       padding-right: 12px !important;
       margin-right: 5px;
       border-radius: 100px;
       display: inline-block;
   }
   
   /* TOP */
   #섹션ID {
       position: fixed;
       right: 1%;
       bottom: 10%;
   }
   </style>

5. Header code 입력 칸에 붙여넣습니다. (키보드 단축키: CTRL + V)

6. 붙여넣은 코드에 위젯ID 텍스트를 삭제하고, 위 2단계에서 복사한 위젯ID 로 교체합니다.

   참고: 아래 그림에 보여지는 위젯ID는 예시이므로, 내 사이트의 게시판 위젯ID를 추가해야 합니다.

   

7. 붙여넣은 코드에 섹션ID 텍스트를 삭제하고, 위 2단계에서 복사한 섹션ID 로 교체합니다.

   참고: 아래 그림에 보여지는 섹션ID는 예시이므로, 내 사이트의 게시판 섹션ID를 추가해야 합니다.

   

8. 저장 버튼을 클릭합니다.

코드가 정상적으로 게시판에 적용되었는지 확인합니다.

1. 관리자 페이지 왼쪽 상단의 사이트 미리보기 를 클릭합니다.
2. 그리드형 게시판이 삽입된 페이지 또는 섹션으로 이동합니다.

3. 아래의 그림과 같이 카테고리 주변에 검정 테두리 선이 표시되는지 확인합니다.

   

1. 내 사이트 관리자 페이지에 접속합니다.
2. 왼쪽 메뉴에서 [환경설정 > SEO(검색엔진최적화)]를 클릭해 이동합니다.
3. 마우스 휠 스크롤을 움직여 Header code 입력 칸으로 이동합니다.

4. 코드에서 border 속성의 1px 숫자 값을 원하는 두께 값으로 변경합니다.

   

5. 저장 버튼을 클릭해 변경사항을 저장합니다.
6. 이제 테두리 선 두께가 입력한 숫자 값으로 변경됩니다.

1. 내 사이트 관리자 페이지에 접속합니다.
2. 왼쪽 메뉴에서 [환경설정 > SEO(검색엔진최적화)]를 클릭해 이동합니다.
3. 마우스 휠 스크롤을 움직여 Header code 입력 칸으로 이동합니다.

4. 코드에서 border 속성의 #000 값을 다른 색상 값으로 변경합니다.

   참고: 색상 값은 아임웹 디자인 모드의 컬러픽커를 사용해 쉽게 확인할 수 있습니다. 컬러픽커로 색상 바꾸기

   

5. 저장 버튼을 클릭해 변경사항을 저장합니다.