HTML & Publishing2018. 2. 3. 22:46

1. 자동 생성해주는 웹사이트

 embedresponsively.com : http://embedresponsively.com




2. 블로거 꿈쟁이(cyclo80916)님의 글 : https://blog.naver.com/cyclo80916/220120445344

<style>

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; }

.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

</style>


<div class="embed-container"><iframe src="http://www.youtube.com/embed/bE52Nr2Ok5k" frameborder='0' allowfullscreen></iframe></div>




3. CMS FACTORY의 글 : https://www.cmsfactory.net/node/20765

 <style>

.youtubeWrap {position: relative; width: 100%; padding-bottom: 56.25%;}

.youtubeWrap iframe {position: absolute; width: 100%; height: 100%;}

</style>


<div class="youtubeWrap">

<iframe width="560" height="315" src="https://www.youtube.com/embed/bE52Nr2Ok5k" frameborder="0" allowfullscreen></iframe>

</div>

'HTML & Publishing' 카테고리의 다른 글

[HTML] pre, code 태그  (0) 2018.06.17
중국어/중문/간체/번체/중문 폰트/중문 글꼴  (0) 2018.03.03
SNS 아이콘 아미지 모음  (0) 2018.01.14
호스팅 php 버전 체크방법  (0) 2018.01.11
php : get, post method  (0) 2017.12.31
Posted by cpu21
jQuery2018. 2. 1. 18:27

스크립트만 사용시

obj.style.display = (obj.style.display == "none") ? "block" : "none";



jquery에서

  if($(".abc").css("display") == "none"){

      $(".abc").show();

  } else {

      $(".abc").hide();

  }



출처: http://bobkha.tistory.com/87

Posted by cpu21
HTML & Publishing2018. 1. 14. 18:45

SNS 아이콘 아미지 모음(벡터 이미지)

 - 네이버 카페, 네이버 블로그, 인스타그램, 카카오톡
 - 다운로드 : SNS 아이콘.rar




'HTML & Publishing' 카테고리의 다른 글

중국어/중문/간체/번체/중문 폰트/중문 글꼴  (0) 2018.03.03
유튜브 동영상 반응형 삽입  (0) 2018.02.03
호스팅 php 버전 체크방법  (0) 2018.01.11
php : get, post method  (0) 2017.12.31
BGM 삽입  (0) 2017.12.30
Posted by cpu21
WordPress/Theme2018. 1. 13. 20:32

Chrome not scrolling with Kallyas : http://support.hogash.com/support/topic/chrome-not-scrolling-with-kallyas/


Kallyas Theme > General Option : Enable Smooth Scroll?
→ 해제

Posted by cpu21
CSS2018. 1. 11. 13:54

[CSS] 이미지 흑백처리 -webkit-filter : grayscale(100%) : http://www.410content.com/home/develop/917

# hover() 이벤트 메소드 예제소스 보기 : https://webisfree.com/2015-11-25/제이쿼리-hover()-이벤트-배우기


a img {-webkit-filter: grayscale(100%); filter: gray;}

a:hover img {-webkit-filter: grayscale(0%); filter: none;}



.gt-gallery-thumb:hover > img {-webkit-filter: grayscale(100%); filter: gray;}

.gt-gallery-thumb > img {-webkit-filter: grayscale(0%); filter: none;}




$(document).ready(function(){

    $(".gt-gallery-thumb > img").hover(function() {

    $(this).css("-webkit-filter", "grayscale(100%)");

    $(this).css("filter", "gray");

    }, function(){

    $(this).css("-webkit-filter", "grayscale(0%)");

    $(this).css("filter", "none");

    });

});

Posted by cpu21
HTML & Publishing2018. 1. 11. 13:51

- 다음 사이트에서 php 버전 확인 가능 : http://www.kloth.net/services/srvinfo.php

- 소스로 확인하는 방법 : https://www.xpressengine.com/tip/20798445




워드프레스 설치 환경

To run WordPress we recommend your host supports:

 - PHP version 7.2 or greater

 - MySQL version 5.6 or greater OR MariaDB version 10.0 or greater

 - HTTPS support


https://kopress.kr/blog/docs/user/about-wordpress/requirements/

https://wordpress.org/about/requirements/






<?php

//echo (version_compare(phpversion(), '5.2.4', '>=')) ? '호환 가능' : '호환 불가';

//echo ' : '.phpversion();

?>


<br/><br/>


<?php

echo '<strong>- PHP Version</strong>';

echo ' : '.phpversion();

?>


<br/><br/>


<?php

$str = "<strong>- Encording Check (인코딩 확인) : </strong>";

$enc = mb_detect_encoding($str, array("UTF-8", "EUC-KR", "SJIS"));

if ($str != "UTF-8") {

        $str = iconv($enc, "UTF-8", $str); // iconv 는 인코딩 변환함수

}


echo  $str;

echo  $enc;

?>



'HTML & Publishing' 카테고리의 다른 글

유튜브 동영상 반응형 삽입  (0) 2018.02.03
SNS 아이콘 아미지 모음  (0) 2018.01.14
php : get, post method  (0) 2017.12.31
BGM 삽입  (0) 2017.12.30
다음 지도 삽입  (0) 2017.12.19
Posted by cpu21
jQuery2018. 1. 10. 09:40

<html>

<head>

    <meta name="Content-type" type="equiv" content="text/html; charset=utf-8"/>

    <title>테스트 파라미터 받기</title>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>



<body>

<p id="param">aaa</p>



