소개

이번 강좌에서는 지금까지 다룬 내용에 대한 복습으로 간단한 사진 갤러리를 만드는 과정을 3회차에 걸쳐서 보여드리도록 하겠습니다.

 

절차

Step 1: 문서 타입 생성하기(Photo와 Gallery 문서타입)

1. [백오피스]-[Settings]-[문서 타입]에 마우스 오른쪽 버튼 클릭하여 [Photo]란 이름으로 문서 타입을 생성합니다. [Photo] 타입과 연관되는 템플릿은 따로 생성하지 않습니다.

062511_0803_22Gall1.png

 

2. [Photo] 문서 타입에 [Photo] 탭(색인)을 생성합니다.

062511_0803_22Gall2.png

 

3. [Photo] 문서 타입에 하나의 속성인 [Upload Photo] 속성을 아래와 같이 생성합니다.

062511_0803_22Gall3.png

 

4. 이번에는 [Gallery] 문서 타입을 생성합니다. [Create matching template] 체크박스를 체크하여 연관되는 템플릿을 생성합니다.

062511_0803_22Gall4.png

 

5. [Gallery] 문서 타입에 [Photos] 탭(색인)을 생성합니다.

062511_0803_22Gall5.png

 

6. [Gallery] 문서 타입에 [Photos]란 이름의 속성을 아래 그림과 같이 추가합니다. 이 때 속성의 [Type] 항목을 [Folder Browser]로 설정하여 하나 이상의 사진을 보여줄 수 있도록 합니다.

062511_0803_22Gall6.png

 

7. [Gallery] 문서 타입의 [Info] 탭에서 보여지는 아이콘, 썸네일, 설명 등을 아래 그림과 같이 설정합니다. 물론, 독자의 판단하게 다른 값을 선택해도 무관합니다.

062511_0803_22Gall7.png

 

8. [Gallery] 문서 타입 하위로 [Photo] 문서 타입의 콘텐트 페이지를 생성하도록 아래와 같이 설정합니다.

062511_0803_22Gall8.png

 

9. [Homepage] 문서 타입 하위로 [Gallery] 문서 타입의 콘텐트 페이지를 생성하도록 아래와 같이 설정합니다.

062511_0803_22Gall9.png

 

Step 2: 갤러리 출력을 위한 콘텐트 페이지 생성하기

1. [백오피스]-[컨텐츠]-[Simple website]에 마우스 오른쪽 버튼을 클릭하여 [Gallery] 페이지를 아래 그림과 같이 생성합니다.

062511_0803_22Gall10.png

 

2. [Gallery] 콘텐트 페이지에 마우스 오른쪽 버튼을 클릭하여 [생성] 메뉴를 클릭하여 하위 페이지인 [One] 페이지를 아래 그림과 같이 생성합니다.

062511_0803_22Gall11.png

 

3. 생성된 [One] 페이지에 샘플 사진을 하나 업로드 합니다.

062511_0803_22Gall12.png

 

4. [Gallery] 페이지 하위로 [Two] 페이지를 아래 그림과 같이 생성합니다.

062511_0803_22Gall13.png

 

5. 생성된 [Two] 페이지에 샘플 사진을 하나 업로드 합니다.

062511_0803_22Gall14.png

 

6. 2개의 하위 페이지를 갖는 [Gallery] 페이지를 클릭하여 아래 그림과 같이 2개의 사진이 보여짐을 알 수 있습니다.

062511_0803_22Gall15.png

 

Step 3: Gallery 템플릿 편집하기

1. [백오피스]-[Settings]-[템플릿]-[Gallery]를 선택한 후 편집기에서 아래 그림과 같이 마스터 템플릿은 임시로 [Homepage]로 선택한 후 아래 편집기의 내용은 Master 지시문을 제외하고 모두 지웁니다.

062511_0803_22Gall16.png

 

2. [Gallery] 콘텐트 페이지를 웹 브라우저로 실행한 모습입니다. 아래 메인 영역이 사진 갤러리가 들어올 자리입니다.

062511_0803_22Gall17.png

 

 

마무리

사진 갤러리를 위한 기본 구성 단계를 보여드렸습니다.

문서 타입을 만들고, 문서 타입에서 사용하는 레이아웃인 템플릿 페이지를 구성한 후 최종 웹 브라우저로 출력될 영역인 콘텐트 페이지 등을 만드는 단계를 복습 차원에서 다시 보여드렸습니다.

다음 시간에는 이 곳에 사진을 출력하는 기능으로 테스트 해보도록 하겠습니다.

 

끝.




관련글



관련 동영상 참고 자료

  1. Umbraco 개발 환경 구축
  2. Umbraco 설치
  3. 사용자 모드와 관리자 모드(백오피스)
  4. 새로운 페이지(Page) 만들기
  5. 한글 언어팩(Languages) 적용하기
  6. 콘텐트 페이지 편집, 삭제, 메뉴 정렬 등 소개
  7. 미디어 파일 관리
  8. 사용자(User) 관리
  9. 스타일 추가 및 변경
  10. 템플릿(Templates)과 마스터페이지(MasterPages)
  11. Umbraco 페이지 필드(태그(Tags))
  12. 문서 타입(Document Types)
  13. 문서 타입(Document Types)에 속성 추가
  14. 부모 문서 타입(Document Types) 사용하기
  15. 문서 타입(Document Types) 내보내기 및 가져오기
  16. 문서 타입(Document Types) 자식 노드 허용
  17. 기본 매크로(Macros) 사용하기
  18. 새로운 매크로(Macro) 만들기
  19. 매크로(Macro)에 파라미터 전달
  20. 사진 갤러리(Gallery) 만들기 1
  21. 사진 갤러리(Gallery) 만들기 2 : XSLT 사용하기
  22. 사진 갤러리(Gallery) 만들기 3 : jQuery 슬라이드 쇼 플러그인 적용
  23. 회원(Members) 관리
  24. 사전(Dictionaries)
  25. 패키지(Packages)
  26. HTML 레벨의 스킨 파일 적용 1
  27. HTML 레벨의 스킨 파일 적용 2 : 상단 메뉴
  28. HTML 레벨의 스킨 파일 적용 3 : 서브 메뉴와 사이트 맵
  29. HTML 레벨의 스킨 파일 적용 4 : 서브 타이틀
  30. 배포 : Umbraco CMS를 원격 서버에서 실행




profile

박용준(redplus at redplus.net)
.NET 개발/강의 프리랜서, MVP, MCT
데브렉(http://www.devlec.com) 전임 강사
닷넷코리아(http://www.dotnetkorea.com) 사이트 운영