두부찌개

swiper.js는 페이징 커스텀이 가능하다.

아래와 같이 작업

* html

<div class="swiper myswiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
    </div>
    <div class="swiper-pagination"></div>            
</div>

* script

<script>
    var bullet = [ ['bullet01', 'text1'],
                   ['bullet02', 'text2'],
                   ['bullet03', 'text3']];
    
    
    var swiper = new Swiper(".myswiper", {
        pagination: {
            el: ".swiper-pagination",
            renderBullet: function (index, className) {
                return '<div class="' + className + ' ' + bullet[index][0] + '"><span>' + bullet[index][1] + '</span></div>';
            }
        },
        loop: true,
        effect: 'fade',
        allowTouchMove: false,
        autoplay: {
            delay: 5000,
        },
    });
</script>

2024년 갑진년 새해 운세를 보고 싶었는데 아는 곳이 없었다.
그렇게 23년 말, 지인이 아주 용한 점집이 있다 해서 소개받아 찾아갔다.

'닌무사'는 서울시 서초구 양재동 포이사거리 삼호물산 근처에 있다.

대중교통은 3호선 양재역 5번 출구, 신분당선 양재시민의숲로 접근성도 아주 좋았다.
주차도 가능하니 자차를 이용해서 가도 좋겠다.
(예약 필수 010-8200-2872)
 

 
나는 어릴때 부터 평범하게 자라지 못했다. 
세상이 불공평하다고 원망도 많이 했고, 당하지 않으려고 독하게 행동한 적도 많았다.
아주 돈에 한이 너무 많아 악착같이 모으려 해도 참~ 인생이 생각처럼 안 되는 게
금전이 나갈 때는 쏟아지게 나가더라.
 
너무 힘들 때 찾아간 점집에서 헛소리만 뻑뻑 듣고 온 뒤로 아예 발을 끊었었다.
그런데 친구가 어느날 점을 보고 와서는 서초구 점집 닌무사 선생님이 신점을 진짜 잘보신다고,
엄청 용하시다는 말에 나도 모르게 예약을 해버렸다.
 

 
뻔한 얘기를 하지 않을까 괜히 온건 아닌가 걱정을 했었지만..
웃으며 반겨주신 닌무사 선생님은 내 얼굴을 보자마자 나의 제일 큰 고민을 바로 말씀하셨다.
다른 사람들은 전혀 모르고 나만 속에 꽁꽁 숨기고 있던 것도 바로 꿰뚫어 보시더라.

정말 의심 많은 성격인데도 불구하고 너무 놀랐고 아 ~ 정말 잘 찾아왔다. 생각했다.

(소개해준 친구에게 밥을 사야겠음 ㅋㅋ)

 
양재 닌무사 점집은 일반적으로 보이는 점집의 분위기와는 전혀 달랐다.
무섭지 않을까 또 엄청 혼나고 오면 어쩌지 불안한 마음이 있었는데 
점집이 아주 깨끗하고 선생님께서 무척 따뜻하게 대해주셔서 꼭 부모님 집에 온 것처럼 마음이 편안했다.
 

 
신점 상담을 시작하며 내가 살아온 삶부터
나의 직업, 나의 집안, 부모님을 죽~ 말씀하시는데 속으로
 
'어? 맞는데?'
'아~~ 맞아. 그게 문제였지.'
 
계속 놀람의 연속 ㅋㅋ
너무 놀래서 "아니 선생님 어떻게 이렇게 자세히 아셔요?" 여쭈니
신령님께서 다 말씀해 주셔서 아신다고 하셨다.
 

정말 누구나 할 수 있는 뻔한 얘기가 아닌 진짜 내 속을 들여다보신 듯했다. 

 
나는 이직과 결혼 두 가지를 물어보러 갔었다.
이직은 하고 싶지만 재취업이 너무 번거로워서 선뜻 결정을 못 내리고 있었다.
여쭤보니 선생님께서는 가까운 시일 내로 입사 제의가 들어오니 이직 준비를 미리 하라고 하셨는데

양재동 닌무사 점집을 다녀온 후 정말 선생님 말씀대로 2주 만에 제의를 받았다. (소름...)

취업뿐 아니라 내 앞으로의 삶을 말씀해 주시면서 진심 어린 조언을 해주셨다.
( 닌무사 선생님을 1년 전에 찾아뵈었으면 내가 이 고생 안했는데 ㅠㅠ )
 

양재 점집 닌무사 선생님은 여성 최초 풍수지리 명인이다.

법당에 걸려있는 명인패를 보니 더욱 믿음이 생겼다.^^
 

닌무사 선생님께서는 외부 기도를 많이 다니셔서 상담은 모두 우선 예약제로 받고 계신다.

