WEBDIR

티스토리 본문 너비와 사진 첨부로 삽입되는 이미지의 상관관계

티스토리 에디터의 사진 첨부 기능으로 이미지를 삽입할때 영향을 주거나 받는, 연관하여 스킨 제작시에 제한 받을 수 있는 점들에 대하여 살펴봅니다. 스킨 제작분들 이외에도 블로그를 시작하기 전에 알아두면 차후 스킨 변경시 이미지로 인해 겪는 문제를 덜 수 있습니다. 티스토리 본문 너비 이해 티스토리의 본문 너비라고 지칭하면 대부분 글쓰기 가로폭을 떠올린다. 이는 TISTORY 관리 → 글설정 → 글쓰기 환경의 글쓰기 가록폭 에서 설정 할 수 있으며, 설정값에 따라 삽입되는 이미지 크기가 결정된다 라고 적혀 있다. 실제로 이와 관련된 부분에서 혼동되는 경우가 많아 이에 대해 자세히 알아보도록 한다. 글쓰기 가로폭과 스킨너비 글쓰기 가로폭을 원하는 값으로 설정하였다 하더라도 실제 스킨의 본문 너비가 변경되진 ..

티스토리/스킨가이드 2015. 11. 2. 11:00

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

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

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

티스토리 반응형 이미지 제공

티스토리는 반응형 스킨을 위해 따로 무엇인가 지원하는 곳은 아니였습니다. 스킨공모전 이후에 새로운 스킨을 준비중이라는 티스토리 측의 말이 있었듯이 하나 둘 기본 시스템을 업데이트해 나가고 있습니다. 얼마전에는 날짜 표현방식이 변경되어 당황스런 일도 있었지만 이번에 발견한 것은 본문에 삽입되는 이미지와 관련된 정보입니다. 반응형 이미지 지원 그 동안 티스토리 스킨제작시에 에디터로 삽입되는 본문 이미지를 반응형 디자인에 맞게 수정하기 위해서 아래와 같이 관련 코드를 직접 작성해야 했다. .img-responsive, .imageblock img { display: block; width: 100% \9; max-width: 100%; height: auto; } .img-responsive 는 부트스트랩에서..

티스토리/스킨가이드 2015. 10. 29. 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

IE7에서 :before, :after 선택자와 content 속성 대체방안

