작은설탕의 달콤한 인생로그

지난 포스팅에서 티스토리에 소셜댓글 서비스인 라이브리(LiveRe) 를 설치하는 방법을 알려드렸었죠? 라이브리 회원가입 및 티스토리에 설치하는 방법 (이전 글)티스토리에 소셜댓글서비스-라이브리 설치하기 (티스토리 플러그인 이용) 포스팅 맺음말에, 티스토리 댓글과 라이브리 댓글을 탭방식으로 구현하는 방법을 포스팅하겠다고 예고 드렸었는데요. 오늘 그 과정을 포스팅 하려고합니다."잘 듣고 따라하세요 Listen carefully" ^^주의! 항상 스킨을 수정하실땐, 백업이 필수입니다. Tab 방식 이란? 강좌에 앞서, 우선 Tab방식이란게 뭔지부터 감을 잡아야겠죠? 그래서 제 블로그에 구현된 댓글 영역을 움짤로 캡쳐해서 준비해봤습니다. 이거 보시면, "아하!!"라며 단번에 이해되실꺼예요."백문이 불여일견" ㅋ..

티스토리엔 기본적으로 비회원과 티스토리 계정으로만 댓글을 달수있죠. 이말인 즉슨, 티스토리 회원이 아니면, 자신이 남긴 댓글에 답글이 달려도 알림을 받을 수 없다는 뜻이 됩니다. 간단한 질문과 답변을 위해 티스토리 계정을 만드는건 아무래도 비효율적일텐데요. 라이브리(LiveRe)는 자신의 SNS(소셜 네트워크 서비스)계정으로 블로그에 댓글을 쓸수있도록 해주는 아주 유용한 서비스입니다. 라이브리 서비스가 시작된지가 오래 되었으니, 제가 자세하게 설명드리지 않아도 이미 많은 분들이 알고계시겠죠? ^^오늘은 티스토리 블로그에 라이브리를 설치하는 방법에 대해서 포스팅할게요. 라이브리 회원가입 하기 라이브리에 회원가입하기 위해서 일단 라이브리 홈페이지에 접속해야겠죠? 라이브리 홈페이지 : https://liver..

안녕하세요. 지난 시간에 우리는 티스토리 스킨가이드를 참고하여 기초적인 HTML 구조를 만들고, 시멘틱 태그를 적용하는 과정까지 진행했었죠? 오늘은 지난 시간에 이어, 스킨 구조를 좀더 구체화하도록 하겠습니다. 티스토리 반응형스킨 제작기 지난 이야기 티스토리 스킨제작기 (1) - 개발환경 구축하기 (웹개발도구 Brackets 이용)티스토리 스킨제작기 (2) - 레이아웃 잡기티스토리 스킨제작기 (3) - 레이아웃 만들기티스토리 스킨제작기 (4) - 티스토리 스킨 레이아웃 구성하기티스토리 스킨은 앞서도 말씀드렸듯이, skin.html 이라는 하나의 페이지에 여러 기능페이지를 모두 담아야하는 특징이 있죠. 즉, 포스팅 리스트도 skin.html에서, 위치로그도 skin.html에서, 방명록, 태그, 검색결과리..

벌써 티스토리 반응형스킨 제작기 시리즈의 네번째 포스팅이네요. 시리즈명 앞에 "좌충우돌"이라는 단어를 붙여야 할까봐요. ㅋㅋ 지난 시간에 HTML과 CSS로 처음에 우리가 디자인한 레이아웃을 만들어봤는데요. 일반적인 홈페이지를 만들땐, 이렇게 Brackets 프로그램이나 기타 웹디자인 프로그램으로 레이아웃을 짜나가면 되는데, 티스토리는 조금 어려운 점이 있더군요. 그 이유는 바로 티스토리에서 제공하는 치환자 때문인데요. 의 형태로 구성된, 티스토리에서 제공하는 변수 같은거라고 이해하시면 되요. 암튼, 이 치환자라는 녀석 때문에, 그리고 하나의 HTML파일에 모든 페이지를 구성해야한다는 특이성때문에 티스토리 스킨을 만드는 작업은 블로그 관리자 페이지의 HTML/CSS 편집 기능을 이용해야 되겠더라구요. 그..

오늘 소개해드릴 CSS3 속성은요, box-shadow입니다. box-shadow 는 DIV같은 박스에 그림자 효과를 주어서 입체감을 표현할 수 있도록 해주는 속성인데요. 이 속성만 잘 사용해도, 밋밋한 스킨을 좀더 세련되게 꾸밀 수 있어요. 그럼 box-shadow에 대해서 알아볼까요? 지원 브라우저 box-shadow는 IE8 이하의 브라우저를 제외한 모든 브라우저에서 지원되는 기능입니다. 아래 표를 보시죠. CSS 문법 (Syntax) box-shadow: none | h-shadow v-shadow blur spread color | inset | initial | inherit ; none box-shadow의 기본값은 "none"입니다. 즉, 기본적으로 box-shadow가 적용되지 않는다는 ..

