다크모드
로그인
회원가입
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
5263
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
댓글작성칸으로
newcomment
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
195
[부트스트랩]
부트스트랩 유료테마
부트스트랩
부트스트랩
부트스트랩
부트스트랩
06/22
194
[부트스트랩]
metronic_v4.5.2 UI bootstrap
부트스트랩
부트스트랩
부트스트랩
부트스트랩
12/18
193
[부트스트랩]
Admin & Dashboard
부트스트랩
부트스트랩
부트스트랩
부트스트랩
06/22
192
[부트스트랩]
부트스트랩 COLLAPSE 아코디언 효과
부트스트랩
부트스트랩
부트스트랩
부트스트랩
06/15
191
[부트스트랩]
부트스트랩 커스텀 padding, margin
부트스트랩
부트스트랩
부트스트랩
부트스트랩
06/05
190
[부트스트랩]
부트스트랩에서 margin-top 은 어떻게 표현할까?
부트스트랩
부트스트랩
부트스트랩
부트스트랩
06/05
189
[프레임워크]
igniteui
프레임워크
프레임워크
프레임워크
프레임워크
12/24
188
[부트스트랩]
[부트스트랩UI] http://lambdathemes.in/
부트스트랩
부트스트랩
부트스트랩
부트스트랩
12/18
187
[svg]
svg 색깔 칠하기
svg
svg
svg
svg
11/27
186
[svg]
jenkov svg tutorial
svg
svg
svg
svg
11/27
185
[svg]
간단한 예제, 네모난 박스 svg
svg
svg
svg
svg
11/26
184
[svg]
svg 제공 사이트, thenounproject.com
svg
svg
svg
svg
11/26
183
[svg]
점점점 more 아이콘 svg 파일
svg
svg
svg
svg
11/26
182
[svg]
SVG 소개
svg
svg
svg
svg
11/26
181
[svg]
SVG 표현하는 5가지 방법
svg
svg
svg
svg
11/26
180
[웹폰트]
모빌리어스 웹폰트 사용하기
웹폰트
웹폰트
웹폰트
웹폰트
11/19
179
[Form]
form 태그의 기본적인 사용방법
Form
Form
Form
Form
08/31
178
[Form]
인풋 폼 이미지로 대체하기
1
Form
Form
Form
Form
05/21
177
[Form]
form 태그 안에서의 button 태그의 사용 방법(button, a, input type=submit)
Form
Form
Form
Form
06/21
176
[크로스브라우징]
browserstack
크로스브라우징
크로스브라우징
크로스브라우징
크로스브라우징
08/31
로그인 해주세요.
자유게시판
글쓰기
저장함
쪽지
전체글보기
인기글
인기멤버
태그
즐겨찾는 게시판
메뉴명
메뉴명
메뉴명
전체 게시판
이온디 소개
프로젝트 찾기
이온디 프로젝트
이온디 포트폴리오
팀 프로젝트
프리랜서 찾기
프리랜서
소통방
소모임
구인&구직
홍보
스토어
라이믹스•XE
워드프레스
그누보드
아임웹
문의/신고
홈페이지 제작
컨텐츠 관리 시스템(CMS)
웹팁
소프트웨어팁
호스팅
서버관리팁
호스팅 신청
자유게시판
질문•답변
FAQ
마이페이지
로그인을 해주세요
로그인하기
브라우저를 닫더라도 로그인이 계속 유지될 수 있습니다. 로그인 유지 기능을 사용할 경우 다음 접속부터는 로그인할 필요가 없습니다. 단, PC방, 학교, 도서관 등 공공장소에서 이용 시 개인정보가 유출될 수 있으니 꼭 로그아웃을 해주세요.
댓글 0
댓글작성칸으로