리베하얀의 웹퍼블리셔를 위한 실무 UI 패턴집: 메뉴 편

기획자, 디자이너, 개발자가 모두 봐야 하는 웹퍼블리싱 실무 참고서

이 책은 하나의 UI가 만들어지기까지 HTML, CSS, jQuery 코드를 모두 설명하여 입문자에게도 어렵지 않으며, 이론은 알고 있으나 막상 기능을 구현하려고 하면 어떻게 활용해야 할지 감이 오지 않는 초보 웹퍼블리셔에게 추천합니다. 또한, 웹퍼블리싱 기술을 잘 몰라서 웹퍼블리셔와 소통할 때 답답함을 느꼈던 기획자, 디자이너가 보면 좋습니다.



리베하얀의 웹퍼블리셔를 위한 실무 UI 패턴집은 이렇게 구성했습니다.

1. 메뉴 유형별 다양한 디자인과 구조를 그림으로 확인

2. HTML, CSS, jQuery 코드를 한 줄씩 살펴보며 구현 방법 습득

3. TIP으로 어려운 개념을 단번에 이해

4. 한국형 웹 콘텐츠 지침 2.1을 바탕으로 한 웹 접근성 준수

5. 저자 '리베하얀의 한마디'로 실무 지식 터득

들어가며



1부. 웹퍼블리싱의 기본 갖추기

_1장. 코드 읽는 법

__1-1 HTML 코드

__1-2 CSS 코드

__1-3 CSS 초기화 파일

_2장. 환경 세팅

__2-1 웹폰트 적용

__2-2 디자인 툴

__2-3 코드 에디터 아톰(Atom)

__2-4 HTML5와 CSS3

__2-5 JavaScript와 jQuery

__2-6 웹 접근성과 화면 낭독기

__2-7 브라우저 호환성

_3장. 메뉴란?

__3-1 메뉴의 종류

__3-2 메뉴 코딩 전 준비 사항



2부. 코드로 배우는 실무 웹퍼블리싱

_4장. 메인 메뉴

__4-1 하위 메뉴가 없는 GNB

__4-2 하위 메뉴가 세로형인 GNB

__4-3 하위 메뉴가 가로형인 GNB

__4-4 하위 메뉴가 일체형인 GNB

_5장. 서브 메뉴

__5-1 하위 메뉴가 없는 사이드 배치형 SNB

__5-2 하위 메뉴가 아래로 펼쳐지는 사이드 배치형 SNB

__5-3 하위 메뉴가 옆으로 펼쳐지는 사이드 배치형 SNB

__5-4 브레드크럼형 SNB

__5-5 탭 메뉴형 SNB

_6장. 탭 메뉴

__6-1 테두리가 있는 탭 메뉴

__6-2 아래 테두리가 없는 탭 메뉴

__6-3 2 뎁스로 구성된 탭 메뉴

__6-4 두 줄 이상인 탭 메뉴

_7장. 모바일 메뉴

__7-1 상단 배치형 메뉴

__7-2 하단 고정형 메뉴

__7-3 햄버거형 메뉴

__7-4 슬라이드형 메뉴

_8장. 반응형 메뉴

__8-1 GNB의 디자인이 바뀌는 메뉴

__8-2 검색창의 디자인이 바뀌는 메뉴

__8-3 메가 메뉴의 디자인이 바뀌는 메뉴



이 책을 마무리하며

하성필 2000년 웹디자이너를 시작으로 현재 웹퍼블리싱 프리랜서 겸 강사로 활동 중이며, 2016년부터 웹퍼블리셔와 IT 기술을 주제로 한 '리베하얀' 유튜브 채널을 운영하고 있습니다. 우리은행, 삼성화재, IBK기업은행, 마이케이티 등 수많은 애플리케이션 제작 프로젝트에 참여하였습니다.

블로그 https://blog.naver.com/rebehayan

유튜브 https://www.youtube.com/rebehayan