<script>

    jQuery(function ($) {

        $.fn.getUrlParameter = function (sParam) {

            var sPageURL = decodeURIComponent(window.location.search.substring(1)),

                    sURLVariables = sPageURL.split('&'),

                    sParameterName,

                    i;


            for (i = 0; i < sURLVariables.length; i++) {

                sParameterName = sURLVariables[i].split('=');


                if (sParameterName[0] === sParam) {

                    return sParameterName[1] === undefined ? true : sParameterName[1];

                }

            }

        };


        var type = $.fn.getUrlParameter('type');

        $("#param").text("type Value : " + type);

    });

</script>

</body>

</html>



# 설명

파라미터 type에 값을 넣어주면 스크립트로 값을 받을수 있음( 예 → http://start0.tistory.com/test.html?type=값1111 )



# 실행 예시
type Value : 값1111



출처 : http://start0.tistory.com/217

Posted by cpu21
CSS2018. 1. 5. 09:32

가장 간단하면서도 훌륭한 방법 : CSS3를 이용한 방법

html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}


 

지원브라우저

Safari 3+

Chrome Whatever+

IE 9+

Opera 10+ (Opera 9.5 supported background-size but not the keywords)

Firefox 3.6+

 


애석하게도 IE9 밑으로는 반쪽짜리 코딩이다.

해보면 알겠지만, 배경이미지 사이즈가 100% 되긴하는데, 브라우저 창의 크기에 따라 이미지가 작아지거나 커지지 않는다. 웹표준에 맞춘 브라우저들은 모두 잘 돌아간다.

CSS를 이용하거나  jQuery 를 이용한 더 진화된 방법을 소개하는 곳이 있으니 다른 방법을 보시려면 아래 링크를 보시면 됩니다.

http://css-tricks.com/perfect-full-page-background-image/


출처 : http://juotte.net/?p=5765




Posted by cpu21
HTML & Publishing2017. 12. 31. 03:02

index.php?id=myID

$id = $_GET['id'];




Referance :
[PHP 기본] PHP $_GET by 서지스윈 : http://sergeswin.com/103

'HTML & Publishing' 카테고리의 다른 글

유튜브 동영상 반응형 삽입  (0) 2018.02.03
SNS 아이콘 아미지 모음  (0) 2018.01.14
호스팅 php 버전 체크방법  (0) 2018.01.11
BGM 삽입  (0) 2017.12.30
다음 지도 삽입  (0) 2017.12.19
Posted by cpu21
WordPress2017. 12. 30. 18:44

※ 작동 안됨


/* 나의 계정 페이지 또는 결제 페이지에서 약한 비밀번호 허용 */
/* Remove the password strength meter from WooCommerce checkout */


function wc_ninja_remove_password_strength() {

if ( wp_script_is( 'wc-password-strength-meter', 'enqueued' ) ) {

wp_dequeue_script( 'wc-password-strength-meter' );

}

}

add_action( 'wp_print_scripts', 'wc_ninja_remove_password_strength', 100 );

'WordPress' 카테고리의 다른 글

wp-config Options  (0) 2021.01.22
[Wordpress] wp_usermeta 테이블 wp_user_level  (0) 2018.07.12
[Wordpress] Core - 워드프레스 접속주소 변경  (0) 2018.03.21
Posted by cpu21
CSS2017. 12. 30. 18:41

Character Entities ∨의 삽입

li > a:after {content:" \2228";}


UNICODE : U+02228

HEX CODE : &#x2228;

HTML CODE : &#8744;

HTML ENTITY : &or;

CSS CODE : \2228


// html example

<span>&#8744;</span>


// css example

span {content: "\2228";}



Referances :

Logical Or HTML Symbol, Character and Entity Codes : https://www.toptal.com/designers/htmlarrows/math/logical-or/

Unicode Character 'LOGICAL OR' (U+2228) : https://www.fileformat.info/info/unicode/char/2228/index.htm

Character Entities : http://brajeshwar.github.io/entities/

Special Characters : https://css-tricks.com/snippets/html/glyphs/

