[Javascript]원하는 HTML 영역 프린트하기

스크린샷 2017-03-28 오전 10.48.19스크린샷 2017-03-28 오전 10.49.44

상황: 페이지의 일부만 프린트하고 싶다!

구글링 하면 2가지 방법이 나온다.
근데 둘다 내 상황에는 문제점이 있었다.

  1. 팝업으로 DOM을 복사해 프린트: 편하긴 한데 css, js가 떨어짐
  2. 전체 돔, 프린트 영역 원하는 돔 따로 저장한다음에 프린트영역만 살리고 프린트 후 전체 돔 살림: 편하긴 한데 js 이벤트 바인딩이 떨어짐

아래와 같이 display noneblock 을 toggle 해주는걸로 간단히 해결 가능하다.
React 사용중이라 jquery 말고 pure javascript로 코딩했다.

onPrint() {
const html = document.querySelector('html');
const printContents = document.querySelector('.modal-body').innerHTML;
const printDiv = document.createElement("DIV");
printDiv.className = "print-div";

html.appendChild(printDiv);
printDiv.innerHTML = printContents;
document.body.style.display = 'none';
window.print();
document.body.style.display = 'block';
printDiv.style.display = 'none';
}
Advertisements

카카오스토리로 공유하기 간단하게 코딩하기

사이트에 공유버튼을 달아야 하는 미션.

원래 Kakao Developers 사이트에서 기본 제공하는 간단한 js와 버튼 div를 가져와서 width 0시켜 안보이게 만든 뒤
커스텀해 만든 버튼을 click이벤트로 연결하려 했다.

예상시간: 30분이면 되겠지!
삽질시간: …

iphone사파리에서만 foce한 클릭이 먹질 않는것이다.
iphone safari jquery click검색하니 나와 같은 고생을 겪는 선지자들을 보고

  • cursor: pointer로 두면 jquery가 신기하게 먹는다
  • display: none을 풀어라
  • touchstart이벤트를 넣어라
  • a태그가 아니면 먹질 않는다
  • onclick=” “과 같이 빈 액션을 넣어라

등의 삽질을 해보았지만 왠지모르게 실패. 플러그인 만지기란…

파이님이 만드신 알파카코믹스는 도대체 어떻게 한거지 하고 봤더니 걍 href에 https://story.kakao.com/share?url=를 추가하셨다.

어디서 나온 주소냐고, 플러그인 쓰지 않아도 되냐고 여쭙니 본인도 플러그인으로 고통받다가 저 주소를 야매로 알아내셨다 하심.

jquery iphone click문제는 내 지친 마음이 좀 더 회복되고 다시 봐야겠다.

무튼 코드로 마무리

<div class="teaser-social-share">
        <a class="share-kakaostory waves-effect waves-light" href="#"><i class="icon-kakao_story"></i></a>
        <a class="share-fb waves-effect waves-light" href="#"><i class="icon-facebook"></i></a>
        <a class="share-twitter waves-effect waves-light" href="#"><i class="icon-twitter"></i></a>
        <!--<a id="kakaostory-share-button"></a>-->
    </div>
var Share = {
    clickShareBtn: function() {
        var size = 'width=626 height=436';
        $('.share-kakaostory').on('click', function () {
            window.open('https://story.kakao.com/share?url=https://store.pinkfong.com/event/teaser/', '_blank', size);
        });
        $('.share-fb').on('click', function () {
            window.open('https://www.facebook.com/sharer/sharer.php?u=https%3A//store.pinkfong.com/event/teaser/', '_blank', size);
        });
        $('.share-twitter').on('click', function () {
            window.open('https://twitter.com/share?url=https://store.pinkfong.com/event/teaser/', '_blank', size);
        });
    }
}

$(function(){
    Share.clickShareBtn();
});

[HTML/CSS] 웹 폰트 사용하기 – Web Font Tutorial

font-face

  • CSS2에 새로 추가된 웹 글꼴 명세
  • 표시하려 하는 글꼴이 시스템에 없는 경우 웹 서버에서 글꼴 내려받아 표시
  • 지원
  • W3C 권장형식은 *.woff 이다.
  • IE 6~8: *.eot(O) *.woff(X)
  • IE9: *.eot(O) *.woff(O)
  • 크롬, 사파리, 파폭, 오페라: *.eot(X) *.woff (O)

결국 모든 브라우저를 지원하기 위해 *.eot*.woff를 모두 준비해야 한다.

  • @media구문 안쪽에서 @font-face규칙을 사용하는 경우 IE9 브라우저는 글꼴 요청 X

