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

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

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

style.css 완전정복 3 지금까지의 css 관련글에서는 css 관련 속성이나 선택자들 중에서 기본적이면서 가장 많이 사용하는 속성위주로 설명을 드렸으며 기본적인 사항은 어느정도 마무리가 된것 같습니다. 그래서 오늘은 티스토리에서 블로그의 포스트와 관련된 스타일시트(css)에 대해서 설명을 하도록 하겠습니다. 설명할 내용을 요약하자면 다음과 같습니다. 포스트내의 글자크기, 글꼴, 글자색에 대한 스타일시트 포스트내의 링크색 및 표현방법 포스트 영역의 넓이 지정 PARTICIPATION, or 37 pieces of library flair (also a 365days shot) by cindiann 블로그 포스트영역 스킨 구조(skin.html) 이해하기 에서 설명했지만 티스토리는 크게 header 영..

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

스타일시트의 지정방법 및 사용 예제 2 스타일시트를 선언하는 방법1에 대해서 지난번에 글을 올렸습니다. 이번에는 실제로 사용예제를 통하여 스타일 시트를 선언하는 방법에 대한 글을 쓸까합니다. 아! 한가지 이번에 CSS 관련 포스팅하면서 준비한것이 있습니다. 바로 태그연습장입니다. 스타일시트 설명중에 나오는 소스를 태그연습장에 복사하여 넣거나 직접 연습할 수 있는 연습장입니다. 태그연습장은 화면 상단 메뉴에 있습니다. :: 스타일시트의 선언형식 스타일시트의 선언형식은 아래와 같습니다. 선택자 { 속성: 값 ; 속성: 값 ; } 먼저 선택자를 적고 중괄호({}) 안에 속성(attribute)과 값을 적습니다. 속성은 여러개를 적어줄 수 있으며 속성과 속성의 구분은 세미콜론(;)으로 해주고, 속성은 콜론(:)..

스타일시트(CSS)의 선언방법 1 시작을 했으니 끝을 봐야겠지요? 이번에는 스타일시트를 선언하는 방법과 사용법에 대해서 알아보도록 하겠습니다. 스타일시트에 대해서 모르시는 분은 먼저 스타일시트(CSS) 이해하기 for 티스토리 를 읽어보시기 바랍니다. 또한 html을 모른다면 이해가 어려울 수도 있습니다. 스타일시트 선언방법 스타일시트를 선언하는 방법은 3가지가 있습니다. 원래 곧바로 예제를 보여주며 설명하는 것이 읽는 사람이 지루하지 않고 재미있겠지만 어차피 다 알아야 하는 사항이므로 기본 사용법을 알고 넘어가는 것이 좋을듯 합니다. 하긴 이글을 읽는 분이라면 관심이 있어서 보시는 분일테니 제가 걱정하는 것이 기우에 불과할지도 모르겠네요. ^^ 스타일시트의 선언은 html 파일안에 선언을 해줍니다. 사..

스타일시트(CSS) 이해하기 for 티스토리 티스토리의 skin.html과 style.css에 대하여 포스팅을 하다 보니 먼저 스타일시트(style sheet)에 대한 기본설명을 우선시 할 필요성이 있더군요. 또한 티스토리를 사용하는 블로거라면 당연히 알아야 할 부분이 이 CSS 부분이기도 합니다. 그래서 스타일시트에 대해서 간략하게 정리를 해봅니다. 한가지 더 덧붙이자면 제목은 티스토리를 위한 스타일시트라고 했지만 html을 사용하는 곳이라면 어디에서든지 스타일시트를 사용할 수가 있습니다. CSS란 무엇인가 CSS는 Cascading Style Sheet의 약자로 스타일시트라고도 합니다. 스타일시트는 워드프로세서의 스타일과 마찬가지로 웹문서(html) 작성시 반복적으로 사용되는 서식(글꼴,글자크기,글자..

티스토리 포스트내의 링크색 바꾸기 티스토리에 블로그 둥지를 틀고 블로깅을 하다 보면 티스토리 특성상 스킨변경이나 포스트디자인에 관심들이 많습니다. 스킨은 포스트제목에서 링크, 글자색, 댓글표시방식, 각종 버튼들이 세트화되어 한꺼번에 바뀌어버리는 특징이 있습니다. 만약에 스킨중 제목색이라든지 댓글색등 일부만 변경하길 원한다면 skin.html이나 style.css를 수정해야만 합니다. 여기서는 style.css를 변경하는 방법을 설명합니다. 스타일시트(CSS)에 대해서 모르는 분은 읽어보세요! -> 스타일시트(CSS) 이해하기 for 티스토리 티스토리에는 여러종류의 링크가 있습니다. 제목링크, 카테고리 링크, 포스트내의 링크, 태그링크등 여러종류의 링크가 있는데 링크된 글자를 같은 색으로 할 수 있고 각기..

티스토리 사이드바 리스트 글자색 변경 이전 포스트 중에 CSS활용하여 티스토리 사이드바에 위치한 각각의 섹션 제목을 변경하는 포스트를 올린적이 있습니다. 그런데 사이드바 제목 말고 바로 아래의 리스트 글자색을 변경하는 방법을 문의한 분이 계서서 간단하게 방법을 올립니다. 2008/07/23 - [CSS for 티스토리] - 티스토리 사이드바 제목 변경 CSS 티스토리 블로그에 표시되는 포스트 제목이나 내용, 리스트, 포스팅 날짜, 글쓴이 등등 대부분의 내용들은 style.css에 정의가 되어 있습니다. 정의된 내용은 개별적으로 사용하기 위해 정의된 내용도 있고, 여러곳에서 사용할 수 있는 공용 스타일로 이용하기 위하여 정의된 스타일도 있습니다. 이렇게 공용으로 사용하기 위하여 정의된 스타일을 변경하게 되..

티스토리 사이드바 제목 변경 CSS 오래전부터 티스토리의 관리에 필요한 CSS 포스팅을 하려고 마음먹고 있었는데 이번 베타테스트를 하면서 CSS를 알고 있는 사람보다는 모르는 사람이 더 많은것 같아 더 이상 미루지 말고 바로 시작해야겠다는 생각이 들더군요. CSS와 관련된 포스팅을 한다고 해서 제가 CSS에 많이 아는 것은 아닙니다. 다만 티스토리 관리에 필요한 내용중 제가 알고 있는 내용을 모르고 있는 분들에게 알리고자 함이나 혹시나 설명이 잘못되거나 부족한 부분이 있다면 댓글로 남겨주시면 감사하겠습니다. 첫번째 CSS 포 티스토리 :: 사이드바 제목 설정 저는 pure 스킨을 사용하는데 pure 스킨은 화려하지 않고 그냥 평범한 스킨입니다. 그러다 보니 대부분의 컬러는 검정색을 사용합니다. 좀더 보기..