[감성 퍼블리셔 html,css - HTML 특수문자 메뉴보기 : http://maen2001.tistory.com/3


가상 요소(pseudo-elements) 알아보기 : http://webst.funnycom.net/tag/가상-요소/

Posted by cpu21
WordPress/WooCommerce2017. 12. 30. 17:59

- Theme : Grafik



 /* 정상가 존재시 상태값 inline 처리 */
$('ul.products > li > div.qodef-product-info-holder > span.price > del').each(function(index){

if ($(this).length > 0) {

//alert($(this).parent().siblings('.stock_status').text());

$(this).parent().siblings('.stock_status').css('display','inline');

};

});


/* is Sold Out! 일 경우 상태값 inline 처리 */

$('ul.products > li.product > div.qodef-product-info-holder > span.stock_status').each(function(index){

if ($(this).text() == 'is Sold Out!') {

$(this).css('display','inline');

};

});



/* 상품 상세페이지 : Out of stock 텍스트를 Sold Out 텍스트로 변경 */

var text = $('div.qodef-single-product-summary > div.summary > p.stock.out-of-stock').text();

if (text == 'Out of stock'){

$('div.qodef-single-product-summary > div.summary > p.stock.out-of-stock').text('Sold Out');

};



$('#billing_first_name').attr( 'placeholder', '이름' );

$('#shipping_first_name').attr( 'placeholder', '이름' );

$('#billing_postcode').attr( 'placeholder', '우편번호' );

$('#shipping_postcode').attr( 'placeholder', '우편번호' );

$('#billing_address_1').attr( 'placeholder', '주소' );

$('#shipping_address_1').attr( 'placeholder', '주소' );

$('#billing_address_2').attr( 'placeholder', '상세주소' );

$('#shipping_address_2').attr( 'placeholder', '상세주소' );

$('#billing_last_name').attr( 'placeholder', '성' );

$('#billing_email').attr( 'placeholder', '이메일' );

$('#shipping_email').attr( 'placeholder', '이메일' );

$('#billing_phone').attr( 'placeholder', '전화번호' );

$('#shipping_phone').attr( 'placeholder', '전화번호' );

Posted by cpu21
WordPress/WooCommerce2017. 12. 30. 17:57

- File : wp-content\plugins\woocommerce\templates\checkout\terms.php

- Theme : Grafik






<script>

$(document).ready(function(){

$('.policy_chk').click(function(){

$('.PolicyTxt').toggle(500);

});



$("#place_order").click(function(){

    if ($('input:checkbox[id="policy_chk"]').is(":checked") == false && $('input:checkbox[id="terms"]').is(":checked") == false)

    {

$('#policy_err').css('display','none');

$('#policy_err_all').toggle(500);

return false;

    };



    if ($('input:checkbox[id="policy_chk"]').is(":checked") == false)

    {

$('#policy_err_all').css('display','none');

$('#policy_err').toggle(500);

//alert("개인정보취급방침에 동의하셔야 합니다.");

//event.preventDefault();

return false;

    };

});


});

</script>



<textarea cols="40" rows="8" readonly autofocus required wrap="hard" class="PolicyTxt" style="display:none; margin-top:20px;">

㈜AAA는 (이하 "회사"는) 고객님의 개인정보를 중요시하며, "정보통신망 이용촉진 및 정보보호"에 관한 법률을 준수하고 있습니다.

회사는 개인정보취급방침을 통하여 고객님께서 제공하시는 개인정보가 어떠한 용도와 방식으로 이용되고 있으며, 개인정보보호를 위해 어떠한 조치가 취해지고 있는지 알려드립니다.



■ 수집하는 개인정보 항목 및 수집방법

가. 수집하는 개인정보의 항목

o 회사는 회원가입, 상담, 서비스 신청 등을 위해 아래와 같은 개인정보를 수집하고 있습니다.

- 회원가입시 : 이름 , 생년월일 , 성별 , 로그인ID , 비밀번호 , 자택 전화번호 , 휴대전화번호 , 이메일 , 14세미만 가입자의 경우 법정대리인의 정보

- 서비스 신청시 : 주소, 결제 정보

o 서비스 이용 과정이나 사업 처리 과정에서 서비스이용기록, 접속로그, 쿠키, 접속 IP, 결제 기록, 불량이용 기록이 생성되어 수집될 수 있습니다.

나. 수집방법

- 홈페이지, 서면양식, 게시판, 이메일, 이벤트 응모, 배송요청, 전화, 팩스, 생성 정보 수집 툴을 통한 수집



■ 개인정보의 수집 및 이용목적

회사는 수집한 개인정보를 다음의 목적을 위해 활용합니다.

o 서비스 제공에 관한 계약 이행 및 서비스 제공에 따른 요금정산

콘텐츠 제공 , 구매 및 요금 결제 , 물품배송 또는 청구지 등 발송 , 금융거래 본인 인증 및 금융 서비스

o 회원 관리

회원제 서비스 이용에 따른 본인확인 , 개인 식별 , 불량회원의 부정 이용 방지와 비인가 사용 방지 , 가입 의사 확인 , 연령확인 , 만14세 미만 아동 개인정보 수집 시 법정 대리인 동의여부 확인, 불만처리 등 민원처리 , 고지사항 전달

o 마케팅 및 광고에 활용

이벤트 등 광고성 정보 전달 , 접속 빈도 파악 또는 회원의 서비스 이용에 대한 통계



■ 개인정보의 보유 및 이용기간

원칙적으로, 개인정보 수집 및 이용목적이 달성된 후에는 해당 정보를 지체 없이 파기합니다. 단, 다음의 정보에 대해서는 아래의 이유로 명시한 기간 동안 보존합니다.

가. 회사 내부방침에 의한 정보보유 사유

회원이 탈퇴한 경우에도 불량회원의 부정한 이용의 재발을 방지, 분쟁해결 및 수사기관의 요청에 따른 협조를 위하여, 이용계약 해지일로부터 1년간 회원의 정보를 보유할 수 있습니다.

나. 관련 법령에 의한 정보 보유 사유

전자상거래등에서의소비자보호에관한법률 등 관계법령의 규정에 의하여 보존할 필요가 있는 경우 회사는 아래와 같이 관계법령에서 정한 일정한 기간 동안 회원정보를 보관합니다.

o 계약 또는 청약철회 등에 관한 기록

-보존이유 : 전자상거래등에서의소비자보호에관한법률

-보존기간 : 5년

o 대금 결제 및 재화 등의 공급에 관한 기록

-보존이유: 전자상거래등에서의소비자보호에관한법률

-보존기간 : 5년

o 소비자 불만 또는 분쟁처리에 관한 기록

-보존이유 : 전자상거래등에서의소비자보호에관한법률

-보존기간 : 3년

o 로그 기록

-보존이유: 통신비밀보호법

-보존기간 : 3개월



■ 개인정보의 파기절차 및 방법

회사는 원칙적으로 개인정보 수집 및 이용목적이 달성된 후에는 해당 정보를 지체없이 파기합니다. 파기절차 및 방법은 다음과 같습니다.

o 파기절차

회원님이 회원가입 등을 위해 입력하신 정보는 목적이 달성된 후 별도의 DB로 옮겨져(종이의 경우 별도의 서류함) 내부 방침 및 기타 관련 법령에 의한 정보보호 사유에 따라(보유 및 이용기간 참조) 일정 기간 저장된 후 파기되어집니다.

별도 DB로 옮겨진 개인정보는 법률에 의한 경우가 아니고서는 보유되어지는 이외의 다른 목적으로 이용되지 않습니다.

o 파기방법

전자적 파일형태로 저장된 개인정보는 기록을 재생할 수 없는 기술적 방법을 사용하여 삭제합니다.



■ 개인정보 제공

회사는 이용자의 개인정보를 원칙적으로 외부에 제공하지 않습니다. 다만, 아래의 경우에는 예외로 합니다.

o 이용자들이 사전에 동의한 경우

o 법령의 규정에 의거하거나, 수사 목적으로 법령에 정해진 절차와 방법에 따라 수사기관의 요구가 있는 경우



■ 수집한 개인정보의 위탁

회사는 서비스 이행을 위해 아래와 같이 외부 전문업체에 위탁하여 운영하고 있습니다.

o 위탁 대상자 : AA택배

- 위탁업무 내용 : 물품배송 또는 청구지 등 발송 및 반품 등의 업무

o 위탁 대상자 : KSNET

- 위탁업무 내용 : 신용카드, 현금결제등의 결제정보 전송



■ 이용자 및 법정대리인의 권리와 그 행사방법

o 이용자는 언제든지 등록되어 있는 자신의 개인정보를 조회하거나 수정할 수 있으며 가입해지를 요청할 수도 있습니다.

o 이용자들의 개인정보 조회,수정을 위해서는 "개인정보변경"(또는 "회원정보수정" 등)을 가입해지(동의철회)를 위해서는 "회원탈퇴"를 클릭하여 본인 확인 절차를 거치신 후 직접 열람, 정정 또는 탈퇴가 가능합니다.

o 혹은 개인정보관리책임자에게 서면, 전화 또는 이메일로 연락하시면 지체없이 조치하겠습니다.

o 귀하가 개인정보의 오류에 대한 정정을 요청하신 경우에는 정정을 완료하기 전까지 당해 개인정보를 이용 또는 제공하지 않습니다. 또한 잘못된 개인정보를 제3자에게 이미 제공한 경우에는 정정 처리결과를 제3자에게 지체없이 통지하여 정정이 이루어지도록 하겠습니다.

o 회사는 이용자의 요청에 의해 해지 또는 삭제된 개인정보는 "회사가 수집하는 개인정보의 보유 및 이용기간"에 명시된 바에 따라 처리하고 그 외의 용도로 열람 또는 이용할 수 없도록 처리하고 있습니다.



■ 개인정보 자동수집 장치의 설치, 운영 및 그 거부에 관한 사항

회사는 귀하의 정보를 수시로 저장하고 찾아내는 "쿠키(cookie)" 등을 운용합니다. 쿠키란 웹사이트를 운영하는데 이용되는 서버가 귀하의 브라우저에 보내는 아주 작은 텍스트 파일로서 귀하의 컴퓨터 하드디스크에 저장됩니다.

회사은(는) 다음과 같은 목적을 위해 쿠키를 사용합니다.

o 쿠키 등 사용 목적

1. 회원과 비회원의 접속 빈도나 방문 시간 등을 분석, 이용자의 취향과 관심분야를 파악 및 자취 추적, 각종 이벤트 참여 정도 및 방문 회수 파악 등을 통한 타겟 마케팅 및 개인 맞춤 서비스 제공

2. 귀하는 쿠키 설치에 대한 선택권을 가지고 있습니다. 따라서, 귀하는 웹브라우저에서 옵션을 설정함으로써 모든 쿠키를 허용하거나, 쿠키가 저장될 때마다 확인을 거치거나, 아니면 모든 쿠키의 저장을 거부할 수도 있습니다.

o 쿠키 설정 거부 방법

1. 쿠키 설정을 거부하는 방법으로는 회원님이 사용하시는 웹 브라우저의 옵션을 선택함으로써 모든 쿠키를 허용하거나 쿠키를 저장할 때마다 확인을 거치거나, 모든 쿠키의 저장을 거부할 수 있습니다.

2. 설정방법 예(인터넷 익스플로어의 경우) : 웹 브라우저 상단의 도구 > 인터넷 옵션 > 개인정보

3. 단, 귀하께서 쿠키 설치를 거부하였을 경우 서비스 제공에 어려움이 있을 수 있습니다.



■ 개인정보에 관한 민원서비스

회사는 고객의 개인정보를 보호하고 개인정보와 관련한 불만을 처리하기 위하여 아래와 같이 개인정보관리책임자를 지정하고 있습니다.

o 개인정보관리책임자

성명 : AAA

직책 : AAA

전화번호 : AAA-AAA-AAA

이메일 : AAA@AAA.com

o 귀하께서는 회사의 서비스를 이용하시며 발생하는 모든 개인정보보호 관련 민원을 개인정보관리책임자 혹은 담당부서로 신고하실 수 있습니다.

o 회사는 이용자들의 신고사항에 대해 신속하게 충분한 답변을 드릴 것입니다.

o 기타 개인정보침해에 대한 신고나 상담이 필요하신 경우에는 아래 기관에 문의하시기 바랍니다.

개인정보침해신고센터 (privacy.kisa.or.kr / 국번 없이 118)

대검찰청 사이버범죄수사단 (www.spo.go.kr / 02-3480-2000)

경찰청 사이버안전국 (www.ctrc.go.kr/ 국번 없이 182)

</textarea>



<div id="policy">

<input type="checkbox" name="policy_chk" id="policy_chk"/>

<label for="policy_chk"><span class="policy_chk">개인정보취급방침</span>을 읽고 동의합니다. <span class="required">*</span></label>

</div>



<div><input type="text" name="policy_err_all" id="policy_err_all" value="이용약관 및 개인정보취급방침에 동의하셔야 합니다." style="display:none; width:50%; background:#f6f6f5; padding:8px 40px; color:#393939; font-size:14px;"/></div>

<div><input type="text" name="policy_err" id="policy_err" value="개인정보취급방침에 동의하셔야 합니다." style="display:none; width:50%; background:#f6f6f5; padding:8px 40px; color:#393939; font-size:14px;"/></div>

Posted by cpu21
HTML & Publishing2017. 12. 30. 02:04

HTML4 미디어 재생 태그 : embed, object

HTML5 미디어 재생 태그 : audio, video


<audio src="bgm.mp3" controls="false" autoplay="true" loop="" preload="auto" type="audio/mp3"></audio></div>


<audio autoplay="autoplay" loop="loop" controls="controls">

<source src="bgm.mp3" type="audio/mpeg" />

</audio>



<audio autoplay controls>

<source src="bgm.mp3" type="audio/mp3">

<source src="bgm.ogg" type="audio/ogg">

 </audio>

audio 태그 옵션들 :
    - src : URL (소스의 URL)
    - height : 숫자 (높이 픽셀 값)
    - width : 숫자 (넓이 픽셀 값)
    - controls : "controls", "", - (비디오의 재생, 볼륨 등 제어기들을 표시, "controls"나 공백이나 태그 안에 값없이 controls만 적어줘도 적용됨)

- muted : "muted", "", - (음소거)

- poster : URL (로드되지 않고 있을 때 처음에 표시될 이미지의 URL / 동영상 파일을 재생할 수 없을 경우 보여지는 이미지 파일 지정)

- loop : "loop", "", - (반복 재생)

- autoplay : "autoplay", "", - (자동 재생)

- mediagroup : 문자열 (같은 아이디로 묶어준 비디오와 오디오 스트림들 끼리 동기화 시켜주는 그룹으로 취급)

- preload : "none", "metadta", "auto" ("none": 사용자가 비디오를 필요로하지 않을 것이라고 명시, 미리 다운로드 하지 않음 / "metadata": 사용자가 비디오를 필요로 하지 않을 것이지만 기본 정보, 즉 메타정보(크기, 첫 프레임, 비디오 길이, 등)만 가져온다. / "auto": 사용자가 비디오를 필요로하고 미리 다운로드를 한다.(기본값)


 - 출처(All-round programmer) : http://unikys.tistory.com/278



<object data="bgm.mp3" width="100%" height="50"></object>


<object data="bgm.mp3" type="audio/mp3">

<param name="AutoStart" value="true">

<param name="AutoRewind" value="true">

</object>


<object type="audio/x-mpeg" data="bgm.mp3" width="200" height="20"> : 크롬 실행 안됨 / 익스플로러11 및 엣지 실행됨

<param name="src" value="bgm.mp3"> src: 파일의 경로 지정

<param name="autoplay" value="true"> autoplay: 파일을 자동으로 플레이할지 선택(예:true, 아니오:false)

<param name="autostart" value="true"> autoplay와 동일(예:true, 아니오:false)

</object>


<object type="audio/x-mpeg" data="bgm.mp3" width="200" height="20" autoplay="true"> : 크롬 실행 안됨 / 익스플로러11 및 엣지 실행됨


 - 출처(지구별 안내서) : http://aboooks.tistory.com/209



<embed src="bgm.mp3" type="application/x-mplayer2" autostart=true width="200" height="20"></embed> : 크롬 실행 안됨 / 익스플로러11 및 엣지 실행됨






모바일웹에서 오디오 파일 재생하기

<audio src="demo.mp3" controls autoplay loop> 

HTML5 audio not supported

</audio>

* iOS계열에서는 자동재생 기능 제한

* controls 특성 : 브라우저에 기본 제공 재생 컨트롤을 표시하도록 지정함, 기본 제공 컨트롤의 기능과 모양은 브라우저마다 다를 수 있음

- 출처(작성자 보라) : https://blog.naver.com/tollu09/220834230244






HTML5 Video 태그 모바일에서 자동재생 안되는 경우, 안드로이드

HTML5의 Video 태그를 사용하여 미디어 파일을 재생시 autoplay 속성을 사용하여 자동 재생하는 것이 가능합니다. 하지만 모바일의 경우 자동재생이 되지 않을 수 있습니다. 왜 모바일에서만 자동재생 기능이 되지 않을까요?

이유는 모바일 브라우저에서 허용되기 않기 때문입니다. 만약 모바일 환경의 안드로이드폰이라면 자동 재생시 음소거를 설정해두세요. 음소거 영상의 경우에만 자동재생이 허용됩니다. 즉 video 태그에 muted와 autoplay 속성이 동시에 필요합니다.


# HTML5 모바일폰 자동재생하기

아래 에제는 간단하게 모바일에서 재생 가능하도록 변경한 코드입니다.

<video autoplay muted>

<source src="test.mp4" type="video/mp4"><source/>

</video>


이 방법이 아니라면 자바스크립트를 추가하여 페이지 로딩 후 video 영상에 play() 이벤트 메소드를 실행하도록 하는 방법도 있습니다. 이 방법 역시 가능하나 단점이라면 스크립트가 동작 안하는 환경에서는 플레이가 되지 않을 것입니다.

 - 출처 : https://webisfree.com/2017-08-03/html5-video-태그-모바일에서-자동재생-안되는-경우-안드로이드




적용 사이트

해피브런치 : http://happybrunch.net/content_2.html






동영상 웹표준 소스

 - 출처 : 0ONEHAN : http://ssireky.cafe24.com/xe/index.php?mid=board&page=1&document_srl=392

 - 작성자 : 접신

 - 작성일 : 2015-October-15



동영상 웹표준 및 웹접근성(유효성검사시 embed 오류발생 웹표준 준수일때는 embed 삭제사용)



[wmv] 재생소스


<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902" width="160" height="20">

<param name="src" value="test.wmv" />

<param name="controller" value="true" />

<param name="autoplay" value="false" />

<param name="autostart" value="0" /> 

<param name="pluginspage" value="http://www.apple.com/quicktime/download/" /> 

<!--[if !IE]>-->

<object type="audio/x-ms-wmv" data="test.wmv" width="160" height="20">

<param name="src" value="test.wmv" />

  <param name="controller" value="true" />

<param name="autoplay" value="false" />

<param name="autostart" value="0" />

  <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />

<embed src="test.wmv" type="audio/x-ms-wmv" width="160" height="20" autostart="false" controller="true" ></embed>

<p>동영상 다운로드 링크</p>

</object>

<!--<![endif]-->

</object>




[mp3] 재생소스


<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="160" height="20">

<param name="src" value="test.mp3" />

<param name="controller" value="true" />

<param name="autoplay" value="false" />

<param name="autostart" value="0" /> 

<param name="pluginspage" value="http://www.apple.com/quicktime/download/" /> 

<!--[if !IE]>-->

<object type="audio/x-mpeg" data="test.mp3" width="160" height="20">

  <param name="src" value="test.mp3" />

<param name="controller" value="true" />

  <param name="autoplay" value="false" />

<param name="autostart" value="0" />

  <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />

<embed src="test.mp3" type="audio/x-mpeg" width="160" height="20" autostart="false" controller="true" ></embed>

<p>동영상 다운로드 링크</p>

</object>

<!--<![endif]-->

</object>




["type"은 다음의 목록에 따라 변경]

- au (type="audio/basic")

- wav (type="audio/wav" or "audio/x-wav")

- ra (type="audio/x-pn-realaudio") 

- mp3 (type="audio/x-mpeg")

- wma (type="audio/x-ms-wma") 

- wmv (type="audio/x-ms-wmv")




["class id" 와 "codebase"]

- Quicktime player :

■ classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 

■ codebase=http://www.apple.com/qtactivex/qtplugin.cab


- Windows media player :

■ classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"

■ codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902"


- Real Audio :

■ id=RVOCX

■ classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"


- Flash Shockwave :

■ classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

■ codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,22,0"

'HTML & Publishing' 카테고리의 다른 글

유튜브 동영상 반응형 삽입  (0) 2018.02.03
SNS 아이콘 아미지 모음  (0) 2018.01.14
호스팅 php 버전 체크방법  (0) 2018.01.11
php : get, post method  (0) 2017.12.31
다음 지도 삽입  (0) 2017.12.19
Posted by cpu21
WordPress/Core2017. 12. 26. 17:01

워드프레스 post 나 page 안에서 jQuery를 사용하는 방법


우선 소스보기로 jQuery가 추가 되어 있는지 확인 해보세요.

그리고 워드프레스에서 "$" 변수는 사용하실 수 없습니다.

"$" 변수 대신 "jQuery" 변수로 사용하셔야 합니다.


<script type="text/javascript">

jQuery(document).ready(function() {

  jQuery("h2").click(function() {

    jQuery("h2").css({ "color" : "red" });

  });

});

</script>



또는 아래처럼 해주셔도 됩니다.


<script type="text/javascript">

jQuery(document).ready(function($) {

  $("h2").click(function() {

    $("h2").css({ "color" : "red" });

  });

});

</script>


- 출처 : http://www.cosmosfarm.com/threads/document/2247

Posted by cpu21
Shopping Mall2017. 12. 20. 14:57

쇼핑몰에 네이버페이만 셋업할 경우의 비용



카페24 : 카페24 자체적으로 드는 비용은 없음.
셋업 위치 : 상점관리 > 마케팅 제휴서비스 > 네이버페이 서비스



코드엠샵 - 네이버페이 안내 : https://www.pgall.co.kr/npay-info/

* 네이버페이만 셋업할 경우 가입비 없음


https://www.pgall.co.kr/fee/




네이버페이 가입시 유의사항

* 가맹점 가입 시에는 아래의 내용을 반드시 사전 숙지하시어 가입 및 이용에 불편이 없으시기 바랍니다.

1. 네이버페이센터 가입을 위해서는 쇼핑몰 사이트(PC 또는 모바일웹)를 운영하고 있어야 하며, PC와 모바일웹을 각각 운영하는 경우 모두 주문/결제 시스템을 연동해 주셔야 합니다.

2. 네이버페이센터 가입 신청 전 PG사에 가입되어 있어야 하며, 실제 결제 시 해당 PG사를 통한 정상적으로 결제가 진행되어야 합니다.

3. 네이버페이센터 가입 신청 전 통신판매업 신고를 완료하셔야 하며, 신고된 정보는 공정거래위원회에서 정상적으로 조회가 가능해야 합니다.

4. 쇼핑몰 하단에 '상호명, 사업자번호, 대표자명, 소재지, 통신판매번호'가 모두 노출되어야 하며, 해당 정보는 제출서류(사업자등록증) 및 공정거래위원회에서 조회되는 정보와 일치해야 합니다.

https://admin.pay.naver.com/join/step1?nidYn=true




- 네이버페이센터 : https://admin.pay.naver.com/
- https://namu.wiki/w/네이버%20페이
  * 나무위키 : 다른 하나는 역시 결제에 대한 안전성. 네이버페이는 판매자에게 직접 돈을 송금하는게 아니라 네이버페이 계좌로 송금하여 일단 돈을 예치시키고, 구매자가 물건을 안전하게 받은 후에 구매 확정을 클릭하면 판매자에게 예치금이 넘어가는 시스템이다. 안전거래 시스템과 비슷하지만, 일반적인 안전거래하곤 다르게 수수료가 들지 않는다는 장점이 있다. 이런 점 때문에 중고나라나 각종 네이버 카페에 적용된 거래 게시판에서도 안전거래 방법으로 네이버페이를 지정할 수 있다. 단, 이렇게 할 경우에는 수수료가 든다. 수수료는 다른 안전거래보다 저렴한 편.

Posted by cpu21
Bootstrap2017. 12. 20. 11:30


[bootstrap] 부트스트랩 – 탭(Tabs)에 이벤트 기능 추가



Head






Javascript

$(document).ready(function() {
    $('a[data-toggle="tab"]').on('hidden.bs.tab', function(e){
	alert("이벤트 실행됨");
    });
});




Body

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.




설명

data 속성을 사용할 때 탭 목록의 각 a 태그에 data-toggle=”tab”을 추가했습니다. 자바스크립트를 사용할 때도 모든  a 태그에 대해서 .tab(‘show’) 메서드를 사용합니다. e.preventDefault();는 클릭했을 때 상단으로 이동하는 것을 방지합니다.


$(“#myTab a”).click(function(e) {

e.preventDefault();

$(this).tab(“show”);

});

 



특정 탭을 활성화하기 위해 .active 선택자를 사용합니다. 하지만, 이를 무시하고 다른 탭을 활성화하고 콘텐츠를 나타나게 하려면 자바스크립트를 사용합니다. 아래와 같이 여러가지 선택자를 사용할 수 있습니다.


$(“#myTab a[href=’#profile’]”).tab(“show“);  // a 태그의 href=”#profile” 속성이 있는 탭

$(“#myTab a:first”).tab(“show“);          // 첫번째 탭

$(“#myTab a:last”).tab(“show“);          // 마지막 탭

$(“#myTab li:eq(2) a”).tab(“show“);   // 3번째 탭

 


탭 목록의 a 태그에는 href 또는 data-target 속성을 사용할 수 있습니다. 다만, data-target을 사용하면 마우스를 오버했을 때 커서가 손모양으로 나타나지 않으므로 스타일시트에서 cursor 속성을 pointer로 설정(cursor:pointer;)해야 합니다.

 


이벤트는 4가지가 있으며 다음과 같은 형태로 사용합니다. e.target은 활성화되는 탭을 가리키고 e.relatedTarget은 이전에 활성화 된 탭을 가리킵니다. A 탭이 활성된 상태에서 B탭을 클릭하면 A 탭이 e.relatedTarget이 되고 B 탭이 e.target이 됩니다.


$(“a[data-toggle=’tab’]”).on(“show.bs.tab”, function(e) {

e.target   // newly activated tab

e.relatedTarget  // previous active tab

});

 


.show.bs.tab : 클릭한 탭이 보이기 전에 실행합니다.

.shown.bs.tab : 클릭한 탭이 보인 후에 실행됩니다. 위와 시간적으로 거의 차이가 없습니다.

.hide.bs.tab : 이전의 탭이 감춰지기 전에 실행됩니다.

.hidden.bs.tab : 이전의 탭이 감춰진 후에 실행됩니다.




출처 : http://zzznara2.tistory.com/593

Posted by cpu21
jQuery2017. 12. 20. 03:05
스키마(http, https)에 따른 상대적인 주소 처리


이미지의 경우는 다음과 같이 처리

<img src="//sub.l2j.co.kr/image/ssl.jpg" />




프로토콜을 확인후 리로딩

<script type="text/javascript">

if (window.location.protocol != "https:")

//window.location.href = "https:" + window.location.href.substring(window.location.protocol.length);

location.href = location.href.replace(/^http:/, 'https:')

</script>



엘리펀 웹사이트(https://elefuns100.cafe24.com)에 적용됨 : inc/header.php


출처 : http://l2j.co.kr/2783 [L2J with DuraBoys]

Posted by cpu21
jQuery2017. 12. 19. 15:47

indexOf : 문자열내에 찾을 문자열이 있는지 여부를 알고싶을 때 사용

 - "문자열".indexOf("찾을 문자")
 - 찾는 문자열이 없는 경우 : -1을 반환
   * -1이 의미 : 여기서는 -1을 확인값으로 사용하였는데 그 이유는 만약에 특정 문자열이 해당하는 텍스트 안에서 찾았다면
     if 문에서 절대 -1이 될 수 없는 0 이상의 양수 값이기 때문다. 그래서 -1은 값이 없음을 의미.
     출처 : https://webisfree.com/2015-06-22/[자바스크립트]-배열-또는-문자열에-indexof()-사용한-특정-문자-검색

 - 찾는 문자열이 있는 경우 : 글자위치를 나타내는 숫자를 반환
 - 배열에서도 사용 가능. 원하는 특정 배열값의 존재여부 등을 확인할 수 있으며, 위치값을 index로 반환

 

ex1)

var txt1 = "jQuery";

var TxtValue = txt1.indexOf('y');    //5를 반환

 

 

ex2)

var txt2 = "javascript";

if (txt2.indexOf('sc') != -1) {

//txt2에 sc가 있을 경우의 실행문

};

 

 

match() : 정규표현식에 맞는 문자열을 찾음. 문자열을 찾으면 배열로 반환하고 없으면 null 반환

 - 선택자.match(/찾을문자열/)로 검색
 - 배열에서는 사용불가. 문자열에서만 사용가능

 

ex3)

var txt3 = "Good guy Bad guy Strange guy";
if (txt3.match(/guy/)) {

//txt에 guy가 있을 경우의 실행문

};

 

 

ex4) 출처 : https://blog.naver.com/psj9102/220900724301, 원출처 : http://uyeong.tistory.com/189

var string = "Hellow I'm NoDe. Welcome to my develop Blog.";

var mat = "lo";

 

    var bool1 =  string.match(mat);

if (string.match(mat) !== null) {

alert("MATCH : " + bool1);             //lo를 반환

}

 

var bool2 = (string).search(mat);

if ((string).search(mat) !== -1) {

alert("SEARCH : " + bool2);             //3을 반환

}

 

 

ex5) 출처 : http://gnuj.tistory.com/78 (그닉의 사생활..? | [JavaScript] 알아두면 좋은 함수), 원출처 : http://uyeong.tistory.com/189 (UYEONG's Blog)

var str1 = 'IMPELLITTERI';

console.log(str1.match(/P/)); //반환값 : "P" (index: 2, input: "IMPELLITTERI")

 

var str2 = "Screaming Symphony";

console.log(str2.match(/ing/)) //반환값 : "ing" (index: 6, input: "Screaming Symphony")

 

var str3 = 'Good Guy, Bad Guy, Strange Guy';

console.log(str3.match(/Guy/g)) //반환값 - 배열 : ["Guy", "Guy", "Guy"]

console.log(str3.match(/Guy/)) //반환값 : "Guy" (index: 5, input: "Good Guy, Bad Guy, Strange Guy")

 

var str4 = 'this is just a string with some 12345 and some !#$@# meixed in.!';

console.log(str4.match(/[a-z]+/gi)); //반환값 : ["this", "is", "just", "a", "string", "with", "some", "and", "some", "meixed", "in"]

console.log(str4.match(/[a-z]+/gi)[1]); //반환값 : is

 

 

 

 

replace/replaceAll 함수

 - 특정 문자를 다른 문자로 치환
 - 바꿀 문자열을 직접 입력 또는 정규표현식을 사용
 - 사용법 : 선택자.replace("찾을 문자열", "변경할 문자열")
 - 모두 바꾸고자 할 때는 replaceAll 사용

 

ex6) myEx

