http://kor.pe.kr/util/4/encode/

1. #instagram-feed 영역 추가

          <div id="instagram-feed"></div>

2. 스크립트 임포트 / 스크립트 추가

<script src="js/jquery.instagramFeed.min.js"></script>
    <script >
    (function($){
        $(window).on('load', function(){
            $.instagramFeed({
                'tag': '해시태그',
                'container': "#instagram-feed",
                'display_profile': false,
                'display_gallery': true,
                'items': 10,
                'items_per_row': 5,
                'margin': 0,
                'callback': null,
                'styling': true
            });
        });
    })(jQuery);
</script>

3. 반응형 소스 추가

<style>
  @media (max-width: 375px){
  .instagram_gallery a, .instagram_gallery a img{ width: calc(50% - 0px) !important; }
  }
  @media (min-width: 375px){
    .instagram_gallery a, .instagram_gallery a img{ width: calc(33.3333% - 0px) !important; }
    #insta-box{min-height:810px;}

  }
  @media ( min-width: 768px){
    .instagram_gallery a, .instagram_gallery a img{ width: calc(33.3333% - 0px) !important; }

  }
  @media (min-width: 768px){
    .instagram_gallery a, .instagram_gallery a img{ width: calc(25% - 0px) !important; }
    #insta-box{min-height:620px;}
  }
  @media (min-width: 992px) {
    .instagram_gallery a, .instagram_gallery a img{ width: calc(20% - 0px) !important; }
    #insta-box{min-height:560px;}
  }
</style>

scontent-ssn1-1.cdninstagram.com/v/t51.2885-15/sh0.08/e35/s640x640/107457615_309015266907659_5616632477996359043_n.jpg?_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=111&_nc_ohc=lv5XcFez34MAX9JJyfj&oh=f21a6e16cfb8892934386fa114f9ff7f&oe=5F38E659

.line-clamp
{
	display            : block;
	display            : -webkit-box;
	-webkit-box-orient : vertical;
	position           : relative;
 
	line-height        : 1.2;
	overflow           : hidden;
	text-overflow      : ellipsis;
	padding            : 0 !important;
}
.line-clamp:after
{
	content    : '...';
	text-align : right;
	bottom     : 0;
	right      : 0;
	width      : 25%;
	display    : block;
	position   : absolute;
	height     : calc(1em * 1.2);
	background : linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%);
}
@supports (-webkit-line-clamp: 1)
{
	.line-clamp:after
	{
		display : none !important;
	}
}
 
.line-clamp-5
{
	-webkit-line-clamp : 2;
	height             : calc(1em * 1.2 * 2);
}

.line-clamp{
	line-height        : 1.2;
}

이 부분 적당히 조절해가면서 사용

text54_viewportEnter 등록할것

let startNum1 = 0;

let startNum2 = 0;

let startNum3 = 40;

let endNum1 = 23;

let endNum2 = 38;

let endNum3 = 253;

const duration1 = 70;

const duration2 = 50;

const duration3 = 10;

function countUp1(){

if (startNum1 <= endNum1 ){

$w('#text54').text = startNum1.toString();

startNum1++;

}

}

function countUp2(){

if (startNum2 <= endNum2 ){

$w('#text56').text = startNum2.toString();

startNum2++;

}

}

function countUp3(){

if (startNum3 <= endNum3 ){

$w('#text58').text = startNum3.toString();

startNum3++;

}

}

export function text54_viewportEnter(event, $w) {

     setInterval(()=> {

countUp1();

}, duration1);

}

export function text56_viewportEnter(event, $w) {

     setInterval(()=> {

countUp2();

}, duration2);

}

export function text58_viewportEnter(event, $w) {

     setInterval(()=> {

countUp3();

}, duration3);

}

https://www.wix.com/corvid/forum/community-discussion/how-to-create-animated-number

input[type=checkbox] { display:none; }

input[type=checkbox] + label { 

display: inline-block; 

cursor: pointer; 

line-height: 22px; 

padding-left: 22px; 

background: url('/img/check_off.png') left/22px no-repeat; 

}

input[type=checkbox]:checked + label { background-image: url('/img/check_on.png'); }

<input type="checkbox" id="box1"><label for="box1"></label>

<input type="checkbox" id="box2"><label for="box2">동의합니다.</label>

<input type="checkbox" id="box3"><label for="box3">동의합니다.</label>

.carousel {
    margin-left: 15%;
    margin-right: 15%;
}

