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

티스토리 에디터의 사진 첨부 기능으로 이미지를 삽입할때 영향을 주거나 받는, 연관하여 스킨 제작시에 제한 받을 수 있는 점들에 대하여 살펴봅니다. 스킨 제작분들 이외에도 블로그를 시작하기 전에 알아두면 차후 스킨 변경시 이미지로 인해 겪는 문제를 덜 수 있습니다. 티스토리 본문 너비 이해 티스토리의 본문 너비라고 지칭하면 대부분 글쓰기 가로폭을 떠올린다. 이는 TISTORY 관리 → 글설정 → 글쓰기 환경의 글쓰기 가록폭 에서 설정 할 수 있으며,..
티스토리/스킨가이드 2015.11.02 11:00

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

고정된 너비만을 제공하는 레이아웃에서는 서버단에서 화면에 출력할 글자수를 미리 가늠하며 디자인하기가 수월합니다. 레이아웃이 유동적인 너비를 가지거나 서버 스크립트쪽에 접근할 수 없어 글자수를 제어하기 곤란할 경우에는 아래에서 설명하는 방법들이 추천됩니다. 한 줄 단위로 글자 자르기 처음으로 적용해 볼 것은 한 줄, 혹은 여러 줄에 걸쳐 출력되고 있는 글자들을 지정된 너비에 맞게 한 줄 단위로 자르는 법이다. 이는 여러가지 CSS 속성들을 조합하여..
웹코딩/CSS 2015.10.30 11:00

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

티스토리는 반응형 스킨을 위해 따로 무엇인가 지원하는 곳은 아니였습니다. 스킨공모전 이후에 새로운 스킨을 준비중이라는 티스토리 측의 말이 있었듯이 하나 둘 기본 시스템을 업데이트해 나가고 있습니다. 얼마전에는 날짜 표현방식이 변경되어 당황스런 일도 있었지만 이번에 발견한 것은 본문에 삽입되는 이미지와 관련된 정보입니다. 반응형 이미지 지원 그 동안 티스토리 스킨제작시에 에디터로 삽입되는 본문 이미지를 반응형 디자인에 맞게 수정하기 위해..
티스토리/스킨가이드 2015.10.29 11:00

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

몇몇 애플리케이션에서 스크롤에 따라 하단의 광고가 등장하거나 상단의 메뉴가 등장하는 등의 사용자 편의를 고려한 디자인을 접해보셨을 겁니다. 관련하여 많은 스니핏(코드조각)이 존재하는데 그 중에서 한가지를 소개합니다. Headroom.js 소개 헤드룸(Headroom)은 사용자의 스크롤을 감지하여 원하는 요소에 동작을 추가하는 가벼운 고성능의 자바스크립트 위젯이다. 이는 상단의 네비게이션에 자주 애용되고 있으며, 기존의 고정(Fixed)된 네비게..
웹코딩/App,Plugin 2015.10.27 11:00

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

IE7을 고려해야하는 페이지를 제작하는 경우, :before 나 :after 와 같은 가상 선택자를 지원하지 않아 애를 먹곤 합니다. 설상가상으로 content 속성까지 지원하지 않지요. 이에 대한 대체방안을 모색해봅니다. :before, :after 선택자 대체방안 IE7에서는 :before 와 :after 가상 선택자를 대체하기 위해서 새로운 요소를 생성하고 이에 클래스명을 부여하는 방법이 사용된다. 아래의 예시와 같이, 이 표현식은 자바스..
웹개발론/크로스브라우징 2015.10.26 11:00

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

롤리팝(Lollipop) 버전의 안드로이드 크롬 39부터 지원하는 새로운 메타 태그 속성에 대하여 알아봅니다. theme-color 속성 크롬 툴바의 색상을 변경할 수 있는 속성으로 <head> 안쪽에 메타 태그를 이용해 설정한다. <meta name="theme-color" content="#333"> 웹 사이트가 좀 더 응용프로그램 및 앱처럼 보이는 효과를 부여하게 된다. 언젠가는 앱처럼 모든 부분을 재설정 할 수 ..
웹코딩/HTML 2015.10.23 11:00

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

CSS 디자인의 경우 복수의 열을 같은 높이로 맞춰야 하는 상황이 종종 발생합니다. CSS3를 이용하면 간단히 해결될 문제이지만, 이를 지원하지 않는 브라우저를 생각한다면 많은 고민을 필요로 하기에 이에 대한 방법을 정리해 봅니다. 열의 높이를 자동으로 맞추는 속성들을 활용 CSS 속성들 중에는 같은 부모의 자식 요소들 사이에서 자동으로 열의 높이를 맞추는 속성들이 있다. flex 속성 flex 속성을 이용하면 아주 손쉬운 작업이다. 대상 ..
웹코딩/CSS 2015.10.06 11:00

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

