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

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

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

블로그 메뉴 꾸미기(만들기) 블로그가 홈페이지보다 좋은점은 뭐가 있을까요? 모 여러가지가 있겠지만 디자인적인 측면에 보면 일단 만들기 쉽고 스킨이 다양해서 쉽게 변경이 가능하다는 것입니다. 하지만 많은 스킨에도 불구하고 스킨의 일부분이 마음에 들지 않는경우가 많습니다. 저는 복잡한것보다는 심플한 스킨이 좋아서 Pure Black (text) 스킨을 사용하지만 텍스트위주로만 스킨이 만들어져서 블로그 헤드 부분이 조금을 썰렁한 느낌이 들어서 늘 신경이 쓰였는데.. 웹서핑을 하던 중에 스타일시트(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) 작성시 반복적으로 사용되는 서식(글꼴,글자크기,글자..

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

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

글쓰기 에디터화면 스킨 변경 (wysiwyg.css) 티스토리 개편 내용중 글쓰기 에디터화면에 스킨을 입히는 기능이 새로 추가 되었다. 정해진 글자나 배경등이 아닌 본인 스스로 글자색이나 배경색, 배경이미지등을 변경하여 사용할 수 있도록 추가된 기능으로 현재 지원되는 스킨은 5개이다. + 지금까지 추가된 스킨 리스트 (아래의 스킨을 기존 관리에서 저장하신 뒤 새로운 에디터 화면에서 보시면, 에디터에 적용된 것을 볼 수 있습니다) Butterfly 스킨 IsBase 스킨 Moving Box 스킨 Pure 스킨 ViewFinder 스킨 추가된 스킨이나 추가되지 않은 스킨이나 이용자 스스로 스킨을 만들거나 변경이 가능한데 변경하는 방법에 대해서 간단하게 알아보기로 하자. * 글쓰기 에디터화면의 스킨 입히는 방..