티스토리 뷰

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에서 오른쪽 클릭하여 기본 마스터 페이지로 설정”, “사용자 지정 마스터 페이지로 설정로 선택해주면 됩니다.

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

 

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

댓글