테마 소개

트로피칼 XE 레이아웃 테마입니다. 남국의 야자수 같은 큼직하고 시원시원한 사진을 배경에 배치하여 방문자의 시선을 집중시킬 수 있습니다. 전체 드랍다운 메뉴를 통해서 2차메뉴에 직접적인 접근이 가능합니다. 검색, 관련사이트, 바로가기 메뉴, 소셜 연동 등 웹사이트 제작에 필수적인 요소들을 모두 포함하고 있습니다. 메인페이지를 구성할 때 필요한 프리셋 외부페이지를 제공하여 쉽게 데모사이트와 같은 구성으로 세팅하실 수 있습니다. 펜션, 환경조직, 공공기관, 기업형 등 다양한 분야에 적용하기 좋은 깔끔하고 산뜻한 디자인의 트로피칼 레이아웃을 적극 추천드립니다.

레이아웃 소개

레이아웃 설치

패키지 구성 및 설치경로

다운로드 받으신 테마패키지의 압축파일을 해제하셔서 각각의 폴더를 올바른 설치경로에 업로드 해주십시요.

layouts 폴더
레이아웃 테마 모듈을 포함하고 있습니다. XE설치경로의 root 디렉토리에 업로드하여 주십시요.
widgets 폴더
폴더 하위에 에밀리 레이아웃 테마 전용 위젯을 포함하고 있습니다. XE설치경로의 root 디렉토리에 업로드하여 주십시요.
widgetstyles 폴더
폴더 하위에 에밀리 레이아웃 테마 전용 위젯스타일을 포함하고 있습니다. XE설치경로의 root 디렉토리에 업로드하여 주십시요.

기본세팅 가이드

여기서는 XE 레이아웃을 올바르게 적용하기 위한 기본적인 세팅 가이드를 제시해 드립니다. 반드시 레이아웃 패키지를 올바른 경로에 설치하신 후 진행하시기 바랍니다. 기본세팅 가이드 편은 모든 XE기반 레이아웃에서 거의 공통적으로 적용되는 사항이니 꼭 숙지해 주시기 바랍니다. XE 사용이 아직 익숙하지 않으신 분들은 아래 순서대로 따라해 주시기 바랍니다.

사이트맵 작성하기

여기서는 사이트맵을 작성하는 방법을 알아봅니다. XE 테마 세팅은 사이트맵을 작성하는 것에서 부터 시작합니다.

  1. 레이아웃 패키지의 구성품들을 모두 올바른 경로에 설치하셨다면, XE 관리자 페이지로 접속합니다.
  2. 화면 왼쪽의 "사이트제작 / 편집" 을 클릭합니다. 사이트맵 제작/편집
  3. 사이트 메뉴 편집창 하단의 "사이트맵 추가"를 클릭하고 "사이트맵이름"을 입력한 뒤, "확인"버튼을 눌러줍니다. 사이트맵 추가
  4. 사이트맵을 만드셨다면, 이제 사이트맵에 메뉴를 만들어줍니다. 아래와 같이 차례로 클릭하여 웹사이트 메뉴를 만들어줍니다.
    1. 방금 만든 사이트맵 클릭
    2. 메뉴추가 클릭
    3. 외부페이지 (위젯페이지, 외부페이지, 바로가기, 게시판 등 원하는 형태대로 만들어 줍니다.)
    4. 메뉴이름, 메뉴ID 입력
    5. 확인 클릭
    메뉴 추가하기
  5. 메뉴에 하위메뉴를 만들 때에는 해당 메뉴를 클릭한 다음 우측 메뉴판에서 "메뉴추가"를 클릭하여 진행합니다. 메뉴를 잘못 만드셨다면 해당 메뉴를 클릭하고 우측 메뉴판에서 "삭제"를 클릭하여 진행하시면 됩니다.
  6. 위의 방식대로 메뉴추가를 반복하여 1차메뉴, 2차메뉴, 3차메뉴로 구성된 사이트맵을 완성하여 주십시요. 대부분의 레이아웃 테마에서는 상단 네비게이션 메뉴에서 2차 혹은 3차메뉴까지 출력하도록 되어있습니다. 1차메뉴는 레이아웃에 따라 다르지만 보통 5~6개 정도가 적당합니다.
  7. 테마에 따라 필요한 사이트맵의 갯수가 다릅니다. 이를테면, 상단메뉴, 글로벌 네비게이션메뉴, 하단 메뉴 등입니다. 레이아웃에 따라 글로벌 네비게이션 사이트맵 이외의 상단 메뉴, 하단메뉴 등에 연결할 사이트맵이 필요한 경우 위의 과정을 반복하여 사이트맵을 추가하여 줍니다.

