블로그 스킨을 변경하다 보면, 글을 올리는 영역의 크기가 천차만별입니다. 이미지 업로드시, 글쓰기 영역의 폭에 그 크기를 맞춘 경우에, 좁은 스킨을 이용하다가 넓은 걸로 바꾸는 경우는 문제가 되지 않지만, 그 반대의 경우는 그림이 잘리는 문제가 발생하게 되죠.

본 블로그도 여러번 스킨을 바꾸면서 이런 문제가 발생을 하더라구요. 이럴때, 유용하게 활용할 수 있는 팁 하나 올립니다. 

max-width 속성

예전에 max-width에 관한 글을 올린적이 있습니다. 

간단하게 말해서, 개체의 폭의 최대 값을 정해놓고, 개체가 이 값보다 큰 경우 크기를 맞쳐주는 역할을 합니다. 유사한 속성으로는 max-height, min-width, min-height 가 있습니다.

블로그 본문에 보여지는 이미지에 대해 CSS를 이용하여 max-width를 설정해 둡니다. 그리고, height는 자동으로 조절되도록 설정합니다.

티스토리 에디터를 이용해서 이미지를 올린 경우에는 imageblock 이라는 DIV 안에 이미지가 들어가게 됩니다. 그래서 위와 같이 설정해 두면 해당 이미지에 대해, 폭의 최대값은 680px가 되고 높이는 자동으로 설정됩니다. 

범용으로 적용하려면 스킨의 구조를 적절히 활용하여 적용하고 싶은 이미지 클래스를 설정하면 될 듯 합니다. 또, 스타일이 중첩되어서 제대로 적용이 되지 않는다면, 속성값 뒤에 !important를 넣어서 강제로 적용 시키는 방법도 있습니다. 

적용 전에는 화면에서 사진이 잘린걸 볼 수 있지만, 적용 후에는 정상적으로 보여지는 걸 알 수 있습니다.

max-width 속성은 인터넷익스플로러 6 (IE6)에서는 지원되지 않습니다. 현재 크롬과 파이어폭스, 인터넷익스플로러 7, 8 (IE7, IE8)에서는 정상적으로 동작하는 걸로 확인되었습니다. 

CSS 스타일시트를 이용해서 스타일을 적용하는 방법에는 대표적으로 세가지 방법이 있습니다. 

• 태그를 이용한 방법: A { ... } / DIV { ... }
• 클래스를 이용한 방법: .class1 { ... }
• 아이디를 이용한 방법: #id { ... }

원소들간의 포함관계를 나타내고 싶을때는 공백을 이용해서 나열하면 되고, 동시에 여러 부류에 스타일을 적용하고 싶을때는 ,(comma)를 이용해서 표현하면 됩니다.

예를 들어, 아래와 같은 CSS 구문을 살펴보면, 

content 라는 아이디를 가진 원소 내부에 entry 클래스 원소 내부의 ol, ul, il 태그의 padding-left 을 25px 로 설정하라는 의미가 됩니다. 

그런데, 경우데 따라 위 방법만으로는 표현하기가 힘든 경우가 있습니다.

가령, 서버측에서 자동으로 생성되어 오는 html문장이면서, 별도의 아이디나 클래스가 없는 경우일텐데요, 대표적으로, 티스토리 본문아래에 포함되는 CCL^[각주:1] 안내문구가 그렇습니다.

본 블로그에 포함되어 있는 html은 아래와 같습니다. (이쁘게 보이도록 일부만 캡춰하였음)

가만히 들여다 보면, fieldset 태그로 묶여 있을뿐 어디에도 클래스나 아이디가 보이질 않습니다. 만약, 이에 포함된 링크에만 특별한 속성값을 할당하고 싶을 경우에는 좀 난감하죠. 

그런데, 한줄기 희망이 보이는데, 그건 바로 바로 rel="license" 라고 표현된 링크의 속성값입니다. 곰곰히 생각해보니, 속성값을 이용해서도 스타일을 할당하는 방법이 있었던게 생각이 나더라구요. 표현법은 아래와 같습니다. 