한 글꼴에 @font-face는 한번만 선언

표준과 비표준 글꼴을 모두 지원하기 위해 @font-face규칙을 두 번 사용하는 경우 IE 6~9는 두개 형식 모두 내려받아 성능에 좋지 않겠지.

/* Not recommended */
@font-face{font-family:ngwoff; src:url(NanumGothic.woff)}
@font-face{font-family:ngeot; src:url(NanumGothic.eot)}
body{font-family:나눔고딕, NanumGothic, ngwoff, ngeot}

위 코드는 더 나은 성능을 위하여 다음과 같이 개선할 수 있습니다. Paul Irish가 제안한 방탄 코드 입니다.

/* Recommended */
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※), url(NanumGothic.woff) format(‘woff’);
}
body{font-family:나눔고딕, NanumGothic, ng}
  • ng라는 글꼴 이름을 한번만 선언하고 eot형식과 woff를 순차저긍로 참조.
  • eot가 먼저 나와있으므로 IE 6~8은 eot만 받아온다
  • 나머지 브라우저들은 woff를 받아온다.
  • local(※)
  • 외부자원 참조하기 이전에 시스템 글꼴을 우선 참조할 수 있도록 만들어준다.
  • IE 6~8이 local()값을 처리하지 못하는 특성 이용해 woff글꼴 추가로 요청 못하게 함.
  • 는 사용자 시스템에 존재하지 않을만한 글꼴을 임의로 지정
  • format(‘woff’)를 명시적으로 지정하면 이 형식을 지원하는 브라우저만 글꼴 내려받음.
  • 값은 반드시 따옴표 안에 있어야 함.
  • 나눔고딕 NanumGothic 두번 적은 이유는 영문으로만 작성했을때 제대로 표시하지 못하는 브라우저 있기 때문. 한글 이름이 있으면 이런 식으로 해줘라.

IE9는 @media규칙 내부에 @font-face 허용 안함

/* IE 9 does not support @font-face within @media */
@media all and (min-width:768px) {
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※), url(NanumGothic.woff) format(‘woff’)
}
body{font-family:나눔고딕, NanumGothic, ng}
}
  • IE9는 미디어 구문 안쪽에 선언하면 외부 글꼴을 요청하지 않음.
  • @font-face를 @media 밖에 빼면 된다.

웹폰트 빠르게 로딩하기

보고 공부한 링크
1. 구글 임포트 코드를 HEAD태그의 가장 첫번째(CSS보다 앞)에 위치
2. link로 로드해라
– 구글 웹폰트 로딩 방법은 @import, 참조링크, js세가지.
– 참조링크 이용해서 HTML최상에 코드넣어라.
&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;
3. 적은 폰트 갯수
– 표제를 위한 볼드타입 / 가시를 위한 가독성 좋은 폰트 최대2개 폰트 선정
4. 코드 한줄에 여러 폰트 로드
&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans|Oswald' rel='stylesheet' type='text/css'&gt;
5. 쓸것만 로드: 폰트 weight옵션 쓸것만 로드한다
6. Load faster fonts: 폰트마다 로딩 시간 다르니 빠른걸로 골라라
7. 정말 확실히 로드해야한다면 Web Font Loader를 써라.
– 사이트 나머지 로드되기 전에 로드하고, 스타일되지 않은 텍스트가 번쩍이는 것을 확실히 피해준다.

한글 웹 폰트 경량화해 사용하기

보고 공부한 링크

Refer

웹 폰트 문제 해결. @font-face troubleshooting
구글 웹폰트를 빠르게 로드하는 팁 7가지
한글 웹 폰트 경량화해 사용하기
https://www.igvita.com/2014/01/31/optimizing-web-font-rendering-performance/
https://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/

[HTML/CSS] 유튜브 반응형으로 삽입하기 – Responsive Youtube(iframe) embed

개요

iframe을 CSS로 다루는 것은 까다롭고 기분이 좋지 못하다. 마음대로 안되므로. ^^…
youtube들을 모아놓은 반응형 홈페이지를 만들고 있는데, 그 youtube를 반응형으로 삽입하려면 약간의 CSS 꼼수가 필요하다

HOW TO

HTML

<div class="video-container">
    
</div>

CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

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

iframe을 video-container로 감싸주고, 그 안의 iframe을 relative/absolute로 조정해준다.
이 클래스는 그대로 두고, 다른 특성들을 쓰고 싶다면 독립된 곳에서 쓰도록 하자. 괜히 꼬이지 않게.

