소개

이번 강좌에서는 Umbraco CMS를 설치한 후 웹에서 동적으로 웹 페이지의 스타일을 변경하는 방법에 대해서 소개하고자 합니다. WebMatrix라던가 Visual Studio를 사용하여 편집해도 되겠지만, 기본적인 에디터의 기능을 모두 가지고 있는 Umbraco이기에 모든 작업을 웹에서 수행할 수 있는 장점이 있습니다.

아래 순서대로 스타일을 변경해서 적용하는 방법을 살펴보도록 하죠~

 

따라하기

1. 아래 그림은 필자가 지금까지 데모로 보여주고 있는 사이트의 메인입니다. 이러한 사이트에서 사용한 스타일시트 파일은 어느 곳에서 관리할 수 있을까요?

062211_1916_111.png

 

2. 웹 사이트에 마우스 오른쪽 버튼을 클릭하여 나타나는 메뉴에서 [소스 보기] 메뉴를 클릭하여 소스를 봅니다. 아래 그림에서 보면 필자가 작업중인 사이트의 기본 스타일시트 파일은 "/css/Designit_Green.css" 입니다.

062211_1916_112.png

 

3. 다시 [백오피스]로 돌아와서 왼쪽 아래의 [세부항목]-[Settings] 섹션을 클릭하면 [세팅(Settings)] 메뉴에서 [스타일시트]를 관리할 수 있습니다. 메뉴를 확장시켜보면 아래 그림과 같이 2개의 스타일시트 파일이 존재하고 이를 클릭하면 [스타일시트 편집] 화면이 나타나고 이곳에서 원하는 스타일을 언제든지 변경한 후 [저장] 아이콘을 클릭하여 반영할 수 있습니다. 제가 간단히 Body 태그내의 모든 텍스트의 색상(Color)을 "navy"로 변경해 보았습니다.

062211_1916_113.png

 

4. [백오피스]에서 동적으로 스타일을 변경 후 저장했다면, 메인 페이지로 돌아와서 웹 페이지를 [새로 고침]하면 아래 그림처럼, 글자 색상이 기본값에서 "navy" 색상 값으로 변경됨을 확인할 수 있습니다.

062211_1916_114.png

 

5. 스타일시트 파일에 대한 변경은 Umbraco [백오피스]를 사용해도 훌륭하지만, 경우에 따라서는 본인이 사용하고 있는 에디터를 사용하여 편집하면 더욱 편리할 수도 있습니다.

062211_1916_115.png

 

6. 또한, 언제든지 나만의 새로운 이름으로 스타일시트 파일을 만들어서 웹 페이지에 적용할 수도 있습니다. 새로운 스타일시트를 만들려면 아래 그림처럼 [스타일시트]에 마우스 오른쪽 버튼을 클릭하여 [생성] 버튼을 클릭합니다.

062211_1916_116.png

 

7. 아래 그림처럼 "MyFirstUmbracoStyles"란 이름을 지정한 후 [생성] 버튼을 클릭합니다.

062211_1916_117.png

 

8. 아래 그림과 같이 간단한 스타일을 하나 정의한 후 [Save] 아이콘을 클릭하거나 [Ctrl + S]를 눌러 스타일시트 파일에 저장합니다.

062211_1916_118.png

 

9. 사이트의 마스터 페이지인 Starterkit Master 템플릿으로 이동한 후 이곳에 link 태그를 사용하여 지금 작성한 스타일시트를 적용합니다.

062211_1916_119.png

 

10. 지금 적용한 스타일을 테스트해보기 위하여 특정 페이지를 열고 [HTML] 아이콘을 클릭하여 HTML 영역에서 원하는 부분에 스타일을 적용합니다. 아래 그림처럼 스타일 적용 후 [갱신] 버튼 클릭 후 [Save] 아이콘으로 반드시 저장합니다.

062211_1916_1110.png

 

11. 스타일 적용 후 웹 페이지로 돌아와서 해당 스타일이 적용된 페이지로 이동하면 아래 그림과 같이 특정 텍스트가 기본 텍스트에서 "red"로 변경되어 출력됨을 알 수 있습니다.

062211_1916_1111.png

 

12. 또한, 웹 페이지 소스 보기를 통해서 스타일이 동적으로 삽입되었음을 살펴볼 수 있습니다.

062211_1916_1112.png

 

 

마무리

한번 웹에 설치 후 모든 작업을 웹에서 다 처리할 수 있는 CMS의 기능은 이제는 신기하지 않고 당연한 것으로 받아드려 지겠죠? 하지만, 이를 작업하는 Umbraco 개발자의 입장에서는 쉽지만은 않은 작업이라 생각됩니다.

여기까지의 관리 능력을 알고 있다면, 언제든지 동적으로 웹 페이지를 생성 후 HTML태그와 스타일시트 관리 그리고 이미지와 같은 미디어 파일을 통해서 동적으로 디자인 레벨의 웹 페이지는 얼마든지 만들어낼 수 있을 듯 합니다.

여러분들만의 사이트를 Umbraco로 시작해 보시는 것은 어떨까요? 그리고 그 URL을 아래에 코멘트로 달아주시면 제가 꼭 방문해서 저 또한 영감을 얻도록 하겠습니다~ 부탁할게요~

 

 

끝.




관련글



관련 동영상 참고 자료

  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) 사이트 운영