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

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

앞에서 IE 개발자도구와 CSS 에 대한 내용을 알아보았으니 사용자 지정 마스터페이지를 만들어보도록 하겠습니다. 마스터 페이지를 생성하는 도구는 SharePoint Designer 2010을 통해서 진행해야 합니다. 

마스터 페이지를 생성하기 전 스타일 시트와 백그라운드 이미지를 업로드 해 둡니다.

그 다음 SharePoint Designer 2010으로 해당 사이트 모음을 열기합니다. 사이트 개체 메뉴에서 마스터 페이지를 클릭하면 아래그림처럼 v4.master 페이지를 볼 수 있습니다. v4는 SharePoint 2010 사용자 인터페이스를 가지고 있는 마스터페이지입니다. 
 

V4.master를 그대로 수정하면 향후 업데이트가 이루어질 때 변경사항이 다 날아가버리므로 복사해서 이름변경 후 수정하고 사용해야 합니다. 복사는 V4.master 파일을 오른쪽 클릭하고 복사 후 Ctrl+V 로 붙여 넣기 하여 v4_copy 라는 이름을 의미 있는 이름으로 변경하면 됩니다.

이름 변경 후 해당 마스터페이지를 오른쪽 클릭하여 “고급 모드에서 파일 편집”을 선택합니다. 체크 아웃하겠냐는 창에서는 예를 선택하시면 됩니다. 
 

소스창이 열리게 되는데 </head> 를 찾아서 아래 SharePoint:CssRegistration 태그를 추가합니다.(워드에 붙이다 보니 잘 나오지 않아서)
 

Css 파일은 스타일 라이브러리에 demo라는 폴더에 v4_demo.css 파일에 업로드 되어 있습니다.

마스터 페이지를 일부 수정해보도록 하겠습니다. 일단 백그라우드와 기타 이미지는 스타일과 테마로 수정이 가능합니다. Footer에 대한 내용은 태그가 없으니 아래와 같이 추가해보도록 하겠습니다. 태그의 위치는 마스터페이지에서 맨 아래 부분으로 내려가면 DeveloperDashboard 태그가 있습니다.

 

            </div>         

            <SharePoint:DeveloperDashboard runat="server"/>

 

위 태그 위의 </div> 위에 아래 태그를 추가하면 됩니다.

<!-- Custom footer -->

        <div id="footer">

                <div id="footerleft">

                    <span>&copy;2012 hongju, Inc.&nbsp;All Rights Reserved.</span>

                </div>

        </div>

Footer 관련 스타일은 위의 스타일 링크의 v4_demo.css 파일에 아래와 같이 추가합니다.

 

#footer{

    height:25px;

    background: rgb(235, 124, 0);

    border-top: thin white solid;

    clear:both;

    color: white;

   

}

 

#footerleft

{

    color: white;

    text-align:center;

    vertical-align:middle; 

}

 

사용자 지정 마스터 페이지와 스타일 시트를 추가했다면 해당 마스터 페이지를 SharePoint Designer 2010에서 오른쪽 클릭하여 “기본 마스터 페이지로 설정”, “사용자 지정 마스터 페이지로 설정” 로 선택해주면 됩니다.

태그를 일부 추가하고 스타일을 위와 같이 수정하면 아래와 같은 내용을 볼 수 있습니다. 원하는 스타일로 마스터 페이지를 생성할 수 있습니다.

 

사용자 지정 마스터 페이지에 자주 사용되는 태그에 매핑된 스타일은 다음 글에서 간략히 정리해보도록 하겠습니다.