Translate

레이블이 HTML인 게시물을 표시합니다. 모든 게시물 표시
레이블이 HTML인 게시물을 표시합니다. 모든 게시물 표시

2019년 12월 13일 금요일

[JavaScript] 부모창이 닫힐 때 함께 닫히는 종속 자식창



Laptop
운영체제 Windows 10 Pro 64bit
개발환경 Chrome 버전 78.0.3904.108

window.open으로 여는 팝업에서 부모창이 종료될 때 그 부모창에서 열었던 팝업들을 함께 닫아야 하는 경우가 있다.
원래는 dependent라는 옵션이 있었지만, 구버전에서만 지원하는듯 했다.

방법은 window.onunload 이벤트를 이용하는 것이다.
window.load 이벤트와 반대로 페이지가 종료될 때 함께 실행되는 함수라고 보면 된다.
다음 예제에서는 pop 이라는 전역변수를 선언한 뒤 버튼을 클릭할 때 객체를 리턴받고,
onunload 시 pop을 닫아 열렸던 팝업을 닫아준다.


<script>
var pop;
window.onunload = function() { pop.close(); }
</script>
<input onclick="pop = window.open('', '_blank', 'dialog,width=320,height=150,scrollbars=0'); " type="button" value="팝업" />

결과는 현재 이 글에 적용되어 있다.
아래 버튼을 누르면 작은 빈 창이 뜰텐데, 이 페이지를 닫거나 새로고침, 뒤로가기 해보면 함께 닫히는 것을 볼 수 있다.




- 참고 사이트: https://stackoverflow.com/questions/33523873/close-child-window-on-f5-refresh

[jQuery] option 태그 주석 처리하는 방법 (select 검색 기능 만들기)


Laptop
운영체제 Windows 10 Pro 64bit
개발환경 Chrome 버전 78.0.3904.108
jQuery 1.9.1

select 내부의 option 태그를 조건에 따라 보이거나 숨기고 싶을때, <span>태그로 둘러쌈으로써 구현할 수 있다.
jquery로 .wrap(), .unwrap() 함수를 이용하면 된다.

예)
<select>
  <option value="C">C</option>
  <option value="C++">C++</option>
  <option value="Java">Java</option>
  <option value="JavaScript">JavaScript</option>
</select>


$("select option[value='C']").wrap("<span/>");


<select>
  <span><option value="C">C</option></span>
  <option value="C++">C++</option>
  <option value="Java">Java</option>
  <option value="JavaScript">JavaScript</option>
</select>

단, unrwrap 시 html 구조가 select > span > option이 되므로 선택자 입력 시 주의해야한다. (지금의 경우에는 위 wrap 코드에서 unwrap으로만 바꾸면 된다.)

이것을 응용하여 검색창에 입력된 단어를 포함하는 내용만 나오도록 option을 조정하는 기능을 만들 수 있다.




- 참고 사이트: https://stackoverflow.com/questions/36066953/css-hide-options-from-select-menu-on-iphone-safari/44332652

2019년 11월 27일 수요일

[jQuery] 숫자만 입력되는 input 칸 만들기 (+ 날짜 포맷)


Laptop
운영체제 Windows 10 Pro 64bit
개발환경 Chrome 버전 78.0.3904.108
jQuery 1.9.1

입력칸에서 숫자만 입력받아야 할 경우, 입력 이벤트를 받아 정규 표현식을 사용하여 입력한 값이 숫자가 아닐 경우 지워버리는 기능과
이를 응용하여 사용자가 숫자를 입력할때 날짜 포맷으로 자동으로 바뀌도록 하고, 맞는 날짜인지 체크하는 예제이다.


2019년 5월 5일 일요일

[HTML] 블로그 이미지 불펌 우클릭방지 없이 막기


이번에 쓸 내용은 사실 개발적인 내용이라기보단 간단한 편법에 가깝지만,
블로그 게시 작업에서 오직 열람만을 허용하고 저장을 완전히 막고 싶을 때 권장하고 싶은 방법이다.

