-
Chapter 06 메인 페이지 작업하기_1(메인 페이지 구조 작업하기)Do it! 반응형 웹 페이지 만들기 2022. 12. 4. 14:33
메인 페이지 구조 작업하기
메인 페이지는 웹사이트를 방문하는 사용자들이 가장 처음으로 만나게 되는 웹사이트의 얼굴(화면)입니다. 즉, 첫 화면을 통해 사용자들에게 전하고자 하는 내용을 확실하게 전달하기 위해 구성, 디자인, 배치 등을 신경써서 제작해야 하는 중요한 페이지 입니다.
1. 인포메이션 영역의 구조 작업하기
인포메이션 영역은 홈 링크, 로그인 링크, 회원가입 링크, 검색 버튼 등 웹사이트의 기본적인 링크 또는 버튼 등이 들어 있는 영역입니다.
먼저 앞에서 정리해 높은 메인 페이지 파일인 index.html 파일을 편집기에서 실행합니다.
<body> <div id="wrap"> <section class="info_section"> <!--wrap이라는 아이디를 가진 <div> 태그 사이에 영역을 구분하기 위한 <section> 태그를 작성하고, 클래스명을 info_section이라고 합니다.--> <ul class="info_list"> <li><a href="index.html"><img src="images/s_images/info_icon_01.png" alt=""></a></li> <li><a href=""><img src="images/s_images/info_icon_02.png" alt=""></a></li> <li><a href=""><img src="images/s_images/info_icon_03.png" alt=""></a></li> <li><a href=""><img src="images/s_images/info_icon_04.png" alt=""></a></li> <!--링크 목록을 만들기 위해 <ul> 태그와 <li> 태그 그리고 링크 태그인 <a> 태그, 이미지 태그인 <img> 태그를 이용해서 목록을 구성합니다.--> </ul> </section> ... </div> </body>703행 마지막으로 <ul> 태그에 클래스명을 info_list라고 입력합니다.
2. 헤더 영역의 구조 작업하기
헤더 영역은 로고나 메뉴 영역인 내비게이션이 들어 있는 영역입니다. 헤더 영역의 구조 작업은 인포메이션 영역 바로 뒤에 이어서 합니다.
<body> <div id="wrap"> ... <header class="header"> <!--먼저 머리를 의미하는 <header> 태그를 작성하고, 클래스명을 header라고 입력합니다.--> <h1 class="logo"> <a href="index.html">flat<br>design</a> <!--1--> </h1> <nav class="nav"> <ul class="gnb"> <li><a href="index.html">홈</a><span class="sub_menu_toggle_btn">하위 메뉴 토글 버튼</span></li> <li><a href="introudce.html">플랫 디자인이란?</a><span class="sub_menu_toggle_btn">하위 메뉴 토글 버튼</span></li> <li><a href="gallery.html">갤러리</a><span class="sub_menu_toggle_btn">하위 메뉴 토글 버튼</span></li> <li><a href="board.html">문의사항</a><span class="sub_menu_toggle_btn">하위 메뉴 토글 버튼</span></li> </ul> </nav> <!--2--> <span class="menu_toggle_btn">전체 메뉴 토글 버튼</span> <!--3--> </header> ... </div> </body>ⓛ 링크 영역이 포함된 로고 영역을 만들기 위해 제목 태그인 <h1> 태그와 <a> 태그를 이용해서 작성하고, <h1> 태그에 클래스명을 logo라고 입력합니다.
② 메뉴 영역을 만들기 위해 내비게이션을 뜻하는 <nav> 태그를 작성하고, 클래스명을 nav로 입력한 후 <nav> 태그 사이에 메뉴 목록을 구성하기 위해 <ul> 태그, <li> 태그 그리고 <a> 태그와 sub_menu_toggle_btn이라는 클래스명을 가진 <span> 태그를 이용해서 목록을 구성합니다.
③ menu_toggle_btn이라는 클래스명을 가진 <span> 태그를 작성합니다.
715행 목록 영역인 <ul> 태그에 클래스명을 gnb라고 입력합니다.
그런데 sub_menu_toggle_btn, menu_toggle_btn이라는 클래스명을 가진 <span> 태그들은 무엇일까요?
이 태그들은 토글 버튼으로, 켜짐/꺼짐처럼 두 상태 중 하나를 선택하는 데 사용합니다. 모바일 환경이나 태블릿 환경에서는 화면의 크기가 작아 메뉴 영역들을 펼쳐놓을 수 없기 때문에 메뉴를 숨겨 놓고 켜짐/꺼짐처럼 토글 버튼을 눌렀을 때만 메뉴 영역들을 보여주기 위해 사용합니다.
반응형 웹과 같이 모든 환경을 지원해야 하는 웹 사이트에서는 토글 버튼을 사용하는 것이 전 세계에서 일반화되어 표준처럼 사용합니다.
3. 슬라이더 영역의 구조 작업하기
슬라이더 영역은 이미지를 효과적으로 보여주기 위한 공간입니다. 슬라이더 영역의 구조 작업은 헤더 영역 바로 뒤에 이어서 합니다.
<body> <div id="wrap"> ... <section class="slider_section"> <!--1--> <span class="prev_btn">이전 버튼</span><span class="next_btn">다음 버튼</span> <!--2--> </section> ... </div> </body>① 영역을 구분하기 위한 <section> 태그를 작성하고, 클래스명을 slider_section이라고 입력합니다.
② 슬라이더 영역의 이전 버튼과 다음 버튼의 구조 작업을 위해 <span> 태그를 두 개 작성한 후 클래스명을 각각 prev_btn, next_btn이라고 입력합니다.
4. 최근 글 영역, 인기 글 영역의 구조 작업하기
최근 글 영역과 인기 글 영역은 최근에 올라온 글들과 사람들이 많이 본 글들을 보여주는 공간으로, 구조가 같기 때문에 동시에 작업합니다.
최근 글 영역과 인기 글 영역의 구조 작업은 슬라이더 영역 바로 뒤에 이어서 합니다.
※ 구조 작업 순서가 바뀐 거 같은데요?
지금까지 작업한 포토샵 시안 파일을 보면 슬라이더 영역 다음은 갤러리 영역이 오는데, 최근 글 영역과 인기 글 영역의 구조 작업부터 하는 걸 보며 구조 작업 순서가 바뀐 게 아닌가라고 생각하는 분들도 있을 겁니다.
이렇게 작업한 이유는 바로 하위 브라우저를 지원하기 위해서입니다. 모바일용 메인 페이지 구조를 살펴보면 슬라이더 영역 다음에 최근 글 영역과 인기 글 영역이 배치됩니다. 최신 브라우저에서는 플렉서블 박스를 이용해 박스의 배치 순서를 자유롭게 바꿀 수 있어 상관이 없지만 하위 브라우저에서는 플렉서블 박스를 사용할 수 없기 때문에 하위 브라우저에서의 배치 순서를 고려해 최근 글 영역과 인기 글 영역의 구조 작업부터 한 것입니다.
이처럼 최신 기술을 이용해서 제작하는 웹사이트에서 하위 브라우저를 지원하고자 할 때는 배치 순서나 여러 가지 사항들을 항상 고려해야 합니다.<body> <div id="wrap"> ... <section class="latest_post_section"> <h2 class="title">최근 글</h2> <ul class="latest_post_list"> <li><a href="">안녕하세요 홈페이지가 오픈...</a></li> <li><a href="">홈페이지 리뉴얼...</a></li> <li><a href="">flat design은...</a></li> <li><a href="">blog에서 다양한 정보를...</a></li> <li><a href="">저는 누굴까요?...</a></li> </ul> </section> <section class="popular_post_section"> <!--영역을 구분하기 위한 <section> 태그 두 개를 작성한 후 클래스명을 각각 latest_post_section, latest_post_list이라고 입력합니다.--> <h2 class="title">인기 글</h2> <ul class="popular_post_list"> <li><a href="">안녕하세요 홈페이지가 오픈...</a></li> <li><a href="">홈페이지 리뉴얼...</a></li> <li><a href="">flat design은...</a></li> <li><a href="">blog에서 다양한 정보를...</a></li> <li><a href="">저는 누굴까요?...</a></li> </ul> </section> ... </div> </body>728행, 738행 각 영역의 제목을 구성하기 위해 <h2> 태그를 작성하고, 클래스명을 title이라고 입력합니다.
729~735행, 739~745행 최근 글 영역과 인기 글 영역에 글 목록을 구성하기 위해 각각의 영역에 <ul> 태그와 <li> 태그 그리고 <a> 태그를 이용해서 목록을 구성합니다.
5. 갤러리 영역의 구조 작업하기
갤러리 영역은 사진을 보여주는 공간입니다. 갤러리 영역의 구조 작업은 인기 글 영역 바로 뒤에 이어서 합니다.
<body> <div id="wrap"> ... <section class="gallery_section"> <!--1--> <ul class="gallery_list"> <li> <a href="#"> <figure> <img src="images/p_images/gallery_01.jpg" alt=""> <figcaption>디자인 트렌트 플랫</figcaption> </figure> </a> </li> <li> <a href="#"> <figure> <img src="images/p_images/gallery_02.jpg" alt=""> <figcaption>원색이 포인트 플랫</figcaption> </figure> </a> </li> </ul> <!--2--> </section> ... </div> </body>① 먼저 영역을 구분하기 위한 <section> 태그를 작성한 후 클래스명을 gallery_section이라고 입력합니다.
② 갤러리 목록을 만들기 위해 <ul> 태그와 <li> 태그, <a> 태그 그리고 이미지의 설명글이 있을 경우 이미지 설명 영역을 구성하기 위한 태그인 <figure> 태그와 <img> 태그 그리고 설명에 해당되는 <figcaption> 태그를 작성합니다.
6. 인기 검색어 영역의 구조 작업하기
인기 검색어 영역은 사람들이 많이 검색한 단어 순서대로 검색어를 보여주는 영역입니다.
인기 검색어 영역의 구조 작업은 갤러리 영역 바로 뒤에 이어서 합니다.
<body> <div id="wrap"> ... <section class="rankup_section"> <!--1--> <h2 class="title">인기 검색어</h2> <!--2--> <ul class="rankup_list"> <li><a href="">반응형 웹</a></li> <li><a href="">미디어 쿼리</a></li> <li><a href="">뷰포트</a></li> <li><a href="">CSS 트릭스</a></li> <li><a href="">W3C</a></li> <li><a href="">루크 W</a></li> <li><a href="">CSS 젠 가든</a></li> <li><a href="">클리어 보스</a></li> <li><a href="">XE</a></li> <li><a href="">워드프레스</a></li> </ul> <!--3--> </section> ... </div> </body>① 먼저 영역을 구분하기 위한 <section> 태그를 작성한 후 클래스명을 rankup_section이라고 입력합니다.
② 영역의 제목을 구성하기 위해 <h2> 태그를 작성하고, 클래스명을 title이라고 입력합니다.
③ 검색어 순위 목록을 구성하기 위해 <ul> 태그와 <li> 태그 그리고 <a> 태그를 이용해서 목록을 구성합니다.
769행 검색어 순위 목록 영역인 <ul> 태그에 클래스명을 rankup_list라고 입력합니다.
7. 배너 영역의 구조 작업하기
배너 영역은 광고 또는 웹사이트에서 전달하고자 하는 내용을 담고 있는 영역입니다.
배너 영역의 구조 작업은 인기 검색어 영역 바로 뒤에 이어서 합니다.
<body> <div id="wrap"> ... <section class="banner_section"> <!--1--> <div class="banner_box_01"> <a href=""><img src="images/s_images/w3c_logo.png" alt=""></a> <!--2--> </div> <div class="banner_box_02"> <ul class="banner_list"> <li><a href=""><img src="images/s_images/js_logo.png" alt=""></a></li> <li><a href=""><img src="images/s_images/html_logo.png" alt=""></a></li> <li><a href=""><img src="images/s_images/css_logo.png" alt=""></a></li> </ul> <!--3--> </div> </section> ... </div> </body>① 영역을 구분하기 위한 <section> 태그를 작성하고, 클래스명을 banner_section이라고 입력합니다.
② 링크 영역이 포함되어 있는 이미지 로고를 넣기 위해 <a> 태그와 <img> 태그를 작성합니다.
③ 링크 영역이 포함되어 있는 이미지 목록을 구성하기 위해 <ul> 태그와 <li> 태그 그리고 링크 태그인 <a> 태그와 <img> 태그를 이용해서 목록을 구성합니다.
783행, 786행 배너 영역 안의 구조를 위/아래 두 개로 나누기 위해 <div> 태그 두 개를 작성하고, 각각 banner_box_01, banner_box_02라는 클래스명을 입력합니다.
787행 이미지 목록 영역인 <ul> 태그에 banner_list라는 클래스명을 입력합니다.
8. 소셜 네트워크 영역의 구조 작업하기
소셜 네트워크 영역은 사람들과의 소통을 위한 소셜 네트워크 링크 아이콘이 들어 있는 공간입니다. 소셜 네트워크 영역의 구조 작업은 배너 영역 바로 뒤에 이어서 합니다.
<body> <div id="wrap"> ... <section class="social_section"> <!--1--> <ul class="social_list"> <li><a href=""><img src="images/s_images/social_icon_01.png" alt=""></a></li> <li><a href=""><img src="images/s_images/social_icon_02.png" alt=""></a></li> <li><a href=""><img src="images/s_images/social_icon_03.png" alt=""></a></li> </ul> <!--2--> </section> ... </div> </body>① 영역을 구분하기 위한 <section> 태그를 작성하고, 클래스명을 social_section이라고 입력합니다.
② 소셜 네트워크 링크 아이콘 목록을 만들기 위해 <ul> 태그와 <li> 태그 그리고 링크 태그인 <a> 태그와 이미지 태그인 <img> 태그를 이용해서 목록을 구성합니다.
795행 소셜 네트워크 링크 아이콘 목록인 <ul> 태그에 social_list라는 클래스명을 입력합니다.
9. 푸터 영역의 구조 작업하기
푸터 영역은 웹사이트의 저작권 정보 등이 들어 있는 영역입니다. 푸터 영역의 구조 작업은 소셜 네트워크 영역 바로 뒤에 이어서 합니다.
<body> <div id="wrap"> ... <footer class="footer"> <!--1--> <p>copyright© 2014.flat design blog all rights reserved.</p> <!--2--> </footer> </div> </body>① 다리를 의미하는 <footer> 태그를 작성한 후 footer라는 클래스명을 입력합니다.
② 저작권 정보를 입력하기 위해 문단 구성을 위한 <p> 태그를 작성하고, 저작권 정보를 입력합니다.
- 출처 : "반응형 웹 페이지 만들기"
'Do it! 반응형 웹 페이지 만들기' 카테고리의 다른 글
Chapter 06 메인 페이지 작업하기_2(메인 페이지 반응형 웹 작업하기2) (1) 2022.12.04 Chapter 06 메인 페이지 작업하기_2(메인 페이지 반응형 웹 작업하기1) (1) 2022.12.04 Chapter 05 반응형 웹사이트 준비 작업하기 (0) 2022.12.04 Chapter 04 새로운 웹 기술, 플렉서블 박스_3(플렉서블 박스 이용해 목업 웹사이트 만들기) (1) 2022.12.01 Chapter 04 새로운 웹 기술, 플렉서블 박스_2(기술 익히기2) (0) 2022.12.01