이 방법을 이용하면, tag 중에서 attribute 값이 value 인 원소들에만 적용되는 스타일을 설정할 수 있습니다. 

다음은 본 블로그에 적용된 스타일입니다. 본문 글에 포함된 링크의 뒤쪽에 화살표()가 보이도록 설정을 하였고, 본문 아래의 부가항목들에서는 보이지 않도록 만들어 보았습니다.

화살표 부분을 보면 첫줄은 .article 클래스 > fieldset 태그 > a 중에서 rel 값이 license 인 원소를 의미하고, 두번째, 세번째 줄은 카테고리글 더보기 부분의 클래스 > a 를 의미합니다. 마지막 줄은 메타사이트 추천버튼 부분인데 여기는 제가 직접 입력한 부분이므로 간단하게 meta_link 라는 클래스를 이용해서 설정했습니다. 

이 결과, 의도데로 해당부분에서는 화살표가 보이지 않게 되었지요. 아주 간단한 팁이긴 합니다만, 알아두면 간혹 요긴하게 쓰일 곳이 있을 것 같아 포스팅 해 둡니다.

다만, 이 기능은 인터넷 익스플로러 6 이전 버전에서는 안된다고 합니다. 

다음 블로거뉴스 위젯을 블로그에 달려고 하면 한가지 고민이 생깁니다. 추천뉴스, 인기뉴스, 최신뉴스라는 세가지 정보화면 중에서 어떤것을 메인으로 할까에 대한 고민이지요. 

물론, 조그만 역삼각형을 클릭하면 드롭다운 목록이 열리면서 다른 목록으로 전환이 되긴 합니다만, 사람 심리가 왠지 두번 클릭을 하면 영~ 귀찮은 생각이 들기 마련입니다.

그래서 생각한것이, 바로 가기 버튼을 이용해서 탭을 만들어보자고 생각을 했습니다. 

이게 말로 설명할려니까 좀 힘든거 같은데, 아래 그림을 보는것이 이해가 빠를 듯 합니다. 사실, 혼자 생각한건 아니구요, 믹시의 mixUP 캐스트위젯을 좀 참조했습니다. ^^

위쪽에 세가지 뉴스를 나타내는 링크를 달고, 각각을 클릭하면 해당 목록을 아래에 보여주면서 메뉴의 색상을 진하게 바꾸도록 하였습니다.

이를 위해서는 우선, 블로거 뉴스화면 - My글 퍼가기로 가서 원하는 디자인을 선택한 후에, 소스퍼가기 부분의 소스를 메모장 같은 곳에 복사하여 둡니다. 

제 경우는 이렇게 되는 군요 (클릭하시면 크게 보입니다.)

이중에서 src='어쩌구저쩌구' 하는 부분을 자세히 보면 아래와 같습니다.

http://api...../my_widget?skin=2&page_size=7&init_type=recommend&is_footer=1&daumid=crazybar03 

다시 메모장을 새로 열어서 아래 코드를 입력합니다. 이때, 1번 부분은 위 주소의 빨간색 부분을 입력하고, 2번 부분은 위 주소의 파란색 부분을 입력합니다. (클릭하시면 크게 보입니다.)

블로거뉴스위젯이 IFRAME 태그를 이용해서 내용을 채우도록 되어 있는데, 이를 링크와 연동하여 원하는 내용으로 바꾸도록 한 것입니다. 이때, 선택된 링크의 스타일을 약간 다르게 적용시켜서 눈에 띄도록 하였습니다. 

이제 이 코드를 블로그 상의 붙이고 싶은 부분에 가져다 붙이면 모든 준비가 끝이 나는 군요. 제 경우는 우측 사이드바에 붙여두었습니다.

모든 절차가 완료 되었으면, 각각의 링크를 클릭하여 원하는 기능이 잘 수행되는지 확인해 보면 되겠죠 ^^.. 결과가 궁금하시면 본블로그 우측 사이드바를 보세용

참고로, 크롬과 익스플로로 7.0에서는 정상동작함을 확인하였습니다. 