물론 기존에 우클릭 방지나 드래그 방지 등의 방법들이 있지만, 뚫는 방법 또한 많이 알려진 상태이기 때문에 좀 다른 방법을 소개하고자 한다.

html 수정 기능이 있는 블로그 플랫폼이라면 모두 가능하다.
(단, 네이버는 스마트 에디터로 바뀐 후엔 더이상 불가능한 듯하다.)
물론 지금 글을 쓰고 있는 Blogger도 가능하기에 바로 예제를 올려보겠다.


위 사진을 일반적인 사진처럼 우측버튼 - 다른 이름으로 저장을 눌러도 웬 .html을 저장하는 결과만 나올 것이다.
그 이유는, 주로 이미지 업로드 시 img 태그를 쓰지만, 지금 쓴 방식은 흔히 레이아웃을 그릴 때 쓰는 div태그에 그냥 배경식 입히듯이 사진을 입힌 것뿐이기 때문이다.

적용 방법은 많이 쓰이는 플랫폼 중 하나인 티스토리와 크롬 브라우저 기준으로 설명하겠다.

1. 일단 평소대로 사진 버튼을 눌러 첨부를 한다.



2. 이 상태로 F12를 눌러 개발자모드를 켠 후, 요소 검색(왼쪽 최상단 아이콘 참조, 단축키 Ctrl + Shift + C)을 클릭 후 첨부한 사진을 클릭하면 아래 사진처럼 코드 부분에 회색 표시가 생긴다.



