메뉴 보이기
Profile
이온디

2013.08.18

반응형 웹

전진님의 반응형 웹 강좌

조회 수 5174 추천 수 0

반응형 웹 강좌를 시작하면서

이번에 '반응형 웹' 강좌를 맡게된 전진입니다. '강좌'라는 이름을 붙히기에는 많이 부족하겠지만, 제가 아는 범위 내에서 진행해보겠습니다. 대부분의 자료는 제 블로그의 반응형웹 관련 글과 그누보드 스터디 사이트와 연결된 위키의 내용을 발췌/정리해서 사용할 예정입니다.

강좌 일정

1. 반응형 웹 디자인/모바일 퍼스트의 이해
반응형 웹 디자인이 무엇이며 어떤 핵심기술들이 존재하며, 접근 전략중의 하나인 모바일 퍼스트를 어떻게 구현하는지 간단히 이해합니다.
2. CSS3 미디어쿼리와 스크린 경계
화면의 크기에 따라서 별도의 스타일을 지정할 수 있는 CSS3 미디어쿼리의 사용법과 스크린 크기를 대표하는 경계치 들에 대해서 알아봅니다.
3. 반응형 그리드
유동형 그리드 등 반응형으로 레이아웃을 만드는 그리드 기법과, 템플릿 등으로 제공되는 (반응형) 그리드 시스템의 종류와 활용법을 알아봅니다.
4. 반응형 레이아웃
데스크탑-테블릿-스마트폰 등 대표적인 기기에서 레이아웃을 바꿔나가는 패턴과 관련 기법 등을 알아봅니다.
5. 반응형 네비게이션/메뉴
모바일 화면에서 네비게이션/메뉴를 어떻게 처리하는지 알아봅니다.
6. 반응형 이미지
반응형 웹에서 이미지와 미디어를 처리하는 방법을 알아봅니다.
7. 서버측 접근방법 (RESS)
일종의 하이브리드 접근방법으로, user-agent 등을 기반으로 사용하는 기기/스크린의 정보를 파악하여 그에 해당하는 콘텐츠를 보내주는 방법 (RESS)를 알아봅니다.
8. 반응형 그누보드 (DTD) (1) - 게시판 스킨
그누보드에서 가장 많이 사용되는 board 스킨을 반응형으로 만들어 봅니다.
9. 반응형 그누보드 (DTD) (2) - 레이아웃
head.php, tail.php 등 그누보드의 레이아웃을 담당하는 코드를 반응형으로 만들어 봅니다.
10. 반응형 그누보드 (DTD) (3) - 기타 스킨들
아웃로그인, 최신글 등 기타 스킨들의 반응형 화
11. 반응형 웹 기술이 적용된 기존 프레임워크
부트스트랩과 foundation 의 내부를 들여다 봅니다.
12. 콘텐츠 퍼스트와 future-friendly
새로운 경향인 콘텐츠 퍼스트 (content first)와 새로운 웹 디자인의 방향을 모색하고 노력하는 future-friendly 에 대해서 알아봅니다.
잠깐글1. 반응형 웹은 ???이다.
반응형 웹에 대한 단상과 많이 하는 질문에 대한 개인적 의견입니다.
잠깐글2. 반응형 테이블
가로폭이 넓은 테이블을 모바일 화면에서 어떻게 처리하는 지 알아봅니다.
  • 위 일정은 수시로 변경될 수 있습니다.
Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

에디터
번호 제목 날짜 조회 수
공지 [웹표준] 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018.01.03 109
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19181
공지 [미분류] 관련 링크 2010.05.23 33798
159 [HTML5] HTML5 New Elements - New Semantic/Structural Elements 2018.01.07 35
158 [웹폰트] 모빌리어스 웹폰트 사용하기 2015.11.19 188
157 [Form] form 태그의 기본적인 사용방법 2015.08.31 86
156 [Script] jQuery Cookie(쿠키) 처리 [출처] jQuery Cookie(쿠키) 처리|작성자 주용준 2015.08.27 210
155 임시 이미지 생성 도구, 플레이스 홀더 placehold.it 2015.08.05 171
154 [Form] form 태그 안에서의 button 태그의 사용 방법(button, a, input type=submit) 2015.06.21 245
153 [jQuery] jQuery Image Slider and Gallery 2015.05.27 404
152 [Script] Top으로 스크롤 되면서 돌아가기... (by sisims) 2014.09.29 1367
151 [Script] 슬라이드 이미지 2014.06.16 3247
150 [Script] 간단한 javascript 페이징 처리 - 미니페이지 2014.06.16 3233
149 [Script] marquee 태그 위에 마우스 올렸을 때 자동스크롤 일시정지.. event 2014.02.11 3852
148 [Form] 셀렉트박스 select 화살표 이미지로 바꾸는 스크립트 2014.01.14 8602
147 [HTML5] ie에서만 사용하는 if IE 사용법나의일 2013.11.07 4050
146 [Script] 단축키 핫키로 원하는 동작을 실행하자 1 2013.09.22 4429
145 [Script] 주민등록번호 검사 스크립트 2013.09.17 0
144 [Table] 웹 접근성을 고려한 기본 테이블 구조 (html5, table, 웹 접근성, 웹 표준) 2013.09.13 7979
143 [Script] 쿠키 레이어 열기 닫기 PHP, Only Cookie - Hide/Show 2013.09.08 4377
142 [HTML5] [HTML5/CSS3] 멀티미디어 태그 (video, audio, embed, canvas) 2013.09.06 4250
[반응형 웹] 전진님의 반응형 웹 강좌 2013.08.18 5174