ul.slides {
    display: block;
    position: relative;
    height: 600px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

ul.slides input {
    display: none; 
}


.slide-container { 
    display: block; 
}

.slide-image {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0;
    transition: all .7s ease-in-out;
}   

.slide-image img {
    width: auto;
    min-width: 100%;
    height: 100%;
}

.carousel-controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    font-size: 100px;
    line-height: 600px;
    color: #fff;
}

.carousel-controls label {
    display: none;
    position: absolute;
    padding: 0 20px;
    opacity: 0;
    transition: opacity .2s;
    cursor: pointer;
}

.slide-image:hover + .carousel-controls label{
    opacity: 0.5;
}

.carousel-controls label:hover {
    opacity: 1;
}

.carousel-controls .prev-slide {
    width: 49%;
    text-align: left;
    left: 0;
}

.carousel-controls .next-slide {
    width: 49%;
    text-align: right;
    right: 0;
}

.carousel-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    z-index: 999;
    text-align: center;
}

.carousel-dots .carousel-dot {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.5;
    margin: 10px;
}

input:checked + .slide-container .slide-image {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .carousel-controls label {
     display: block; 
}

input#img-1:checked ~ .carousel-dots label#img-dot-1,
input#img-2:checked ~ .carousel-dots label#img-dot-2,
input#img-3:checked ~ .carousel-dots label#img-dot-3,
input#img-4:checked ~ .carousel-dots label#img-dot-4,
input#img-5:checked ~ .carousel-dots label#img-dot-5,
input#img-6:checked ~ .carousel-dots label#img-dot-6 {
	opacity: 1;
}


input:checked + .slide-container .nav label { display: block; }
​

<div>
    <div class="carousel">
        <ul class="slides">
            <input type="radio" name="radio-buttons" id="img-1" checked />
            <li class="slide-container">
                <div class="slide-image">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Timisoara_-_Regional_Business_Centre.jpg">
                </div>
                <div class="carousel-controls">
                    <label for="img-3" class="prev-slide">
                        <span>&lsaquo;</span>
                    </label>
                    <label for="img-2" class="next-slide">
                      <span>&rsaquo;</span>
                    </label>
                </div>
            </li>
            <input type="radio" name="radio-buttons" id="img-2" />
            <li class="slide-container">
                <div class="slide-image">
                    <img src="http://www.timisoaranight.gruzphoto.eu/IMG_8554.jpg">
                </div>
                <div class="carousel-controls">
                    <label for="img-1" class="prev-slide">
                        <span>&lsaquo;</span>
                    </label>
                    <label for="img-3" class="next-slide">
                        <span>&rsaquo;</span>
                    </label>
                </div>
            </li>
            <input type="radio" name="radio-buttons" id="img-3" />
            <li class="slide-container">
                <div class="slide-image">
                    <img src="https://speakzeasy.files.wordpress.com/2015/05/twa_blogpic_timisoara-4415.jpg">
                </div>
                <div class="carousel-controls">
                    <label for="img-2" class="prev-slide">
                        <span>&lsaquo;</span>
                    </label>
                    <label for="img-1" class="next-slide">
                        <span>&rsaquo;</span>
                    </label>
                </div>
            </li>
            <div class="carousel-dots">
                <label for="img-1" class="carousel-dot" id="img-dot-1"></label>
                <label for="img-2" class="carousel-dot" id="img-dot-2"></label>
                <label for="img-3" class="carousel-dot" id="img-dot-3"></label>
            </div>
        </ul>
    </div>
</div>

구글의 공식 도움말(한글)이 잘돼있어서 참고용으로 작성

 출처 : https://support.google.com/adsense#topic=3373519

<!DOCTYPE html>
<html lang="ko">
<head>
<title> 예제 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
  body{
    font-size:12px;
    line-height:1.5em;
  }
  적용할 DIV CSS 들어가는 곳
</style>
</head>
<body>
  <div>CSS작업그룹은 CSS 규격을 모듈화하기로 결정했습니다.<br>
    이런 모듈화는 다른 부분과 사이의 관계를 명확히 하는데 도움이되며<br>
    완벽하게 문서의 크기를 줄일 수 있습니다.<br>
    그것은 또한 우리가 모듈 단위로 특정 테스트 코드를 만들 수 있고 CSS의 구현에 도움이 …
  </div>
</body>
</html>

div{
  padding:10px;
  border-width:27px;
  -webkit-border-image:url(img_border_image.png) 27 27 27 27 round;
  border-image:url(img_border_image.png) 27 27 27 27 round;
}

border-image:url(①img_border_image.png) ②27 ③27 ④27 ⑤27 ⑥round;

