CSS for 티스토리 25

[CSS] 티스토리스킨-댓글 스타일시트 이해하기

[CSS] 티스토리스킨-댓글 스타일시트 이해하기 시작을 했으니 끝을 내야 할텐데.. 끝이 보이지 않는군요. 점점 더 깊은 수렁으로 빠져들고 있는 느낌이 팍팍 들고 말입니다. 암튼 포스트영역 이번 글로 마무리가 됩니다. 블로거나 방문자나 관심깊은 댓글 치장을 어떻게 해야 하나~~ 오늘은 댓글영역의 스타일시트(Cascading Style Sheet)에 대해서 알아보도록 하겠습니다. (이하 존칭생략합니다.) skin.html의 소스와 style.css 파일의 소스가 가장 많은 부분이 댓글이 아닌가 합니다. 찌글 찌글한 영어들이 쫙 화면 전체에 나타나게 되겠네요! 댓글 스타일 - 리스트 및 답댓글 현재 Pure Black (text) 스킨 기준으로 댓글은 아래와 같이 표시가 된다. 지정할 수 있는 스타일을 보면..

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

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

[CSS] 티스토리 포스트 제목 스타일(style)

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

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

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

style.css 완전정복 3 <블로그 본문 영역 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]스타일쉬트 여백 지정시 꼭 알아야 할 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}..

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

티스토리스킨 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 파일속에 ..

(css) border로 꾸미는 나만의 이미지 스타일

(css) border로 꾸미는 나만의 이미지 스타일 블로그에서 사진은 빼놓을 수 없는 필수 요소입니다. 블로그에 사진을 올릴때 style sheet의 border를 이용하면 각자의 원하는 스타일에 맞게 여러가지 모양의 테두리를 그려서 표시할 수가 있습니다. 가장 일반적인 방법이 이미지에 테두리를 표시하는 방법입니다. 그냥 이미지만 올리는 것보다 테두리를 표시하면 사진이 훨씬 깔끔해보이지요! 포토샵이나 기타 그래픽 툴을 이용하는 분이라면 사진에 워터마크도 삽입하고 테두리도 보기 좋게 넣어서 올리지겠지만 그래픽 툴에 대해서 모르는 분들은 그림의 떡이지요! style sheet를 이용하면 그래픽 툴을 다루지 못해도 이미지 멋진 테두리를 삽입할 수가 있습니다. 여기서는 style sheet에 대해서 배우면서 ..

티스토리 치환자 정리

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

티스토리 뽀개기 - div 와 span

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

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

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

서식으로 배우는 스타일시트(CSS)

서식으로 배우는 스타일시트 스타일시트에 대한 연재를 할 계획인데 아직까지 짬이 많지 않아 이렇게 가뭄에 콩나듯 스타일시트에 대한 포스팅을 하고 있습니다. 원래 이런 내용의 글은 꾸준히 올려야 배우는 분들이 제대로 된 학습효과를 얻을 수가 있는데 그러지 못함을 양해 바라겠습니다. 며칠전에 서식에 대한 글을 올린적이 있는데 제블로그 방문자의 50%는 이미 충분히 활용하시는 분들이고 50%는 알지만 사용을 안 하시거나 태그를 몰라서 사용을 못하시는 분들인것 같습니다. ( 관련글 서식활용으로 포스팅 시간을 줄여보자. ) 오늘은 서식에 많이 사용되는 스타일시트에 대해서 써보기로 하겠습니다. 역시나 스타일시트가 무엇인지 모른다면 먼저 스타일시트(CSS) 이해하기 for 티스토리 를 읽어보시기 바랍니다. 과제) 아래..

[html] table 태그 확실하게 이해하기