메인 / 서브 레이아웃 생성

여기서는 설치된 레이아웃 모듈을 사용하여 레이아웃을 생성하는 방법을 알아봅니다. 레이아웃 테마에 필요한 사이트맵 작성을 완료하셨다면, 이제 레이아웃을 생성해 줄 차례입니다.

  1. 먼저 웹사이트의 첫화면인 메인페이지용 레이아웃을 생성합니다. 아래 가이드를 참고하여 레이아웃을 생성해주세요.
    1. (왼쪽 관리자메뉴) 고급 클릭
    2. 설치된 레이아웃 클릭
    3. (설치된 레이아웃 목록) 해당 레이아웃 테마 클릭
    4. 추가 클릭
    5. 제목에"메인 레이아웃" 입력 후 추가 클릭
    설치된 레이아웃 설치된 레이아웃 추가버튼 설치된 레이아웃 추가버튼
  2. 메인 레이아웃을 생성하셨으면 이제 설정값을 만져줄 차례입니다. 생성하신 레이아웃 오른쪽에 "설정" 버튼을 클릭합니다. 레이아웃 설정버튼
  3. 레이아웃 설정 페이지에서 아래쪽에 "사용자정의" 부분을 찾습니다.
    1. "기본설정"탭 클릭
    2. "레이아웃 기본타입 선택"에서 메인페이지 레이아웃을 선택합니다.
    레이아웃 타입선택
  4. 계속해서 레이아웃 설정 페이지 가장 아래에 위치한 '메뉴'에서 전에 만든 사이트맵을 레이아웃에 연결시켜주어야 합니다. 글로벌 네비게이션 메뉴와 하단메뉴에 각각 위에서 만든 사이트맵을 선택하고 '저장' 버튼을 눌러 변경사항을 저장합니다. 레이아웃 메뉴연결
  5. 메인 레이아웃의 생성이 완료되었으면 서브페이지용 레이아웃을 생성할 차례입니다. 위의 과정을 아래와 같이 반복하여 주십시요.
    1. (왼쪽 관리자메뉴) 고급 클릭
    2. 설치된 레이아웃 클릭
    3. (설치된 레이아웃 목록) 해당 레이아웃 테마 클릭
    4. 추가 클릭
    5. 제목에"서브 레이아웃" 입력 후 추가 클릭
    6. 생성된 '서브 레이아웃' 옆의 '설정'버튼을 클릭하여 레이아웃 설정 페이지로 이동합니다.
  6. 이번에는 레이아웃 설정 페이지에서 '기본설정' 탭을 클릭하고 '레이아웃 기본 타입 선택'에서 '서브페이지' 혹은 '서브페이지 + 사이드바'를 선택합니다. 그리고 설정 페이지 아래에 있는 '메뉴'에서 각각 해당하는 사이트맵을 연결시킨 다음 '저장'버튼을 눌러 변경사항을 저장합니다. 레이아웃 메뉴연결
레이아웃 생성하실 때 짧은 팁

대부분의 메인페이지 레이아웃에 적용된 설정값들은 서브페이지 레이아웃에서 공유되는 설정값들입니다. 따라서 먼저 메인페이지 레이아웃을 생성하여 설정을 완료하신 후, 이 레이아웃을 '복사'하여 서브레이아웃을 생성하시면 좋습니다. 설정값을 다시 입력해야 하는 번거로움을 줄이고 시간과 노력을 절약할 수 있습니다.

세부적인 레이아웃 설정값에 대해서는 각각 해당하는 가이드를 참고하시기 바랍니다.

레이아웃 적용하기

