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

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

디자이너와 개발자들이 보다 더 쉽게 작업할 수 있도록 페이지 구조 및 공통 CSS를 정리해보도록 하겠습니다. IE 개발자 도구를 통해서 찾으면 되는데 많이 찾는 공통 CSS를 페이지 구조와 정리했으니 참고하십시오.

아래 내용에서 구성된 CSS를 보고 이를 수정하여 다른 CSS에 적용해서 테스트할 수 있습니다.

 

s4-ribbonrow	BODY #s4-ribbonrow
siteactiontd	.ms-siteactionsmenu
	.ms-siteactionsmenuinner
위로 탐색	.s4-breadcrumb-anchor
위로 탐색	s4-breadcrumb-menu .s4-breadcrumb-anchor .s4-breadcrumb-top .s4-breadcrumb-header .s4-breadcrumb .s4-breadcrumbRootNode .s4-breadcrumbCurrentNode
페이지 편집	.ms-qatbutton
찾아보기	.ms-cui-tts .ms-cui-tt .ms-cui-tt-s .ms-cui-tt-span.ms-cui-tt-a
페이지	.ms-cui-tt-span .ms-cui-tt-a .ms-cui-tt
	.ms-welcomeMenu .ms-SPLink
	.s4-title .s4-titletext .s4-titlelogo
검색 상자, 도움말	.s4-search .ms-searchimage .s4-help
전역 탐색	BODY #s4-topheader2 .s4-toplinks .s4-tn a.selected
s4-leftpanel-content	body #s4-leftpanel .ms-quickLaunch
Header (예,라이브러리, 목록)	.s4-ql ul.root > li > .menu-item,.s4-qlheader,.s4-qlheader:visited
링크 (예, 공유문서)	.s4-ql ul.root ul > li > a
휴지통 (이미지포함)	.s4-specialNavLinkList a . s4-rcycl . ms-splinkbutton-text
모든사이트 콘텐츠 (이미지포함)	.s4-specialNavLinkList a
웹 파트	.s4-wpcell .ms-WPHeader .ms-WPHeader TD
대화상자
문서 추가, 내용 보기 등 대화상자	.ms-dlgContent .ms-dlgOverlay

아래 링크를 활용해서 간략히 정리했습니다. 스타일 시트가 좀 많지만 가장 많이 쓰는 내용은 아래와 같습니다. 나머지 내용은 적용하실 때 위 내용을 참고하시면 될 것 같습니다.

l  최상단 ribbonrow : BODY #s4-ribbonrow

l  리본 바로 아래: .s4-title

l  왼쪽 빠른 실행: body #s4-leftpanel

l  아래 Footer: DeveloperDashboard 태그 위 </div> 태그 위

 

 

SharePoint 2010 Base CSS Classes

http://erikswenson.blogspot.com/2010/01/sharepoint-2010-base-css-classes.html

Cascading Style Sheets Class Usage in SharePoint Foundation

http://msdn.microsoft.com/en-us/library/ms438349.aspx

Using Default SharePoint 2010 CSS Files (Wrox)

http://msdn.microsoft.com/en-us/library/hh537937.aspx

Real World Branding with SharePoint 2010 Publishing Sites

http://msdn.microsoft.com/en-us/library/gg430141.aspx