WEBDIR

웹코딩 검색 결과

해당 글 125건

다시 공부하는 자바스크립트

처음 자바스크립트(JS)를 접했던 것은 2000년도 초반이였다. 지금과는 달리 JS에 대한 인식이 좋지 못했고, 관련 지식을 찾아보기가 어려웠던 시기였다. 타 프로그래밍 언어에 비해 느슨한 문법과 미지원되는 기능들이 비교대상이 되어 저수준의 언어로 치부되었고, 그런 인식에서 출발한 관련 서적들도 형편없었다라고 돌이켜 본다. 무엇보다도 웹표준이라는 개념이 없었던 시기라 브라우저마다 제각기 다른 지원사항들로 골머리를 앓다보면 자연스레 멀어질 수 밖에 없었다. JS에 다시 관심을 가지게 만든 것은 jQuery의 등장으로 DOM 조작의 편의성과 크로스브라우징의 부담감을 덜면서 였다. 게다가 구글의 V8엔진이 탑재된 브라우저들의 등장으로 대폭적으로 개선된 환경을 접하면서 쏟아지는 jQuery 플러그인들과 각종 라..

웹코딩/Javascript 2016. 3. 1. 11:00

CSS 이벤트 제어(pointer-events ) 속성

흔히 이벤트가 부여된 요소를 숨기면 해당 이벤트가 작동하지 않을꺼라 생각합니다. 대부분 의도한 결과를 반영하지만 숨김처리에 사용한 방법이 opacity 속성을 이용한 경우라면 가시성은 없지만 해당 영역의 이벤트에 응답하게 됩니다. 이를 강제로 제어하기 위해서는 pointer-events 속성을 활용해야 하며 관련하여 아래에서 추가적인 정보를 서술하였습니다. 숨김 처리 속성에 따른 특성 요소를 숨길때 사용하는 CSS 속성은 제각기 고유의 특성을 지니고 있다. 아래의 표를 참고하자. 숨김 속성과 값 공간점유 이벤트 탭(Tab) 접근 opacity: 0 점유 활성 가능 visibility: hidden 점유 비활성 불가능 visibility: collapse 테이블안에서만 비점유 비활성 불가능 display:..

웹코딩/CSS 2016. 2. 1. 11:00

사운드클라우드 썸네일 추출

사운드클라우드의 오픈 API를 활용하여 썸네일을 추출하는 방법에 대하여 살펴봅니다. 이 글에서는 자바스크립트를 사용하였으며, 서버 스크립트를 사용한다면 더 손쉽게 접근할 수 있습니다. 사운드클라우드 API Key 발급 사운드클라우드 썸네일을 추출하기 위해서는 API Key 발급이 필요하다. 사운드클라우드 API에 접속하여 사용할 애플리케이션에 맞는 키 발급을 받으면 된다. 이 글에서는 자바스크립트를 이용하니 Client-side JavaScript Applications 을 선택하도록 한다. 물론 사전에 사운드클라우드에 가입해두도록 하자. 그 동안 다른 멀티미디어 서비스들에서는 Key 발급 없이 대체 방안을 강구했지만 사운드클라우드에서는 방법을 찾지 못했다. Try out the Client-side a..

웹코딩/App,Plugin 2015. 12. 25. 20:25

데일리모션 동영상 썸네일 추출