여기서는 생성된 레이아웃을 각각의 페이지 / 게시판 등의 메뉴에 적용시키는 방법에 대해서 알아봅니다.

  1. 먼저 메인 레이아웃을 첫 화면이 될 메뉴에 적용시킵니다. 아래의 가이드를 따라서 진행해 주시기 바랍니다.
    1. 사이트 메뉴 편집 클릭
    2. 해당 사이트맵의 메뉴 클릭
    3. 디자인 클릭
    4. 레이아웃 클릭
    5. 사이트 디자인 사용에서 OFF로 바꿈
    6. 생성해 둔 메인 레이아웃 클릭
    7. 저장버튼 클릭
    레이아웃 메뉴연결
  2. 사이트의 홈페이지를 설정해줍니다. 위에서 메인 레이아웃을 적용했던 메뉴를 클릭하고 '홈페이지로 사용하기'를 클릭하여 웹사이트의 홈페이지로 지정합니다. 홈페이지 지정
  3. 웹상에서 메인 레이아웃이 제대로 적용되었는지 확인합니다. 아직 컨텐츠 부분의 세팅을 하기 전이므로 레이아웃만 적용되어 있고 나머지 부분은 비어 있을 것입니다. 이후 슬라이더 이미지와 위젯 등의 적용법은 해당 가이드를 참고하시기 바랍니다.
  4. 홈 화면이 정상적으로 출력되었다면 위의 가이드를 참고하여 나머지 페이지나 게시판 메뉴에 이전에 만들어둔 서브 레이아웃을 지정해줍니다.

앞으로도 이와 같은 방식으로 필요에 따라 레이아웃을 생성 & 추가하여 적용해주시면 됩니다. 지금까지 알려드린 작업은 레이아웃 세팅의 가장 기본이 되는 작업을 수행한 것입니다. 이후 이어지는 레이아웃 설정과 관련된 가이드를 참고하여 레이아웃을 세팅하신다면, 멋진 사이트를 제작하실 수 있을 것입니다.


레이아웃 세부설정 가이드

여기서는 레이아웃 테마를 세팅할 때 알아야 하는 모든 레이아웃 설정 항목들에 대해서 알아봅니다. 레이아웃 테마의 설정 페이지로 접근하는 방법은 아래의 가이드를 참고하여 주시기 바랍니다.

레이아웃 테마 설정 페이지로 이동하기

  1. 좌측 관리자메뉴에서 고급탭을 클릭합니다.
  2. 고급 탭 하위 메뉴인 설치된 레이아웃탭을 클릭합니다.
  3. 설치된 레이아웃 모듈 목록에서 원하시는 레이아웃 이름을 클릭합니다.
  4. 해당 레이아웃 페이지에서 원하시는 레이아웃 오른쪽의 설정버튼을 클릭합니다.
설치된 레이아웃 레이아웃 설정버튼

기본설정

여기서는 레이아웃 설정 > 기본설정탭의 설정방법에 대해 알아봅니다.

기본설정 설정항목 보기

레이아웃설정 기본설정

설정값 세팅 가이드

레이아웃 기본 타입 선택

레이아웃 타입 선택에서는 레이아웃의 기본 형태를 결정합니다. 여기서 웹사이트의 첫 화면이 될 메인페이지의 레이아웃으로 쓸 것인지, 서브페이지의 레이아웃으로 쓸 것인지 선택해 주십시요. 각각의 레이아웃 타입에 대하여 레이아웃을 하나 또는 그 이상의 레이아웃을 필요에 따라 생성하여 사용합니다.

홈페이지 URL

웹사이트의 홈페이지 URL을 입력합니다. 로고를 클릭할 시에 여기에 입력한 주소로 이동하게 됩니다. 입력하실 때에는 반드시 'http://' 를 주소 앞에 포함시켜 주시기 바랍니다.

상단 로고이미지

레이아웃 상단에 표시될 로고 이미지 입니다. 데모사이트를 참고하여 적당한 사이즈의 로고 이미지를 등록합니다. '찾아보기'를 클릭하여 이미지를 선택하신 후에 '등록'버튼을 꼭 눌러주시기 바랍니다.

헤더 전광판 위젯 srl

헤더 하단에 위치한 전광판 위젯을 게시판에 연결하기 위해서는 해당 게시판의 srl 번호를 입력해야 합니다. 게시판의 SRL 번호를 확인하는 방법은 '여기'를 클릭하여 주십시요.

전광판위젯
이미지 배경 하단 블로그 위젯 srl

배경이미지의 하단에 위치한 블로그 위젯에 게시판을 연결하기 위해서 해당 게시판의 srl 번호를 입력합니다. 게시판의 SRL 번호를 확인하는 방법은 '여기'를 클릭하여 주십시요.

