<실습>
- css 분리하기
- we are 페이지 만들기
지난 시간까지, index.html 페이지를 만들었다.
지정했던 스타일들을 따로 분리해서 css파일에 옮긴다.
- 먼저 /resources/sample/css/mobile.css 파일을 만든다.
- 헤더영역, 본문 section영역, 푸터영역을 주석으로 표시하여 알아보기 쉽게 한다.
- 옮겨도 제대로 실행되는지 확인한다.
여기까지 하면, index.html 페이지 끝!
- 다음은 index.html 페이지를 바탕으로 다음 페이지인 we are 페이지, work 페이지, blog페이지, contact us페이지를 만든다.
- we are 페이지 만들기 (/resources/sample/weare.html 페이지를 만든다.)
- 안의 내용은 index.html 페이지의 소스를 복사하여 붙여넣고, section영역 안의 내용은 지워준다.
- section 영역에 들어갈 것들
1. WE ARE 타이틀 쓰기
2. 타이틀 아래에 글 적기
3. 사진+설명 세로 배치
- 1. WE ARE 타이틀 쓰기 / 2. 타이틀 아래에 글 적기
- 아래는 weare.html 의 section영역의 header 영역 소스이다.
<section class="weare-section">
<!-- header 영역 -->
<section class="weare-header">
<h1 class="section-title">WE ARE</h1>
<p>
휴먼교육센터 디지털컨버전스 과정입니다.
지금은 화면설계 시간입니다.
</p>
</section>
</section>h1 태그에 class 명을 weare-title 이라고 하지 않은 이유는 [9일차] 내용에 포함된 이미지를 보면 알듯이, 페이지 모두 본문 영역 header는 공통된 스타일을 가지기 때문에, 스타일을 한번만 지정하기 위함이다.
- 아래는 weare.html 의 header영역의 스타일을 지정한 것이다.
<style>
.weare-header {
margin-top:30px;
text-align:center;
}
.section-title {
margin-bottom:30px;
font-size:42px;
color:#000;
font-weight:normal;
letter-spacing:5px;
}
.weare-header p {
color:#000;
line-height:1.9;
font-size:14px;
}
</style>
margin-top : 30px; 위에만 margin을 30px 준다.
text-align:center; 텍스트를 중앙정렬한다. (수평정렬)
margin-bottom:30px; 아래에만 margin을 30px 준다.
font-size:42px; 텍스트(타이틀) 크기를 42px로 설정한다.
color:#000; 텍스트 색상은 검정
font-weight:normal: 텍스트 굵기는 보통
letter-spacing:5px; 글자간 간격 5px로 설정
.weare-header p : weare-header클래스의 p(문단) 설정
color:#000; 텍스트 색상은 검정
line-height:1.9; 줄간격, 글자크기의 1.9배수
font-size:14px; 텍스트 크기 14px
3. 사진+설명 세로 배치
<section class="weare-body">
<ul>
<li><a href="javascript:;">
<img alt="갤러리게시물1" src="/resources/sample/img/photo.jpg">
<h2>갤러리게시물1</h2>
<p>안녕하세요. 휴먼교육센터입니다.</p>
</a></li>
<li><a href="javascript:;">
<img alt="갤러리게시2" src="/resources/sample/img/photo.jpg">
<h2>갤러리게시물2</h2>
<p>안녕하세요. 휴먼교육센터입니다.</p>
</a></li>
</ul>
</section><a href="javascript:;"> a링크가 작동은 하지만, 클릭해도 실제 페이지가 이동하진 않고, 커서만 pointer로 바뀜.
.weare-body{
margin-top:68px;
}
.weare-body li{
text-align:center;
margin-top:50px;
}
.weare-body li img{height:220px}
.weare-body li h2 {
margin:20px 0px 10px;
font-size:20px;
font-weight:normal;
color:#000;
}
.weare-body li p{
font-size:14px;
}
.weare-body li img : wear-body 클래스의 li의 img 스타일 지정
height:220px; 이미지 높이 220px로 설정
.weare-body li h2 : wear-body 클래스의 li의 h2 스타일 지정
margin:20px 0px 10px; 상20px, 좌우0px, 하10px 에 margin 줌
스타일 지정이 끝났다.
weare.html 페이지의 스타일 소스를 mobile.css 파일로 옮긴다.
weare.html 페이지 끝!
