'CSS수정'에 해당되는 글 1건

  1. 2010.03.28 티스토리 첫화면 꾸미기, 베타테스터 2번째 미션 (4)

블로그 주제 : 자동차, IT/모바일/통신, 문화생활(영화/뮤지컬/연극), 카메라, 일상생활 



첫화면 꾸미기 컨셉


안녕하세요. 두번째 티스토리 첫화면 꾸미기 베타테스터 미션 2번째 포스트입니다. 이번에는 첫화면을 마음대로 꾸며보는 방식으로 진행이 되는데요. 저는 자동차를 비롯한 IT/문화공연 위주로 올리곤하니, 그에 맞는 스타일이나 최대한 가독성있고 보기쉽게 구성해보려고 합니다.

간단하게 최신글 포스트 구성과 자동차 리뷰/프리뷰의 구성을 예로 들어 보겠습니다.



최신글 포스트 구성


기존에 사용했던 이미지는 아직도 해상도가 저하된 상태로 보여져서, 제대로 보이는 구성을 찾아보다가 위에 처럼 포털사이트 뉴스의 메인페이지처럼 사진위에 검은 투명배경에 기사가 뜨는 형식을 선택했습니다. 그리고 우측에는 최신글들의 썸네일제목,날짜가 보입니다.




 자동차 리뷰/프리뷰 구성


이번에 자동차리뷰는 좌측에 섬네일 이미지가 있고, 우측에 기사 제목과 포스트의 내용이 나오며, 날짜와 코멘트 숫자가 나옵니다. 여기서 기존의 기본 텍스트 타이틀과 다른 이미지를 사용하였습니다.




▲ 기본으로 설정되는 아이콘과 텍스트형식입니다. 여기서 더 발전한다면 배경 정도를 넣을 수 있습니다.


그럼, 이미지로 어떻게 바꾸는지 한번 해볼까요?



01 이미지를 만들고나서 HTML/CSS편집 메뉴를 눌러 파일업로드를 합니다.
02 올린 이미지를 마우스로 클릭하고, 미리보기화면에 마우스 오른쪽 버튼을 눌러 속성이 나오게합니다.
03 이미지 주소를 복사합니다.




04 첫화면꾸미기에서 아이템을 선택한 후 디자인탭으로 이동하여 타이틀을 선택합니다. 여기서 바로 태그가 적용이 되니 <img src="이미지경로">를 바로 넣어주면 아이템에 바로 뜨게 됩니다. 그리고 테두리를 선택한후 저장하면 위의 화면처럼 이미지가 뜨게 됩니다. 참 쉽죠~잉!




간격조정하기 / 아이템의 HTML을 만져봅시다!
이미지로 아이템을 설정하고나니 위아래 간격이 많이 붙는 것을 볼 수 있었습니다. 이때 간격을 조정하고 싶은데 아이템에는 간격조정 아이템이 존재하지 않아서, 어떻게하면 늘릴 수 있을까 생각했습니다.



▲ 아이템과 아이템 간격이 매우 좁아 답답하게 보입니다. 아래처럼 바꿔보도록 하겠습니다.





01
 아이템을 생성합니다.
02 디자인을 선택하고 HTML을 선택하여 <div style="height:5px"></div> 입력합니다.
03 적용을 눌러야, 위에 보시는대로 iPod touch부분위에 5px 간격이 늘어난 것을 볼 수있습니다. 





▲ 적용후에  이미지처럼 간격이 늘어난 것을 볼 수 있습니다.




■ 날짜와 코멘트 색상 변경하기