블로그위젯

하단 사이트정보

여기서는 레이아웃 설정 > 하단 사이트정보 탭의 항목들에 대한 설정방법을 알아봅니다. 아래 설정 예시값들과 세팅 가이드를 참고하여 주시기 바랍니다.

하단 사이트정보 설정항목 보기

레이아웃설정 하단 사이트정보 설정

설정값 세팅 가이드

하단 주소, 연락처

사이트 하단에 표시될 주소와 연락처 등을 입력합니다. 기타 사이트에 명시되어야 할 정보들도 같이 입력합니다.

Copyright 사이트 이름

카피라이트를 가지는 주체의 이름을 입력합니다.


이미지 슬라이더

여기서는 레이아웃 설정 > 이미지 슬라이더 탭의 항목들에 대한 설정방법을 알아봅니다. 아래 설정 예시값들과 세팅 가이드를 참고하여 주시기 바랍니다. 총 5개의 이미지를 등록하실 수 있습니다.

이미지 슬라이더 설정항목 보기

레이아웃설정 이미지 슬라이더 설정

설정값 세팅 가이드

슬라이더 이미지

슬라이더 이미지를 등록합니다. '찾아보기'를 클릭하여 이미지를 선택후 '등록'버튼을 눌러 이미지를 업로드 할 수 있습니다.


서브 레이아웃

여기서는 레이아웃 설정 > 서브레이아웃 탭의 항목들에 대한 설정방법을 알아봅니다. 아래 설정 예시값들과 세팅 가이드를 참고하여 주시기 바랍니다.

서브레이아웃 설정항목 보기

레이아웃설정 서브레이아웃 설정

서브레이아웃 각 부분 명칭

레이아웃설정 서브레이아웃 설정

설정값 세팅 가이드

사이드바 하단 배너이미지

서브레이아웃의 사이드바 로컬 메뉴 하단에 출력되는 배너이미지 입니다. '찾아보기'를 클릭하여 이미지를 선택 후 반드시 '등록' 버튼을 눌러주십시요.

사이드바 하단 배너이미지 링크주소

위에서 등록한 배너이미지를 클릭했을 때 이동할 링크주소를 입력해주십시요.

사이드바 위젯1번 - 목록형 위젯

사이드바에 위치한 목록형 위젯의 출력 여부를 선택합니다.

사이드바 위젯 제목 강조, 사이드바 위젯 제목 나머지

위젯의 제목을 주황색으로 강조할 부분과 나머지 부분으로 나눠서 입력합니다. 예를들어 제목이 '트로피칼 공지사항'이라면, 제목강조에는 트로피칼을 입력하고, 제목 나머지에는 '공지사항'을 입력합니다.

사이드바 위젯 더보기 주소

위의 사이드바 위젯의 더보기 버튼을 클릭했을 때 이동할 링크주소를 입력합니다. 반드시 링크주소 앞에 'http://'를 붙여줍니다.

사이드바 위젯 SRL 번호

해당 위젯에 연결시킬 게시판의 SRL 번호를 입력합니다. SRL 번호를 확인하는 방법은 '여기'를 클릭하여 주십시요.

사이드바 이미지 슬라이드 배너

사이드바 이미지 슬라이드 배너의 출력여부를 선택해주세요.

사이드바 슬라이드 배너이미지

사이드바의 슬라이드 배너이미지를 등록해주십시요. 가로사이즈는 280픽셀 입니다.

사이드바 슬라이드 배너이미지 링크주소

해당 배너이미지를 클릭했을 때 이동할 링크주소를 입력합니다.

사이드바 위젯2번 - 썸네일+제목 위젯

사이드바에 맨 아래에 위치한 썸네일+제목 위젯의 출력 여부를 선택합니다.

사이드바 위젯 제목 강조, 사이드바 위젯 제목 나머지

위젯의 제목을 주황색으로 강조할 부분과 나머지 부분으로 나눠서 입력합니다. 예를들어 제목이 '트로피칼 공지사항'이라면, 제목강조에는 트로피칼을 입력하고, 제목 나머지에는 '공지사항'을 입력합니다.

사이드바 위젯 더보기 주소

위의 사이드바 위젯의 더보기 버튼을 클릭했을 때 이동할 링크주소를 입력합니다. 반드시 링크주소 앞에 'http://'를 붙여줍니다.

