홈페이지 구상(와이어프레임) 툴

이번 포스트에는 홈페이지를 구상할때 Tool을 사용해 보겠습니다.

이전 포스트에 카카오 오븐을 사용했었는데요, 화면레이아웃 크기를 지정할 때, 고정 높이로만 나타나서...

높이도 마음대로 지정가능한 툴로 변경 하였습니다.

카카오 오븐처럼 클라우드 Tool이 아니고, PC설치형으로 네이버에서 기업에서도 무료로 사용할 수 있도록 배포하는 버전 입니다.

빌드배포: https://github.com/naver/protonow , [설치버전]: https://software.naver.com/software/summary.nhn?softwareId=GWS_001435

위 설치버전으로 max1300px 신규 반응형 사이트를 구성해 보았습니다.(아래)

최종 제작할 사이트 모양: https://alvarotrigo.com/fullPage/index.html (다국어 워드프레스 사이트)

기술참조: https://github.com/alvarotrigo/fullPage.js 

 (주의: 위 fullPage 플러그인 버전v3.x는 더이상 오픈소스가 아닙니다.

그래서, v2.97버전을 CDN으로 페이지에서 사용가능합니다. https://cdnjs.com/libraries/fullPage.js/2.9.7

음... 역시 결국은 어느정도 안정화 되면, 유료버전으로 바뀌는 군요...)

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.css

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.js

위 v2.9.7은 MIT라이센스 입니다. 그나마 다행입니다.^^

/*!
 * fullPage 2.9.7
 * https://github.com/alvarotrigo/fullPage.js
 * @license MIT licensed
 *
 * Copyright (C) 2015 alvarotrigo.com - A project by Alvaro Trigo
 */

...

Ps.

- 다국어 적용시 필요한 정보

 국가별 언어-국가 코드: ko-KR, ja-JP, en-US, zh-CN, vi-VN 등등( https://gist.github.com/JamieMason/3748498 )

 국가별 국기 확인: https://m.blog.naver.com/PostView.nhn?blogId=sasoi01&logNo=220594019084&proxyReferer=http%3A%2F%2Fwww.google.co.kr%2Furl%3Fsa%3Di%26rct%3Dj%26q%3D%26esrc%3Ds%26source%3Dimages%26cd%3D%26ved%3D2ahUKEwjZ2ZimjZPjAhXEgLwKHSn1BzsQjRx6BAgBEAU%26url%3Dhttp%253A%252F%252Fm.blog.naver.com%252Fsasoi01%252F220594019084%26psig%3DAOvVaw2R-Y-VSHeu0byQMoiI7zQp%26ust%3D1562049248813619

- 위 max 1300은 내부 실제 콘텐츠wrapper 최대 크기를 말함.

단, 배경section은 full스크린 사용함.(이 사이트는 아니지만, 사진, 동영상 위주 사이트에서는 콘텐츠도 full스크린으로 해도 좋습니다.)

반응형을 위한 미디어 중단점 쿼리는 764px을 기준으로 PC와 모바일용 레이아웃으로 사용.

style 예,

/* 기준 스타일-모바일+PC용- 시작 */

* { margin:0; padding:0 }

html { font-size:20px; }

div { font-size:30px; font-size:1.5rem; }

.wrapper {

 padding-top:60px;

 padding-bottom:40px;

 background:transparent;

}

... 기타 모바일용 스타일 ...

/* PC전용 스타일 시작 */

@media screen and (min-width:764px) {

 .wrapper {

  max-width:1300px;

  margin:0 auto;

 }

}