반응형 웹 강좌를 시작하면서
이번에 '반응형 웹' 강좌를 맡게된 전진입니다. '강좌'라는 이름을 붙히기에는 많이 부족하겠지만, 제가 아는 범위 내에서 진행해보겠습니다. 대부분의 자료는 제 블로그의 반응형웹 관련 글과 그누보드 스터디 사이트와 연결된 위키의 내용을 발췌/정리해서 사용할 예정입니다.강좌 일정
- 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)입니다.
깨알 홍보. ^^
깨알 홍보. ^^
13년 전
오늘부터 전진님 강좌에 반응하기 시작했네요. 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년 전
아 감사합니다
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 5430 | 13년 전 | 1466 | ||
| 5429 |
phpman
|
13년 전 | 878 | |
| 5428 | 13년 전 | 1267 | ||
| 5427 |
phpman
|
13년 전 | 862 | |
| 5426 |
PHPㅡASP프로그래머
|
13년 전 | 1099 | |
| 5425 | 13년 전 | 807 | ||
| 5424 | 13년 전 | 747 | ||
| 5423 | 13년 전 | 749 | ||
| 5422 | 13년 전 | 1846 | ||
| 5421 |
PHPㅡASP프로그래머
|
13년 전 | 815 | |
| 5420 |
 Jeco7 |
13년 전 | 1643 | |
| 5419 | 13년 전 | 838 | ||
| 5418 | 13년 전 | 720 | ||
| 5417 | 13년 전 | 644 | ||
| 5416 | 13년 전 | 1004 | ||
| 5415 | 13년 전 | 796 | ||
| 5414 | 13년 전 | 742 | ||
| 5413 | 13년 전 | 821 | ||
| 5412 | 13년 전 | 1389 | ||
| 5411 | 13년 전 | 901 | ||
| 5410 | 13년 전 | 1298 | ||
| 5409 | 13년 전 | 4288 | ||
| 5408 | 13년 전 | 1008 | ||
| 5407 |
ckflower
|
13년 전 | 2456 | |
| 5406 |
ddokkani
|
13년 전 | 1408 | |
| 5405 | 13년 전 | 1613 | ||
| 5404 | 13년 전 | 693 | ||
| 5403 | 13년 전 | 723 | ||
| 5402 |
밤거리빵빵
|
13년 전 | 6036 | |
| 5401 |
PHPㅡASP프로그래머
|
13년 전 | 998 | |
| 5400 |
 cshop |
13년 전 | 1227 | |
| 5399 | 13년 전 | 5024 | ||
| 5398 |
부산아무개
|
13년 전 | 1675 | |
| 5397 | 13년 전 | 2472 | ||
| 5396 | 13년 전 | 1863 | ||
| 5395 | 13년 전 | 1070 | ||
| 5394 | 13년 전 | 1157 | ||
| 5393 | 13년 전 | 1061 | ||
| 5392 |
아르toria
|
13년 전 | 784 | |
| 5391 |
 아지야학교가자 |
13년 전 | 1163 | |
| 5390 |
디지털홍익인간
|
13년 전 | 7734 | |
| 5389 | 13년 전 | 3130 | ||
| 5388 | 13년 전 | 888 | ||
| 5387 |
WaaNee
|
13년 전 | 1928 | |
| 5386 | 13년 전 | 2125 | ||
| 5385 | 13년 전 | 4641 | ||
| 5384 | 13년 전 | 960 | ||
| 5383 | 13년 전 | 2150 | ||
| 5382 | 13년 전 | 684 | ||
| 5381 |
JacobJeon
|
13년 전 | 1099 | |
| 5380 | 13년 전 | 1154 | ||
| 5379 | 13년 전 | 695 | ||
| 5378 | 13년 전 | 10488 | ||
| 5377 | 13년 전 | 889 | ||
| 5376 | 13년 전 | 1476 | ||
| 5375 | 13년 전 | 855 | ||
| 5374 | 13년 전 | 860 | ||
| 5373 | 13년 전 | 2074 | ||
| 5372 | 13년 전 | 1706 | ||
| 5371 |
cshop |
13년 전 | 1657 | |
| 5370 | 13년 전 | 2921 | ||
| 5369 |
아자12345
|
13년 전 | 1031 | |
| 5368 | 13년 전 | 724 | ||
| 5367 | 13년 전 | 1102 | ||
| 5366 | 13년 전 | 2163 | ||
| 5365 | 13년 전 | 1577 | ||
| 5364 | 13년 전 | 1109 | ||
| 5363 |
cshop |
13년 전 | 1384 | |
| 5362 | 13년 전 | 846 | ||
| 5361 | 13년 전 | 1415 | ||
| 5360 | 13년 전 | 781 | ||
| 5359 | 13년 전 | 1417 | ||
| 5358 | 13년 전 | 1251 | ||
| 5357 | 13년 전 | 1649 | ||
| 5356 | 13년 전 | 1138 | ||
| 5355 |
techer
|
13년 전 | 1386 | |
| 5354 |
 몽키D팡야 |
13년 전 | 1041 | |
| 5353 | 13년 전 | 765 | ||
| 5352 | 13년 전 | 854 | ||
| 5351 | 13년 전 | 1226 | ||
| 5350 | 13년 전 | 762 | ||
| 5349 |
cshop |
13년 전 | 1457 | |
| 5348 | 13년 전 | 857 | ||
| 5347 | 13년 전 | 761 | ||
| 5346 | 13년 전 | 885 | ||
| 5345 | 13년 전 | 823 | ||
| 5344 |
후라보노보노
|
13년 전 | 1963 | |
| 5343 | 13년 전 | 1166 | ||
| 5342 | 13년 전 | 1138 | ||
| 5341 | 13년 전 | 2079 | ||
| 5340 |
 미운오리스키 |
13년 전 | 1123 | |
| 5339 |
AMDbest
|
13년 전 | 745 | |
| 5338 | 13년 전 | 743 | ||
| 5337 |
프로프리랜서
|
13년 전 | 1491 | |
| 5336 |
프로프리랜서
|
13년 전 | 941 | |
| 5335 | 13년 전 | 736 | ||
| 5334 |
cshop |
13년 전 | 987 | |
| 5333 | 13년 전 | 2852 | ||
| 5332 | 13년 전 | 1536 | ||
| 5331 | 13년 전 | 1336 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기