최근 프런트엔드 웹디자인 트렌드

# 웹트렌드 확인:

  - 한국: https://www.dbcut.com ,[ http://koreawebdesign.com/ ]

  - 외국: https://www.awwwards.com

# 아래에 사용된 내용에서 주로 jQuery플러그인 사용을 권장 드립니다.(크로스브라우징지원, IE9이상 호환가능)

 - j쿼리 사용시 해당 라이브러리를 CDN으로 페이지에서 사용가능합니다. https://cdnjs.com/

 - 위 사이트에서 검색 후 [copy]버튼 > 작업페이지에서 아래와 같이 css와 js 연결(보통CSS는 검색된js파일과 같은 위치에 존재합니다.)

   즉, https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.js 검색했다면,

        https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.css 가 존재합니다.

   <link href="CDN붙여넣기" rel="stylesheet">

   <script  src="CDN붙여넣기"><script>

# 웹폰트:

- 단위는 rem(root eM단위)사용 합니다. 최상위 영역의 font-size를 기준px * 수(예, 1.5) 로 지정 font-size:1.5rem

- 화면 지정된 크기에 따라서 줄바꿈이 이루어 지게 하는 FlowType.js 플러그인 사용(아래URL에서 사용법확인)

  URL: https://simplefocus.com/flowtype

- https://fonts.google.com/ 구글폰트사이트에서 국가 언어 선택 후 해당 폰트를 선택하면 삽입할 코딩과 CSS를 알려 줍니다.(아래)

* 반응형 웹: CSS3 미디어 쿼리사용.

 - 필수태그: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 Ps. shrink-to-fit=no 뷰포트보다 큰 콘텐츠를 자동으로 줄여서 화면에 꽉채우는 기능 끄기.

       user-scalable=no 옵션 사라짐...헐... 확실히 1년에 한번씩은 프런트엔드쪽도 트렌드를 확인할 필요가 있습니다.

* 플랫 디자인: HTML5의 Canvas 태그나 SVG 사용. 

* 빅 타이포그래피: 텍스트와 이미지를 켭쳐치는 레이아웃 오버레이 사용.

* 카드형 컨텐츠 디자인: 그리드(사각-박스배치) 레이아웃 디자인(컨텐츠 집중표시).

  - 갤러리, 포트폴리오, 교육사이트에 적합, 카드컨테이너에 담아야 할 내용이 많거나, 컨텐츠 비교해서 보는 사이트에서는 부적합.

  - CSS 다단 레이아웃: 대표태그 = column-count:2~N, 등등

  - jQuery 플러그인 사용:  vGrid = https://github.com/xlune/jQuery-vGrid-Plugin

  - CSS 그리드 레이아웃: 대표태그 = display:grid; 등등

  - 플렉스박스 사용:  W3C표준 대표태그 = display:flex; 등등

* 구현: 반응형 웹은 그리드안에서 아이템 크기, 아이템 배치방향/순서, 정렬방법, 아이템 간격 등을 옵션으로 제어 할 수 있습니다.

  - 반응형웹: css3 미디어 쿼리 샤용(모바일 First 즉, @media 조건에 작은 화면부터 작성 > 중간화면 > 큰화면 순으로 css코드 작성)

    그리드 방식으로 반응형을 구현할때, 스타일 초기값

    <style>

    * {

        margin:0; padding:0;

        -moz-box-sizing:border-box; -webkit-box-sizing:border-box /* 박스모델에서 너비를 테두리까지 포함 */

       box-sizing:border-box; /* 표준(접두어)을 제일 나중에 코딩, Why? 표준이 아닌 브라우저는 내용 무시됨 */

      /* 접두어별 브라어져적용구분 = -webkit접두어: 구글크롬/사파리, -moz접두어: 파이어폭스, -ms접두어:익스플러어, -o접두어: 오페라 */

   }

    body {

      background:url("이미지소스") no-repeat right bottom fixed;

      background-size:cover; /* CSS3 지원하는 브라우저만 가능 */

   }

   a:link, a:hover, a:visited { color:#fff; text-decoration:none; text-shadow:1px 1px 0 #283744; }

   </style>

  - 부트스트랩 프레임웍4.0: https://getbootstrap.com/docs/4.0  => 이 부트스트랩 문서링크의 Starter template 부분을 복사해서 시작.

  - 머티어리얼 디자인 라이트 프레임웍의 Grid, Card컴포넌트로 구현: https://getmdl.io/components/index.html#cards-section

  - 워드프레스 패럴렉스 스크롤링 테마

    https://athemes.com/theme/moesia , https://athemes.com/theme/alizee , https://enginethemes.com/themes/oneengine , https://www.andersnoren.se/teman/hemingway-wordpress-theme/ .

* 참고사이트:

  -  https://flatuicolors.com/

  - 구글 머티어리얼 사이트: https://design.google/library/material-design-awards-2018/

* 팁1 (깃허브+지킬+다국어 사이트 만들기)

 - https://dreamgonfly.github.io/2018/01/27/jekyll-remote-theme.html

 - http://koreawebdesign.com/github-web-hosting-build-guide/

 - https://alvarotrigo.com/fullPage/index.html

 - https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#fullpagejs

 - https://byeongsupark.github.io/blog/multilingual-github-page/jekyll-with-polyglot

 - https://textree.co.kr/2017/11/08/%EC%9B%B9-%EB%A7%A4%EB%89%B4%EC%96%BC-%EC%A0%9C%EC%9E%91%EA%B3%BC-%EC%9D%B4%ED%95%B4/

* 팁2 (워드프레스 테마)

 - https://alvarotrigo.com/fullPage/ <> https://github.com/alvarotrigo/fullPage.js

* 팁3 풀스크린 랜딩페이지(index페이지)

 - 풀스크린에 사용할 1920X1275 대용량 이미지 최적화 사이트: https://tinypng.com/ ,  https://www.jpegmini.com

 - 플러그인들: http://www.jquery-backstretch.com/ , https://vegas.jaysalvat.com/

* 팁4 (풀스크린배경추천: jQuery 플러그인 http://vodkabears.github.io/vide/ , 유튜브동영상 https://code.google.com/p/jquery-tubular )

아래 video 태그는 height값이 필요 없으나, embed나 iframe은 height 스타일이 필요하다.

그런데, 유투브 동영상을 감싸는 hedith:0과 padding-bottom: 56.25%; 으로 height 값을 동적으로 취할 수 있게 됩니다.

그러면, 56.25% 를 구하는 공식입니다.

콘텐츠 비율이 5:1 이라면 (세로/가로)*100 으로 계산해서 값을 구합니다.

유투브는 16:9 비율로 계산해서 (9/16)*100 = 56.25 가 나옵니다. 좀더 자세한 구현은 이전에 비슷한 포스트로 글을 작성한 것을 참조하기 바랍니다. (링크: http://blog.daum.net/web_design/545 )

가변동영상 예 video태그사용

<video style="max-width: 100%;" autoplay="">
<source src="https://www.ibm.com/analytics/common/images/analytics_homepage_leadspace-bgvideo.mp4" type="video/mp4">
</video>

가변동영상 예 object/iframe 태그사용

<div style="height: 0px; padding-bottom: 56.25%; position: relative;">
<iframe src="https://www.youtube.com/embed/YtXqScsMRdQ" style="border: 0px currentColor; border-image: none; left: 0px; width: 100%; height: 100%; position: absolute;">
</iframe>
</div>