상담, 굿 외의 시간에는 산과 바다에서 기도하며 보낸다고 하셨다.
명산대천 기도 다닐 때 신도분들 초발원을 하느라
차에는 항상 초를 몇 박스씩 싣고 다니신다고 했다.ㅎㅎ
 

상담은 너무 개인적이 내용들이라 세세하게 다 적을 수 없지만
여기에 쓴 내용은 100% 실제 있었던 일을 그대로 썼다.

너무 개인적인 내용이라 선생님의 칼날 같은 점사를 정말 10% 밖에 쓰지 못했다. ㅠㅠ
(전부 적으면 내가 너무 부끄럽고 창피하다...)

 
확실히 말할 수 있는 것은

정말로 속시원히 칼날같이 집어주셔서 답답한 마음이 아주 뻥~ 뚫렸다.

답답함이 정말 많이 해소가 되고 누구도 내게 해주지 않은 조언을 받을 수 있었다.
정말 큰 위로를 받고 왔다. 
내가 정말로 눈물이 없는 사람인데도 선생님 앞에서 얼마나 울었는지 모른다 ㅠㅠ
 
집 근처 가까운 곳에 이렇게 영험한 양재 점집이 있다니 너무 좋고 든든하다.
 

양재 점집 '닌무사' 예약 필수

010-8200-2872

(3호선) 양재역 5번 출구 
(신분당선) 양재시민의숲역 2번 출구
서초구 양재동 포이사거리 삼호물산 인근
 

해결방법

- 자동 재생시 음소거 옵션을 함께 넣기. (음소거 영상의 경우에만 자동재생이 허용됨.)

- 스크립트로 play 해주기.

html

<video id="video" preload="auto" autoplay="" loop="" muted>
	<source src="video.mp4" type="video/mp4">
</video>

js

var video = document.getElementById("video");
video.play();
setTimeout(function(){video.play()},500);
if(video.paused) video.play();

모달팝업 안에 있을때, 반응형처리할때 등등

display: none 에서 block으로 바뀌면 슬라이드를 다시 설정? 해야함.

- swiper

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

setTimeout(function(){

$(window).resize();

swiper.update();

},100);

});

-slick

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

target.slick('resize');

});

px값은 브라우저에서 절대값으로 인식해 1px은 항상 정확히 1px로 표시되는 반면 em과 rem은 가변 단위로서, 디자인에 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로 변환된다.

1. rem

페이지 최상위(root)요소, 즉 html 요소의 폰트 크기가 기준이 되어, 최상위 요소의 폰트 크기에다 rem 단위로 지정한 숫자를 곱한 값이 px로 변환된 값이다. 

변환된 픽셀 크기는 페이지 최상위(root)요소, html 요소이 폰트 크기가 기준이 된다. 최상위 요소의 폰트 크기에다 rem 단위로 지정한 숫자를 곱한 값이 변환된 값이다.

2. em

스타일을 지정한 요소가 기준이 되어 지정한 요소의 폰트 크기를 곱한 값이 px로 변환된 값이다.

*스타일 상속

em 단위가 상위 요소의 폰트 크기와 직접 연관되어 있다고 잘못 알려져 있다. W3 명세서에 의하면, 상위 요소가 아닌 실제 사용된 요소의 폰트 크기와 직접 연관되어 있다. 상위 요소의 폰트 크기가 em값에 영향을 줄 수는 있지만, 그것은 오로지 스타일 상속 때문이다.

모든 요소가 자동으로 상위 요소로부터 폰트 크기를 상속받기 때문에 em 단위로 작업을 할 땐 상속과 관련해서 문제가 있을 수 있다. 상속의 영향을 뒤엎는 방법은 오로지 폰트 크기를 px 혹은 vw와 같이 상속에 영향을 받지 않는 단위를 써서 일일이 지정해 주어야 한다.

em 단위는 상위 요소와는 상관없이 실제 사용된 요소의 폰트 크기에 비례 하다.

3. 브라우저 설정

기본적으로 브라우저의 폰트 크기는 보통 16px로 설정되어 있지만, 사용자에 의해 최소 9px부터 72px까지 변경될 수 있다. html 요소의 폰트 크기는 고정 을 명시적으로 지정하여 덮어씌우지 않으면 브라우저에 설정된 값을 상속받게 된다.

html 요소에 em 기반의 폰트 크기를 지정했다면, 변환된 픽셀값은 브라우저에 지정된 폰트 크기의 배수가 된다. 

html 요소가 font-size: 1.25em 일 경우 최상위 요소의 폰트 크기는 브라우저에 설정된 폰트 크기의 1.25배 이다.

브라우저 폰트 크기 설정이 16px일 경우 최상위 요소의 폰트 크기는 20px이다.

계산 1.25 X 16 = 20.

4. em 과 rem 차이점

