Partager via

[Umbraco 강좌] 11. 스타일 추가 및 변경

  • Article

이 내용은 ASP.NET MVP로 활동하고 계신 박용준님이 작성하신, 오픈소스 기반 웹사이트 제작 엔진인 Umbraco로 처음 웹사이트를 구축 및 개발하기 위한 시리즈 강좌입니다. 많은 도움 되시길 바랍니다.
==================================================================================================

소개

이번 강좌에서는 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을 아래에 코멘트로 달아주시면 제가 꼭 방문해서 저 또한 영감을 얻도록 하겠습니다~ 부탁할게요~

끝.

관련글