반응형 웹 강좌를 시작하며
반응형 웹 강좌를 시작하면서
이번에 '반응형 웹' 강좌를 맡게된 전진입니다. '강좌'라는 이름을 붙히기에는 많이 부족하겠지만, 제가 아는 범위 내에서 진행해보겠습니다. 대부분의 자료는 제 블로그의 반응형웹 관련 글과 그누보드 스터디 사이트와 연결된 위키의 내용을 발췌/정리해서 사용할 예정입니다.강좌 일정
- 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. 반응형 테이블
- 가로폭이 넓은 테이블을 모바일 화면에서 어떻게 처리하는 지 알아봅니다.
- 위 일정은 수시로 변경될 수 있습니다.
댓글 33개
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년 전
아 감사합니다
9년 전
오늘 부터 차근차근 강의 들어보겟습니다. 감사합니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 1326 |
AngularJS
AngularJS Filters에 uppercase (대문자변환)
|
| 1325 |
AngularJS
AngularJS Scope 3
|
| 1324 |
AngularJS
AngularJS Scope 2
|
| 1323 |
AngularJS
AngularJS Scope 1
|
| 1322 | |
| 1321 | |
| 1320 |
AngularJS
AngularJS Controllers
|
| 1319 |
AngularJS
AngularJS Data Binding 2번째
|
| 1318 | |
| 1317 |
AngularJS
AngularJS ng-model Directive
|
| 1316 | |
| 1315 |
AngularJS
AngularJS Directives(지시문) - 데이터 바인딩
|
| 1314 |
AngularJS
AngularJS Directives(지시문)
|
| 1313 |
AngularJS
AngularJS 모듈 만들기
|
| 1312 |
AngularJS
앵큘러js 간단한 예제
|
| 1311 | |
| 1310 |
AngularJS
AngularJS Input Controls - Data-Binding
|
| 1309 |
AngularJS
AngularJS $event Object
|
| 1308 |
AngularJS
AngularJS Toggle, True/False
|
| 1307 |
AngularJS
AngularJS ng-click 지시문
|
| 1306 |
AngularJS
AngularJS 마우스 이벤트
|
| 1305 |
AngularJS
AngularJS 이벤트
|
| 1304 |
jQuery Mobile
scrollstart 이벤트
|
| 1303 |
jQuery Mobile
pageshow 이벤트
|
| 1302 |
jQuery Mobile
pageremove 이벤트
|
| 1301 |
jQuery Mobile
pageloadfailed 이벤트
|
| 1300 |
jQuery Mobile
pageload 이벤트
|
| 1299 |
jQuery Mobile
pageinit 이벤트
|
| 1298 |
jQuery Mobile
pagehide 이벤트
|
| 1297 |
jQuery Mobile
pagecreate
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기