내 경우는 특이하게 .video-container의 padding-top을 0px로 해야 비디오가 화면에 검정 여백 없이 꽉 차게 나왔다.

유튜브가 얼마 전부터 반응형을 조금씩 지원하기에, 앞으론 이런 꼼수를 안써도 되는 날이 머지 않은 것 같당!

+추가

이것도 잘 된당

.container {
float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 60%;
    height: 60%;
    margin-left: auto;
    margin-right: auto;
}

Youtube Thumbnail 가져오기 & 16:9비율로 크롭하기

개요

한 화면에 유튜브 이미지+링크를 많이 모아놓은 사이트를 개발하고 있는데,  이를 모두 iframe으로 embed하는 것은 낭비이기에 thumbnail만 가져오는 방법을 찾아보았다.

썸네일 가져오기

<img src="http://img.youtube.com/vi/JnxwbY07jmY/0.jpg"/>

일단 이렇게 하면 썸네일이 나온다.
하지만 이런 식으로 6:4비율로 검정 background가 포함되어 나온다.

썸네일 크롭하기

이 링크를 보고 따라했다.

<div class="crop"><a href="#" title=""><img src="http://img.youtube.com/vi/JnxwbY07jmY/0.jpg"/></a></div>
div.video {
        width: 100%;
        img{
            border:none;
            height:200px;
        }
        .crop{
            float:left;
            margin:.5em 10px .5em 0;
            overflow:hidden;  this is important
            border:0px solid #ccc;
            }
        /* input values to crop the image */
        .crop img{
            margin:-25px -0px -25px 0px;
        }
    }

img를 crop으로 감싸 요리 죠리 이동하고 자르는 방법이다.
하지만 예쁘고 깔끔하지 못해서 조금 더 찾아봤다.

그냥 16:9로 가져오기

<img src="http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg">
<img src="http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg">

그냥 이렇게 하면 된다…
스택오버플로우를 참고하였다.
위는 320×180, 아래는 (가능하면)1500×900를 준다.


이런식으로.

web 마크업 레벨테스트

개요

Tobyyun님의 Markup Level Test를 풀고 점검을 받았습니다.
첫 라인이 제가 쓴 답이고(대부분 틀렸어요 ^.^….눈물)
들여쓰기 되어있는 것이 첨삭받은 것입니다.

마크업 레벨테스트

  1. Doctype을 사용하지 않을 때는 무슨일이 발생하나요?
    특정버전으로 작성된 메서든데 다른 버전으로 보일 수 있다.

    HTML렌더링 모드, 독타입이 없으면 quirks mode로 간다.(스탠다드-웹표준, 얼모스트 스탠다드, 쿽스 모드) CSS를 해석하는 방법이나 등등이 깨질 수 있다.

  2. 웹표준에 맞게 작업할 때 b, i 태그 대신 적합한 태그는 각각 무엇일까요?
    <strong> , ?

    시맨틱!!! <strong>, <em>

  3. block 요소와 inline 요소에 해당하는 태그들을 각각 5개씩 적어보세요.
    블록: <img>, <div>, <header>, , <table>, <li>
    인라인: <p>, <a>, <strong>, <span>

    블록: div, p, section, article
    인라인: span, a, img, b, u, i….

  4. blockquote 태그는 어떤 용도로 사용해야 할까요?
    인용구를 넣을때

  5. 인라인 스타일(style=”property:value”)을 가급적 사용하지 말아야 할 이유는 무엇일까요?
    유지보수가 힘들다(왔다갔다)

    구조와 표현의 분리

  6. myPhoto.jpg 파일을 img 태그로 작성해보세요.
    <img src="경로/myPhoto.jpg" />

    <img src="경로/myPhoto.jpg" alt="대체텍스트"> //알트 꼭 쓰기

  7. HTML에서 id 속성을 사용하는 이유와 주의 할 점은 무엇일까요?
    요소에 유니크한 속성을 부여한다. 페이지당 한번만 쓴다.

  8. ‘TopArea’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?
    첫글자가 소문자가 아니다

    Top이라는 방향성을 가지고 있기 때문. 접근성차원에서도 방향은 의미 없으므로.

  9. ‘blue-box’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?
    색상이 CSS에서 변경될 수 있다.

  10. HTML5에 새롭게 추가된 aside 태그는 어떤 용도로 사용해야 할까요?
    사이드 메뉴

    HTML5 Doctor의 콘텐츠 요소 판별법 참고
    컨텐츠의 주요 내용이 아니고 부수적인 내용일때

  11. input 태그와 항상 함께 사용해야 할 태그는 무엇일까요?

