background 태그로 블로그 제목 꾸미기

Main Menu

오늘은 조금은 간단한 글로, background태그를 통한 블로그 제목 꾸미기 방법에 대해 알아볼 것인데요..

바로.. 제 블로그에서 활용하는 아래와 같은 소제목 입니다.

아래의 블로그 제목 이미지는 이미지를 하나 만들어 찢어(?)서.. background 태그를 통해 반복한 것입니다.

(반복은 중간부분, 나머지는 길이 지정)


	바로 요런거~~~

여기에, 요즘.. 모바일 시대이니 만큼.. 모바일에서도 깨지지 않게 만들기 위해서는 이미지를 분할해야 합니다.

(이미지 주소는 티스토리 기준, 관리자화면 => HTML/CSS편집 => 파일업로드 후 주소를 따시면 됩니다.)

바로 아래와 같이 말이죠.. ^^


	표의 가려진 분할 상태 표시

이것은 테이블로 짜서 각각의 칸에 background 태그를 쓴 것인데요..

태그소스를 공개해 보자면 아래와 같습니다.

</TR>

</TR>

</TABLE>

간단하죠? ^^

여기서 유심히 봐야 할 부분이 위의 빨간색으로 표시한 부분이에요..

테이블의 가로길이를 픽셀 단위로 지정할 경우에는 모바일 환경에서 제목을 볼 때.. 깨져 보이는 불쌍사가 일어나게 됩니다. 그것은, 모바일 환경에서는 화면의 해상도가 다르기 때문이죠..

따라서, 표의 전체너비를 특정하지 않고..

단순히, 어떤 환경에서도 가로로 꽉!! 차게 만든 후..(100%) 위, 좌, 우의 이미지는 픽셀단위로 지정을 하고..

중간의 이미지는 작게 잘라(1px) 반복시킨 것입니다.

이렇게 하면, 좌우의 작은 이미지의 가로길이를 제외한 나머지 중간 부분이 PC환경과 모바일 환경에 따라 탄력적으로 변하게 되어 동일한 레이아웃을 유지하게 됩니다.

티스토리 블로그의 경우, 아주 유용한~~ 사용자 정의 서식 기능이 있죠..

이렇게 한번 만들어 놓고 서식으로 지정하면, 간편하게~ 클릭 한번으로 블로그 제목을 사용하실 수 있습니다. ^^