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

티스토리 블로그 스킨 만들기 5 – 헤더와 사이드바 수정 1

이전 글에서 큰 레이아웃 박스의 배경이미지를 완성했으니 이제 너저분해진 헤더를 정리하고 사이드바의 위젯박스를 정리해야겠죠.    현재까지 작업한 화면입니다. 헤더부분의 배경이미지가 가로로 repeat되고 있어서 지저분합니다. 워드프레스 테마스킨에는 이곳에 아무것도 없으니 이미지를 제거합니다. 이부분은 스킨위자드를 사용하고 있기 때문에 스킨위자드 설정창에서 제거합니다. 사이드바의 모듈박스는 제목과 상단부분이 많이 떨어져 있어서 세로 폭을 줄여야하고 박스와 박스 사이의 간격이 좁아서 늘려줘야합니다. 구글광고는 컨텐트영역 상단에 ...

티스토리 블로그 스킨 만들기 4 – 사이드바 영역 배경이미지 만들기

사이드바 영역의 배경이미지는 가로로 늘어나지 않기 때문에 컨텐트영역의 배경이미지보다는 간단합니다. 하지만 모듈이 여러개 배치되므로 각 모튤마다 배경이미지를 만들어줘야합니다. HTML부분에서는 클래스 선택자를 사용하여 시작태그 부분과 마감태그 부분만 삽입하고 CSS에서는 클래스 선택자를 사용하므로 한번만 적용하면 되니까 컨텐트 영역보다는 쉽습니다. 여러개의 모듈이 사이드바에 배치되어있습니다. 티스토리 블로그는 관리센터의 사이드바 메뉴에서 원하는 모듈을 제거하거나 추가할 수 있습니다. 최근에는 구글 광고가 가로세로 ...

티스토리 블로그 스킨 만들기 3 – 컨텐트영역 배경 이미지 만들기

스킨을 만들때는 방문자를 항상 우선 생각해야하므로 가능한한 모든 웹브라우저를 설치해서 시험해봐야하지만 최소한 5대 브라우저(인터넷 익스플로러, 구글 크롬, 파이어폭스, 애플 사파리, 오페라)는 설치해 놓는 것이 좋습니다. 최근에는 구글 크롬의 사용자가 많이 늘었죠. 웹브라우저는 옛날 버전도 시험해봐야하는데 모든 버전을 설치해서 사용할 수 없으니 이를 시험할 수 있는 사이트에서 URL을 입력하면 어떻게 보이는지 알 수 있습니다.  이곳 을 클릭하면 ...

티스토리 블로그 스킨 만들기 2 – 배경색상 변경, 본문 글자색상 변경, 컨테이너 배경 이미지 바꾸기

이전 글 에서 티스토리 스킨을 만들기 위한 환경 설정에 대해서 알아보았습니다. 두가지 방법이 있었는데 가능한한 텍스트큐브를 WAMP서버에 설치하고 작업하는 것이 좋습니다. 코드찾기나 코딩하는데 편리하고 글자도 크게 볼 수 있기 때문이죠.  이전 글에서 견본으로 제시한 워드프레스 테마 스킨은 중요한 부분이 둥근 모서리 배경이미지입니다. 어려운 작업이기 때문에 CSS기초부분에서 4개의 포스팅을 올렸습니다. 이곳을 먼저 보신 후에 진행하시면 이해가 빠릅니다. 웹사이트 ...

HTML/CSS 기초 – 무한대로 늘릴 수 있는 둥근 모서리(Flexible Rounded Corner Box) 배경이미지 만들기

이번 글에서는 실제로 사용하기 위한 배경 이미지 박스를 만들어봅니다. 워드프레스 테마 스킨을 티스토리 스킨으로 변경하는 과정에서  가장 중요한 부분이 테두리가 있는 둥근 모서리 이미지입니다. 마침 이웃 블로거이신 이츠하크님의 요청으로 워드프레스테마를 티스토리 스킨으로 변경하는 작업을 포스팅하려고 했습니다. 변경하고자 하는 워드프레스 테마는 CSS3에서 소개된 border-radius 속성을 사용하고 있죠. 이 테마를 사용하면 아직도 많은 사람이 사용하고 있는 IE8 ...

HTML/CSS 기초 – 상하좌우로 늘어나는 둥근 모서리 박스(Flexsible Rounded Corner Box) 이미지 만들기

이전 글 에서 만든 박스이미지는 상하로만 늘어나는 배경이미지입니다. 상단과 하단의 이미지는 고정되지만 늘어나는 중간영역은 글이 늘어나면서 같이 늘어나는 배경 속성의 repeat-y 값을 이용합니다. 그러면 좌우로 늘어나는 이미지는 repeat-x 값을 사용하면 되지만 포토샵으로 이미지를 새로 만들어야합니다. 이 방법은 상하좌우로 글의 내용에 따라서 늘어나지만 컨텐트 영역이 상하로 아주 길어지는 부분에서는 늘어나는 만큼의 이미지를 포토샵으로 만들어야하므로 포토샵으로 세로 ...

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