* rem

페이지 최상위(root)요소, 즉 html 요소의 폰트 크기에 따라 결정되고 이 폰트 크기는 상속에 영향을 받지 않는 절대 단위를 지정해서 직접 덮어씌우지 않았다면, 브라우저에 설정된 폰트 크기를 그대로 상속 받게 된다.

*em

사용된 요소의 폰트 크기에 따라 결정되고 이 폰트 크기 또한 상속에 영향을 받지 않는 절대 단위를 가지고 명시적으로 덮어 씌우지 않았다면, 상위 요소로부터 상속의 영향을 받는다.

출처 : https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

하이브리드 앱으로 만들어진 루시드 플레이어 작업중에 안드로이드 4.4.2 버전에서 화면이 왕창 깨졌음.

아래는 안먹는 css 정리한 것.

- inline-block : width를 지정해주어야함. 대체적으로 width를 지정해주면 틀어짐을 수정할 수 있음.

- border : border 두께를 vw로 지정하면 안먹음.. 고정값 픽셀로 주자..

- border-radius : 뭔가 되는듯 안되는듯..... 모르겠음..ㅜㅜ

*페이스북 공유하기

a링크에 ( http://www.facebook.com/sharer/sharer.php?u=공유할링크 ) 넣어주면 됨. 

공유시 들어갈 요약정보는 메타 태그에서 설정할수 있음.

ex)

-html

<meta property="og:type" content="website" />

<meta property="og:title" content="제목" />

<meta property="og:url" content="사이트 url" />

<meta property="og:description" content="내용 설명" />

<meta property="og:image" content="이미지 경로" />

<a href="javascript:shareFB();" class="fb" title="facebook 공유">facebook</a>

-script

function shareFB()

{

   window.open('http://www.facebook.com/sharer/sharer.php?u=사이트 url');

}

*** 메타태그에 설정한 내용이 잘못되어 수정하여도 수정된 내용이 페이스북 공유 기능에서 바로 적용되지 않을 수 있다.

이때 공유 디버거 (https://developers.facebook.com/tools/debug/) 에 접속하여 해당 페이지를 다시 디버깅하면 바로 적용이 된다.

1. 간편하게 변환시켜주는 홈페이지

 (1) 아래 링크로 들어가서 시키는 대로 하면 됨.

https://convertio.co/kr/jpg-ico/

2. 포토샵으로 파일 변환

 (1) 32비트인지 64비트인지 확인하고 아래 파일을 다운로드를 받고,

 (2) C:\Program Files\Adobe\Adobe Photoshop CC 2018\Required\Plug-ins\File Formats 경로에 넣는다.

 (3) 포토샵을 실행하면 ico가 추가되었음을 확인할수있다.

ICOFormat.8bi

ICOFormat64.8bi

사용할 일이 생길때마다 찾기가 넘나 귀찮음..

var isMobile = false; //initiate as false

      if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) isMobile = true;

if( !isMobile )

{

//pc

}

else

{

//mobile

}

머리가 붕어인지 매번 쓰면서 까먹음ㅜㅜ 다음엔 안찾아보려고 정리해두었음.

1. 유튜브 동영상 퍼오기

<iframe src="http://www.youtube.com/embed/동영상ID" frameborder="0" allowfullscreen></iframe>

2. rel=0 (기본값 1)

재생이 끝나고 관련 동영상 노출 여부 (노출 1, 비노출 0)

<iframe src="http://www.youtube.com/embed/동영상ID?rel=0" frameborder="0" allowfullscreen></iframe>

3. autoplay=1 (기본값 0)

동영상 자동재생 여부 (자동재생 1, 수동재생 0)

<iframe src="http://www.youtube.com/embed/동영상ID?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>

4. loop=1 (기본값 0)

동영상 반복재생 여부 (반복재생 1, 1번재생 0)

* loop는 playlist 매개변수와 같이 사용해야 동작함 (1개의 동영상을 반복재생할때 같은 동영상id를 넣어주면 됨.)

<iframe src="http://www.youtube.com/embed/동영상ID?rel=0&loop=1&playlist=동영상ID" frameborder="0" allowfullscreen></iframe>

5. start=204 (단위 초)

동영상 시작부분에서 특정 시간 이후에 동영상 재생을 시작

<iframe src="http://www.youtube.com/embed/동영상ID?rel=0&start=204" frameborder="0" allowfullscreen></iframe>

* 여러개의 매개변수를 사용할 때

http://www.youtube.com/embed/동영상ID?첫번째변수=값&변수=값&변수=값

첫번째 변수를 붙일때는 ?를 앞에 붙이고 그 뒤에 변수 사이는 &로 구분함.

* 더 자세한 내용은 아래 링크로

https://developers.google.com/youtube/player_parameters?hl=ko