$('li > p').each(function() {

var AAA = $(this).text();

$(this).text(AAA.replace('...', ''));

});

 

 

ex7) 출처 : http://gnuj.tistory.com/78 (그닉의 사생활..? | [JavaScript] 알아두면 좋은 함수), 원출처 : http://uyeong.tistory.com/189 (UYEONG's Blog)

var str5 = 'Hello, World';

str5 = str5.replace(/World/, 'MyBlog');

console.log(str5); //반환값 : Hello, MyBlog

 

var str6 = 'J!o!h!n!Smith!!~';

str6 = str6.replace(/[^A-Za-z\d_-]+/,'');         //처음나오는 특수문자 제거

console.log(str6); //반환값 : Jo!h!n!Smith!!~

 

var str7 = 'J!o!h한n !Sm글ith!!~';

str7 = str7.replace(/[^A-Za-z\d_-]+/g,'');                 //문자열 사이의 띄어쓰기 포함하여 특수문자 전부제거

console.log(str7); //반환값 : JohnSmith

 

 

 

 

jQuery의 text() 메소드를 통한 값의 직접 변경

var CatName=$("h2").text();

if (CatName=="Category: News"){

    $("h2").text("News");

}

 

.html() : 선택 요소에 html을 코드를 넣거나 받아 올 수 있음. 함수 htmlspecialchars() 적용됨.

.text() : 선택 요소의 텍스트 내용을 설정 및 받아옴

.val() : form의 선택 요소 텍스트 값을 설정 혹은 받아옴

 
 

 

Posted by cpu21
jQuery2017. 12. 19. 15:45

ex1 :

$(".str_submenu > ul > li > ul.sub-menu > li").each(function(){

   if($(this).hasClass("active")===true){

       //$(this).parent().css('display','block');

   } 

});



ex2-1 :

jQuery('li.amazingcarousel-item').each(function(index) {

jQuery(this).hover(

function() {

jQuery(this).find('img').attr("src", jQuery(this).find('img').attr("src").replace("gray.jpg", "on.jpg"));

},

function() {

jQuery(this).find('img').attr("src", jQuery(this).find('img').attr("src").replace("on.jpg", "gray.jpg"));

}

);

});



ex2-2 :

jQuery('li.amazingcarousel-item').each(function(){

jQuery(this).find('img').hover(

function() {

jQuery(this).attr("src", jQuery(this).attr("src").replace("gray.jpg", "on.jpg"));

},

function() {

jQuery(this).attr("src", jQuery(this).attr("src").replace("on.jpg", "gray.jpg"));

}

);

});



Posted by cpu21