3월 16, 2023 2월 24, 2016

웹페이지 작성 필수 스크립트 | 관련글 | 갤러리 | 소트 | 지도 | 이미지 타이틀

목차 만들기

아래와 같이 코딩하면 우측처럼 목차를 만들어 문서 가독성을 높일 수 있다.

<바로가기>

스크립트

관련글
갤러리
캘린더
구글시트

탬플릿 관리
문서작성
에필로그

<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>

갤러리 스크립트

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

이미지 타이틀 스크립트

‘타이틀’ 태그를 이용해서 이미지 위에 간략한 내용을 나타내어 페이지 공간을 효과적으로 활용할 수 있다.

/*갤러리*/

.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>

소트 스크립트

원리

아래 스크립트 35번 줄과 같은 선택자(id 혹은 class)가 있는 태그(div, p 등) 내의 텍스트(문자, 숫자)의 가나다순에 따라 정렬된다.

필요성

지리멸렬한 웹페이지 내용을 올림차순이나 내림차순으로 자동 정렬함으로써 문서를 일목요연하게 정리하여 가독성을 높일 수 있다.

방법

<div>나 <p> 태그 안에 문단이나 단어를 작성하면 된다.

<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>

팝업 스크립트

속초시

강릉시

나만의 지도 넣기

지도 링크

지도보기

캘린더 넣기

구글시트 넣기

하이라이트 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>

문서 작성

오늘의 날짜 보이기

블로그 차단

블로그 실행 불가

크롬 설정에서 자바스크립트 비허용 체크되면 블로그 사이트 안됨

피싱 사이트 오류

해킹이나 게시글 내용이 피싱에 관련되거나 오인(금액 오기)으로 경고와 함께 차단된다.

Dashboard 언어

https://www.blogger.com/?hl=en

언어바꾸기

검색지역 설정

검색지역을 영국으로 설정하면 여러가지 제약없이 검색할 수 있다.

아래 사이트 접속
지역설정
영국 선택
저장

https://www.google.com/preferences

템플릿 교체

스크립트 확인

하이라이트JS
애널리틱스 코드
애드센스 코드
스와이프 코드
저스트파이드 갤러리
머티리얼 아이콘
구글 폰트
메타테그
폰트 오섬
remix 아이콘
날짜 입력
back to top
관련글

게시글 수정날짜

블로그 html에 아래 태그를 넣으면 된다.

<data:post.lastUpdated/>

모바일 테마 CSS

블로그 메뉴>테마>아래쪽 화살표>모바일 설정>모바일 체크>맞춤 설정>

블로그 메뉴>테마>아래쪽 화살표>html 편집

<head>와 </head> 사이에 CSS를 지정한다.

템플릿 수정

<괄호샘플>

less than 과 greater than

back-to-top

스크립트 링크
스크립트 추가

스타일은 스크립트에서 해야 한다. 모바일 좌우 여백은 템플릿 '추가 관련글 코드'에서 조정해야 한다.

스크립트 추가 '/head '앞
'코드 추가' 아래
데스크탑 모바일 css 수정

스틱키 중앙조절

.sticky .centered-top{ padding-$startSide:$(sidebar.width) }

284px를 0px로 처리

헤드와 메인화면 여백

body.feed-view .widget.Blog .blog-posts .post-outer-container,body.item-view .widget.Blog .blog-posts .post-outer{
margin-bottom:0px;

상단 메뉴와 분리선

centered-top에서 border 처리
하단 여백
sticky 수정
PageList li ::before \b7(점) 3곳 제거
메뉴 글자 크기는 메인 스타일에서 수정해야 한다.
모바일 스타일에서 PageList none 처리

게시글 수정

게시글 마침

게시글 내용 마지막 아래의 태그를 처리해야 한다. <div class="separator" style="clear: both; text-align: center;"></div>

글자 색상 코드

테마 칼라(블로그)
#1428a0 청색 삼성
#1a73e8 청색 구글
#202124 흑색 구글

게시글 복사금지

각 게시글 페이지
클루망 mister100

인용문

매인 html
blockquote

두째줄 인덴트

text-indent: -36px;

padding-left: 36px;

하이퍼링크

레이아웃
link

이미지 아래 캡션

각 페이지
스타일 tr-caption 수정

다중div 중앙 정렬

display: flex;
justify-content: center;

다중div 한쪽 하단 정렬

display: flex;
align-items: flex-end;