반응형 웹 강좌를 시작하며
반응형 웹 강좌를 시작하면서
이번에 '반응형 웹' 강좌를 맡게된 전진입니다. '강좌'라는 이름을 붙히기에는 많이 부족하겠지만, 제가 아는 범위 내에서 진행해보겠습니다. 대부분의 자료는 제 블로그의 반응형웹 관련 글과 그누보드 스터디 사이트와 연결된 위키의 내용을 발췌/정리해서 사용할 예정입니다.강좌 일정
- 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. 반응형 테이블
- 가로폭이 넓은 테이블을 모바일 화면에서 어떻게 처리하는 지 알아봅니다.
- 위 일정은 수시로 변경될 수 있습니다.
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌
댓글 32개
아 그리고 h4 는 h3 부터 쓰셔도 될 것 같습니다. ^^
h3는 큰 제목이죠? 실제 강좌에서는 내용을 구분할때 사용할 것 같습니다. ^^
궁금한점이 있습니다.
반응형 웹이라고 하는데,
하나의 페이지를 PC, 모바일, 화면 사이즈에 맞추어서 CSS 로 화면을 재구성(?) 한다는건 알고 있는데요.
이렇게 했을 때의 장점은 도대체 무엇인가요?
한 페이지에 모바일,PC 두가지의 CSS 가 들어가고,
거기에 맞추어 HTML 도 더 들어갈거 같은데...
그러면 트래픽도 더 먹고 불러들여야 하는 HTML 양도 더 많아지는데요.
강좌를 진행하면서 더 알아보겠지만 우선 간단히 말씀드리자면,
알찬돌삐님 말씀이 맞습니다. ^^;
특히, 더 많은 트래픽을 (특히 모바일에서) 어떻게 최소화하느냐가 반응형 웹의 해결해야 할 부분 중 하나일것입니다.
그럼에도 불구하고 장점이 되는 점을 언급하자면,
- 모바일사이트를 별도의 주소/코드로 만들지 않기에, 하나의 코드만 관리하면 되며
- PC, 스마트폰 등 (어느정도) 정해진 스크린 뿐만 아니라, 10인치 테블릿, 7인치 테블릿 등 계속 쏟아져 나오는 여러 형태/크기의 스크린에 적절히 대응할 수 있기 때문입니다.
앞으로도 좋은 의견/토론 계속 부탁드립니다.
테블릿을 감안하지 못했네요.
그렇다면 테블릿용 페이지도 -_-; 쿨럭;
멋진 강좌 기대해 봅니당~~
깨알 홍보. ^^
좋은 강의 부탁드려요.
외국 반응형 웹 사이트의 타이포그래피 보고 있으면.. 눈물이...
강좌 잘 보겠습니다.