데일리모션 동영상의 썸네일을 추출하는 방법에 대하여 살펴봅니다. 이 글에서는 자바스크립트를 사용하였으며, 서버 스크립트를 사용한다면 더 손쉽게 접근할 수 있습니다. 데일리모션 동영상 VID 추출 아래와 같이 어딘가에 데일리모션 동영상이 삽입되었다고 가정하자. 대부분의 멀티미디어 서비스들은 고유의 ID값(VID)들로 영상들을 구분하고 각각의 정보를 분류하기에 이 VID 값을 추출하는 것이 필요하다. 데일리모션 동영상에 접근 삽입된 동영상 소스코드들(iframe) 중에서 데일리모션 동영상들이 가지는 특수한 문자열을 기준으로 정규표현식으로 걸러낸다. var vurl = $('iframe').attr('src').match(/dailymotion.com\/embed\/video\/([a-zA-Z0-9_]+)/i..

웹코딩/App,Plugin 2015. 12. 25. 17:53

다음 tv팟 동영상 썸네일 추출

다음 tv팟 동영상의 썸네일을 추출하는 방법을 살펴보며 유념해야 할 부분을 짚고 넘어갑니다. 이 글에서는 자바스크립트를 사용하였으며, 서버 스크립트를 사용한다면 더 손쉽게 접근할 수 있습니다. 다음 tv팟 동영상 VID 추출 아래와 같이 어딘가에 다음 tv팟 동영상이 삽입되었다고 가정하자. 대부분의 멀티미디어 서비스들은 고유의 ID값(VID)들로 영상들을 구분하고 각각의 정보를 분류하기에 이 VID 값을 추출하는 것이 필요하다. 다음 tv팟 동영상에 접근 삽입된 동영상 소스코드들(iframe) 중에서 다음 tv팟 동영상들이 가지는 특수한 문자열을 기준으로 정규표현식으로 걸러낸다. var vurl = $('iframe').attr('src').match(/videofarm.daum.net\/controll..

웹코딩/App,Plugin 2015. 12. 25. 11:00

비메오 동영상 썸네일 추출

비메오 동영상의 공유소스를 기반으로 썸네일을 추출하는 방법에 대하여 살펴보며 크로스브라우징에 관련된 사항을 짚어봅니다. 이 글에서는 자바스크립트를 사용하였으며, 서버 스크립트를 사용한다면 더 손쉽게 접근할 수 있습니다. 비메오 동영상 VID 추출 아래와 같이 어딘가에 비메오 동영상이 삽입되었다고 가정하자. 대부분의 멀티미디어 서비스들은 고유의 ID값(VID)들로 영상들을 구분하고 각각의 정보를 분류하기에 이 VID 값을 추출하는 것이 필요하다. 비메오 동영상에 접근 삽입된 동영상 소스코드들(iframe) 중에서 비메오 동영상들이 가지는 특수한 문자열을 기준으로 정규표현식으로 걸러낸다. var vurl = $('iframe').attr('src').match(/player.vimeo.com\/video\/..

웹코딩/App,Plugin 2015. 12. 11. 11:00

CSS로 유동적인 컨테이너 너비에 기반한 이미지 비율 유지, 가운데 정렬, 자르기

이미지 요소나 비디오 요소를 특정 비율에 맞춰 확장 또는 축소되길 원할때 사용되는 기법에 대한 설명입니다. 스크립트의 사용없이 오직 CSS만을 이용하여 이를 구현해보며 원리의 이해를 돕습니다. 이미지 비율 유지 이미지의 비율을 유지하면서 크기 조정을 하는 방법은 이미지의 너비와 높이 둘 중 어느 하나를 auto 값을 유지한 채로 크기 조정을 하는 것이다. 흔히 반응형 이미지에 사용되는 방법은 아래와 같다. img { max-width: 100%; height: auto; } 반응형 이미지의 너비를 자유롭게 조정하기 위해서 이를 감싸는 컨테이너를 추가 해주고 적절한 너비를 부여하면 아래와 같다. .thumbnail-wrappper { width: 25%; } img { max-width: 100%; hei..

웹코딩/CSS 2015. 11. 26. 03:33

CSS3 오브젝트 채우기, 위치조정 (object-fit, object-position) 속성

CSS를 이용하여 나 요소같은 오브젝트들을 비율을 유지한 채로 크기를 조정하는 것은 매우 까다로운 부분입니다. 오브젝트들이 출력될 공간이 유동적인 크기가 아닌 고정된 크기라면 더욱 골머리를 썩히게 됩니다. 이에 대응하는 CSS3 속성에 대하여 살펴봅니다. object-fit 속성 object-fit 속성은 대체되는 요소의 내용(, , , 등과 같은)이 지정된 너비와 높이에 맞게 장착되는 방식을 지정한다. 이는 프로필 이미지나 고정된 크기의 썸네일을 출력하는 다양한 경우처럼 제각각의 크기를 가진 오브젝트등을 넘겨받아 비율을 유지한 채로 일정한 크기로 재가공하는 경우에 유용하다고 할 수 있다. CSS3의 background-size 속성과 매우 유사하다. object-fit 속성 값 속성값들의 변화를 살펴보..

웹코딩/CSS 2015. 11. 20. 11:00

CSS로 글자 자르기 - 한 줄, 여러 줄

고정된 너비만을 제공하는 레이아웃에서는 서버단에서 화면에 출력할 글자수를 미리 가늠하며 디자인하기가 수월합니다. 레이아웃이 유동적인 너비를 가지거나 서버 스크립트쪽에 접근할 수 없어 글자수를 제어하기 곤란할 경우에는 아래에서 설명하는 방법들이 추천됩니다. 한 줄 단위로 글자 자르기 처음으로 적용해 볼 것은 한 줄, 혹은 여러 줄에 걸쳐 출력되고 있는 글자들을 지정된 너비에 맞게 한 줄 단위로 자르는 법이다. 이는 여러가지 CSS 속성들을 조합하여 조건을 맞추는 일부터 시작된다. 출력될 너비 조정하기 CSS로 글자 자르기를 위해서는 글자가 출력될 너비가 필요하다. 기본적으로 CSS 박스 모델 (box model) #1 에서 살펴봤듯이 display 속성의 inline 값과 같이 요소의 너비를 가질 수 없는..

웹코딩/CSS 2015. 10. 30. 11:00

스크롤을 감지하여 사이트의 헤더를 보이거나 숨기기

앞서 유사한 기능의 플러그인인 Headroom.js 에 대하여 살펴보았는데, 구형 IE에 대한 크로스브라우징에 어려움을 겪을 수 있습니다. 이에 원리는 유사하나 대상 요소가 명확하게 한정된 요소일때 간단히 구현할 수 있는 스니펫을 소개합니다. DOC Hide header on scroll down, show on scroll up DEMO Hide Header on on scroll down 고정된 헤더(네비게이션) 사용 불편함 인지 많은 웹사이트에서 네비게이션 탐색에 도움을 주기위해 상단의 헤더(네비게이션을 포함한)를 CSS의 포지셔닝을 사용해 position: fixed 와 같이 고정해 두곤 한다. 헤더 부분은 대부분 상호(브랜드)를 포함하고 네비게이션을 포함하기에 고정된 헤더에 높이가 긴 콘텐츠를 ..

웹코딩/App,Plugin 2015. 10. 28. 11:00

Headroom.js - 스크롤을 감지하여 반응하는 요소

몇몇 애플리케이션에서 스크롤에 따라 하단의 광고가 등장하거나 상단의 메뉴가 등장하는 등의 사용자 편의를 고려한 디자인을 접해보셨을 겁니다. 관련하여 많은 스니핏(코드조각)이 존재하는데 그 중에서 한가지를 소개합니다. Headroom.js 소개 헤드룸(Headroom)은 사용자의 스크롤을 감지하여 원하는 요소에 동작을 추가하는 가벼운 고성능의 자바스크립트 위젯이다. 이는 상단의 네비게이션에 자주 애용되고 있으며, 기존의 고정(Fixed)된 네비게이션이 차지하는 화면의 비율을 없애고 사용자의 반응에 따라 등장함으로써 좀 더 유연하게 화면의 가시영역을 확보한다. HOME Headroom.js REPO WickyNilliams/headroom.js DEMO 데모페이지 브라우저 지원 헤드룸은 아래의 브라우저 AP..

웹코딩/App,Plugin 2015. 10. 27. 11:00

안드로이드용 크롬39 theme-color 속성 지원

롤리팝(Lollipop) 버전의 안드로이드 크롬 39부터 지원하는 새로운 메타 태그 속성에 대하여 알아봅니다. theme-color 속성 크롬 툴바의 색상을 변경할 수 있는 속성으로 안쪽에 메타 태그를 이용해 설정한다. 웹 사이트가 좀 더 응용프로그램 및 앱처럼 보이는 효과를 부여하게 된다. 언젠가는 앱처럼 모든 부분을 재설정 할 수 있는 기능이 추가되길 바라며...

웹코딩/HTML 2015. 10. 23. 11:00

Column(열)의 높이를 맞추는 방법

CSS 디자인의 경우 복수의 열을 같은 높이로 맞춰야 하는 상황이 종종 발생합니다. CSS3를 이용하면 간단히 해결될 문제이지만, 이를 지원하지 않는 브라우저를 생각한다면 많은 고민을 필요로 하기에 이에 대한 방법을 정리해 봅니다. 열의 높이를 자동으로 맞추는 속성들을 활용 CSS 속성들 중에는 같은 부모의 자식 요소들 사이에서 자동으로 열의 높이를 맞추는 속성들이 있다. flex 속성 flex 속성을 이용하면 아주 손쉬운 작업이다. 대상 요소를 감싸는 부모요소에 display: flex 를 설정하고 대상요소들의 순서를 정해주면 간단히 완성시킬 수 있다. 다만 지원문법이 중간에 한번 교체되었고 구형 브라우저들에서 지원이 되지 않는 문제로 크로스브라우징에 문제가 발생한다. IE는 11버전 이상, 안드로이드..

웹코딩/CSS 2015. 10. 6. 11:00

아이콘 폰트(IconFont)의 모든 것

웹폰트의 또 다른 진화형태인 아이콘 폰트에 대한 설명과 이를 제공하는 사이트에 대하여 알아보고 궁극적으로 원하는 아이콘만을 삽입하는 방법을 거론합니다. 아이콘 폰트의 등장 기존에는 특수한 글꼴이나 아이콘을 사용하기 위해서 이미지 형식으로 제작하여 웹문서에 삽입하곤 했다. 이는 HTTP 요청을 많이 발생시켜 서버에 부하를 주고 로딩 속도에 영향을 미쳤다. 이를 극복하기 위해 CSS 기법 중에 하나인 Image Sprite 방식을 사용하여 여러 이미지를 하나의 큰 이미지에 포함시킨 배경 이미지로 제작하여 단 한번의 HTTP 요청을 통해 문서에 삽입하는 방법이 추천되었다. 필자의 기억으론 야후에서 처음 Image Sprite 방식을 사용했고, 이후 구글 및 대형 사이트들, 국내의 포럼등에서 사용되면서 널리 퍼..

웹코딩/CSS 2015. 10. 5. 11:00