Prologue안녕하세요. 오늘은 "티스토리 반응형스킨 제작기" 연재물의 3편 입니다. 지난 시간에 우리는 레이아웃의 기본이 되는 구조를 네모난 상자모양으로 만들어놨었죠? 티스토리 반응형스킨 제작기 - 지난 이야기티스토리 스킨제작기 (1) - 개발환경 구축하기 (웹개발도구 Brackets 이용)티스토리 스킨제작기 (2) - 레이아웃 잡기오늘은 지난시간에 만든 구조를 좀더 레이아웃답게 만드는 과정을 진행할 꺼예요. 혹시 지난시간에 보여드린 기본 레이아웃 디자인 기억하시나요? 기본적인 2단 구성의 레이아웃이예요. 이번 포스팅에선, 우선 위와같은 레이아웃을 만드는 과정을 진행할꺼구요. 글이 너무 길어지지만 않으면, 사이드바의 폭을 고정폭으로 설정하고 본문폭에 가변폭을 적용하는 과정까지 진행해 볼께요. 레이아웃..

요즘 반응형웹 디자인이 적용된 블로그를 둘러보면, 화면의 가로폭을 조정할 때, 사이드바의 크기는 변하지 않으면서 본문의 너비만 줄어드는 이른바 가변폭 이 설정된 블로그를 많이들 보셨을꺼예요. 저도 최근에 티스토리 반응형 스킨을 직접 만들면서 이부분에서 막히길래 많이 검색을 해보았습니다.우선 해결방법이 적용되기 전의 문제점부터 살펴보죠. 문제점 1 : width 속성에 %로 폭설정 우선 가변폭 설정을 하지 않고 본문과 사이드바의 너비를 퍼센트(%)로 지정해 놓으면, 본문과 사이드바가 겹치지는 않지만, 웹브라우저의 너비에 따라 사이드바의 폭도 늘었다 줄었다 하죠. 하지만 사이드바의 특성상, 폭이 일정하게 고정되는 것이 우리의 목표입니다. 사이드바에는 일정한 크기를 갖는 모듈들이 들어가기 때문이죠. 문제점 2..

안녕하세요. 오늘은 티스토리 반응형 스킨제작기 2탄이예요.지난시간에 웹프로그래밍 도구인 Brackets 를 이용하여 티스토리 스킨제작을 위한 환경설정을 했었죠. 오늘은 우리가 만들 스킨의 레이아웃을 구상해볼꺼예요. ※ 알림 저는 HTML/CSS/JavaScript 등과 관련한 전문지식은 없습니다. 따라서 본 시리즈는 "강좌"가 아니라는 점을 미리 알려드립니다. (좌충우돌하면서 함께 배워나가는 시리즈랍니다. ^^)티스토리 반응형 스킨제작기 - 지난 포스팅 [작은설탕 IT/Blog] - 티스토리 스킨제작기 (1) - 개발환경 구축하기 (웹개발도구 Brackets 이용) 레이아웃 디자인 웹페이지를 만들 때, 제일 먼저 고려해줘야 하는 것이 "홈페이지 디자인을 어떻게 만들까?" 하는 부분입니다. 즉, 웹페이지의..

안녕하세요. 작은설탕의 "작은"을 맡고있는 Mini입니다. ^^지난 시간에, 티스토리 반응형 스킨 #2 를 적용하고 앞으로 스킨을 수정해나가는 과정을 시리즈로 연재하겠다고 말씀드렸는데요. 이와 더불어서, 이참에 HTML5와 CSS3를 공부하고자 아예 처음부터 티스토리 반응형 스킨을 제작하기로 마음먹게되었어요. 꿈은 원대하게... ㅋㅋ[작은설탕 IT/Blog Tips] - [티스토리 반응형스킨#2 - 시리즈1] 반응형스킨#2로 스킨 바꾸기그래서 오늘은 그 첫시간으로, 티스토리 스킨을 제작하기위한 환경을 설정하는 과정을 소개할게요. 웹개발환경이야 각자 마음에 드는 방법으로 진행하면 되는데요. 전문적으로 프로그래밍을 다루시는 분들은 Eclipse 개발툴을 많이들 이용하시죠. 그런데 굳이 HTML과 CSS, 그..

티스토리에서 기본으로 제공하고 있는 반응형 스킨은 #1과 #2가 있어요. 저희 블로그엔 현재(2016년 7월 21일 현재) 반응형 스킨 #1이 적용되어있어요. 물론 그간 많은 부분을 수정해서 사용하고 있죠.티스토리 꾸미기 관련 이전 글 보기[작은설탕 IT/Blog Tips] - 티스토리 블로그 이웃추가버튼 (링크버튼) 만들기[작은설탕 IT/Blog Tips] - 티스토리 블로그에 카카오 스토리채널 연동하기[작은설탕 IT/Blog Tips] - 티스토리 반응형스킨에 구글 애드센스 광고 삽입하기위에 포스팅한 내용 외에도, 아직 포스팅은 하지않은 채 수정해놓은 기능들도 꽤 있어요. 이렇게 기능 수정을 하기까지는 여러 블로거님의 글을 참고하였는데요, 반응형 스킨 #2에 비해 반응형 스킨 #1의 사용자가 적어서 ..