맑음

넹~ 다시 돌아왔습니다!!

1편 : 반응형 웹에 대한 이해

2편 : 반응형 웹 디자인 레이아웃

이번엔 가변폭 컨텐츠에 대해서 이야기 해보려고 합니다~

반응형 웹 디자인에 대한 정의와 디자인 구성에 대해서 알고나면 그 안에 컨텐츠를 어떻게 넣을지에 대해서도

당연히 관심을 가지게 됩니다.

그래서 디자인 안에 들어가게 되는 컨텐츠에 대해서 5가지만

간단하게(?) 알려드릴께요~ㅋㅋ찡긋

1. Flexible Contents

반드시 Column의 너비가 변경되어도 웹 페이지 안의 미디어가 Column을 넘치지 않게 해야 한다.

무슨말인가 하면..

배경과 그 안에 컨텐츠는 별개의 의미로 보시면 됩니다.

즉, 배경이 줄어들었을때 컨텐츠 역시 배경의 비율에 다라 같이 줄어들어야 한다는거죠.

img,

embed,

object,

video {

 max-width: 100%;

}

이때 max-width를 지원하지 않는 인터넷 익스플로러를 위한 스크립트도 공개하고 있으니 참고하시면 좋을 것 같습니다~

영어지만..우린 그정도는 쉽게 볼 수 있잖아요?!ㅋㅋㅋㅋ(퍽퍽퍽)

궁금한 사람만 클릭

2. Image Text

이미지 텍스트는 가변폭 이미지를 사용했을 때 작은 화면에서 가독성이 매우 떨어지는 단점이 있죠..

그래서 이미지 텍스트를 피하고, 기본 서체나 웹 폰트를 사용하는 것을 추천 드립니다.

@font-face {

 font-family: Nanumpan;

 src: url('NanumPen.ttf');

}

span {

 font-family: Nanumpan, sans-serif;

}

하지만 전송량이 매우 크고, 지원도 잘 안되기 때문에 모바일에서는 웹 폰트 사용을 피하는것이 좋을 것 같습니다.

3. Responsive Box

동영상이나 일반 박스의 가로세로 비율을 유지하는 방법을 말합니다.

이 Responsive Box를 사용하면 패딩이나 마진을 퍼센트로 지정하면 비율을 유지할 수 있죵!!

#movie-player-wrapper {

 position: relative;

 width: 100%;

 height: 0;

 overflow: hidden;

 padding-bottom: 56.26%;

}

#movie-player-wrapper .wrap {

 position: absolute;

 top: 0;

 left: 0;

 width: 100%;

 height: 100%;

}

4. 반응형 테이블

이 테이블은 CSS 추가 수정 없이 테이블 정보의 선형화에 초점을 둔 방법을 말합니다.

Java로 셀 헤더 정보를 data-cell-header 속성에 저장하고 이를 CSS를 통해서 화면에 출력하는 방법이죠.

5. Using CSS3

가변적으로 변하는 디자인 요소를 기존과 같이 이미지 만으로 구성하기는 힘들잖아요.

이에는 페이지 전송량이 커지는 문제도 있고, 성능이 낮은 모바일 단말기에서 속도 문제도 발생하게 되기 때문인데요.

그래서 디자인도 점진적 향상 개념을 적용하게 됩니다.

이 CSS3를 사용하면 브라우저에서 기능을 자체적으로 지원하기 때문에

이미지를 사용할 때 보다 상대적으로 높은 성능을 기대할 수 있습니다~

===================================================================================

이번은 완전 간단하죠??ㅋㅋㅋ

그동안 너무 길다며;;;항의 아닌 항의가 들어와서요~

심플한 정보만 전달 드립니다~

물론 이번 정보는 코딩에 필요한 정보이구요. 만약 개발 프레임워크에 대해서 좀더 알고 싶다면요~

http://getbootstrap.com/

http://foundation.zurb.com/

http://gumbyframework.com/

이 사이트를 참고하시기 바랍니다~ㅋㅋㅋ

상냥한 꼬대리씨~ㅋㅋㅋㅋㅋ

이제 반응형 웹 디자인에 대해서 전체적으로 감이 오시나요?

아무래도..관련 분야가 아니라면 어려울 수 있으나 요즘 대세잖아요~

알아두면 좋을 양식이 될테니 꼬대리와 함께 공부해 보아요~ㅋㅋㅋㅋ

즐거운 주말 보내세요!

본 리뷰는 지극히 개인적인 관점과 생각으로 작성된 주관적인 글 입니다

본 내용은 http://hyeonseok.com/soojung/webstandards/2013/03/09/729.html 를참고하여 작성되었습니다.

ⓒ 언제나 맑음 with 꼬대리