Do it! 반응형 웹 만들기!
1. 반응형 웹 기본 개념 이해하기
- 반응형 웹이란?
- 왜 반응형 웹으로 만들어야 하나?
- 사례로 알아보는 반응형 웹
- 반응형 웹 학습과 제작을 위한 준비 작업
- 반응형 웹 제작을 위한 핵심 기술 맛보기
2. px을 %로 바꾸기 - 가변 그리드
- 본격적으로 가변 그리드 배우기
- 가변 마진과 가변 패딩 이해하기
- 폰트도 자유자재로! 가변 폰트 이용하기
- 멀티미디어 요소 가변적으로 만들기 - 가변 이미지와 가변 동영상
3. 미디어 쿼리와 뷰포트
- 화면의 크기나 환경에 따라 웹 사이트를 변경하는 기술, 미디어 쿼리
- 화면의 보이는 영역을 다루는 기술, 뷰포트
4. 새로운 웹 기술, 플렉서블 박스
- 플렉서블 박스 기본 개념 이해하기
- 플렉서블 박스 기술 익히기
5. 반응형 웹 사이트 준비 작업하기
- 웹 사이트 구조 다지기
6. 메인 페이지 작업하기
- 메인 페이지 구조 작업하기
- 메인 페이지 반응형 웹 작업하기
7. 서브 페이지 작업하기
- 서브 페이지 구조 작업하기
- 서브 페이지 반응형 웹 작업하기
8. 마무리 작업하기
- CSS 파일로 분리하기
- 자바스크립트 이용해 메뉴 영역 작업하기
9. 반응형 웹사이트 준비 작업하기
1단계 : 웹사이트 구조 살펴보기
2단계 : 폴더와 기본 파일 구성하기
3단계 : 기본 구조와 기본 스타일 작업하기
10. 반응형 웹 페이지 작업하기
- 헤더 / 슬라이더 / 디스플레이 영역 구조 작업하기
- 프로모션 / 구분선 / 최근 작업 영역의 구조 작업하기
- 최근 글 / 연락처 영역 / 푸터 영역의 구조 작업하기
11. 마무리 작업하기
- CSS 파일로 분리하기
- 스타일 코드를 CSS 파일로 분리하기
- 자바스크립트 이용해 메뉴 영역 작업하기
- 메뉴가 나타나거나 감춰지는 토글 버튼 만들기