3. 이미지 url부분 (http:// 로 시작하는 파란 글자)에서 우측버튼 클릭 후 Edit attribute를 클릭하면 복사할 수 있게 수정 가능한 모드가 되고, Ctrl + C로 복사하면 된다.



4. 우측 상단 부분의 HTML에 체크하면 작성한 글의 html이 나올텐데, 모두 지우고 아래와 같이 입력한다.


<div style="background-image: url('★'); background-repeat: no-repeat; background-size: contain; height: 60vw;"></div>

(+ 이후에 해보니 글 수정 시 해당 과정에서 다른 내용 없이 입력했었을 경우 html 코드가 전부 날아가는 현상이 있었다. 티스토리 내부 자체 문제인지는 모르겠지만 혹시 이 현상을 겪으면 저장하지 말고 다시 들어와 위처럼 개발자 모드에서 코드를 백업해두는 게 좋을 것 같다.)

★에는 아까전에 복사했던 url을 붙여넣으면 된다.

각 옵션을 간단히 설명하자면
- background-image : 배경 이미지 url
- background-repeat : 바둑판여부 설정. no-repeat은 한 장만 나오게 됨
- background-size : 배경 이미지 크기. 수치를 정할 수 있지만 여기선 contain을 써 그냥 div태그 크기에 맞춤.
- height : 높이

맨 마지막의 height: 60vw;는 60vw는 내가 임의로 해보다가 정한 값이고, 혹시 모바일 등에서 여백이 엄청 넓게 나온다면 다른 값으로 수정하면 된다.
또한 입력란에 가득찬 사이즈로 올리고 싶은 게 아니라면 아무 ; 오른쪽에 width: 50%; 를 추가하면 크기가 반으로 줄어든다.




물론 이렇게 해도 개발자 모드를 쓰거나 캡쳐툴을 쓰는 방법은 피할 수가 없지만,
최소한 손쉽게 퍼갈 수 있는 방법은 막는 셈이니 저작권 문제 등에 도움이 되지 않을까 싶다.
(실험해보니 Pinterest 업로드나 구글 이미지 다운로드 확장 프로그램은 확실히 안된다.)

2018년 9월 17일 월요일

[jQuery] 채팅 스크롤 구현 (최하단 자동 포커싱 + 이동 버튼 및 안 읽은 수 표시)


Laptop
운영체제 Windows 10 Home 64bit
브라우저 Chrome 버전 68.0.3440.106

채팅창처럼 수시로 행이 늘어나는 table의 경우 몇몇 편의상의 스크롤 제어가 필요하다.
일단 기능 자체는 메신저 텔레그램에서 영감을 많이 얻었다.

수행하는 기능은
1. 새로운 행 추가 시 자동으로 부드럽게 최하단 스크롤
2. 이전 기록으로 (위로) 스크롤 시 다시 보던 위치로 이동할 수 있는 버튼 플로팅
3. 버튼이 떠있는 동안은 자동 스크롤이 되지 않음
4. 버튼이 떠있는 동안 새로운 라인이 추가될 시 안 읽은 수가 표시

html구조는 스크롤을 제어할 div안에 동적 table이 있고, 버튼은 div 두개를 써서 하나는 실제 보이는 버튼, 하나는 버튼이 숨김 상태일 때 가리기 위한 용도이다. 즉, 보임/숨김은 단순히 top 조정으로 제어된다.

결과물은 다음과 같다.
css는 기본적인 것 외에는 거의 적용하지 않았고, 버튼 디자인은 다른 소스를 참고한 것이니 세부적인 건 하단 참고 사이트 링크에서 확인하면 된다.






- 참고 사이트
동적 테이블 추가: https://qkrrudtjr954.github.io/jquery/2018/01/29/jquery-dynamic-table.html

스크롤 애니메이션: http://jamesdreaming.tistory.com/215

슬라이드 버튼: http://brilliantcoding.tistory.com/entry/JQuery-%EC%8A%A4%ED%81%AC%EB%A1%A4%EC%97%90-%EB%94%B0%EB%9D%BC-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EB%90%98%EB%8A%94-%ED%97%A4%EB%8D%94-%EB%A7%8C%EB%93%A4%EA%B8%B0


2018년 9월 2일 일요일

[Blogger / Blogspot / 구글 블로그] 로그인 시에만 보이는 태그 만들기 (글쓰기, 글수정 등)




내 블로그로 예를 들어보면 위가 로그인 전, 아래가 로그인 후이다.

자세히 차이점을 찾아보면 왼쪽메뉴 최하단의 글쓰기와 각 글 옆의 펜모양이 보일 것이다.
이렇게 로그인 시에만, 즉 자신에게만 보이는 버튼을 만들어 보자.

사실 기본 블로그 테마들을 이용하면 상단에 navbar라는 게 있어서 글쓰기 버튼에 대한 고민은 하지 않아도 되고,
글 수정 버튼도 기본적으로 있지만,
나처럼 외부 템플릿을 불러왔는데 이것들이 없을 경우에 참고하면 좋은 글이다.

그리고 위치 지정의 경우 스스로의 블로그에 대한 html 소스를 대략 알고 있어야 가능해서,
소스에 대해서만 설명하겠다.

우선 글쓰기 버튼은, 확인해야할 사항이 하나 있다.
blogger.com으로 들어가서 글쓰기 버튼을 누르고 URL을 복사해온다.

https://www.blogger.com/blog/post/edit/★
같은 형식일텐데, ★ 부분은 랜덤한 숫자처럼 보이는 걸로 봐선 아마 계정별로 다를 것이다.

그리고 원하는 위치에 다음 소스를 붙히면 된다. (href 속성 안에 URL를 붙이면 된다)
<span class='item-control blog-admin'>
    <a target='_blank' href='https://www.blogger.com/blog/post/edit/★'>글쓰기</a>
</span>


두번째로 수정 버튼은, 사실 기본 테마에서 그대로 가져온 소스긴 하지만 어쨌든 적어보자면

<b:include data='post' name='postQuickEdit'/>
<b:if cond='data:post.editUrl'>
   <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
       <a target='_blank' expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
           <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
       </a>
   </span>
</b:if>

이건 내부적으로 blogger 자체 태그를 쓰는거라 따로 변경해줄 부분은 없다.
여기도 문자로 바꾸고 싶다면 img 태그 대신 문자를 그대로 쓰면 된다.


2018년 6월 10일 일요일

[Blogspot / Blogger / 구글 블로그] 외부 템플릿 불러오기 시 Google+ 댓글이 나오지 않는 현상 해결


대부분의 외부 템플릿이 기본적으로 Blogger 자체의 댓글이 보이도록 되어있는데,
댓글을 Google+로 변환 시 아예 다른 api를 사용하게 되는 모양인지 댓글이 전부 없어져 버리는 현상이 발생한다. 

다시 제공 템플릿으로 돌아오면 보이는 걸 보면 제공 템플릿에는 자동적으로 소스가 변경되도록 어떤 장치가 되어있는 것 같은데, 그게 뭔지는 잘 이해를 못했다.

어쨌든 변경해야 할 부분은 댓글 수 부분과 댓글이 보이는 부분이다.


테마 HTML 편집을 보면 다음과 같은 부분이 두 군데 있다. (showThreadedComments 를 검색)

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <b:if cond='data:post.showThreadedComments'>
 <b:include data='post' name='threaded_comments'/>
  <b:else/>
 <b:include data='post' name='comments'/>
  </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:post.showThreadedComments'>
 <b:include data='post' name='threaded_comments'/>
  <b:else/>
 <b:include data='post' name='comments'/>
  </b:if>
</b:if>


그 두 부분을 모두 이렇게 변경한다.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:include data='post' name='comment_picker'/>
</b:if>


이러면 댓글을 보이게 하는데까진 성공이나,
아직 댓글 수는 Blogger 댓글 수로 나오기 때문에 바뀌지 않은 상태일 것이다.


이 부분도 역시 HTML 편집에서 comment_count_picker를 검색하고, 해당 태그를 아래와 같이 변경한다. (만약에 없다면, comment_picker 등 유사한 이름을 찾아보거나 새로 만들면 된다.)

<b:includable id='comment_count_picker' var='post'>
  <b:if cond='data:post.commentSource == 1'>
    <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-post-url='data:post.url' expr:data-url='data:post.canonicalUrl'>
    </span>
  <b:else/>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
      <data:post.commentLabelFull/>:
    </a>
  </b:if>
</b:includable> 


그리고 댓글 수가 나오는 부분을 찾는다.
보통 다음과 같은 구성이다. (post-comment-link를 검색)

<span class='post-comment-link'>
                <b:if cond='data:blog.pageType != &quot;item&quot;'>
                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                    <b:if cond='data:post.allowComments'>
                      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
                    </b:if>
                  </b:if>
                </b:if>
</span>


이것을 아래와 같이 바꾼다. (아까 작성한 comment_count_picker를 사용하는 걸 볼 수 있다.)


<span class='post-comment-link'>
                <b:if cond='data:blog.pageType != &quot;item&quot;'>
                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                    <b:if cond='data:post.allowComments'>
                      <b:include data='post' name='comment_count_picker'/>
                    </b:if>
                  </b:if>
                </b:if>
</span>


다만 제공해주는 api를 이용하는 것이기 때문에 디자인은 기본 템플릿에서 벗어날 수 있다.
이 부분은 css등을 이용하여 조정해주면 되고,
그게 싫다면 Google+ 댓글을 안쓰거나 제공 템플릿을 쓰는 수밖에...

주의사항은, Blogger 댓글을 사용하다가 Google+ 댓글로 전환하고 이 방법을 썼을 경우
보이는 데는 문제가 없으나, 왜인지 댓글 수가 2배로 나오고 뭔가가 별개로 구분되어 버리는 건지 삭제 등의 작업을 할 수 없게 된다.

결국 둘 다 기능 문제 없이 사용하고 싶다면 제공 템플릿을 쓸 수밖에 없고,
혹은 처음부터 Google+ 댓글을 쓸건지 말건지를 확실히 하는 것 같다.



참고 사이트:

댓글 보이게 하기:

댓글 수:

2018년 6월 7일 목요일

2017년 4월 5일 수요일

Blogger jQuery 적용 및 자체 스크롤 만들기


* Blogger 기본 테마 중 '세련' 테마 적용 중에 작성하였다.

항목 중에서 Tap 영역에 overflow: auto; 로 스크롤을 추가하였는데, div태그라 그런지 전체 스크롤과 동시에 움직이는 문제가 발생하였다.

검색해보니 두가지 해결법이 있는데,
mouseenter 이벤트를 이용하여 커서가 div에 진입할때 전체 스크롤를 없애거나(overflow: hidden;)
mousewheel 이벤트를 이용하여 스크립트로 작동하는 자체 스크롤을 만들어주는것.

후자가 더 깔끔해보여서 선택하기로 했다.
좋은지 나쁜지 애매한 점은 스크롤이 눈으로 보이진 않는다.

일단 CSS부분은 overflow: hidden; 으로 바꿔준다.
(이전글 http://bluebead38.blogspot.kr/2017/04/blogger-css.html 참고)


일단 소스는 다음과 같다.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
    <!-- jQuery Connection -->
</script>

<script>
    $(function() {

        // column-left-outer class 지정 개체에서 스크롤 액션이 감지될 때
        $('.column-left-outer').on('mousewheel DOMMouseScroll', function(e) {

            var E = e.originalEvent;

            // 스크롤 액션의 변화값 증감에 따라 화면 스크롤 변화
            if (E.wheelDelta >= 100) {

                this.scrollTop -= 20;

            } else if (E.wheelDelta < -100) {
              
                this.scrollTop += 20;

            }

            return false;

        });

    });
</script>

이걸 그대로 복사하면 기호를 인식하지 못하고 오류가 난다.
Entity Name으로 전환해주는 작업이 필요하다.

https://mothereff.in/html-entities
여기서 간단하게 전환이 가능하다.
allow named character references in output도 체크해준다.


결과적으로는 아래 소스를 추가하면 된다. (주석도 같이 전환되기 때문에  지저분해서 지웠다.)
붙여넣는 위치는 <head> 내부면 된다. 적당히 </head> 위로 했다.



<b:include data='blog' name='google-analytics'/>
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js&quot;&gt;
    &lt;!-- jQuery Connection --&gt;
&lt;/script&gt;

&lt;script&gt;
    $(function() {

     
        $(&apos;.column-left-outer&apos;).on(&apos;mousewheel DOMMouseScroll&apos;, function(e) {

            var E = e.originalEvent;
          
            if (E.wheelDelta &gt;= 100) {

                this.scrollTop -= 20;
           
            } else if (E.wheelDelta &lt; -100) {
                this.scrollTop += 20;

            }
            return false;
        });
    });
&lt;/script&gt;

</head>



+ 문제점
Firefox에서는 작동하지 않는다.
좀더 자세히 말하면 DOMMouseScroll 까진 인식이 되나 scrollTop에서 문제가 생기는듯하다.

+다음 소스로 수정하면 Firefox에서도 동작한다.


$( '.column-left-outer' ).on( 'mousewheel DOMMouseScroll', function ( e ) {
    var E = e.originalEvent;
    delta = E.wheelDelta || -E.detail;

    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
    e.preventDefault();
});

알아보니 detail이라는 값이 Firefox에서만 사용되는 값인데, +, - 만 구분하기 때문에 값을 더 곱함으로써 스크롤처럼 보이도록 하는 것 같다.


참고 사이트 :
http://alik.info/p/65
http://stackoverflow.com/questions/7600454/how-to-prevent-page-scrolling-when-scrolling-a-div-element
http://recoveryman.tistory.com/120