IE7을 고려해야하는 페이지를 제작하는 경우, :before 나 :after 와 같은 가상 선택자를 지원하지 않아 애를 먹곤 합니다. 설상가상으로 content 속성까지 지원하지 않지요. 이에 대한 대체방안을 모색해봅니다. :before, :after 선택자 대체방안 IE7에서는 :before 와 :after 가상 선택자를 대체하기 위해서 새로운 요소를 생성하고 이에 클래스명을 부여하는 방법이 사용된다. 아래의 예시와 같이, 이 표현식은 자바스크립트와 같은 방식으로 요소를 생성하고 있다. .example:before, .example .ie-before { display: block; width: 100px; height: 50px; } .example { *zoom: expression( this.ru..

웹개발론/크로스브라우징 2015. 10. 26. 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

안드로이드 브라우저 테스트의 난해함

안드로이드 브라우저들의 파편화에 대한 이야기입니다. 원문은 THE ANDROID BROWSER입니다. 서문 데스크탑의 브라우저 테스트가 어렵다고 생각되는가? 안드로이드 기기의 브라우저를 테스트한다면 지옥을 경험하게 될지어다~ 모든 브라우저들은 다르게 작동하고 이는 다른 결과를 렌더링하게 된다. 안드로이드에는 많은 브라우저가 존재하며, 동일한 브라우저라도 많은 변경점이 있다. 웹뷰(WebView) 안드로이드는 웹킷(WebKit) 기반의 웹뷰도 함께 적재되어 사용된다. 기본(default) 브라우저를 포함한 대부분의 브라우저들은 웹뷰를 사용한다. 웹뷰는 메이저(major) 안드로이드 업데이트 일정에 맞춰 업데이트 된다(2→3→4). 그러나 안드로이드의 마이너(minor) 업데이트와 함께 버그픽스를 제공하기도..

웹개발론/크로스브라우징 2015. 10. 2. 11:00

가상머신(Virtual Machine)의 이해

가상머신에 대한 기초적인 개념을 잡고 넘어갑니다. 이후 다루게 되는 가상머신에 대한 이야기는 시스템 가상 머신중에 vmware, virtualbox에 대하여 알아보게 됩니다. 가상머신 정의 가상 머신(Virtual Machine, VM)은 컴퓨팅 환경을 소프트웨어로 구현한 것, 즉 컴퓨터를 에뮬레이션하는 소프트웨어다. 가상머신상에서 운영체제나 응용프로그램을 설치 및 실행할 수 있다. 가상 머신은 실제 컴퓨터와 어느 정도의 통신과 사용을 기반으로 두 가지로 나뉜다. 시스템 가상 머신은 완전한 시스템 플랫폼을 제공하며, 다시 말해 완전한 운영 체제 (OS)의 실행을 지원한다. 반대로, 프로세스 가상 머신은 하나의 단일 프로그램을 실행하기 위해 만들어져 있는데, 다시 말해 단일 프로세스를 지원한다. 가상 머신..

개발도구/가상머신 2015. 9. 30. 12:00

티스토리 메타 태그 생성 유의점

티스토리 스킨 제작중에 메타 태그에 대한 의문점이 남아 이에 대한 조사를 해보았습니다. 스킨 제작에 관심있는 분들에게 참고가 되었으면 합니다. meta http-equiv="x-ua-compatible" IE 브라우저 사용자들을 위해 최신의 문서모드로 렌더링 되도록 아래와 같은 코드 사용을 하곤 한다. 이는 X-UA-Compatible, IE=edge, 호환성 보기에서 설명했듯이 웹서버에 지정해 두면 메타 태그에서 따로 언급하지 않아도 이를 최신 문서로 강제한다. 아래는 x-ua-compatible 메타 태그를 삽입하지 않은 상태로 블로그의 header 를 요청한 결과이다. 즉, 티스토리 서버에는 관련사항이 지정되어 있어 이 메타 태그를 삽입하지 않아도 된다. 필자는 과거에 Validate HTML 에서..

티스토리/스킨가이드 2015. 9. 24. 11:00

정규 표현식 도움말

정규표현식을 떠올리면 수학공식 외우던 학창시절 생각이 문득 떠오릅니다. 그만큼 외워도 금방 잊어버리고 몇번 이고 다시 되새기고 또 그렇게 잊어버리곤 합니다. 관련해서 도움이 될만한 정보들을 모았습니다. 정규표현식은 프로그래밍 언어마다 구현 방법이나 호환성 정도에 차이가 난다는 것에 유념해야 합니다. 정규표현식 되새김질 정규표현식을 처음 접하는 분들에겐 충분히 도움이 되지 못할 수도 있으나 한번 쯤 그 내용을 살펴본적이 있다면 아래의 내용이 기억을 되살리는데 큰 도움이 될 것이다. 초보자를 위한 정규 표현식 가이드 (자바스크립트 기준) from 민태 김 정규표현식 도식화 타인이 만든 정규표현식을 해석하거나 원리를 살펴볼때 그것은 마치 외계어를 마주친 난해한 느낌이 들곤 한다. 그런 정규표현식을 도식화해서 ..

웹코딩/Javascript 2015. 9. 23. 14:30

유튜브 동영상 썸네일 추출

유투브는 YouTube Data API를 통해 유투브 동영상에 대한 각종 정보와 쎔네일을 제공하고 있습니다. 문서에 삽입된 동영상의 썸네일이 필요한 경우가 있어 이 내용을 정리합니다. 동영상 ID값으로 썸네일 추출 유투브 동영상을 공유할때 제공되는 코드들은 대표적으로 아래와 같은 두가지 방식이 자주 애용된다. 공유 : https://youtu.be/nVCubhQ454c 소스코드 : 공유의 URL에서 nVCubhQ454c 부분과 소스코드의 의 src 속성값으로 주어진 nVCubhQ454c 가 바로 해당 동영상의 고유 ID값이다. 유투브는 해당 ID값을 기준으로 API를 통해 썸네일을 제공하게 되는데, API를 정식으로 사용하기위해서는 복잡한 절차를 따라야한다. 다만, 앞서 말했듯이 해당 ID값을 기준으로 ..

웹코딩/App,Plugin 2015. 9. 22. 14:31

유튜브 iframe 콘솔 에러 : cast_sender.js

유투브의 동영상을 iframe 형식으로 삽입할때 간혹 콘솔 오류 메세지를 경험하게 됩니다. 이에 대한 개발자의 입장과 대처방안을 살펴봅니다. 콘솔 오류 내용 GET chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js net::ERR_FAILED 위의 오류 메세지는 오페라와 크롬 브라우저에서 발생하는 오류임을 확인하였다.(윈도우용 사파리 브라우저가 없어 미확인) 발생 원인 유투브 동영상을 삽입한 문서에서 크롬캐스트(Chromecas)에서 필요한 cast_sender.js 파일을 요청하면서 이 오류가 발생한다. 크롬의 확장기능들과 연관된 어떤 조건을 만족할때 무엇을 삽입한다 등과 같은 매카니즘이 부족한 탓인지 몰라도 관련 개발자들이 마땅한 ..

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