근데, 이런 위젯을 달아놓기에는 제 글들이 너무 인기가 없네용.. 에궁.. -_-;;

혹시 필요하신분 계실까봐 소스코드도 같이 올립니다. 적용하시는 단계에서 기존의 스킨의 틀이 깨지지 않도록 섬세하게 작업하시기 바랍니다. 

스킨을 너저분하게 만드는 이유중의 하나가 바로 자주 안가는데 가끔 필요한 목록들입니다. 대표적으로 글보관함과 즐겨찾기 목록을 들수 있을것 같은데요... 대부분의 스킨이 기본적으로 목록형으로 보여지도록 구성되어있지요. 

간혹 블로그을 돌아다니다 보면 드롭다운박스스타일로 바꿔둔 곳을 볼 수가 있는데요. 그 팁을 올려봅니다.

목록형태로 보여지는 스킨은 보통 UL 태그와 LI 태그를 이용하여 작성이 되어 있고, HTML 편집을 통해 들여다 보면 아래와 유사한 형태로 작성되어 있습니다.

이를 드롭다운박스로 바꾸려면 SELECT 태그와 OPTION 태그의 조함으로 변경해 주시면 됩니다.

1. 아무것도 선택되지 않았음을 나타내는 더미옵션
2. SELECT 태그: 선택이 이루어 졌을때 해당 페이지로 이동하도록 하는 스크립트를 값으로 가짐
3. OPTION 태그: 4에서 보여지는 값과 연결되는 URL을 값으로 가짐
4. 화면상에 보여지는 값

사실 뭐 팁이라 부르기도 좀 거시기 하긴 합니다만 그냥 제가 까먹지 않으려는 목적으로 기록해 둡니다. ^^

테스트를 하고 싶으시면 우측에 보니는 글보관함이랑 즐겨찾기를 눌러보세요...

블로그 스킨을 만든다거나 기타 HTML을 이용해서 웹을 디자인하다 보면 보여주고 싶은 정보는 많은데 공간이 좁아서 고민하게 되는 경우가 많이 있습니다. 

특히, 블로그 스킨을 만들다 보면, 개인적으로 사이드바가 있는 2단이나 3단 스타일을 좋아하는데, 동시에 사진을 가능한한 큰 크기로 올리고 싶기 때문에 본문의 너비를 키우면 사이드바의 폭이 좁아져서 내용을 배치하기가 쉽지 않습니다.

이럴때 활용하면 유용한 기능중의 하나가 바로 대부분의 HTML 태그에 사용할 수 있는 title 속성입니다.

title을 이용하면 관련 내용이 마우스포인터를 해당태그위에 올려두면 내용이 보여지는 툴팁(tooltip)으로 적용이 됩니다.

이번에 스킨을 변경하면서 이를 이용해서 사이드바를 정리해 보았습니다.

최근트랙백과 최근댓글을 꾸미는 과정에서 작성자 정보를 보여주려고 하다보니 한줄에 표현하려면 제목을 줄여야하고 제목을 그대로 보여주려면 두줄로 보여줘야했습니다. 그래서 작성자 정보를 title 속성에 집어 넣어버렸습니다.

다음은 본 블로그에 적용된 스킨 중에서 위 그림에 나온 최근트랙백 부분입니다.

기존에는 span 태그를 이용해서 작성자 정보를 보여주고 있었지만, 이를 지우고(혹은, 주석처리) 이를 감싸로 있는 li 태그에 title속성을 통해 표현하였습니다.

최근댓글부분에도 이와 유사하게 처리가 되어있습니다. 

그럼 테스트를 위해 오른쪽에 있는 최근댓글이나 최근트랙백 위에 마우스를 직접 올려놓아 보세요.. ^^

다음 위젯을 적용하다보면 블로그 스킨과 어울리질 않아서 좀 망설여지는 경우가 있습니다. 요번에 스킨을 바꾸면서 저 역시 느꼈던 부분인데요.

