반응형 웹 강좌를 시작하며
반응형 웹 강좌를 시작하면서
이번에 '반응형 웹' 강좌를 맡게된 전진입니다. '강좌'라는 이름을 붙히기에는 많이 부족하겠지만, 제가 아는 범위 내에서 진행해보겠습니다. 대부분의 자료는 제 블로그의 반응형웹 관련 글과 그누보드 스터디 사이트와 연결된 위키의 내용을 발췌/정리해서 사용할 예정입니다.강좌 일정
- 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. 반응형 테이블
- 가로폭이 넓은 테이블을 모바일 화면에서 어떻게 처리하는 지 알아봅니다.
- 위 일정은 수시로 변경될 수 있습니다.
댓글 32개
13년 전
드디어 시작하시는군요. 정말 기대됩니다.
아 그리고 h4 는 h3 부터 쓰셔도 될 것 같습니다. ^^
아 그리고 h4 는 h3 부터 쓰셔도 될 것 같습니다. ^^
13년 전
다 아시는 내용 반복할 것 같은데요? ^^;
h3는 큰 제목이죠? 실제 강좌에서는 내용을 구분할때 사용할 것 같습니다. ^^
h3는 큰 제목이죠? 실제 강좌에서는 내용을 구분할때 사용할 것 같습니다. ^^
Welch
13년 전
기대해봅니다~^^;
13년 전
기대가 됩니다용~
13년 전
좋은 강좌 기대합니다.
궁금한점이 있습니다.
반응형 웹이라고 하는데,
하나의 페이지를 PC, 모바일, 화면 사이즈에 맞추어서 CSS 로 화면을 재구성(?) 한다는건 알고 있는데요.
이렇게 했을 때의 장점은 도대체 무엇인가요?
한 페이지에 모바일,PC 두가지의 CSS 가 들어가고,
거기에 맞추어 HTML 도 더 들어갈거 같은데...
그러면 트래픽도 더 먹고 불러들여야 하는 HTML 양도 더 많아지는데요.
궁금한점이 있습니다.
반응형 웹이라고 하는데,
하나의 페이지를 PC, 모바일, 화면 사이즈에 맞추어서 CSS 로 화면을 재구성(?) 한다는건 알고 있는데요.
이렇게 했을 때의 장점은 도대체 무엇인가요?
한 페이지에 모바일,PC 두가지의 CSS 가 들어가고,
거기에 맞추어 HTML 도 더 들어갈거 같은데...
그러면 트래픽도 더 먹고 불러들여야 하는 HTML 양도 더 많아지는데요.
13년 전
핵심적인 질문이네요. ^^
강좌를 진행하면서 더 알아보겠지만 우선 간단히 말씀드리자면,
알찬돌삐님 말씀이 맞습니다. ^^;
특히, 더 많은 트래픽을 (특히 모바일에서) 어떻게 최소화하느냐가 반응형 웹의 해결해야 할 부분 중 하나일것입니다.
그럼에도 불구하고 장점이 되는 점을 언급하자면,
- 모바일사이트를 별도의 주소/코드로 만들지 않기에, 하나의 코드만 관리하면 되며
- PC, 스마트폰 등 (어느정도) 정해진 스크린 뿐만 아니라, 10인치 테블릿, 7인치 테블릿 등 계속 쏟아져 나오는 여러 형태/크기의 스크린에 적절히 대응할 수 있기 때문입니다.
앞으로도 좋은 의견/토론 계속 부탁드립니다.
강좌를 진행하면서 더 알아보겠지만 우선 간단히 말씀드리자면,
알찬돌삐님 말씀이 맞습니다. ^^;
특히, 더 많은 트래픽을 (특히 모바일에서) 어떻게 최소화하느냐가 반응형 웹의 해결해야 할 부분 중 하나일것입니다.
그럼에도 불구하고 장점이 되는 점을 언급하자면,
- 모바일사이트를 별도의 주소/코드로 만들지 않기에, 하나의 코드만 관리하면 되며
- PC, 스마트폰 등 (어느정도) 정해진 스크린 뿐만 아니라, 10인치 테블릿, 7인치 테블릿 등 계속 쏟아져 나오는 여러 형태/크기의 스크린에 적절히 대응할 수 있기 때문입니다.
앞으로도 좋은 의견/토론 계속 부탁드립니다.
13년 전
아......
테블릿을 감안하지 못했네요.
그렇다면 테블릿용 페이지도 -_-; 쿨럭;
테블릿을 감안하지 못했네요.
그렇다면 테블릿용 페이지도 -_-; 쿨럭;
13년 전
우왕!! 기대합니다~^^
13년 전
헉... 대박이군요. 금새 시작하시네요 ㅎㅎ 굿굿~~~
미운오리스키
13년 전
전진님 수고하시네요 ^^
멋진 강좌 기대해 봅니당~~
멋진 강좌 기대해 봅니당~~
13년 전
알차게 들어있네요~ 기대기대 할께요~
초보시나위
13년 전
전진님의 반응형 첫 적용사례가 아이토론(www.itoron.com)입니다.
깨알 홍보. ^^
깨알 홍보. ^^
12년 전
오늘부터 전진님 강좌에 반응하기 시작했네요. 1주일에 1강씩....
ohora
12년 전
기대하면서 보겠습니다.
좋은 강의 부탁드려요.
좋은 강의 부탁드려요.
12년 전
궁금했었는데,, 감사합니다.
프로프리랜서
12년 전
잘부탁드려요^^*
12년 전
위 모든 분들께 감사를 드립니다. ^_^
12년 전
멋지시네요....많은 도움이 될것 같아요...감사합니다.
12년 전
처음 시작하는 저로써 많은 도움이 될것 같습니다 ^^
12년 전
강의 감사드려요!
희야스카이
12년 전
좋은강좌 감사드립니다.
takumi22
12년 전
기대되네요 ~~
asdfg
12년 전
감사합니다
12년 전
위 모든 분들께 감사를 드립니다. ^_^
12년 전
강좌 잘 보겠습니다.
12년 전
한국형 반응형 웹은... 폰트 땜에 넘 힘들어요..
12년 전
아.. 정말 저랑 또~옥 같은 생각을...
외국 반응형 웹 사이트의 타이포그래피 보고 있으면.. 눈물이...
외국 반응형 웹 사이트의 타이포그래피 보고 있으면.. 눈물이...
joseehn
12년 전
잘 부탁드려요
JSweb
12년 전
반응형웹에 관심 갖고 이제막 검색을 통해 좋은 자료를 찾았네요...^^
강좌 잘 보겠습니다.
강좌 잘 보겠습니다.
12년 전
강좌 잘 보겠습니다^^
애프터글로리
10년 전
강좌 감사합니다. 열심히 공부할께요. ^^
멋진남자임
10년 전
아 감사합니다
게시글 목록
| 번호 | 제목 |
|---|---|
| 26447 |
기획서
사이트맵
11
|
| 26436 |
기획서
사이트제작순서 (참고)
10
|
| 5279 | |
| 5276 | |
| 30674 | |
| 18417 |
JavaScript
계층형 카테고리를 여러개 선택할수 있게 하는방법이 없을까요??
|
| 18414 |
jQuery
슬라이드 업 전체메뉴에 대해 질문드립니다.
2
|
| 5261 | |
| 27054 | |
| 5259 | |
| 5239 | |
| 18413 | |
| 31486 |
반응형웹
7. 서버측 반응형 웹 접근방법
17
|
| 18410 | |
| 18400 |
MySQL
mysql like 검색방법
9
|
| 30670 |
웹접근성
웹접근성이란?
3
|
| 5231 | |
| 18395 |
JavaScript
자바스크립트를 이용해서 모바일에 selet 박스 구현한것입니다
4
|
| 18387 |
jQuery
jquery로 펼침 메뉴 입니다.
7
|
| 18381 | |
| 30661 |
웹접근성
웹표준형 화면 확대/축소
8
|
| 5222 | |
| 18380 | |
| 27043 | |
| 18366 |
Mobile
끊기지 않는 세션을 만들려면 어떻게?
13
|
| 24478 | |
| 18359 | |
| 30660 | |
| 18355 |
MySQL
csv 편집 방법?
3
|
| 18351 | |
| 18343 | |
| 18333 | |
| 31439 |
반응형웹
6. 반응형 이미지
46
|
| 18329 |
JavaScript
자바스크립트 해킹 공격에 대한 방어
3
|
| 18323 | |
| 27040 | |
| 30655 | |
| 5211 | |
| 31427 |
반응형웹
잠깐글2. 반응형 테이블
11
|
| 5205 | |
| 5193 | |
| 5184 | |
| 18317 |
jQuery
jQuery Quick Api Reference
5
|
| 27032 | |
| 18313 | |
| 30647 |
CSS
그라디언트 에디터
7
|
| 31408 | |
| 30644 | |
| 18306 | |
| 18303 | |
| 18288 | |
| 27028 | |
| 18285 | |
| 31383 |
반응형웹
5. 반응형 네비게이션/메뉴
24
|
| 27024 | |
| 5174 | |
| 18276 |
Mobile
디바이스별 viewport 설정. (수정본)
8
|
| 27017 | |
| 27130 | |
| 18274 | |
| 26427 | |
| 5170 | |
| 5160 | |
| 5157 | |
| 31371 | |
| 27010 | |
| 18267 | |
| 27003 | |
| 30636 | |
| 18265 | |
| 31350 |
반응형웹
4. 반응형 레이아웃
20
|
| 18262 | |
| 26998 | |
| 18260 |
jQuery
[펌] jQuery select box
1
|
| 26992 | |
| 26988 | |
| 18259 |
기타
구글 확장프로그램 추천
|
| 31328 |
반응형웹
3. 반응형 그리드
21
|
| 26986 | |
| 18257 |
정규표현식
캡쳐 그룹과 비캡쳐 그룹
1
|
| 26983 | |
| 5154 | |
| 26975 | |
| 24474 | |
| 31309 | |
| 26966 | |
| 31251 | |
| 18253 |
웹서버
php 업로드 용량 늘리기
3
|
| 31218 | |
| 31201 | |
| 26957 | |
| 26954 | |
| 5147 | |
| 5139 | |
| 18248 | |
| 5132 | |
| 26947 | |
| 31189 | |
| 30631 | |
| 26939 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기