div{
  padding:10px;
  border:solid 5px #3399CC;
  -webkit-border-radius: 25px;
  border-radius: 25px;
}

border-radius:①25px;

div{
	padding:10px;
  border:#66ccff 3px solid;
  -webkit-box-shadow:rgba(106,198,247,0.3) -5px -5px 5px, rgba(106,198,247,0.7) 5px 5px 5px ;
}

box-shadow:①rgba(106,198,247,0.3) ②-5px -5px 5px, ③rgba(106,198,247,0.7) ④5px 5px 5px ;

div{
  padding:10px;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  border:#cbef38 3px solid;
-webkit-box-shadow:rgba(152,208,138,0.3) -5px -5px 5px, rgba(152,208,138,0.7) 5px 5px 5px ;
}

div{
  padding:10px;
  background-image:url(images/img_border_image.png);
  background-repeat: no-repeat;
  background-size: 50px 50px;
  -webkit-background-size: 50px 50px;
}

background-size: ①50px ②50px;

div{
  padding:10px;
  background-image:url(images/img_border_image.png), url(images/img_border_image2.png);
  background-repeat: no-repeat;
  background-size: 50px 50px, 100px, 150px;
  -webkit-background-size: 50px 50px, 100px, 150px;
}

background-image: ①url(...) ②url(...);
background-size: ③50px ④50px ⑤100px ⑥150px;

div{
  padding:10px;
  color: rgba(0,0,0,1);
  color: hsla(180,0%,0%,1);
  background-color: rgba(150,100,80,.5);
  background-color: hsla(220,64%,69%,.5);
}

color: ①rgba(0,0,0,1);
color: ②hsla(180,0%,0%,1);
background-color: ①rgba(150,100,80,.5);
background-color: ②hsla(220,64%,69%,.5);

div{
  padding:10px;
  border:solid 5px #66CCFF;
  border-radius: 20px;
  background:-webkit-gradient(linear, 80% 20%, 10% 20%, from(#ACE8E8), to(#E1F7F7));
  background:gradient(linear, 80% 20%, 10% 20%, from(#ACE8E8), to(#E1F7F7));
}

background:gradient(①linear, ②80% 20%, 10% 20%, ③from(#ACE8E8), to(#E1F7F7));

div{
  padding:10px;
  opacity:.5;
  background:#<| class="nu0">777|>;
}

color: ①opacity:.5;

div{
  text-shadow:4px 4px 4px #aaa;
  font-size:5em;
  font-family: arial;
}

text-shadow: ①4px 4px ②4px ③#aaa;

div{
    padding:10px;
    width:300px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    border:5px solid #ccc;
}

text-overflow:①ellipsis;
white-space:②nowrap;
overflow:③hidden;

div{
  padding:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
  resize:horizontal;
  resize:vertical;
  border:5px solid #ccc;
}

resize:①horizontal;
resize:②vertical;

div{
  padding:10px;
  -webkit-column-count: <| class="nu0">3|>;
  -webkit-column-gap: 1.5em;
  -webkit-column-rule: 1px solid #ccc;
  border:5px solid #ccc;
}

-webkit-column-count:①<| class="nu0">3|>;
-webkit-column-gap:②1.5em;
-webkit-column-rule:③1px solid #ccc;

출처 : http://www.clearboth.org/css3_1_by_isdn386/

float: left나 float: right된 element는 중앙 정렬이 되지 않습니다. 물론 

width를 줘서 margin를 이용하면 됩니다. 하지만 매번 width를 수정하는건 레알 귀찮습니다. 

간다하게 float: right/left, position: relative 그리고 left: +-50%를 이용해서 해결 할 수 있습니다. 욕덩이 6 에서도 잘 돌아가는걸 확인했습니다. 

예) 
#test { 
    float: right; 
    position: relative; 
    left: -50%; 
} 

#test li { 
    float: left; 
    position: relative; 
    left: 50%; 
    
    border: 1px solid red; 
} 

<ul id="test"> 
    <li>아이유</li> 
    <li>효느님</li> 
    <li>수지</li> 
    <li>리지</li> 
    <li>돼지</li> 
</ul> 

모바일 기기에서 내가만든 페이지 접속했을 때, 모바일 전용 페이지로 이동시키기 쉽다.

<script type="text/javascript"> 
	var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson'); 
	for (var word in mobileKeyWords){ 
    if (navigator.userAgent.match(mobileKeyWords[word]) != null){ 
        location.href = "http://m.example.com"; 
        break; 
    } 
 }
 </script>