다크모드
로그인
회원가입
EOND
이온디 소개
프로젝트 찾기
이온디 프로젝트
이온디 포트폴리오
팀 프로젝트
프리랜서 찾기
프리랜서
소통방
소모임
구인&구직
홍보
스토어
라이믹스•XE
워드프레스
그누보드
아임웹
홈페이지 제작
컨텐츠 관리 시스템(CMS)
웹팁
소프트웨어팁
호스팅
서버관리팁
호스팅 신청
자유게시판
질문•답변
FAQ
컨텐츠 관리 시스템(CMS)
웹팁
소프트웨어팁
홈페이지 제작
컨텐츠 관리 시스템(CMS)
CMS 이야기
라이믹스(XE)
워드프레스
그누보드
카페24
고도몰
제로보드4
웹CGI
웹팁
개발팁
퍼블팁
디자인팁
기획팁
소프트웨어팁
PHP스톰
VSCode
웹스톰
jwFreeNote
IE Toy
SublimeText
Editplus
Intellij
HTML5/CSS3
글쓰기
-
가
+
[반응형 웹]
전진님의 반응형 웹 강좌
이온디
2013.08.18 11:49
0
https://eond.com/342977
주소복사
반응형 웹 강좌를 시작하면서
이번에 '반응형 웹' 강좌를 맡게된 전진입니다. '강좌'라는 이름을 붙히기에는 많이 부족하겠지만, 제가 아는 범위 내에서 진행해보겠습니다. 대부분의 자료는
제 블로그
의
반응형웹 관련 글
과
그누보드 스터디 사이트
와 연결된
위키
의 내용을 발췌/정리해서 사용할 예정입니다.
강좌 일정
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. 반응형 테이블
가로폭이 넓은 테이블을 모바일 화면에서 어떻게 처리하는 지 알아봅니다.
위 일정은 수시로 변경될 수 있습니다.
0
0
0
0
라이믹스는 이온디와 함께
댓글
0
댓글작성칸으로
HTML5/CSS3
전체
웹표준
웹접근성
부트스트랩
반응형 웹
UI
HTML5
jQuery
Script
CSS
Meta
Table
Form
미분류
PHP
Flash
CGI
DIV
웹폰트
크로스브라우징
위지윅에디터
svg
프레임워크
map
swiperjs
-
가
+
번호
제목
등록일
공지
코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP)
웹표준
웹표준
웹표준
웹표준
01/03
공지
jQuery를 배울수 있는 동네들입니다.
jQuery
jQuery
jQuery
jQuery
08/09
공지
관련 링크
1
미분류
미분류
미분류
미분류
05/23
55
[Script]
iframe 자동 리사이즈
6
Script
Script
Script
Script
04/16
54
[DIV]
div tag를 iframe 처럼 사용하기
DIV
DIV
DIV
DIV
03/27
53
[DIV]
div에서 table의 table-layout:fixed;dhk 같은 효과를 사용하기
DIV
DIV
DIV
DIV
03/27
52
[HTML5]
컬러코드 모음
HTML5
HTML5
HTML5
HTML5
10/15
51
[HTML5]
자바스크립트와 CSS를 넣는 방법
HTML5
HTML5
HTML5
HTML5
04/28
50
[Script]
클릭하면 닫히는 창
Script
Script
Script
Script
04/28
49
[Script]
마우스 올렸을 때 바뀌는 커서 (by kiwha)
Script
Script
Script
Script
12/14
48
[Script]
~한지 **일 되었습니다 (by kihwa)
Script
Script
Script
Script
12/14
47
[Script]
클릭하면 경고창 뜨는 스크립트
Script
Script
Script
Script
12/14
46
[Script]
마우스를 올리면 레이어 뜨고 내리면 레이어 사라지는 스크립트
Script
Script
Script
Script
06/08
45
[Script]
게시판 등 에서 웹페이지에서 특정 부분 감췄다보여주기 - 레이어 토글
1
Script
Script
Script
Script
06/04
44
[Script]
웹페이지에서 특정 부분 감췄다보여주기 (by 위쯔)
Script
Script
Script
Script
05/30
43
[HTML5]
프레임 나누기 (좌/우, 상/하)
HTML5
HTML5
HTML5
HTML5
05/28
42
[PHP]
<?echo($list_height)?> 의 쓰기 쉬운 변형 (by Hyunee)
PHP
PHP
PHP
PHP
05/26
41
[HTML5]
HEAD에 CSS, JS(자바스크립트), META 넣기
HTML5
HTML5
HTML5
HTML5
05/24
40
[Form]
새창에서 '확인' 누르면 부모창 리로드 시키기 (by 지진)
Form
Form
Form
Form
05/22
39
[HTML5]
HTML 태그 그대로 노출하기
HTML5
HTML5
HTML5
HTML5
05/22
38
[미분류]
현재 필요한 팁(임시)
미분류
미분류
미분류
미분류
05/22
37
[Form]
폼 이동 시(탭키 이용) 순서 정하기 (by 술도)
Form
Form
Form
Form
05/21
36
[Form]
인풋 폼 이미지로 대체하기
1
Form
Form
Form
Form
05/21
로그인 해주세요.
자유게시판
글쓰기
저장함
쪽지
전체글보기
인기글
인기멤버
태그
즐겨찾는 게시판
메뉴명
메뉴명
메뉴명
전체 게시판
이온디 소개
프로젝트 찾기
이온디 프로젝트
이온디 포트폴리오
팀 프로젝트
프리랜서 찾기
프리랜서
소통방
소모임
구인&구직
홍보
스토어
라이믹스•XE
워드프레스
그누보드
아임웹
홈페이지 제작
컨텐츠 관리 시스템(CMS)
웹팁
소프트웨어팁
호스팅
서버관리팁
호스팅 신청
자유게시판
질문•답변
FAQ
마이페이지
로그인을 해주세요
로그인하기
브라우저를 닫더라도 로그인이 계속 유지될 수 있습니다. 로그인 유지 기능을 사용할 경우 다음 접속부터는 로그인할 필요가 없습니다. 단, PC방, 학교, 도서관 등 공공장소에서 이용 시 개인정보가 유출될 수 있으니 꼭 로그아웃을 해주세요.
댓글 0
댓글작성칸으로