티스토리 CSS 7

[CSS] 티스토리 스킨 댓글, 트랙백 스타일 이해하기

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

[CSS] 본문중에 사용되는 인용문, 이미지, moreless 스타일을 내맘대로

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

[css]스타일쉬트 여백 지정시 꼭 알아야 할 padding, margin, width 정리

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

티스토리 스킨 style.css 완전정복 2

티스토리 스킨 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}..

티스토리 뽀개기 - 스킨 구조(skin.html) 이해하기

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

스타일시트(CSS)의 선언방법 1

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

티스토리에서 글리스트 색 변경하기

티스토리에서 글목록(list) 색 변경하기 제가 사용하는 스킨은 'Pure Black (Text)'라서 특별한 디자인도 없고 텍스트 위주로 되어 있으며 거기에 글자에 대한 포인트도 없습니다. 그래서 스킨이 깔끔하긴 하지만 전체적으로 블랙 컬러로 구성되어 일부 밋밋한 페이지가 있습니다. 그래서 일부 섹션이나 일부 페이지의 텍스트 컬러 변경 작업을 했답니다. 이번에는 티스토리의 카테고리 이름을 클릭하면 나오는 포스트 목록 색깔을 변경해봤습니다. ▲ 변경전 리스트 모습 skin.html의 확인 먼저 티스토리 관리자페이지의 스킨메뉴의 'HTML/CSS 편집'을 클릭하면 표시되는 skin.html에서 리스트를 출력하는 위치를 찾아야 합니다. 가장 쉽게 찾는 방법은 제목을 가지고 찾는 것입니다. 여기서는 제목이 "..