.tt-post-date {font:11px Trebuchet MS !important; color:#aeb700 !important;}
.tt-post-comment {font:11px Trebuchet MS !important; color:#ff7c3a !important;}


style.css의 하단에 위의 코드를 삽입해주면 기본으로 위에 지정한 class값이 정해져있어서 변경이 되는 것을 볼 수 있습니다.



주제에 맞는 레이아웃 구성



리뷰에 적합한 구조
   - 가장 하고싶었던 구조중에 하나였습니다.




사진을 보기 좋게 나열해주는 게럴리형 구조
    - 사진을 올릴때 저만의 폼을 이용해서 올리는데 세로형 비율로 깔끔하게 열려서 너무 좋습니다.




▲ 조합형 구조로 좌측과 우측에 크고 작은 썸네일 구성
    - 좌측에 2개, 우측에 세로로 4개가 구성되어 이미지와 글을 적절하게 조화하여 이미지있는 포스트에 적합합니다.


위와 같은 구성에는 수정해야할 부분이 생깁니다.
이유는 좌/우측의 상단 타이틀의 구조가 별도로 지정되기 때문입니다. 저의 경우는 한 주제를 동시에 적용했기에 이렇게 같은 주제로 할 경우는 우측의 타이틀 부분에 태그를 입력해야 합니다.

바랍니다! 같은 주제로 선택하여 이어서 조합되는 구조가 있었으면 좋겠습니다. (제가 못찾은건가요?;;)




▲ 타이틀 부분 간격은 입력란에 <div style="height:60px;"></div>를 입력하면 해결됩니다.



완성된 Sdayz 첫화면모습


주제가 많아서 첫화면이 길어졌는데, 1차 미션때 사용해본 것과 달리 나름 정리된 것 같습니다.




마무리

이번에 다시한번 첫화면을 꾸미면서 느꼈던 것이 만지면 만질 수록 블로그를 한층더 발전 할 수 있다는 것을 발견했습니다. 기존에 텍스트 타이틀의 디자인상의 보기가 매우 안좋았습니다, 그것을 수정할 수 있는 방법이 있을까 찾아보다가 타이틀 부분에 태그를 넣었는데, 다행히 적용이 되었습니다. 제가 한 방법처럼 적용하시면 쉽게 수정 하 실 수 있습니다. 앞으로 레이아웃은 티스토리디자이너 분들이 다양하게 만들어 주실 것 이라 기대하고 있습니다 ^.~

첫화면 꾸미기에서 가장 마음에 들었던 것은, 기업블로그를 보면서 현재 제가 적용한 자동차 리뷰/프리뷰의 레이아웃처럼 썸네일과 제목,내용이 보여지는 것이었는데, 이번에 적용을 할 수 있어서 어느 무엇보다 소원을 이룬 기분이 들었습니다. T^T/

앞으로 시간이 나는대로 천천히 스킨을 디자인할 예정인데요. 이번에는 기존의 스킨에 적용하면서 좀 획일화된 구조로 밖에 할 수 없어서 더 욕심이 납니다.

더 많은 티스토리 유저들을 만족할 수 있는 좋은 서비스 많이 해주세요~!
수고하셨습니다.
저작자 표시 비영리 변경 금지
신고
Posted by 순대포유

댓글을 달아 주세요

  1. Favicon of http://inbusan.tistory.com/ BlogIcon 낭만인생 2010.03.29 12:03 신고 Address Modify/Delete Reply

    새로운 스킨이 자꾸 나오니 기분은 좋습니다.
    저는 별로 사용하지도 못하지만...
    이제는 개인블로그는 넘어 묘한 뭔가가 탄생하는 듯한 스킨인 것 같네요.

    • Favicon of http://soondae4u.tistory.com BlogIcon 순대포유 2010.03.29 21:14 신고 Address Modify/Delete

      네, 갈수록 더 좋아지는 것 같아서 블로그 할때 기분이 좋습니다. 앞으로 더 많은 사람이 사용 할 수 있도록 개발될테니 조금만 기다리시면 쉽게 사용하실 수 있을 것 같아요. ^^

  2. Favicon of http://blog.naver.com/aiba10302 BlogIcon 김야끼 2010.04.08 09:38 신고 Address Modify/Delete Reply

    티스토리는 밋밋하다는 인식이 있었는데
    순대포유님 블로그 첫화면을 보니,
    생각이 달라지네요
    디자인감각이 뛰어나심

티스토리 툴바