사이드바 위젯 SRL 번호

해당 위젯에 연결시킬 게시판의 SRL 번호를 입력합니다. SRL 번호를 확인하는 방법은 '여기'를 클릭하여 주십시요.

서브페이지 하단 배너

서브페이지 최하단에 배너이미지 세 개를 등록하실 수 있습니다. 이 배너이미지들의 출력여부를 선택합니다.

서브페이지 하단 배너이미지

서브페이지 하단에 위치한 배너이미지를 등록해줍니다. 사이지는 가로 320픽셀을 맞춰주세요.

서브페이지 하단 배너이미지 링크주소

해당 배너이미지를 클릭했을 때 이동할 링크주소를 입력합니다. 반드시 링크주소 앞에 'http://'를 붙여줍니다.




메인 페이지 위젯설정

여기서는 메인 페이지 레이아웃에 위젯을 세팅하는 방법에 대해 알아봅니다. 코디자인몰에서 배포하는 레이아웃은 테마 사용자를 위하여 메인 컨텐츠를 미리 세팅해 둔 외부페이지를 제공합니다. 이런 방식을 통해 설정값을 입력하고 위젯코드를 생성하고 위젯스타일을 덧씌우는 등의 번거로운 작업을 생략할 수 있습니다.

우리는 위젯과 위젯스타일을 적용하기 위해 수많은 설정값들을 입력하는 대신, 사용자를 위해 미리 세팅된 외부페이지를 사용하려고 하고 있습니다. 이 작업에는 약간의 코드 수정이 필요합니다. 당신이 만약 XE 사용자이고 html코드에 대해 약간의 지식이 있다면 너무나 쉬운 작업입니다. 그러나 코드를 잘 모른다 하더라도 걱정하지 마십시요. 수정해야 할 코드는 쉽고 양도 적습니다. 본격적으로 작업을 시작하기 전에, 모든 설정값과 디자인이 세팅된 외부페이지에서 어떤 작업을 해야 하는지 요약해 드립니다.

  1. 메뉴타입이 "외부페이지"인 메뉴를 생성하여 메인 레이아웃 적용 (반드시 외부페이지로 메뉴를 만들어야 합니다.)
  2. 프리셋 외부페이지를 메인 레이아웃에 연결
  3. 프리셋 외부페이지를 코드에디터 프로그램을 이용해 불러옵니다. 위치는 다음과 같습니다. layouts/layout_tropical/pages/main.html
  4. 각각의 해당 위젯코드에 모듈 srl 넘버 입력
  5. 각각의 해당 위젯코드에 위젯 제목 입력
  6. 각각의 해당 위젯코드에 더보기 링크주소 입력
  7. 이미지배너 수정을 원할 경우에는 위치확인 후 같은 장소, 같은 파일명으로 업로드
  8. 수정을 마친후 외부페이지 파일을 서버에 업로드

위의 작업만 해주면 됩니다. 이제부터 이 작업을 어떻게 해야 하는지 살펴보도록 합시다.

프리셋 외부페이지 연결하기

먼저 프리셋 외부페이지를 불러오는 방법에 대해 알아보겠습니다. 반드시 메인페이지 레이아웃의 기본 세팅을 완료하신 이후에 작업을 진행하시기 바랍니다. 아직 레이아웃 테마의 기본 세팅을 완료하지 않으신 분들은 기본 세팅 가이드와 레이아웃 설정항목들에 대한 가이드를 참고하여 기본 레이아웃 세팅을 먼저 완료하시기 바랍니다.

  1. 사이트 제작/편집사이트 메뉴 편집해당 메인페이지 메뉴선택 → 상세설정을 클릭합니다. 이때, 해당 메인페이지의 메뉴타입은 반드시 외부페이지로 되어 있어야만 합니다.
    메뉴 상세 설정
  2. 페이지 관리 창이 뜨면 하단에 외부 문서 위치 항목이 있습니다. 여기에 다음과 같이 입력해줍니다.
    layouts/layout_tropical/pages/main.html
    프리셋 외부페이지 경로입력
  3. '저장'을 클릭하여 변경사항을 저장합니다.
  4. 웹사이트 홈페이지에 접속하여 적용되었는지 확인합니다.

위젯페이지 구성내역