[html] table 태그 확실하게 이해하기 html 태그에서 테이블은 익히기가 가장 힘들기도 하지만 가장 많이 사용하는 태그가 html 태그입니다. 지난번에 서식활용으로 포스팅 시간을 줄여보자.라는 포스팅을 했는데 이런 서식을 만들때 빼놓을 수 없는 것이 table 태그입니다. 이번 포스트는 table 태그에 대해서 써보도록 하겠습니다. 먼저 html 이 무엇인지 모르는 분은 html 태그 사용법을 읽어보신 다음에 이어서 보시기 바랍니다. 다양한 용도의 태그 태그는 지금 이 글이 표시되는 상자나 표등을 웹에 표현할때 사용하는 태그입니다. 태그의 용도는 응용에 따라 많은 용도가 있지만 간단하게 정리해보도록 하겠습니다. 태그 용도 박스를 그릴때 문서의 일부분에 배경색을 넣고 싶을때 (이 내용이 표시되는 ..

블로거가 꼭 알아야 할 HTML 태그 7가지

블로거가 꼭 알아야 할 HTML 태그 7가지 블로그팁이나 운영과 관련된 글에서 태그가 빠질 수가 없습니다. 블로그 운영에 꼭 필요한 HTML 태그 7가지를 뽑아 사용법을 알아보기로 하겠습니다. 웹공부를 하신 분들이야 태그는 영어 알파벳처럼 쉬운 내용입니다. 웹(www)에서 사용되는 언어가 HTML이고 그 HTML 언어를 구성하는 요소가 바로 태그(Tag)입니다. 웹(www)에 표현되는 글자, 글자색, 글자크기, 그림, 영상등의 모든 내용들은 태그를 이용하여 표시가 됩니다. (html에 대해서 조금더 자세히 보기) 실제로 예전에는 태그를 하나 하나 하드코딩을 하여 홈페이지를 만들었고 간단한 내용을 웹에 표시하기 위해서도 태그를 알아야 했습니다. 하지만 요즘은 웹 HTML 에디터(티스토리의 글쓰기화면, 카페..

크리스마스 트리장식으로 알아보는 CSS

크리스마스 트리장식으로 알아보는 CSS 연말, 크리스마스가 눈앞으로 다가오고 있어 블로그를 크리스마스 분위기로 꾸며볼까?라는 생각을 했는데 때마침 티스토리에서 크리스마스 트리 장식을 만들어 주셔서 제 블로그 상단에 적용을 해봤습니다. 요즘들어 자주 블로그 접속이 느려져서 속이 터지는것 빼고 티스토리의 블로거들을 위한 관심과 정성에 늘 감사할 뿐입니다. 제 마음을 알고 있다는 듯이 이렇게 트리장식까지 만들어주고 말입니다. 크리스마스 카드와 위젯달고, 카드로 마음을 전하세요! 제가 카테고리에 css 카테고리만 만들어 놓고는 글을 계속 못 올리고 있어서 괜히 만들었나 하는 생각이 들정도로 신경쓰이는 카테고리인데.. 크리스마스 트리장식 소스를 무심코 복사해서 skin.html에 삽입하는데, 소스가 css로 만들..

블로그 메뉴 꾸미기(만들기)

블로그 메뉴 꾸미기(만들기) 블로그가 홈페이지보다 좋은점은 뭐가 있을까요? 모 여러가지가 있겠지만 디자인적인 측면에 보면 일단 만들기 쉽고 스킨이 다양해서 쉽게 변경이 가능하다는 것입니다. 하지만 많은 스킨에도 불구하고 스킨의 일부분이 마음에 들지 않는경우가 많습니다. 저는 복잡한것보다는 심플한 스킨이 좋아서 Pure Black (text) 스킨을 사용하지만 텍스트위주로만 스킨이 만들어져서 블로그 헤드 부분이 조금을 썰렁한 느낌이 들어서 늘 신경이 쓰였는데.. 웹서핑을 하던 중에 스타일시트(css)를 이용한 메뉴 샘플을 만들어 놓은 곳이 있어서 바로 메뉴수정에 들어가서 지금은 상단에 보이는 것처럼 꽤 보기 좋게 메뉴가 배치가 되어 있습니다. 블로그 상단에 보이는 메뉴는 기본적으로 지역로그, 태그, 미디어..

스타일시트의 선언방법 및 사용 예제 2

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

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

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

스타일시트(CSS) 이해하기 for 티스토리

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