반응형 웹 클라우드 교육용 사이트 만들어보았습니다.

2017년 가을에 백석대에서 반응형 웹교육을 2시간 교육으로 진행 하였다.

그때는 그리드 시스템(화면 헤로 12등분) 위주로 작업 했고,

작업방식도, PC용 -> 태블릿용 -> 모바일용 순으로 퍼블리싱을 했다.

이번에 교육 콘텐츠를 추가하면서, 작업방식을 반대로 바뀠다.

모바일용  -> 태블릿용   -> PC용 순으로 퍼블리싱을 했다.

미리보기

0. 반응형 웹시안 확인(아래-온라인포토샵이용해서 포토샵디자이너가 만든 시안을 가지고, css클래스 .container 너비픽셀 확인)

- 주) 포토샵 시안확인은 http://www.photopea.com 크롬에서만 작동 가능합니다.

1. 반응형 웹구조 준비하기

http://timespace.dothome.co.kr/metro/sub.php/CATEGORY/2/MENU_CODE/001001005

2. 반응형 웹구조 작업하기

http://timespace.dothome.co.kr/metro/sub.php/CATEGORY/2/MENU_CODE/001001006

3. 반응형 웹페이지 작업하기

http://timespace.dothome.co.kr/metro/sub.php/CATEGORY/2/MENU_CODE/001001007

Ps1.

여기도 가변그리드가 사용되는데, 아래 3가지 공식을 적용합니다.

[가변그리드공식] = 결과는 % 단위 입니다.

[가변element값 %] = (가변크기로 만들 박스의 가로 너비 / 가변그키로 만들 박스를 감싸고 있는 박스의 가로 너비) X 100

[가변마진값 %] = (가변 마진을 적용할 마진값 / 적용할 박스를 감싸고 있는 박스의 가로 너비) X 100

[가변패딩값 %] = (가변 패딩을 적용할 패딩값 / 적용할 박스를 감싸고 있는 박스의 가로 너비) X 100

Ps2.

여기서 가상엘리먼트 :after 가 사용됩니다.
가상 엘리먼트란 실제로 눈에 보이지 않지만, :before, :after 처럼 가상으로 생성하고 지정할 수 있는 엘리먼트 입니다.
이러한 특징을 활용하여 float 속성 사용시 발생하는 문제를 해결할 수 있습니다.
예를 들어 플로트 속성을 적용한 요소가 있을 경우 여기서는 header 태그의 .header .menu-toggle-btn, .header .logo 와 같이
부모인 header 영역은 토글버튼이나, 로고와 같은 요소의 높이값을 인식하지 못하는 문제가 발생하게 됩니다.
이는 플로트 속성 자체가 '띄우다' 는 뜻을 가지고ㅗ 있어 요소들이 공중에 떠 있는 것처럼 인식되어 부모요소(header)가 내부 요소의 높잇값을
인식할 수 없는 것입니다.
:after 가상엘리먼트의 content 속성값이 없으면 적용되지 않으므로 쌍따옹표를 이용해 공백으로 적용합니다.

Ps3.

여기서는 가변폰트를 사용하지 않습니다. 하지만, img는 가변크기를 사용합니다.

css의 width:100%, max-width:100% 를 함께 사용합니다.(max-width는 이미지본래크기이상은 늘어나지 않게 됩니다. 이 속성이 없으면, 이미지가 브라우져 크기대로 무한정 늘어나서, 픽셀이 깨져 보이게 됩니다.) 

동영상(유투브, 비메오 iframe사용 전용플레이어)을 가변적화면에 맞추려면, js파일을 사용합니다.

참조: http://fitvidsjs.com

사용법:

<script src="//code.jquery.com/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.js"></script>

<div id="video-wrap">

<iframe src="유투브나 비메오 공유 소스코드..."></iframe>

</div>

<script> $("#video-wrap").fitVids(); </script>