티스토리 블로그 스킨 만들기 – 3단 스킨 변형 버전

이전 글 의 3단 스킨 기본에서 컨테이너의 배경 이미지 박스를 제거했습니다. 메뉴를 헤더 아래로 이동했으며 서치박스도 메뉴와 나란히 배치했습니다. 사용방법은 이전글을 참고하세요.  cfile30.uf.186F743B4F46E60F31CC2F.zip 컨테이너의 둥근 모서리의 배경이미지를 만드는 8개의 작은 이미지는 투명이 가능해서 body의 배경색을 변경하거나 이미지를 삽입해도 문제가 없었지만 위 스킨의 둥근 모서리는 하나의 이미지 파일을 사용해서 만든 것이기 때문에 투명은 안되므로 body의 배경색을 변경할때는 이미지파일의 ...

티스토리 블로그 스킨 만들기 – 3단형 스킨 공개

이전글에서 마무리한 2단형 스킨을 3단형으로 변경하였습니다. 이 3단 스킨을 토대로 여러가지 형태로 변경하여 사용할 수 있습니다. 2단형은 물론 1단형으로도 변경이 가능하며 컨테이너 영역의 배경이미지를 클래스 선택자로 변경하였으므로 컨테이너 영역의 배경이미지를 제거하고 사용하거나 해더영역과 푸터(footer)을 컨테이너영역에서 분리하여 별도의 배경이미지를 추가할 수도 있습니다. 메뉴도 원하는 곳에 배치할 수도 있어서 헤더와 컨테이너가 분리된 경우 그 사이에 배치할 수도 ...

HTML/CSS 기초 – 이미지 파일을 사용하지 않고 둥근 모서리 배경 만들기

이전 글들에서는 포토샵으로 만든 하나 이상의 이미지를 이용하여 모서리가 둥근 배경을 만들었지만 항상 포토샵을 사용해서 만들어야하는 단점이 있습니다. CSS3의 border-radius 속성을 사용하면 간단하게 둥근 모서리의 배경을 만들 수 있지만 많은 사람들이 사용하는 인터넷 익스플로러에서는 9버전만 지원한다는 단점이 있습니다. 구글의 애드센스 페이지를 보다가 둥근 모서리의 배경이 있어서 살펴보니 CSS의 border 속성과 여러가지 다른 속성을 이용하여 테두리가 ...

티스토리 블로그 스킨 만들기 14 – 각종 아이콘 삽입 & 마무리 2

그동안 CSS 기초부분에서 진행한 내용을 기반으로 티스토리 블로그 스킨 만들기를 진행하였는데 사실 블로그 스킨 만들기는 대단한 CSS 기술이 사용되는 것은 아닙니다. 기초적인 레이아웃에 관한 지식만 있으면 누구나 스킨을 만들 수 있습니다. 가장 많이 사용하는 것이 div 태그를 이용하여 요소를 배치하고 마진과 패딩을 이용하여 세부 조정을 하는 것입니다. 인터넷 익스플로러가 CSS3의 둥근 모서리와 그림자 효과를 지원하지 ...

티스토리 블로그 스킨 만들기 13 – 각종 아이콘 삽입 및 폰트 사이즈 변경 & 마무리 1

최종 마무리 단계이므로 아이콘을 삽입하고 폰트 사이즈를 변경하였습니다. 이곳 을 클릭하면 진행되고 있는 테스트 블로그로 갑니다. 메뉴의 애니메이션 되는 배경이미지의 사이즈가 커서 헤더 영역에 배치하기는 부담이 될 것 같아 좌측 상단에 배치하였습니다. 이번 글에서는 상단에 배경이미지 삽입하고 메뉴를 이동 배치하는 방법과 폰트 사이즈 변경을 알아봅니다. 특히 중요한 것은 티스토리의 CSS는 스킨 자체에 포함된 CSS로 통제되기도 ...

티스토리 블로그 스킨 만들기 12 – 컨텐트 영역에 구글 광고 삽입하기

티스토리 블로그 스킨 만들기이지만 구글 광고를 두개 삽입하였으니 나머지 하나 마저 삽입하는 방법을 알아봅니다.    이전 글에서 1의 리본 끝부분이 너무 튀어나온 것 같아서 3픽셀 줄였습니다.  구글광고는 디스플레이 광고를 3개까지 달 수 있고 링크단위광고는 3개를 더 추가할 수 있습니다. 다음 뷰 애드박스를 설치할 경우 2처럼 고정되어 수정할 수 없게 되어있습니다. 구글광고를 설치하기 좋은 자리는 컨텐트영역 상단이므로 3의 자리가 ...

페이지 10 의 18« 처음...89101112...마지막 »