그럴때 사용하면 편리한 기능이 바로 HTML 소스퍼가기 입니다. 간단히 말해서, 드래그앤드랍 방식이 아닌 HTML 소스를 직접 받아와서 원하는 위치와 스타일을 적용하는 기능이지요.

이를 티스토리의 사이드바에서 이용할 때는 HTML 배너출력 이라는 항목을 이용하면 됩니다. 

사용중인 사이드바에 HTML 배너출력 항목을 추가하고, 소스부분에 위에서 가져온 코드를 입력하면 됩니다. 이때, 코드 앞뒤에 다른 태그를 추가로 삽입하여 원하는 디자인을 구축할 수 있습니다. 

참고로, 사이드바 설정은 관리자->스킨->사이드바 설정 에서 하실수 있습니다. 

다음은 적용한 결과 입니다. 두개의 라운드 시계가 삽입되어 있는데요, 위쪽이 HTML 소스와 HTML 배너를 이용한 것이구요, 아래쪽은 단순 퍼가기 후에 사이드바에서 드래그앤드랍으로 붙인 것입니다. 

위쪽 시계에는 다른 사이드바 항목들과 일체감을 주기위해 스킨에서 제공하는 배경 및 테두리를 붙였습니다. 첨에 아래 시계처럼 단순 붙이기를 한 후에는 뭔가 어울리지 않는 듯 보여서 좀 이상했는데, 위처럼 하고 나서 보니 다른 항목들과 일체감을 가지게 되어서 한결 자연스러워진 느낌이 드네요..

참고로, HTML 배너출력을 붙이면 기본적으로 아래와 같은 HTML 형태로 사이드바 항목이 만들어 집니다. 

<div class='module module_plugin'>
    <!-- 사용자가 입력한 코드 -->
</div>

따라서, 디자인을 정확하게 맞춰주기 위해서는 module과 module_plugin이라는 클래스에 대한 스타일값을 스타일시트(관리자->스킨->HTML/CSS편집->style.css)에 추가해 주어야 합니다. 

그외에 HTML 소스퍼가기를 이용하면 사이드바가 아닌 곳에도 위젯을 붙일 수 가 있습니다. 이때는 스킨파일(관리자->스킨->HTML/CSS편집->skin.html)의 원하는 위치에 복사해간 코드를 추가해 주면 됩니다.

요사이 마음을 다잡아야 할 일들이 여럿 있어서, 기분전환 차원에서 스킨을 뒤집었습니다. 이 일도 여러번 하다 보니까 다해서 2시간 정도밖에 안걸렸네요.. 

선택한 스킨은 티스토리에서 제공하고 있는 Life Is Mono (Light) 입니다. 지금의 기분과 아주 흡사하게 흐릿해 보이는 것이 맘에 드네요. ^^

적용하는 단계에서 수정한 부분들은 다음과 같습니다. (이 부분은 정리차원에서 남겨둡니다.)

요사이는 와이드형 모니터를 많이들 사용합니다. 그래서인지, 왼쪽 정렬된 홈페이지나 블로그를 보면 왠지 반대쪽에 남는 공간이 넘 횡해서 쓸쓸(?)한 느낌이 들죠.

반면 본 블로그를 포함하여 많은 웹페이지에서 내용을 가운데에 잘 맞춰서 보여줍니다. 이를 하기 위한, 알고나면 너무나 아무것도 아니지만, 모르면 답답할 수 있는 아주아주 기본적인 팁 하나 올려봅니다.

먼저 웹페이지의 여백이 어떤식으로 적용되는지 간단한 그림을 하나 보도록 하겠습니다.

위 그림은 W3C에서 가져온 것입니다. 

CSS Style을 작성할때, margin이라는 속성을 주게 되는데, 이는 대상의 바깥쪽 여백의 너비를 나타냅니다. 적용하는 방법은 아래와 같습니다. 참고로 안쪽여백은 padding으로 표현하고 값을 설정하는 형식은 margin과 동일합니다. 

• margin: <all> 
• margin: <top-bottom> <left-right>
• margin: <top> <left-right> <bottom>
• margin: <top> <right> <bottom> <left>

