전진님의 반응형 웹 강좌 - 아임웹 전문가찾기

웹팁

글 등록하기 | 내글 관리하기 | 연재글 | 보관함

전진님의 반응형 웹 강좌

2013.08.18 11:49 조회 수

5346

이온디

첨부파일 https://imweb.eond.com/coding/342977

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

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

강좌 일정

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. 반응형 테이블: 가로폭이 넓은 테이블을 모바일 화면에서 어떻게 처리하는 지 알아봅니다.

위 일정은 수시로 변경될 수 있습니다.

Total 235 articles in 10 / 12 pages

	제목	날짜
	코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP)	2018/01/03
	jQuery를 배울수 있는 동네들입니다.	2013/08/09
	관련 링크 [1]	2010/05/23
55	[HTML5] 이미지 롤오버 [2]	2007/04/17
54	[Script] Iframe 크기 내용에 따라 자동조절하기 (by konahn) [1]	2007/04/17
53	[Script] 한 번의 클릭으로 두 개의 아이프레임 제어하기	2007/04/16
52	[HTML5] 홈페이지 특정 부분을 아이프레임으로 보기 (by elca)	2007/04/16
51	[HTML5] object - iframe처럼 페이지 삽입 소스	2007/04/16
50	[Script] iframe 자동 리사이즈 [6]	2007/04/16
49	[DIV] div tag를 iframe 처럼 사용하기	2007/03/27
48	[DIV] div에서 table의 table-layout:fixed;dhk 같은 효과를 사용하기 [1]	2007/03/27
47	[HTML5] 컬러코드 모음	2006/10/15
46	[HTML5] 자바스크립트와 CSS를 넣는 방법	2005/04/28
45	[Script] 클릭하면 닫히는 창	2005/04/28
44	[Script] 마우스 올렸을 때 바뀌는 커서 (by kiwha)	2004/12/14
43	[Script] ~한지 **일 되었습니다 (by kihwa)	2004/12/14
42	[Script] 클릭하면 경고창 뜨는 스크립트 [1]	2004/12/14
41	[CGI] Space Checker - 계정 하드용량과 DB용량 동시확인	2003/06/06
40	[HTML5] 프레임 나누기 (좌/우, 상/하)	2004/05/28
39	[PHP] <?echo($list_height)?> 의 쓰기 쉬운 변형 (by Hyunee)	2004/05/26
38	[HTML5] HEAD에 CSS, JS(자바스크립트), META 넣기	2004/05/24
37	[Form] 새창에서 '확인' 누르면 부모창 리로드 시키기 (by 지진)	2004/05/22
36	[HTML5] HTML 태그 그대로 노출하기	2004/05/22