3. 스타일시트 적용
기본 레이아웃이 구성된 웹 페이지에 스타일시트를 하나씩 적용해 보겠습니다.
3.1 초기화
초기화 부분에서는 [코드 13-5]의 요소를 초기화합니다. 종합 예제에서도 언급했듯이 태그에 적용되는 기본 스타일이 조금씩 다룬 문제를 해결하려면 스타일을 강제로 지정해야 합니다.
<코드 13-5> 초기화 코드
<!-- 초기화 -->
<style>
* {
margin: 0;
padding: 0;
font-family: "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
a { text-decoration:none; }
img { border: 0; }
li { list-style: none; }
</style>
3.2 공통 구성
공통 구성은 [코드 13-6]처럼 작성합니다. 이렇게 하면 클래스에 container 라고 입력한 태그가 모두 중앙 정렬되며, 위쪽과 아래쪽에 여백이 생깁니다.
<코드 13-6> 공통 구성
<!-- 공통 구성-->
<style>
.container {
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
}
</style>
3.3 헤더 구성
헤더는 [코드 13-7]처럼 작성합니다. 대부분 간단한 내용이므로 이 장의 앞부분에서 살펴본 테크닉을 사용해 input 태그로 풀다운 메뉴를 만들었습니다. 그리고 label 태그로 input 태그의 체크 상태를 변경할 수 있게 for 속성을 지정한 후 버튼처럼 구성했습니다.
<코드 13-7> 헤더 구성
<!-- 헤더 구성 -->
<style>
#main-header {
padding: 10px 5px;
}
#main-header h1 {
font-size: 20px;
font-weight: normal:
line-height: 27px;
color: #222;
}
#main-header ul {
margin-top: 20px;
margin-bottom: 10px;
}
#main-header li {
margin-top: 10px;
margin-bottom: 10px;
}
#main-header li a {
color: #555;
}
#main-header li.active a {
color: black;
font-weight: 500;
}
#main-header label {
text-align: center;
float: right;
width: 40px;
height: 27px;
line-height: 27px;
color: #222;
border: 1px solid #222;
border-radius: 5px
}
#checkbox{
display: none;
}
#checkbox + nav {
display: block;
}
#checkbox:checked + nav {
display: none;
}
</style>
label 태그로 체크 상태를 변경할 수 있으므로 input 태그는 보이지 않게 만들어 화면을 구성했습니다. 이렇게 label 태그와 input 태그를 사용하면 [그림 13-7]과 같습니다.
3.4 본문과 푸터 구성
본문과 푸터는 [코드 13-8]처럼 작성합니다. 글꼴, 글자색, 정렬 정도만 지정했습니다.
<코드 13-8> 본문과 푸터 구성
<!-- 본문과 푸터 구성 -->
<style>
#main-content{
background: #00afa0;
padding: 40px 15px 30px;
}
#main-content h1 {
text-align: center;
margin-bottom: 20px;
color: white;
font-weight: 500;
}
#main-content p {
color: #222;
text-align: center;
color: white;
}
#sub-content {
padding-top: 30px;
}
#sub-content h1 {
text-align: center;
color: #333;
}
#sub-content h2{
text-align: center;
color: #333;
font-size: 17px;
}
#sub-content p {
color: #555;
}
#sub-content img {
width: 200px;
display: block;
margin: 10px auto;
}
#main-footer {
padding-top: 40px;
}
footer {
background: #323232;
color: white;
font-size: 12px;
text-align: center;
line-height: 40px;
}
</style>
최종 완성한 페이지는 위 코드와 같습니다.
간단하지만 약간 특별한 요소가 조합되어 있는 모바일 페이지를 만들어 보았습니다. 자바스크립트도 배웠으므로 이 장에서 만든 풀 다운 메뉴를 자바스크립트로 어떻게 구현할 수 있을지 생각해보세요. 또 단순하게 배치된 본문에 이미지 슬라이더를 적용해서 이미지도 움직여 봅니다.