4월 06, 2023 3월 22, 2023

구글 웹 페이지가 예술이 되는 이유 | Beautiful Web Page DEMO

구글 블로그의 최대 장점은 블로거의 취향에 맞는 스타일의 웹페이지를 만들 수 있다는 점이다. HTML을 수정하거나 조합하면 거의 무한대에 가까운 아름답고 다양한 웹페이지를 디자인할 수 있다. 비방록 차원에서, 주옥같은 스타일과 스크립트를 실제로 페이지에 적용하는 방식으로 포스팅한다. 구글 크롬에서 구글개발자 도구를 활용하거나 페이지 맨 아래 코드보기 장을 참고하면 각각 스타일과 스크립트를 볼 수 있다. 또한, 관련글 장에 직접 링크된 관련 페이지를 활용하면 금상첨화가 된다.

제목 만들기

문단 별 제목 차별화는 가독성을 높여 문단의 이해를 고조시킬 수 있다.

글머리 아이콘

글머리 번호

유니코드 넣기

< >화살 괄호는 html을 이용해서 표시하면 된다.

목록 만들기

게시글의 분량이 많을 경우 우측처럼 바로가기 목록을 만들면 문서 가독성을 높일 수 있다.

<바로가기>

제목만들기
목록만들기
관련글
갤러리
이미지 타이틀
지도만들기
지도링크
구글캘린더
구글시트
하이라이트

현재 웹페이지 내용과 관련된 사이트 내의 페이지를 섬네일 갤러리로 로딩하여 페이지 간 접근성을 높여준다. 크기와 수량 및 정렬은 임의로 조정하면 된다.

갤러리

페이지내 이미지를 일목요연하고 아름답게 배열할 수 있다.

이미지 타이틀

‘타이틀’ 태그를 이용해서 이미지 위에 간략한 내용을 나타내어 페이지 공간을 효과적으로 활용할 수 있다. 직전 갤러리 이미지처럼 제목이나 간략한 설명을 적시할 수 있다. 갤러리 경우 <a> 안에 title을 지정하면 상단 섬네일, <img> 안에 title을 지정하면 하단 섬네일 처럼 표시된다.

지도 만들기

구글 지도 API를 이용해서 독자적인 지도를 만들 수 있다.

지도 링크

위치 좌표를 적시하고 링크를 설정하면 구체적인 특정 지역의 지도를 바로 불러올 수 있다.

지도보기

캘린더 삽입

구글 캘린더를 삽입하면 페이지에 접속하는 날짜에 따른 연간 일정이 표시된다. 행사 별로 여러 개의 캘린더를 만들 수 있다.

구글시트 넣기

구글 시트를 삽입하면 엑셀 기능과 같이 웹페이지에서 완벽한 프리젠테이션을 할 수 있다.

하이라이트 JS

각종 스크립트 코드를 일목요연하고 보기좋게 정렬한다. 스크립트를 사이트 <head>와 </head> 사이에 삽입하면 아래 예제처럼 표시된다. 스타일 지정으로 모양을 여러 형태로 변경할 수 있다.

<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js'/>

코드 보기

지금처럼 다양한 주제와 설명으로 문서의 내용이 많아서 가독성이 떨어지면 보이기와 숨기기 기능을 활용하면 효과적이다. 마우스 클릭에 따라 내용이 보이거나 숨겨진다.

바로가기 메뉴

코드보기

<div class="toc">

 <strong style="color: #bf8b38; text-align: center;">&lt;바로가기&gt;</strong>

 <ul style="padding:20px;">

 <li><a href="#script">스크립트</a></li>

 <li><a href="#template">탬플릿 관리</a></li>

 <li><a href="#document">문서작성</a></li>

 <li<a href="#epilogue">에필로그</a></li>  

 </ul>
  
 </div>

<div class="toc">

 <strong style="color: #bf8b38; text-align: center;">&lt;바로가기&gt;</strong>

 <ul style="padding:20px;">

 <li><a href="#script">스크립트</a></li>

 <li><a href="#template">탬플릿 관리</a></li>

 <li><a href="#document">문서작성</a></li>

 <li<a href="#epilogue">에필로그</a></li>  

 </ul>
  
 </div>

모바일은 아래와 같이 스타일을 지정해야 한다.

<style>

@media only screen and (max-width: 768px)

{

.toc{

  position:unset;margin-left:0;

  font-size:19px;

  border:none;

}

<style>

코드보기

<script>

var bsrpg_thumbSize = 150;

var bsrpg_showTitle = true;

</script>

<script src="/feeds/posts/summary/-/사랑?max-results=8&amp;alt=json-in-script&amp;callback=bsrpGallery"></script>

이미지 타이틀

코드보기

/*갤러리*/

.justified-gallery > a > .jg-caption, .justified-gallery > div > .jg-caption, .justified-gallery > figure > .jg-caption {

    display:block; //'none' 설정은 타이틀이 보이지 않는다.

    position: absolute;

    bottom: 0;

    padding: 5px;

    opacity:1;

    background-color:white;

    left: 0;

    right: 0;

    margin: 0;

    color:#000;

    font-size: 19px;

    font-weight: 300;

    font-family: sans-serif;

}

<script>

  // get all images that have caption class

  const images = document.getElementsByClassName('caption')

  Object.keys(images).forEach((key) => { 

    // create paragraph HTML tag. it might be span, div, lists and etc. 

    let caption = document.createElement('ontitle');

    // here, we put the title attribute content into a new element we just created

    caption.textContent = images[key]['title'];

    // and finally, we add the caption after each image  

    images[key].after(caption);

  })

</script>

Sort

코드보기

<script>

    $(function () { //this is the overall function

        $.fn.sortElements = (function () {

            var sort = [].sort;

            return function (comparator, getSortable) {

                getSortable = getSortable || function () {

                    return this;

                };

                var placements = this.map(function () {

                    var sortElement = getSortable.call(this),

                      parentNode = sortElement.parentNode,

                      nextSibling = parentNode.insertBefore(

                        document.createTextNode(''),

                        sortElement.nextSibling

                      );

                    return function () {

                        if (parentNode === this) {

                            throw new Error(

                              "You can't sort elements if any one is a descendant of another."

                            );

                        }         

                        parentNode.insertBefore(this, nextSibling);            

                        parentNode.removeChild(nextSibling);

                    };

                });

                return sort.call(this, comparator).each(function (i) {

                    placements[i].call(getSortable.call(this));

                });

            };

        })();

        $('.line').sortElements(function (a, b) {

            return $(b).text() > $(a).text() ? 1 : -1;

        });

    });

</script>

highlight JS

코드보기

<!--하이라이트 js-->

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css' rel='stylesheet'/>

<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js'/>

<script src='https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js/dist/highlightjs-line-numbers.min.js'/>

<script>hljs.initLineNumbersOnLoad();</script> 

<script>hljs.highlightAll();</script>

Dream Chaser

구글 웹 페이지가 예술이 되는 이유 | Beautiful Web Page DEMO

제목 만들기

글머리 아이콘

글머리 번호

유니코드 넣기

목록 만들기

갤러리

이미지 타이틀

지도 만들기

지도 링크

지도보기

캘린더 삽입

구글시트 넣기

하이라이트 JS

코드 보기

댓글

댓글 쓰기

태그