반응형 웹 강좌를 시작하면서
이번에 '반응형 웹' 강좌를 맡게된 전진입니다. '강좌'라는 이름을 붙히기에는 많이 부족하겠지만, 제가 아는 범위 내에서 진행해보겠습니다. 대부분의 자료는 제 블로그의 반응형웹 관련 글과 그누보드 스터디 사이트와 연결된 위키의 내용을 발췌/정리해서 사용할 예정입니다.강좌 일정
- 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년 전
아 감사합니다
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 5830 | 13년 전 | 1187 | ||
| 5829 | 13년 전 | 5054 | ||
| 5828 | 13년 전 | 6436 | ||
| 5827 | 13년 전 | 1208 | ||
| 5826 |
 AKASIA |
13년 전 | 536 | |
| 5825 | 13년 전 | 900 | ||
| 5824 |
 카카오툴즈 |
13년 전 | 1884 | |
| 5823 | 13년 전 | 5621 | ||
| 5822 |
jfascas
|
13년 전 | 1051 | |
| 5821 | 13년 전 | 1700 | ||
| 5820 | 13년 전 | 1315 | ||
| 5819 |
itlang
|
13년 전 | 512 | |
| 5818 | 13년 전 | 1308 | ||
| 5817 | 13년 전 | 783 | ||
| 5816 | 13년 전 | 625 | ||
| 5815 | 13년 전 | 6136 | ||
| 5814 | 13년 전 | 862 | ||
| 5813 |
악마의유혹
|
13년 전 | 463 | |
| 5812 | 13년 전 | 2808 | ||
| 5811 | 13년 전 | 1179 | ||
| 5810 | 13년 전 | 3534 | ||
| 5809 | 13년 전 | 1357 | ||
| 5808 | 13년 전 | 1065 | ||
| 5807 | 13년 전 | 574 | ||
| 5806 | 13년 전 | 560 | ||
| 5805 |
angrysol
|
13년 전 | 820 | |
| 5804 | 13년 전 | 1011 | ||
| 5803 | 13년 전 | 1741 | ||
| 5802 |
angrysol
|
13년 전 | 1064 | |
| 5801 |
후라보노보노
|
13년 전 | 2152 | |
| 5800 | 13년 전 | 1111 | ||
| 5799 |
 울랄라커뮤니케이션스 |
13년 전 | 4196 | |
| 5798 |
울랄라커뮤니케이션스 |
13년 전 | 3364 | |
| 5797 |
울랄라커뮤니케이션스 |
13년 전 | 4940 | |
| 5796 | 13년 전 | 7546 | ||
| 5795 | 13년 전 | 2778 | ||
| 5794 | 13년 전 | 2230 | ||
| 5793 |
 gilynh |
13년 전 | 662 | |
| 5792 | 13년 전 | 2974 | ||
| 5791 | 13년 전 | 847 | ||
| 5790 | 13년 전 | 4331 | ||
| 5789 |
gilynh |
13년 전 | 2479 | |
| 5788 |
 grapedw |
13년 전 | 1854 | |
| 5787 |
오지랖선생
|
13년 전 | 1622 | |
| 5786 | 13년 전 | 5926 | ||
| 5785 | 13년 전 | 1762 | ||
| 5784 |
 simon1004 |
13년 전 | 1451 | |
| 5783 | 13년 전 | 1310 | ||
| 5782 |
울랄라커뮤니케이션스 |
13년 전 | 2822 | |
| 5781 | 13년 전 | 2855 | ||
| 5780 | 13년 전 | 1158 | ||
| 5779 |
 Maximus |
13년 전 | 1358 | |
| 5778 |
오리진소프트
|
13년 전 | 4608 | |
| 5777 | 13년 전 | 679 | ||
| 5776 | 13년 전 | 1161 | ||
| 5775 | 13년 전 | 1467 | ||
| 5774 | 13년 전 | 1887 | ||
| 5773 |
 hy미디어 |
13년 전 | 1920 | |
| 5772 | 13년 전 | 1686 | ||
| 5771 | 13년 전 | 4791 | ||
| 5770 | 13년 전 | 1129 | ||
| 5769 | 13년 전 | 6107 | ||
| 5768 |
Maximus |
13년 전 | 1579 | |
| 5767 | 13년 전 | 1687 | ||
| 5766 |
프로프리랜서
|
13년 전 | 1387 | |
| 5765 |
 하늘제사장 |
13년 전 | 1037 | |
| 5764 | 13년 전 | 1761 | ||
| 5763 |
gilynh |
13년 전 | 784 | |
| 5762 |
gilynh |
13년 전 | 2289 | |
| 5761 | 13년 전 | 619 | ||
| 5760 | 13년 전 | 623 | ||
| 5759 | 13년 전 | 3269 | ||
| 5758 | 13년 전 | 1084 | ||
| 5757 |
gilynh |
13년 전 | 741 | |
| 5756 | 13년 전 | 566 | ||
| 5755 | 13년 전 | 1062 | ||
| 5754 |
AKASIA |
13년 전 | 2227 | |
| 5753 | 13년 전 | 678 | ||
| 5752 | 13년 전 | 1545 | ||
| 5751 | 13년 전 | 770 | ||
| 5750 | 13년 전 | 753 | ||
| 5749 | 13년 전 | 2576 | ||
| 5748 | 13년 전 | 1009 | ||
| 5747 | 13년 전 | 1218 | ||
| 5746 |
hy미디어 |
13년 전 | 652 | |
| 5745 | 13년 전 | 1659 | ||
| 5744 | 13년 전 | 684 | ||
| 5743 | 13년 전 | 832 | ||
| 5742 |
프로프리랜서
|
13년 전 | 579 | |
| 5741 | 13년 전 | 642 | ||
| 5740 | 13년 전 | 630 | ||
| 5739 | 13년 전 | 731 | ||
| 5738 | 13년 전 | 1926 | ||
| 5737 | 13년 전 | 990 | ||
| 5736 | 13년 전 | 1094 | ||
| 5735 | 13년 전 | 1995 | ||
| 5734 | 13년 전 | 1145 | ||
| 5733 | 13년 전 | 2786 | ||
| 5732 |
JOYCOM
|
13년 전 | 646 | |
| 5731 | 13년 전 | 3309 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기