label꼭 달자

  1. 모바일 웹 또는 반응형웹디자인 프로젝트에서 각 기기에 적합한 화면을 보여주기 위해 필요한 meta 태그는 무엇일까요?
    media-query
    > meta name=”viewport”

CSS

  1. 화면 상에는 보이지 않으나, 스크린 리더에서 읽혀야 하는 요소에 주어야 할 스타일링을 작성해보세요.
    display:none

    위의것은 스크린리더에서 안읽어줌. 우리 사이트 a11y클래스 참고

  2. float 속성을 가진 자식을 품은 부모요소는 높이 값을 잃어버릴 때가 있습니다. 이 현상을 해소하는법(clearing)을 알고 있나요?

    나중에 알려줄게요.

  3. border-box와 content-box의 차이점은 무엇일까요?

    박스 모델을 알고있나? 지금은 컨텐트박스가 표준. box-sizing으로 변경 가능 =

  4. position: relative는 어떤 경우에 사용 하나요?
    다른 요소에 따라 이 요소의 위치값이 결정될때

    좌표를 재정의할때 쓴다

  5. CSS Reset은 무엇이며 왜 사용할까요?
    브라우저 기본으로 적용되어있는 CSS값들을 리셋. (기본 패딩 등등…)

    크로스 브라우징을 목적으로

  6. Sass, less, Stylus와 같은 CSS 프리프로세서를 사용해본적이 있나요?
    sass를 좀 보았습니다.

  7. id, class, inline style, !important를 우선순위 순으로 나열해보세요.
    !important > inline style > id > class

  8. CSS에서 상속이 되는 속성을 2개만 꼽아보세요.
    display? position?

    위 것들은 다 상속 안되는것들이고, color:red나 사이즈 같은거 상속됨.

  9. Sprite image 기법을 사용하는 이유는 무엇일까요?
    빠른 로딩과 용량을 줄이기 위해

    파일 요청횟수

  10. Sprite image 기법을 사용하는데 필요한 CSS 속성들을 꼽아보세요.
    top, left

    background-position

  11. 점진적 향상(Progressive Enhancement)의 뜻을 설명 할 수 있나요?
    특정 기능을 적용할 때, 구 브라우저에 적용이 안돼도 치명적이지 않을 만큼 조금씩 신기능을 추가

    graceful degration(우아한 낮춤?!) ttf만 쓰면 구형 인터넷익스플로러에선 안된다. eot, svg같은걸 추가 (ttf, eot파일 두개만 있으면 거의 다 지원된다.)

  12. 개발사 접두어(vendor prefix)를 꼭 사용해야 할 CSS 속성(property)를 2개만 꼽아보세요.

    앞에 webkit, moz같은게 붙는거.

  13. 반응형웹디자인의 3가지 요소를 꼽아보세요.
    모든 사이즈 지원, 모두 같은 내용, 코딩을 한번만 한다

    링크 참고

  14. 모바일기기를 대응할 때 기준으로 삼는 해상도 사이즈는 몇이며 그 이유는 무엇인가요?

    320을 최소로 잡고, 그것보다 넓으면 100%로 늘리면 되니까!

  15. :first-child와 :last-child가 지원하는 IE의 버전명을 적어보세요.

    7, 9(그래서 퍼스트차일드로 스타일예외처리를 많이 한다.)

  16. 포토샵(또는 다른 그래픽툴)에서 이미지를 자를 때 어떤 기능을 사용하나요? (메뉴명, 단축키 등)
    cmd + t

  17. jpg, gif, png의 차이점을 설명해보세요.
    png: 투명 가능, 용량 작다
    jpg: 이미지 손실이 덜하다
    gif: 움직이는 이미지 제작가능

    나중에 더 자세히

  18. 가상컨텐츠(:before, :after)는 어떤 용도로 사용할까요?
    애니메이션 만들때

    HTML고치지 않고 꾸밀때 (가상요소)

  19. 블럭요소 안의 어떤 자식 요소를 정중앙에 놓는 방법을 알고 있습니까?
    left: 50%
    right: 50%

    일일코딩시에 하겠습니다.

웹접근성(by ClearBoth 벙개!)

