티스토리 뷰

SharePoint 2010에서의 마스터 페이지 (2)

이번 내용에서는 디자이너와 마스터 페이지를 협업할 때 필요한 유용한 도구로 IE 개발자 도구와 대체 CSS에 대한 내용을 알아보도록 하겠습니다.

SharePoint Online 또는 SharePoint 2010 사이트를 액세스합니다. 여기서는 IE 9와 크롬 브라우저로 테스트합니다.

IE 9로 사이트가 열렸으면 F12를 클릭하면 아래와 같은 개발자 도구를 살펴볼 수 있습니다.  

 

위 개발자 도구에서 HTML 탭 아래에 보면 화살표 아이콘(클릭으로 요소 선택)을 볼 수 있는데요, 이 메뉴를 클릭하고 웹 브라우저에서 원하는 부분을 클릭하면 됩니다. 먼저 상단 메뉴를 한번 클릭해보도록 하겠습니다. 그러면 아래와 같이 웹 브라우저에서는 파란색 테두리로 나타나고 F12 개발자도구에서는 해당 HTML 요소와 스타일을 바로 알 수 있습니다. 개발자 도구를 이용하여 디자이너와 협업하면 디자이너는 어떤 스타일을 변경해야 할지 좀 더 쉽게 이해할 수 있을 것입니다. HTML 소스만 봐서는 머리만 아프죠.  

 

위 그림의 오른쪽 부분의 스타일에 보면 체크표시들이 보이는데 체크를 해제해보면 스타일이 변경되는 것을 알 수 있으며 또한 해당 값을 변경해볼 수 있습니다. 간단하게 테스트해보기 위해 사이트에 오신 것을 환영합니다.” 부분의 색상을 개발자 도구에서 아래와 같이 변경해보았습니다. 원래 파란색 계통인데 검정색 계통으로 변경해볼 수 있습니다 

위 그림의 스타일 부분에 가로로 줄을 그어놓은 것은 상위에서 선언된 스타일을 아래 부분에서 재정의해서 쓰고 있다는 것입니다.

스타일의 특성을 추가해서 간단히 테스트하려면 위 그림의 해당 스타일의 오른쪽 옆을 보면 corev4.css 링크를 볼 수 있습니다. 링크를 클릭하면 css 파일의 해당 스타일로 이동하고 스타일에서 오른쪽 클릭하면 특성 추가를 통해 스타일을 추가로 지정해볼 수 있습니다. 저장되는 것은 아니고 브라우저에서 테스트로 추가되는 것입니다.

아래 그림은 해당 스타일 시트 파일로 가서 text-decoration: underline을 추가한 내용입니다. 밑줄이 생긴 것을 볼 수 있습니다.  

변경하고 싶은 스타일 요소와 테스트 값을 지정해보았다면 위 그림의 CSS 메뉴 아래의 저장 버튼을 눌러 변경된 CSS 전체를 다운로드 할 수 있습니다. 전체 중에서 변경된 내용만 정리해서 다른 이름으로 저장을 합니다. 저장된 파일을 대체 CSS로 적용해보도록 하겠습니다.

BODY #s4-leftpanel-content {

background-color:#e8e8e8;

}

.ms-rteElement-H1B {

COLOR: #0e0000; FONT-SIZE: 2em; FONT-WEIGHT: normal; TEXT-DECORATION: underline

}

여기서는 corev4_alterDemo.css 파일로 저장을 했고 이를 SharePoint 2010 사이트에 스타일 라이브러리에 업로드 했습니다. (업로드후 체크 인과 주 버전 게시를 해야 합니다.)

SharePoint 2010의 기능 중에서 게시 관련 기능을 사이트 모음과 사이트 기능에서 활성화했다면 사이트 설정에서 디자인 영역의 마스터 페이지를 볼 수 있습니다. 마스터 페이지를 링크를 클릭하고 맨 아래 부분을 보면 대체 CSS에 대한 내용을 업로드한 파일을 찾아보기 하여 설정할 수 있습니다. 

적용된 결과는 아래와 같이 나타나게 됩니다.  

크롬 웹 브라우저의 F12 개발자도구에서도 HTML 요소를 선택하거나 스타일을 체크 해제하거나 할 수 있습니다. 사용하기 편한 도구를 통해 SharePoint 2010의 영역에 어떤 스타일이 지정되어 있는지를 손쉽게 알 수 있고 SharePoint 2010의 페이지 구조를 몰라도 스타일을 손쉽게 변경, 추가해보고 이를 통해 대체 CSS를 사용하여 새로운 스타일을 적용해서 테스트해볼 수 있습니다.

위 내용을 테스트할 경우 네트워크 속도에 따라 좀 느리게 나오거나 한번씩 새로 고침을 해주어야 할 수 도 있습니다.

댓글