여기서는 레이아웃 테마의 프리셋 위젯페이지에서 포함하고 있는 위젯의 구성내용과 각 부분의 명칭에 대해 알아봅니다. 본격적인 세팅에 앞서 잘 숙지해 주시기 바랍니다.

레이아웃설정 위젯 각 부분 명칭

위젯에 게시판 연결하기

여기서는 프리셋 위젯 페이지를 구성하고 있는 각각의 위젯에 게시판을 연결하는 방법을 알아봅니다. 지금부터는 "layouts/layout_tropical/pages/main.html" 파일을 열어서 직접 코드를 수정할 것입니다. 코드 수정작업을 할 때는 드림위버, 에디트플러스 같은 코드 편집 프로그램을 이용하시는 것을 추천드립니다.

  1. layouts/layout_tropical/pages/main.html 파일을 코드편집 프로그램을 사용하여 열어줍니다.
  2. main.html 파일은 다음과 같은 코드들로 구성되어 있습니다.

    								 
    								

    콘텐트 위젯 코드들은 각각의 개별 위젯들에 주석을 달아 쉽게 구분할 수 있도록 되어 있습니다. 명칭에 대해서는 이전 장인 위젯페이지 구성내역을 참고하여 주시기 바랍니다.

  3. 이제 각각의 위젯 코드에서 다음의 부분을 찾아서 수정해줍니다. 위치는 밑에 표시해 두었으니 참고해주십시요.
    1. 모듈 srl 넘버 입력 : module_srls를 찾아 따옴표 사이에 연결시킬 해당 게시판의 모듈 srl 넘버를 입력해줍니다. 게시판의 모듈 srl 넘버를 확인하는 방법은 밑에 있는 가이드를 참고하여 주시기 바랍니다.
    2. 위젯 제목 입력 : ws_title1, ws_title2를 찾아 따옴표 사이에 해당 위젯의 제목을 입력해줍니다. ws_title1은 주황색으로 강조할 부분, 그리고 ws_title2에는 나머지 제목을 입력합니다.
    3. 더보기 링크주소 입력 : ws_more_url을 찾아 따옴표 사이에 더보기 버튼 클릭시 이동할 주소를 입력해줍니다. http://를 주소 앞에 반드시 포함해주세요.
    외부페이지 위젯코드 수정
  4. 수정이 끝났으면 변경사항을 저장하고 업로드해줍니다. 그리고 웹사이트에서 변경사항을 확인해봅니다.

게시판 srl 넘버 확인방법

사이트 메뉴 편집 → 해당 게시판을 선택 → 상세설정고급 설정 위에 마우스 커서를 올려두면 화면 왼쪽하단에 표시됩니다. (고급설정 버튼을 클릭하시면 안됩니다.)

게시판 모듈 srl 넘버  확인방법

외부페이지 이미지 배너 수정하기

여기서는 프리셋 위젯 페이지를 구성하고 있는 이미지 배너를 수정하는 방법을 알아봅니다.

  1. layouts/layout_tropical/pages/main.html 파일을 코드편집 프로그램을 사용하여 열어줍니다.
  2. main.html 파일에서 이미지배너의 코드들은 다음과 유사하게 이루어져 있습니다.

    								
    								

    각각의 이미지 배너에 해당하는 코드들은 주석으로 쉽게 구분할 수 있도록 되어 있습니다. 명칭에 대해서는 이전 장인 위젯페이지 구성내역을 참고하여 주시기 바랍니다.

  3. 이제 각각의 이미지배너 코드에서 img 태그를 찾아 경로와 파일명을 확인합니다. 아래 코드에 밑줄 친 부분을 보십시요. img 태그의 src값 옆의 따옴표 안에 있는 값이 이미지 파일의 위치와 이름을 뜻합니다. 그러므로 저 코드의 의미는 레이아웃 설치폴더 / img / banner1.jpg 파일을 불러온다는 뜻입니다.
    외부페이지 이미지배너 수정
  4. 해당 파일을 찾았으면 그 파일을 참조하여 이미지배너를 제작합니다. 제작된 이미지 배너는 원본과 같은 파일명, 같은 경로에 업로드 해서 덮어쓰기 해줍니다.
  5. html 태그에 능숙하신 분들은 위와 같이 하지 않아도 의미를 이해하실 테지만, html 코드에 익숙치 않으신 분들은 위의 방법대로 따라주시기 바랍니다.