-
Chapter 07 서브 페이지 작업하기_1(서브 페이지 구조 작업하기)Do it! 반응형 웹 페이지 만들기 2022. 12. 6. 15:56
메인 페이지가 웹사이트의 내용들을 함축적으로 보여주는 페이지라면 서브 페이지는 홈페이지 소개나 갤러리 게시판, 문의사항 게시판 등 웹사이트의 자세한 내용을 담아 메인 페이지의 내용을 뒷받침해주는 페이지입니다.
1. 기본 구조 작업하기
서브 페이지에도 인포메이션 영역과 헤더 영역 그리고 푸터 영역이 있습니다. 앞에서 작업한 메인 페이지에서 세 영역을 그대로 복사해 오면 작업 시간을 훨씬 단축시킬 수 있습니다.
그런 다음 현재 위치와 경로를 보여주는 영역이 있는 서브 헤더 영역과 서브 페이지의 실제 내용이 담길 콘텐츠 영역을 추가할 것입니다.
<body> <div id="wrap"> <section class="info_section"> ... <!--인포메이션 영역 코드 생략--> ... </section> <header class="header"> ... <!--헤더 영역 코드 생략--> ... </header> <section class="sub_header_section"> <h2>현재 페이지와 연결되어 있는 메뉴 이름</h2> <!--1--> <ul class="breadcrum_list"> <!--2--> <li><a href="index.html">홈 /</a></li> <li><a href="introudce.html">현재 페이지와 연결되어 있는 메뉴 이름</a></li> <!--3--> </ul> </section> <section class="content_section"> <!--4--> </section> <footer class="footer"> ... <!--푸터 영역 코드 생략--> ... </footer> </div> </body>① 현재 위치와 경로 영역이 들어 있는 서브 헤더 영역을 만들기 위해 영역을 구분해 줄 <section> 태그를 작성하고, 클래스명을 sub_header_section이라고 입력합니다.
그리고 서브 헤더 영역에 현재 위치를 보여줄 제목 태그인 <h2> 태그를 작성하고, <h2>, </h2> 태그 사이에 현재 페이지와 연결되어 있는 메뉴 이름을 입력합니다.
② 경로를 보여줄 영역을 만들기 위해 목록을 구성하기 위한 <ul> 태그를 작성하고, 목록 태그인 <li> 태그와 링크 태그인 <a> 태그를 이용해서 경로 목록 영역을 구성합니다.
경로 목록 영역에 클래스명을 breadcrum_list라고 입력합니다.
③ 첫 번째 목록에는 홈/이라고 입력하고, 링크를 index.html 파일로 연결합니다.
그리고 나서 두 번째 목록에는 현재 페이지와 연결되어 있는 메뉴 이름을 입력하고, 링크를 현재 페이지 경로로 입력합니다.
④ 서브 페이지의 실제 내용이 되는 콘텐츠 영역을 만들기 위해 영역을 구분하는 <section> 태그를 작성하고, 클래스명을 content_section이라고 입력합니다.
2. 소개 페이지의 구조 작업하기
소개 페이지는 웹사이트의 소개 글을 싣는 페이지입니다. 코드는 콘텐츠 영역에 작성합니다. 소개 페이지의 구조는 세 영역으로 나눠지므로 content_section이라는 클래스명의 <section> 태그 안에 세 개의 <div> 태그를 작성하고 각각 클래스명을 content_row_1, content_row_2, content_row_3이라고 입력합니다.
<body> <div id="wrap"> ... <section class="content_section"> <div class="content_row_1"> <img src="images/s_images/introduce_01.png" alt=""> <h3>플랫 디자인</h3> <p>...텍스트 생략...</p> <!--1--> </div> <div class="content_row_2"> <article> <img src="images/s_images/introduce_02.png" alt=""> <h4>텍스트를 이용하는 방법</h4> <p>...텍스트 생략...</p> </article> <article> <img src="images/s_images/introduce_03.png" alt=""> <h4>그림을 이용하는 방법</h4> <p>...텍스트 생략...</p> </article> <article> <img src="images/s_images/introduce_04.png" alt=""> <h4>아이콘을 이용하는 방법</h4> <p>...텍스트 생략...</p> </article> <!--2--> </div> <div class="content_row_3"> <h4>플랫 디자인의 미래</h4> <div class="para"> <p>...텍스트 생략...</p> <p>...텍스트 생략...</p> </div> <!--3--> </div> </section> ... </div> </body>① 이미지를 표현하기 위해 <img> 태그를 작성하고, 제목 태그인 <h3> 태그와 문단을 입력하기 위한 <p> 태그를 작성합니다.
② 문서의 조각을 의미하는 <article> 태그 세 개를 작성하고, 각각의 <article> 태그 안에 <img> 태그, <h4> 태그, <a> 태그를 작성합니다.
③ 제목 영역을 만들 <h4> 태그와 문단 영역을 별도로 만들 <div> 태그를 작성합니다. 그리고 문단 영역에는 클래스명을 para라고 입력하고 문단 영역 안쪽에는 문단을 입력할 <p> 태그 두 개를 작성합니다.
3. 갤러리 페이지의 구조 작업하기
갤러리 페이지는 그림들을 보여주기 위한 페이지로, 코드는 콘텐츠 영역에 작성합니다. 갤러리 페이지의 구조 작업은 내용이 많으므로 나누어 작업합니다.
먼저 갤러리 페이지는 세 영역으로 나눠지므로 content_section이라는 클래스명의 <section> 태그 안에 세 개의 <div> 태그를 작성하고, 각각 클래스명을 content_row_1, content_row_2, content_row_3이라고 입력합니다.
<body> <div id="wrap"> ... <section class="content_section"> <div class="content_row_1"> <ul class="gallery_list"> <li><a href=""><img src="images/p_images/sub_gallery_01.jpg" alt=""></a></li> <li><a href=""><img src="images/p_images/sub_gallery_02.jpg" alt=""></a></li> <li><a href=""><img src="images/p_images/sub_gallery_03.jpg" alt=""></a></li> <li><a href=""><img src="images/p_images/sub_gallery_04.jpg" alt=""></a></li> <li><a href=""><img src="images/p_images/sub_gallery_05.jpg" alt=""></a></li> <li><a href=""><img src="images/p_images/sub_gallery_06.jpg" alt=""></a></li> <li><a href=""><img src="images/p_images/sub_gallery_07.jpg" alt=""></a></li> <li><a href=""><img src="images/p_images/sub_gallery_08.jpg" alt=""></a></li> <li><a href=""><img src="images/p_images/sub_gallery_09.jpg" alt=""></a></li> <li><a href=""><img src="images/p_images/sub_gallery_10.jpg" alt=""></a></li> <li><a href=""><img src="images/p_images/sub_gallery_11.jpg" alt=""></a></li> <li><a href=""><img src="images/p_images/sub_gallery_12.jpg" alt=""></a></li> </ul> <!--1--> </div> ... </div> </body>① 이미지 목록을 만들기 위해 목록을 구성하기 위한 <ul> 태그를 작성합니다. 그리고 목록 태그인 <li> 태그와 링크 태그인 <a> 태그 그리고 이미지를 표현하기 위한 <img> 태그를 이용해서 목록을 구성합니다.
갤러리 페이지 구조 작업의 코드는 설명할 내용이 많으므로 뒤에 이어서 작성합니다.
검색창, 글쓰기 버튼 영역을 만들기 위해 <div> 태그 두 개를 작성하고, 각각 클래스명을 search_box와 write_box라고 입력합니다.
<body> <div id="wrap"> ... <div class="content_row_2"> <div class="search_box"> <form action="#" method="get"> <input type="search" name="gallery_search_window" class="search_window" placeholder="검색어"> <div class="search_select_box"> <span>검색 대상</span> <!--1--> <ul class="search_select_list"> <li>제목</li> <li>내용</li> <li>제목+내용</li> <li>댓글</li> <li>이름</li> <li>닉네임</li> <li>아이디</li> <li>태그</li> </ul> <!--2--> </div> </form> </div> <div class="write_box"> <a href="#">글 쓰기</a> <!--3--> </div> </div> ... </div> </body>① 검색 대상 영역의 초기 출력 글자 영역을 만들기 위해 <span> 태그를 작성합니다.
② 검색 대상 목록 영역을 만들기 위해 목록을 구성할 <ul> 태그를 작성하고, 목록 태그인 <li> 태그를 이용해서 목록을 구성합니다.
③ 글쓰기 버튼을 만들기 위해 <a> 태그를 작성합니다.
571행 검색 대상 목록 영역인 <ul> 태그에는 클래스명을 search_select_list라고 입력합니다.
567~583행 검색창을 만들기 위해 <form> 태그와 <input> 태그를 작성합니다. 그리고 검색 대상 목록을 만들 <div> 태그를 작성하고 클래스명을 search_select_box라고 입력합니다.
<body> <div id="wrap"> ... <div class="content_row_3"> <span class="list_prev_btn">갤러리 이전 버튼</span> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <span class="list_next_btn">갤러리 다음 버튼</span> <!--1--> </div> </section> ... </div> </body>① 페이지 이전, 다음 버튼과 페이지 링크 영역을 만들기 위해 <span> 태그와 <a> 태그를 작성합니다.
589행, 593행 <span> 태그에는 클래스명을 각각 list_prev_btn, list_next_btn이라고 입력합니다.
4. 게시판 페이지의 구조 작업하기
게시판 페이지는 웹사이트를 사용하는 사용자가 문의사항이 있을 때 글을 작성하기 위한 페이지로, 코드는 콘텐츠 영역에 작성합니다. 게시판 페이지의 구조 작업은 내용이 많으므로 나누어서 작업합니다.
콘텐츠 영역 중 두 번째 영역과 세 번째 영역은 갤러리 페이지와 같으니 갤러리 페이지의 코드를 그대로 복사해 오면 됩니다. 그리고 두 번째 영역과 세 번째 영역에 대한 설명은 갤러리 영역을 참조하세요.
먼저 첫 번째 영역을 만들기 위해 <div> 태그를 작성하고, 클래스명은 content_row_1이라고 입력합니다.
<body> <div id="wrap"> ... <section class="content_section"> <div class="content_row_1"> <table class="board_table"> <!--1--> <caption>문의사항 게시판</caption> <thead> <tr> <th>번호</th> <th>제목</th> <th>글쓴이</th> <th>조회수</th> </tr> </thead> <!--2--> ... </table> </div> ... </section> ... </div> </body>① 게시판 영역을 만들기 위해 표를 구성하기 위한 <table> 태그를 작성하고, 클래스명을 board_table이라고 입력합니다.
② 표를 설명하기 위한 <caption> 태그를 작성하고, 표의 제목 영역을 만들기 위해 표의 머리를 뜻하는 <thead> 태그와 <tr> 태그, <th> 태그를 이용해서 표의 머리 영역을 구성합니다.
게시판 페이지 구조 작업의 코드는 설명할 내용이 많으므로 뒤에 이어서 작성합니다.
<body> <div id="wrap"> ... <section class="content_section"> <div class="content_row_1"> <table class="board_table"> <caption>문의사항 게시판</caption> <thead> <tr> <th>번호</th> <th>제목</th> <th>글쓴이</th> <th>조회수</th> </tr> </thead> <tbody> <tr> <td>5</td> <td><a href="">저는 누굴까요?</a></td> <td>FLAT DESIGN</td> <td>22</td> </tr> <tr> <td>4</td> <td><a href="">BLOG에서 다양한 정보를 만나보세요</a></td> <td>FLAT DESIGN</td> <td>32</td> </tr> <tr> <td>3</td> <td><a href="">FLAT DESIGN은 원색을 강조합니다.</a></td> <td>FLAT DESIGN</td> <td>67</td> </tr> <tr> <td>2</td> <td><a href="">홈페이지 리뉴얼 소식</a></td> <td>FLAT DESIGN</td> <td>96</td> </tr> <tr> <td>1</td> <td><a href="">안녕하세요 홈페이지가 오픈 되었습니다.</a></td> <td>FLAT DESIGN</td> <td>123</td> </tr> </tbody> <!--1--> </table> </div> <div class="content_row_2"> <!--두 번째 영역 코드 생략--> ... </div> <div class="content_row_3"> ... </div> </section> ... </div> </body>① 표의 실제 내용이 되는 부분을 만들기 위해 표의 몸통을 의미하는 <tbody> 태그를 작성하고, <tr> 태그 다섯 개와 안쪽에 <td> 태그 네 개를 작성하여 표의 실제 내용이 되는 부분을 구성합니다.
588행, 594행, 600행, 606행, 612행 <td> 태그 중 두 번째 <td> 태그는 링크 영역이 필요하므로 링크 태그인 <a> 태그를 작성합니다.
이렇게 해서 서브 페이지의 구조 작업이 완료되었습니다. 이제 본격적으로 서브 페이지의 반응형 웹 작업을 진행해 보겠습니다.
- 출처 : "반응형 웹 페이지 만들기"
'Do it! 반응형 웹 페이지 만들기' 카테고리의 다른 글
Chapter 06 메인 페이지 작업하기_2(메인 페이지 반응형 웹 작업하기4) (0) 2022.12.05 Chapter 06 메인 페이지 작업하기_2(메인 페이지 반응형 웹 작업하기3) (0) 2022.12.05 Chapter 06 메인 페이지 작업하기_2(메인 페이지 반응형 웹 작업하기2) (1) 2022.12.04 Chapter 06 메인 페이지 작업하기_2(메인 페이지 반응형 웹 작업하기1) (1) 2022.12.04 Chapter 06 메인 페이지 작업하기_1(메인 페이지 구조 작업하기) (0) 2022.12.04