브라우저
  • Engine
    • 해석해주는거.
    • IE는 Gecko, Chrome은 webkit쓰다가 blink로… 사파리는 웹킷,
    • 주의해야할것 : Blink
      • webkit접두사가 다 먹힌다.
      • but webkit이랑 blink는 다르다!
    • 엔진의 성능이 좋을수록 브라우저 속도가 빠르다
      • 최적화 최적화!!
      • 어떻게 돌려야 이 엔진에서 가장 잘 돌아가는지!
  • Mobile Browser
    • Android 내장 브라우저
      • 기본적으론(4.3이하) webkit
      • 4.4(키캣)부터 blink
    • Android 크롬(2주에한번씩 업뎃)
      • blink
    • iOS (4주에한번씩 업뎃 – 심사가 빡세서…)
      • 사파리 : 웹킷
    • Blackberry
      • webkit
    • Symbian
      • 엔진 미상(!!!!) (IE랑 비슷)
  • Browser
    • minimun브라우저에 돌아가게 만들긔
      • IE 5.5를 지원하는걸 만드느라 엄청 밤새고 그랬는데 5.5접속률은 0%이었다…
  • 주절주절
    • 크롬은 업데이트가 언제 됬는지도 모르게 지들 멋대로 막 업뎃함.
      • IE는 윈도우즈를 통째로 업뎃할때 얘도 업뎃함 ㄷㄷㄷ
    • 포털은 minimum까지 다 지원해야함.
      • 작은 퍼센트의 고객을 잃는것도 큰 타격이므로 ㄷㄷ
기술
  • Front-End
    • 보여지는쪽. 브라우저 성향을 탄다.
    • 내가 조금이라도 건드리면, 사용성에 영향을 준다.
    • HTML
      • 마크업.
      • made by 팀 버너스 리
      • Hyper text markup language
      • 가장 기본이고, 가장 중요하다. HTML을 얼마나 잘짜느냐가 그사람의 역량이(!!)(구글 검색결과에 상위에 노출된다던가, 접근성에 적합한가..)
      • HTML5. 새로운 기술들 많음. 책을 읽는다면 최신걸로 읽는게 좋음!
        • 비교적 최신 프로젝트들은 요걸 씀.
      • XHTML, HTML4.01    <<더이상 바뀌지 않는다!
      • W3C, WHATWG 에서 명세 참고해 (하지만 웟WG는 아메리칸조크들도 섞여있어서 걍 W3C봐)
    • CSS
      • Cascading style sheet
      • 의미와 표현의 분리.
        • 브라우저를 이쁘게 만들기 위해 HTML을 더럽히지 말쟈…
      • CSS3 : Transition, animation, flex box….
    • JS
      • 동작을 담당.
      • ECMAScript : 자바스크립트의 최신버전(명시되어있는거!)
        • Action script
  • Back-End
    • 데이터. 브라우저 성향을 타지 않는다.
    • Client
      • php, JSP, ASP
    • Server
Mobile
  • 파편화 장난아니다!
  • 아이폰
    • 3.5 inch(~4s)
    • 4 inch (5s, 5c)
  • 레티나 대응(공식명칭 : DPI-DotPerInch-대응)
    • “걍 이미지를 2배로 쓰는거 아니야?”라고 사람들이 착각함.
    • 근데 또 너무 좋은 화질로 놓으면 사용자의 데이터를 쭉쭉 빨아먹는다.
    • 실제 디바이스 사이즈에 비해 해상도가 미친듯이 큰거…
    • 이제 PC에서도 레티나대응을 해야한다(맥프레!)
  • 안드로이드
    • 해상도 파편화 대박
  • 디바이스 보는 방식
    • Portrait : 세워서보기
    • Landscape : 눕혀서보기
  • 그래도 모바일이 CSS3를 웹보다 더 잘 지원한다.
  • Mobile First(모바일 우선대응)
    • 개발하기 편한듯. 폰트도 다 깔려있고, 화면전환, GPS, 확대축소, 전화, 문자, 진동, Touch 등등 다 구현(?!)되어있으니.
    • 데스크탑은 불가하고, 모바일은 가능한것들이 많음! (사용성 big)
      • 예를들어, 피트니스나, 요리 등등.
      • 휴대가 가능하다는게 제일 큼.
  • Responsive Web design
    • 여러 해상도에서 다른 사용성을 같은 마크업으로…(ㄷㄷ)
    • mobile first랑 일맥상통.
주절주절
  • megaman sprite(롱맨?) 한번 만들어보면 JS dom같은거 한방에 이해한다.