2. 스타일시트 적용
기본 레이아웃이 구성된 우베 페이지에 스타일시트를 하나씩 적용해 보겠습니다.
2.1 초기화
초기화 부분에서는 [코드 14-2]의 요소를 초기화 합니다. 종합 예제에서도 언급했듯이 태그에 적용되는 기본 스타일이 조금씩 다른 문제를 해결하려면 스타일을 강제로 지정해야 합니다.
<코드 14-2> 초기화 코드
<!-- 초기화 -->
<style>
* {
margin: 0; padding: 0;
font-family: Malgun Gotic', sans-serif;
}
a { text-decoration: none; }
img { border: 0; }
li { list-style: none; }
html { background: #f7f5f5; }
</style>
2.2 헤더 구성
헤더는 [코드 14-3]처럼 구성합니다. 7장에서 다룬 '절대 위치를 사용해 요소를 중앙에 배치'를 적용해 제목을 중간에 위치시키고, float 속성을 사용해 각 메뉴를 양쪽에 배치합니다. 부모 태그에 height 속성을 강제로 부여했으므로 overflow 속성은 별도로 입력하지 않았습니다. 또 header title 태그에 text-indent 속성을 부여해 기존의 내부 글자 Interest를 화면에서 보이지 않도록 처리합니다.(대신 그림 Interest가 보입니다.
<코드 14-3> 헤더 스타일
<!-- 헤더 -->
<style>
#main-header {
height: 40px;
background: #faf7f7;
position: relative;
}
.header-search-form { float: left; }
.header-menu { float: right; }
.heaer-title {
position: absolute;
width: 200px; height: 40px;
left: 50%; margin-left: -100px;
background: url('logo.png');
background-repeat: no-repeat;
text-indent: -9999px;
}
</style>
2.3 풀다운 메뉴 구성
이제 풀다운 메뉴를 구성합니다. 풀다운 메뉴는 [코드 14-4]처럼 작성합니다. 이전 장에서 살펴본 내용이므로 어렵지 않을 것입니다. 스타일시트에서는 스타일만 적용하고, 자바스크립트에서는 보이거나 보이지 않게 동작을 설정합니다.
<코드 14-4> 풀다운 메뉴 스타일
<!-- 풀다운 메뉴 -->
<style>
.outer-menu {
float: left;
width: 100px; height: 20px;
line-height: 20px;
padding: 10px 0;
position: relative;
text-align: center;
font-size: 13px;
font-weight: bold;
z-index: 9999;
}
.outer-menu:hover { background: #E1DFDF; }
.inner-menu {
display: none;
background: #FFFFFF;
margin-top: 10px;
width: 100%;
border-top: 1px solid #cccaca;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.5);
}
.inner-menu a{
display: block;
padding: 5px 10px;
z-index: 5000;
}
.inner-menu a:hover { background: #E1DFDF; }
</style>
2.4 네비게이션 구성
이번 예제의 네비게이션 목록은 굉장히 간단합니다. li 태그를 Inline 방식으로 지정하고 text-align 속성을 부여해서 중앙에 정렬합니다.
<코드 14-5> 내비게이션 메뉴 스타일
<!-- 내비게이션 메뉴 -->
<style>
#main-navigation {
height: 30px;
background: #faf7f7;
border-top: 1px solid #cfcaca;
box-shadow: 1px 3px 3px rbga(34, 25, 25, 0.4);
}
#main-navigation > ul {
overflow:hidden;
text-align: center;
}
#main-navigation > ul > li {
display: inline;
padding: 0 5px;
line-height: 30px;
font-size: 13px;
color: #524D4D;
text-shadow: 0 1px 1px white;
}
#main-navigation > ul > li:hover {
background: #E1DFDF;
border-radius: 2px;
}
</style>
이어서 검색 양식은 종합 예제에서 만들었던 검색 양식을 크기만 바꿔 활용합니다.
<코드 14-6>
<!-- 검색 양식 -->
<style>
.header-search-form {
height: 26px;
padding: 7px;
}
.input-search {
display: block;
float: left;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 15px 0 0 15px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
width: 120px; height: 24px;
padding: 0 0 0 10px;
font-size: 12px;
color: #555555;
}
.input-search:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.input-search-submit {
display: block;
float: left;
width: 50px; height: 26px;
border-radius: 0 15px 15px 0;
border: 1px solid #CCCCCC;
margin-left: -1px;
vertical-align: top;
display: inline-block;
}
</style>
2.5 웹 페이지 구성
이제 타임 형식으로 배치되는 각 종이 스타일을 구성합니다. masonry 플러그인을 사용하므로 웹 페이지의 너비를 정확하게 입력하는 것이 중요합니다. .paper 태그의 width 속성을 190px로 적용하고, padding 속성을 양쪽으로 각각 15px을 적용합니다. 따라서 .paper 태그의 전체너비는 220px 입니다.
<코드 14-7> 종이 스타일
<style>
.paper {
width: 190px;
margin-top: 10px;
padding: 15px 15px 0;
font-size: 11px;
background: #FFFFFF;
box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
}
.paper-content {
margin: 0 -15px;
margin-top: 10px;
padding: 10px 15px;
background: #F2F0F0;
overflow: hidden;
}
.paper-description {
margin: 10px 0;
}
.paper-link {
display: block;
float: left;
}
.paper-text {
float: left;
width: 150px;
margin-left: 10px;
}
</style>
.paper 태그들이 위치하는 #main-section 태그는 [코드 14-8]처럼 작성합니다. 미디어 쿼리를 지원하지 않는 웹 브라우저는 width 속성을 920px로 지정합니다. 그리고 너비마다 각각의 width 속성을 지정합니다.
<코드 14-8> 섹션 스타일
<!-- 섹션 -->
<style>
/* 미디어 쿼리르 지원하지 않는 웹 브라우저 */
#main-section {
width: 920px;
margin: 0 auto;
}
/* 세 줄 */
@media (max-width: 919px) {
#main-section { width: 690px; }
}
/* 네 줄 */
@media (min-width: 930px) and (max-width: 1149px) {
#main-section { width: 920px; }
}
/* 다섯 줄 */
@media (min-width: 1150px) and (max-width: 1379px) {
#main-section { width: 1150px; }
}
/* 여섯 줄 */
@media (min-width: 1380px) {
#main-section { width: 1380px; }
}
</style>
2.6 라이트박스 구성
이젠 마지막으로 #darken-background 태그와 #lightbox 태그를 설정해 라이트박스를 처리합니다.
<코드 14-9> 라이트박스 스타일
<!-- 라이트박스 -->
<style>
#darken-background {
position: absolute;
top: 0; left: 0; right: 0;
height: 100%;
display: none;
background: rgba(0, 0, 0, 0.9);
z-index: 10000;
overflow-y: scroll;
}
#lightbox {
width: 700px;
margin: 20px auto; padding: 15px;
border: 1px solid #333333;
border-radius: 5px;
background: white;
box-shadow: 0 5px 5px rgba(34, 25, 25, 0.4);
text-align: center;
}
.user-information { overflow: hidden; text-align: left; }
.user-information-image { float: left; width: 70px; }
.user-information-text { float: right: width: 620px; }
.lightbox-splitter { margin: 10px 0; }
</style>
NOTE_ 스크롤이 2개인 것은 자바스크립트로 해결합니다.
#darken-background 태그는 전체 화면 크기로 배경색을 검은색으로 지정하고, #lightbox 태그는 width 속성과 margin 속성을 사용해 중앙에 정렬합니다.
