블로그로 돈벌기팁 비앤아이

무료 반응형 티스토리스킨배포! 스파이더웹(Spider's Web) 설치방법 이제 반응형 웹사이트가 대세가 아닌가 합니다. 홈페이지,블로그등 반응형웹으로 리뉴얼하는 추세인데요~~ 티스토리 그 자체로도 충분해서 그동안 관심을 안 가졌지만... 어떤 브라우저, 어떤 전자기기(스마트폰, PC, 태블릿PC)로 접속해도 보기 좋게 보여주는 반응형웹이 필요한 시점이라.. 테스트로 적용을 해봤습니다. 일단 반응형웹이 적용된 모습을 한번 보시죠! 적용한 블로그는 http://fpang.tistory.com 입니다. [PC에서 창을 최대로 확대했을 때 화면] [창을 조금 축소했을때 화면] 위 이미지와 큰 차이가없어보이지만.. 내용(제목)을 보면 창의 폭이 줄어들었지만.. 이미지나 다른 내용들이 정상으로 보이는것을 확인할 ..

[CSS] 티스토리 스킨 댓글,트랙백 스타일 이해하기 댓글과 트랙백 관련 html 은 웹으로 나타나는 내용만 볼때는 간단해 보이지만 스킨 내부를 들여다 보면 은근히 복잡합니다. 이 부분에 대해서 설명을 하려다 보니 은근 난해하고 지루해질것 같습니다. 그래서 스타일에 대해서 배우는 만큼 스타일위주로만 간략하게 설명을 할까 합니다. (이후 존칭생략) 이번 글에서는 본문하단에 배치되는 태그, 트랙백에 대한 스타일 구성에 대해서 알아볼까 한다. 언뜻보기에 소스가 매우 복잡해 보이는데 하나 하나 들여다보면 그리 복잡할것도 없다 . 태그를 표시하는 스타일 일반적으로 포스트 하단에 위치한 태그 리스트이다. 스킨에 따라 태그의 크기, 글자색을 지정한 경우도 있는데 이 기회에 그 방법을 알아보도록 하자. 먼저 skin...

[CSS] 티스토리 포스트 제목 스타일(style) 이글은 style.css 완전정복 3 에서 이어집니다. 오늘은 티스토리의 포스트 제목부 (title, 카테고리, 날짜) 대한 스타일 구성 및 스타일 수정에 대해서 알아보겠습니다. 편의상 존칭은 생략하겠습니다. 포스트 제목부와 스타일 포스트의 제목스타일을 알기 위해서는 skin.html 파일을 먼저 확인해야 한다. skin.html에서 제목에 사용하는 스타일이 어떤 이름으로 선언되어 있는지 알아야 한다. 아래의 내용은 skin.html 소스중 포스트 제목과 카테고리, 날짜 부분이다. 위의 내용중 빨강 테두리 부분이 포스트제목 부분이며 그 아래로 카테고리와 날짜가 배치되어 있으며 사용된 스타일(class)를 확인할 수 있다. 포스트 제목부로 선언된 스타일시..

[CSS] 본문중에 사용되는 인용문, 이미지, moreless 스타일을 내맘대로 오늘은 티스토리의 포스트 본문에 사용되는 인용문(구)과 이미지, more less에 대한 스타일시트(css)에 대해서 알아보도록 하겠습니다. 여기서는 티스토리 스킨에 이미 선언된 스타일시트에 대해서 설명하지만 스타일시트는 얼마든지 직접 선언하여 사용을 할 수가 있습니다. 각각의 속성만 알고 나면 다른곳에도 응용할 수가 있다는 것이지요! ^^ 여튼 css 는 설치형 블로그에서는 필수적으로 알아야 할 내용이며, 블로그뿐만아니라 홈페이지나 커뮤니티에서도 유용하게 활용할 수가 있습니다. css를 블로그를 시작하면서 접하신 분들은 조금 어렵겠지만 몇번 사용하다보면 마음이 편안해집니다. 많이 몰라도 됩니다. 관련 전문직 일을 하지 않는..

[css]스타일쉬트 여백 지정시 꼭 알아야 할 padding, margin, width 정리 일반적으로 사용하는 스타일쉬트에 대해서만 간략하게 정리하려고 했는데 생각보다 그리 녹녹치가 않네요! 이미 시작을 했으니 끝내긴 끝내야겠는데.. ^^ 그래도 이웃분들의 염려와 걱정덕분에 힘 받아서 또 열심히 정리를 시작해보겠습니다. 편의상 지금부터는 평어체를 사용할것이므로 양해 바라겠습니다. css의 사용법을 모르는 분은 이 글을 읽기 전에 "스타일시트(CSS) 이해하기 for 티스토리를 먼저 읽기를 권한다. 오늘은 padding, margin 그리고 적용되는 범위와 width에 대해서 알아볼까 한다. padding이나 margin은 둘다 컨텐츠의 상하좌우에 여백(공백)을 줄때 사용하는 속성이다. padding, ..

티스토리 스킨 style.css 완전정복 2 이 글은 티스토리의 style.css의 내용에 대한 이해를 통하여 css도 배우고 티스토리 스킨을 변경하는데 도움이 되기를 바라는 마음에서 포스팅을 하며 "티스토리스킨 style.css 완전정복 1"에서 이어지는 글입니다. 편의상 평어체를 생략합니다. 사설없이 바로 들어가겠습니다. ^^ 글자크기 태그 h1, h2, h3 ... h는 글자크기를 지정하는 태그입니다. h1이 가장 큰글자이고 h2, h3, h4...h6 까지 숫자가 클수록 글자는 작아진다. style.css 완전정복 의 결과물은 아래와 같습니다. style.css 완전정복 h1의 원래크기는 위와 같지만 스타일쉬트를 아래와 같이 지정하면 h1 {font-size: 0.8em;color:#003366}..

티스토리스킨 style.css 완전정복 1 티스토리는 이용자측면에서 보면 skin.html과 style.css로 구성되어 있다. skin.html : 블로그의 구조 및 컨텐츠 표시 style.css : 블로그에 표시되는 문단 및 글자에 대한 여러가지 속성을 담고 있는 파일로 skin.html에서 호출하여 사용됨 이 2개의 파일중 여기서 설명하려는 내용은 style.css 파일속에 들어있는 내용의 일부이다. style.css에는 블로그 제목의 크기 및 색깔, 블로그의 링크색, 글자색, 폭, 줄간격, 배경색등의 정보가 담겨져 있고 블로거가 언제든지 임의로 수정이 가능하여 본인만의 스킨을 만들 수도 있다. claire 04 © studio.es by Vincent Boiteau 이 style.css 파일속에 ..

티스토리 치환자 정리 티스토리의 skin.html을 보면 [ ##_title_##] 와 같은 텍스트를 볼 수가 있는데 이게 바로 티스토리에서 사용되는 치환자라고 하는 것입니다. 티스토리의 치환자는 실제로 웹화면에 표시되는 컨텐츠(포스트제목, 포스트내용, 댓글, 글의 목록, 태그등등)를 표시해주는 변수와 비슷한것으로 시스템 이해의 어려움과, 반복되는 내용을 HTML로 매번 작성해야 하는 번거로움을 최소화하기 위하여 자주 사용하는 부분을 정리하여 상수화한것입니다. 자주 사용하는 치환자 여기서는 자주 사용하거나 중요한 치환자만 정리를 하도록 하겠습니다. skin.html에서 아래의 치환자가 들어간 위치에는 설명에 적혀진 내용이 표시가 됩니다. ※ 치환자는 화면표시를 위해서 대괄호([) 다음에 한칸을 띄었는데 ..

티스토리 뽀개기 - div 와 span 티스토리 스킨을 이해하기 위해서 div와 span의 이해는 필수입니다. 티스토리의 스킨 및 블로그의 구조를 담고 있는 파일인 skin.html은 대부분 div와 span 태그로 이루어져 있기 때문입니다. 웹(www) 페이지를 구성하고 있는 html 태그중에서 영역을 지정하거나 표(table)을 구성하는데 사용되는 태그는 , ,가 있습니다. 와 은 태그를 대신할 수 있고 태그를 사용하는 것보다 파일의 크기를 줄일 수 있을 뿐만이 아니라 웹의 속도도 올려줄 수가 있는 태그입니다. 티스토리의 구조는 티스토리 뽀개기 - 스킨 구조(skin.html) 이해하기 에서 설명했듯이 헤더영역과 본문(포스트)영역, 사이드영역과 하단영역으로 구분이 되어 있는데 이렇게 영역 구분을 태그..

티스토리 스킨 구조 이해하기 수개월전부터 올리려고 했던 내용인데 이제서야 막을 열었습니다. 티스토리는 블로그를 임의로 꾸밀수 있도록 스킨파일(skin.html)과 웹문서 양식파일인 스타일시트파일(style.css)을 제공합니다. 블로그가 운영되기 위해서는 이 2개의 파일외에도 훨씬 많은 파일들이 필요하지만 블로거에게는 별로 필요없는 파일이기 때문에 보일 필요가 없습니다. 그러므로 티스토리로 블로그 운영을 하기 위해서는 이 2개의 파일내용만 이해를 한다면 본인이 원하는 형태로 자유롭게 꾸밀 수가 있습니다. 하지만 html 이나 css를 전혀 모르는 분이라면 조금의 어려움이 있습니다. 하지만 어려워도 알아야 하는 내용이고 모르면서도 소스를 들여다 봐야 하는 것이 티스토리입니다. 그렇기 때문에 아는만큼 쉽게 ..

"티스토리 스킨" 생각없이 변경하면 개고생한다. 티스토리의 가장 맘에 드는 점은 블로그를 임의로 꾸밀 수가 있다는 점이다. 이용자가 볼 필요없는 소스는 모듈화하여 은닉해놓고 스킨(skin.html)과 스타일(style.css)만을 변경할 수 있도록 하여 잘못되어도 큰 문제가 발생하지 않도록 구조화되어 있다. 이러한 티스토리의 좋은점은 때로는 귀차니즘과 짜증스러움을 안겨주기도 하는데 그때가 바로 스킨을 변경하는 경우이다. 스킨을 변경하면 그동안 꾸몄던 블로그의 대부분이 원상태로 바뀌어 버리기 때문에 스킨을 변경할때는 심사숙고하여 변경을 해야 한다. 그렇지 않은 경우 낭패를 볼 수가 있기 때문이다. 티스토리 스킨을 변경하면 블로그 헤드영역(제목, 메뉴, 검색), 사이드바 영역, 본문의 상하단(광고, 분석툴)..

티스토리스킨 Daily T 스킨의 홈페이지 입력란 누락 해결 스킨을 만든사람의 실수인지 깊은 뜻인지 몰라도 댓글이나 방명록에 홈페이지 주소 입력란이 없다는 것은 소통의 근절을 의미한다고 생각을 합니다. 하지만 실수라고 생각을 한다면 아주 가볍게 넘어갈 일일 수도 있겠네요!. 그런데 이 작은 실수가 스킨을 사용하는 많은 분들에게 불편을 줄수도 있다는 사실. 티스토리는 알고 있겠죠? 작은실수로 인하여 많은 사람들의 시간을 뺏어갈 수 있다는 사실을 알고 있는지 모르겠습니다. 얼마전에 친한 블로그 이웃분으로부터 문의가 들어왔습니다. 블로그 스킨을 Daily T 스킨으로 변경 하여 사용하고 있는데 홈페이지주소(블로그주소)를 적는 부분이 없다는 얘기였습니다. 우선 성급하게 생각나는 것은 "아 이분이 스킨을 만지다가..

글쓰기 에디터화면 스킨 변경 (wysiwyg.css) 티스토리 2008 새관리자 페이지가 개편되어 우리에게 새롭게 선을 보였네요. 티스토리 새관리자 페이지는 사용자를 위한 세심한 배려가 여기저기서 눈에 띌정도로 기능과 편리성이 대대적으로 개편이 되었습니다. 그 중에서 가장 눈에 띄는 것은 센터화면과 우리가 가장 많은 시간을 같이 하는는 바로 글쓰기 에디터 화면이라고 할 수가 있는데요. 에디터 화면의 여러가지 기능들에 대한 설명과 사용법에 대한 내용은 이전포스팅 '티스토리 2008 edit의 변화된 기능과 새로운기능'을 참조하면 되고, 여기서는 관리자 페이지의 스킨에 대해서 알아보기로 하겠습니다. 에디터화면 스킨파일 wysiwyg.css 개편된 티스토리 2008 새관리자 페이지의 글쓰기 에디터화면에 스킨을..