이 외에도 margin-top, margin-bottom, margin-right, margin-left 등을 이용하여 각각의 여백을 따로 따로 지정할 수도 있습니다. 위에서 <all> 을 포함한 각 값은 px, pt, em, % 등을 이용하여 해당되는 쪽의 바깥여백의 너비를 나타내는 표현이 들어가게 되죠. 

이중, margin-left/right 에 실제 숫자값이 아닌 auto라는 값을 주면 왼쪽과 오른쪽의 너비를 동일하게 하겠다는 뜻이 되는데, 이를 이용하면 아주 손쉽게 애초의 목적을 달성할 수 있는 것이죠.

다음은 W3C의 스펙문서에 나온 원문내용입니다. 

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block. 

만약 원래 표현하고자 하는 내용이 <!-- 원래내용 --> 였다면, 기존 내용을 건드리지 않기 위해 wrapper를 하나 두어서 다음과 같이 표현할 수 있겠죠.

<div style="margin:0 auto; padding:0;">
    <!-- 원래 내용 -->
</div>

여기서, margin:0 auto; 는 위아래 여백은 0으로 하고 좌우여백은 동일하게 한다는 뜻이고, padding:0; 은 안쪽여백을 모든 방향에서 0으로 하겠다는 뜻이 됩니다. 

전체 레이아웃 뿐만 아니라 내부에 포함된 각 요소에도 잘 적용이 되는 사항이니, 머릿속에 넣어주면 편안하게 이용할 수 있으리라 생각됩니다. 예를 들어, 흔히, DIV 같은 요소 자체를 중앙정렬 하려고 할때 부모요소에 text-align 같은걸 써봐도 잘 안되는데, 그럴때에 요 기능을 이용하면 해결이 되는 거죠. 아래 예를 참고하세요..

Moving Box(Green)의 녹색 계열이 좀 식상한 듯 하여, 얼마전부터 심심할때 틈틈이 파란색계열로의 변신을 준비했습니다. 그리고 오늘, 드디어 그 작업을 마무리 했습니다. 짜잔~~

크게 바뀐거 같진 않지만, 나름 공을 들여보았습니다. 
당분간은 특별한 벅(bug)이 없는 한 별 수정없이 이상태로 쭉 가야겠네요.. ^^

--

약간 더 수정을 해서, 스크린 샷을 다시 올립니다.

--

보잘것 없는 수준입니다만, 공유를 원하시는 분들이 계셔서 배포버전을 만들어 두었습니다.
배포버젼에는 추가 단축키 기능까지 포함되어 있습니다. 

관심 있으신 분들은 댓글로 남겨주세요. ==> 당분간 배포를 중단합니다.

스킨을 다시 바꿨습니다. 큰맘 먹고 갤러리 스킨을 사용했었는데, 아무래도 1단구조가 적응이 안되어서 고민을 하고 있던중, 해상도에 따라 2단과 3단이 자동으로 바뀌도록 작성되었다는 말에 혹하여 변경을 결심하였네요.

어제, 회식갔다가 술몇잔 먹고 들어와서 술기운에 바꾸긴 했는데, 나름 만족스럽게 작성이 된거 같아 기분이 좋습니다. 후후~~

어제 오늘 너무 머리가 복잡하여 간만에 블로그 스킨을 붙잡았다.
머리속을 비우는 목적으로 이용하기엔 스킨 바꿈질도 꽤 괘안은 편이다. 후후~~

뭐 여튼, 사용한 기본 스킨은 티스토리에서 제공하는 스킨중 하나인 Gallery (Gray).

갤러리 스킨이라고 하여 제공하는 것이나 사실 특별한 건 없어보인다. 1단이고, 기본 폭이 좀 넓은 편이고, 앞뒤로 이동할 수 있는 바로가기가 추가로 하나 제공된다는 정도. 스킨을 고를때 가장 중요한건 바로 디자인과 첫눈에 느껴지는 feel... 이 스킨이 간만에 그런 느낌을 주었다. 다만 1단을 사용해 본적이 없어서 좀 망설여지긴 했지만.. 그냥 함 써보기로 하고, 뜯어고치기 시작했다.