웹폰트의 또 다른 진화형태인 아이콘 폰트에 대한 설명과 이를 제공하는 사이트에 대하여 알아보고 궁극적으로 원하는 아이콘만을 삽입하는 방법을 거론합니다. 아이콘 폰트의 등장 기존에는 특수한 글꼴이나 아이콘을 사용하기 위해서 이미지 형식으로 제작하여 웹문서에 삽입하곤 했다. 이는 HTTP 요청을 많이 발생시켜 서버에 부하를 주고 로딩 속도에 영향을 미쳤다. 이를 극복하기 위해 CSS 기법 중에 하나인 Image Sprite 방식을 사용하여 여러 이미..
웹코딩/CSS 2015.10.05 11:00

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

안드로이드 브라우저들의 파편화에 대한 이야기입니다. 원문은 THE ANDROID BROWSER입니다. 서문 데스크탑의 브라우저 테스트가 어렵다고 생각되는가? 안드로이드 기기의 브라우저를 테스트한다면 지옥을 경험하게 될지어다~ 모든 브라우저들은 다르게 작동하고 이는 다른 결과를 렌더링하게 된다. 안드로이드에는 많은 브라우저가 존재하며, 동일한 브라우저라도 많은 변경점이 있다. 웹뷰(WebView) 안드로이드는 웹킷(WebKit) 기반의 웹뷰도 ..
웹개발론/크로스브라우징 2015.10.02 11:00

가상머신(Virtual Machine)의 이해

가상머신에 대한 기초적인 개념을 잡고 넘어갑니다. 이후 다루게 되는 가상머신에 대한 이야기는 시스템 가상 머신중에 vmware, virtualbox에 대하여 알아보게 됩니다. 가상머신 정의 가상 머신(Virtual Machine, VM)은 컴퓨팅 환경을 소프트웨어로 구현한 것, 즉 컴퓨터를 에뮬레이션하는 소프트웨어다. 가상머신상에서 운영체제나 응용프로그램을 설치 및 실행할 수 있다. 가상 머신은 실제 컴퓨터와 어느 정도의 통신과 사용을 기반으로 ..
개발도구/가상머신 2015.09.30 12:00

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

티스토리 스킨 제작중에 메타 태그에 대한 의문점이 남아 이에 대한 조사를 해보았습니다. 스킨 제작에 관심있는 분들에게 참고가 되었으면 합니다. meta http-equiv="x-ua-compatible" IE 브라우저 사용자들을 위해 최신의 문서모드로 렌더링 되도록 아래와 같은 코드 사용을 하곤 한다. <meta http-equiv="x-ua-compatible" content="ie=edge"> 이는 X-UA-Compatibl..
티스토리/스킨가이드 2015.09.24 11:00

정규 표현식 도움말

정규표현식을 떠올리면 수학공식 외우던 학창시절 생각이 문득 떠오릅니다. 그만큼 외워도 금방 잊어버리고 몇번 이고 다시 되새기고 또 그렇게 잊어버리곤 합니다. 관련해서 도움이 될만한 정보들을 모았습니다. 정규표현식은 프로그래밍 언어마다 구현 방법이나 호환성 정도에 차이가 난다는 것에 유념해야 합니다. 정규표현식 되새김질 정규표현식을 처음 접하는 분들에겐 충분히 도움이 되지 못할 수도 있으나 한번 쯤 그 내용을 살펴본적이 있다면 아래의 내용이 ..
웹코딩/Javascript 2015.09.23 14:30

유튜브 동영상 썸네일 추출

유투브는 YouTube Data API를 통해 유투브 동영상에 대한 각종 정보와 쎔네일을 제공하고 있습니다. 문서에 삽입된 동영상의 썸네일이 필요한 경우가 있어 이 내용을 정리합니다. 동영상 ID값으로 썸네일 추출 유투브 동영상을 공유할때 제공되는 코드들은 대표적으로 아래와 같은 두가지 방식이 자주 애용된다. 공유 : https://youtu.be/nVCubhQ454c 소스코드 : <iframe width="640" height="36..
웹코딩/App,Plugin 2015.09.22 14:31

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

유투브의 동영상을 iframe 형식으로 삽입할때 간혹 콘솔 오류 메세지를 경험하게 됩니다. 이에 대한 개발자의 입장과 대처방안을 살펴봅니다. 콘솔 오류 내용 GET chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js net::ERR_FAILED 위의 오류 메세지는 오페라와 크롬 브라우저에서 발생하는 오류임을 확인하였다.(윈도우용 사파리 브라우저가 없어 미확인) 발생 원인 유..
웹코딩/App,Plugin 2015.09.21 11:00