내가 고친건...
1. 스킨 폭 늘이기 : 배경화면에 그림이 지정되 있어서 좀 까다로운 작업이었으나, 깔끔하게 완료
2. 사이드바 수정 : 기본 닫힘에서 열림으로 바꾸고, 배치, 모양 등을 수정
3. 블로그에 기본적으로 들어가는 문구 폰트 변경 : 스킨에 사용된 폰트와 동일하게 수정
4. 방문자수에 comma찍는거, spotplex배너 추가, feedburner 배너 추가, 태터데스크에 새글 아이콘
적용

그 외에 잡다구리하게 달아놨던 것들은 다 없애 버렸다. 태터툴스 쓰던 시절부터 다양한 시도를 많이 했었으나... 결국은 다 버리고 다시 심플하게 돌아가고 있다. 후후~

Simple is beautiple~

여튼, 몇시간(?)의 삽질 끝에 원하는 모양 완성~~
당분간 이 스킨으로 불만없이 만족하며 써야할텐데... ^^

제목 그대로 기분전환도 할 겸해서 블로그 스킨을 바꿨다.

기본이 된 스킨은 티스토리에서 제공하는 Plum Flavor. 제작자 홈페이지는 http://tiskin.com, http://1upz.com 이다. 뭐 티스킨 하면 워낙에 유명한 스킨이므로 더이상 설명을 필요치 않을것 같다.

암튼 이걸 바탕으로 내 구미에 맞게 약간 손을 보았는데, 일단 내용이 들어갈 영역좀 넓혀주고, 각종 스크립트들 옮겨서 붙여주고... 등등등...
그렇게 해서 탄생한 모습이 바로 지금 보고 있는 이모습!!! 뭐 당분간 세세한 부분은 수정을 해 나가겠지만, 큰 틀은 바뀌지 않을듯 싶다.

바꾸고 나기 산뜻한 느낌이 드는게 기분이 좋아진다. ^^

이 스킨의 원 제작자에게 감사의 말을 전하고 싶다. 꾸뻑~~


- 2007.10.24. 추가내용 -

Plum Flavor의 기본 배경이 밋밋한 듯하여, 동일 제작자가 제작한 Urban Rose 시리즈의 배경화면을 가져다 적용해 보았다. 은은하면서도 화려한 것이 딱 맘에 든다. ^^

지금까지 연구실 PC를 이용해서 태터툴즈 블로그를 운영해 왔다. 그런데, PC가 꺼진다든가 하는 예측할 수 없는 상황이 간혹 발생하는 문제와 학교 외부의 곳에서 접속했을때 다운로드 속도가 만족스럽지 못하다는 문제로 인해 Tistory 입주를 결정하게 되었다. 다행히 예전에 받아둔 초대장이 있었기 때문에 별다른 어려움 없이 자료 이동이 가능했다. (Standalone 태터에서 Tistory로 입주하는 방법)

 

 

Tistory 입주 기념으로 스킨도 변화를 주었다. 지금 사용하고 있는 스킨은 reshout.com을 통해서 알게된 IENDEV님의 IS BASE 0.33 을 약간 수정하여 적용하였다. # 혹시 지금 보고계신 스킨이 필요하신 분은 댓글 남겨주세요  #

 

 

 

 

 

 

BlogAPI란 원격으로 자신의 블로그에 글을 남길 수 있도록 도와주는 API를 말한다. 이를 도와주는 여러가지 도구들이 있는데, 윈도우 기반에서 Windows Live Writer (무료) 와 MS Office Word 2007 (유료) 등이 있다. 기타 자세한 사항은 Tistory 가이드를 참고하길 바란다.

참고로 지금 이 글은 Windows Live Writer를 이용해서 작성되었다.

- 추가내용 :: 기타 블로깅 툴 -
Zoundry : http://www.zoundry.com/download.html
Ecto : http://ecto.kung-foo.tv