New post
New Comment
Trackback
New Trackback
Link
Date2009/09/30 17:28
, , , , , , , ,

티스토리 스킨 만들기 (초보) - 6강. 블로그타이틀,메뉴

이번강에서는 지난 강에서 만들어놓은 레이아웃에
아래이미지처럼 블로그타이틀과 메뉴가 출력되도록 해보겠습니다.



먼저 크림슨에디터를 실행하고 skin.html을 엽니다.
'상단레이어' 부분에 아래와 같이 입력합니다.
('샵샵'은 '##'으로 바꿔주세요. 쉽게 바꾸는 방법이 지난 강에 설명되어 있습니다.)

<div class="title">
<h1><a href="[샵샵_blog_link_샵샵]" title="[샵샵_title_샵샵]">[샵샵_title_샵샵]</a></h1>
</div>
<div class="topmenu">
<ul>
<li class="menu_list"><a href="[샵샵_blog_link_샵샵]" title="블로그">Blog</a></li>
<li class="menu_media"><a href="[샵샵_blog_link_샵샵]media" title="미디어로그">Media</a></li>
<li class="menu_location"><a href="[샵샵_localog_link_샵샵]" title="지역로그">Location</a></li>
<li class="menu_tag"><a href="[샵샵_taglog_link_샵샵]" title="태그로그">Tag</a></li>
<li class="menu_guest"><a href="[샵샵_guestbook_link_샵샵]" title="방명록">Guestbook</a></li>
</ul>
</div>

h(헤드라인)태그와 a(링크)태그, ul과 li(리스트)태그에 대해서는 4강에서 배우셨으니 아실 줄로 알고
여기에 쓰인 치환자를 설명하겠습니다.
[샵샵_blog_link_샵샵]은 블로그 주소입니다.
[샵샵_title_샵샵]은 블로그 제목입니다. 관리자모드의 환경설정에서 입력한 제목이 나오는거예요.
[샵샵_blog_link_샵샵]media는 블로그 주소 뒤에/media가 붙어 미디어로그의 주소가 됩니다.
[샵샵_localog_link_샵샵]은 지역로그의 주소이구요,
[샵샵_taglog_link_샵샵]과 [샵샵_guestbook_link_샵샵]은 각각 태그로그와 방명록의 주소입니다.

'샵샵'을 '##'으로 바꿔주는 것 잊지 않으셨죠? 그럼 브라우저에서 결과를 봅시다.


이제 style.css에서 다듬어 줄 차례이군요.
크림슨에디터에서 style.css를 엽니다.

title레이어부터 수정해봅시다.

title레이어의 여백을 설정해줍니다.

.title {padding:20px 0px 0px 50px}
여백 설정에 관해 아직 헷갈리시면, 아래 사이트의 내용을 참고하세요.
http://ilmol.com/wp/css/css_dictionary/margin-padding/

링크걸린 글씨체의 속성을 입력해줍니다.

css 선택자의 속성은 종속이 된다고 했습니다.
title이라는 부모 레이어 안에 h1이라는 자식태그, 또 h1안에는 a라는 태그가 있네요.
title레이어가 할머니, h1이 엄마, a가 딸이 되는 것입니다. 이럴 때는 아래와 같이 입력해주면 됩니다.
.title h1 a {font:25pt Trebuchet MS; font-weight:bold; color:#FFFFFF}
'font:크기 글꼴' 은 약식표기입니다.
'font:굵기 스타일 크기/줄간격 글꼴' 과 같이 더 세분화된 약식 표기를 할 수 있습니다.
그러나 저는 위의 소스처럼 크기와 글꼴만 묶어서 약식표기하고 나머지는 정식표기 하는 방법을 즐겨 사용한답니다.
용의자님의 블로그에 font 속성에 관해 잘 정리해 두신 포스트가 있습니다. http://yongja.tistory.com/20

블로그 제목을 한글로 사용하신다면 Trebuchet MS 대신에 사용하실 한글폰트명을 입력하시면 되겠습니다.
ex) NanumGothic, Malgun Gothic

블로그 제목에 마우스오버하면 원하는 글씨색으로 변하게끔 해봅시다.

.title h1 a:hover {color:#E1EBF9}
마우스 오버시 밑줄이 생기게 하고 싶으면 'text-decoration:underline' 을 입력하면 됩니다.
'border-bottom:#FFFFFF 2px dashed' 와 같이 밑줄의 색깔과 크기, 스타일을 지정할 수도 있습니다.

title레이어의 완성된 속성을 style.css에 아래처럼 넣어주면 됩니다.

.title {padding:20px 0px 0px 50px}
.title h1 a {font:25pt Trebuchet MS; font-weight:bold; color:#FFFFFF}
.title h1 a:hover {color:#E1EBF9}

브라우저에서 체크해보겠습니다.



이제 topmenu레이어의 style을 다듬으면 스킨의 상단부분은 완성되겠네요. ^^

topmenu레이어의 여백을 설정하고, 오른쪽으로 정렬되게 합니다.

.topmenu {padding:45px 20px 0px 0px; text-align:right}
'text-align:left'는 왼쪽, 'text-align:center'은 가운데 정렬이예요.

Blog, Media, Location, Tag, Guestbook은 각각 하나의 리스트요소입니다.
그러니까 다섯개의 리스트요소들로 이루어진 것이죠. 이 리스트요소들의 속성을 설정해 줄 차례입니다.

각각 요소 앞의 동그라미를 없애고, 가로정렬이 되게 하고, 여백을 줍니다.

.topmenu ul li {list-style:none; display:inline; padding:5px}
'list-style:none'으로 동그라미를 없애고 'display:inline'으로 한 줄에 정렬되게 했으며 5px의 여백을 주었습니다.

링크된 글씨, 마우스오버했을 때의 글씨 속성을 각각 정해줍니다.

.topmenu ul li a {font:8pt Trebuchet MS; color:#FFFFFF}
.topmenu ul li a:hover {color:#E1EBF9; text-decoration:underline}

topmenu레이어의 완성된 속성을 아래처럼 넣어주세요.

.topmenu {padding:45px 20px 0px 0px; text-align:right}
.topmenu ul li {list-style:none; display:inline; padding:5px}
.topmenu ul li a {font:8pt Trebuchet MS; color:#FFFFFF}
.topmenu ul li a:hover {color:#E1EBF9; text-decoration:underline}

브라우저에서 체크해 보겠습니다.


여기서 끝난 게 아니예요. 조금 복잡하지만 재미있는 과정이 남았습니다.
티스토리를 하시면서 Blog 화면에서는 상단 메뉴의 Blog가 선택되어 있고
Taglog 화면에서는 상단 메뉴의 Tag가 선택되어 있는 것을 보신 적이 있을 거예요.
주로 글씨체나 굵기, 밑줄, 배경색, 배경 이미지 등으로 효과를 주는데요,
우리는 마우스오버됐을 때와 똑같은 상태로 깔끔하게 만들어보아요.

스타일시트를 수정하기에 앞서 skin.html를 간단히 수정해야해요.
<body>에 아이디를 지정해주는 거예요.
<body>를 <body id="[샵샵_body_id_샵샵]">로 바꿔주면 됩니다. 쉽죠? '샵샵'은 '##'으로 바꿔주고요.
이 작업을 꼭 하고 넘어가셔야 합니다. ^^

다시 style.css로 돌아가서 아래의 소스를 입력해주세요.

#tt-body-search .topmenu .menu_list a {color:#E1EBF9; text-decoration:underline}
#tt-body-archive .topmenu .menu_list a {color:#E1EBF9; text-decoration:underline}
#tt-body-category .topmenu .menu_list a {color:#E1EBF9; text-decoration:underline}
#tt-body-entry .topmenu .menu_list a {color:#E1EBF9; text-decoration:underline}
#tt-body-notice .topmenu .menu_list a {color:#E1EBF9; text-decoration:underline}
#tt-body-page .topmenu .menu_list a {color:#E1EBF9; text-decoration:underline}
#tt-body-media .topmenu .menu_media a {color:#E1EBF9; text-decoration:underline}
#tt-body-location .topmenu .menu_location a {color:#E1EBF9; text-decoration:underline}
#tt-body-tag .topmenu .menu_tag a {color:#E1EBF9; text-decoration:underline}
#tt-body-guestbook .topmenu .menu_guest a {color:#E1EBF9; text-decoration:underline}

더 간단하게 아래처럼 묶어서 입력할 수도 있답니다.

#tt-body-search .topmenu .menu_list a, #tt-body-archive .topmenu .menu_list a, #tt-body-category .topmenu .menu_list a, #tt-body-entry .topmenu .menu_list a, #tt-body-notice .topmenu .menu_list a, #tt-body-page .topmenu .menu_list a, #tt-body-media .topmenu .menu_media a, #tt-body-location .topmenu .menu_location a, #tt-body-tag .topmenu .menu_tag a, #tt-body-guestbook .topmenu .menu_guest a {color:#E1EBF9; text-decoration:underline}
길다고 당황하지 마세요. 간단한 원리랍니다.
skin.html의 body 안에 아이디를 설정해주었죠?
검색화면, 카테고리화면, 미디어화면, 태그화면 등 각각의 페이지 아이디가 body에 자동으로 지정이 되는 거예요.

맨 첫번째 줄을 예로 들어 설명해 볼게요.
body의 아이디가 'tt-body-search' 일 때
topmenu레이어의 menu_list클래스 안의 링크 글씨 색이 #E1EBF9로 바뀌고 밑줄이 생기는 거예요.
아까 li class="menu_list" 처럼 다섯개의 리스트요소에 각각 class를 지정해 준 이유가 바로 이 때문이랍니다.

아직 모르시겠다구요?
아래 스크린샷을 보세요. ^^


어떤가요? 스스로 스킨 만드는 것이 점점 실현가능한 얘기가 되어가는 것 같죠? ㅋㅋ
다음강에서는 드디어 사이드바를 만들어보겠습니다. ^^

[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 1강. 스킨의 기본, 스킨 구상
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 2강. Html,CSS 란?
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 3강. Html,CSS의 실습
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 4강. skin.html의 구조
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 5강. 레이아웃
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 7강. 사이드바 Ⅰ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 8강. 사이드바 Ⅱ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 9강. 사이드바 Ⅲ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 10강. 미디어로그, 지역로그, 태그로그
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 11강. 방명록
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 12강. 검색결과, 페이지 표시
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 13강. 포스트 내용

 중급자를 위한 티스토리 스킨 수정 팁 보러가기
TRACKBACK 1   COMMENT 95

  1. BlogIcon yureka01 Edit/DelReply
    우잇..그런 저도 블로그 타이틀을이거 보고 따라 해봐야겟습니다..

    베리베리 감사감사..
    2009/09/30 18:33
    • 2009/10/02 16:32
      지금 스킨도 깔끔하고 예쁘네요. +_+ 유레카님이 직접 수정하신거죠?
      명절 즐겁게 보내세요. ^^
  2. BlogIcon popeye Edit/DelReply
    헉헉 강의실에 뛰어 왔습니다.. 오늘도 공부 열쉼히 합니다. ^^
    title이라는 부모 레이어 안에 h4라는 자식태그, 또 h4안에는 a라는 태그가 있네요. 라고 하셨는데... 코드에는 .title h1 a {font:25pt Trebuchet MS; font-weight:bold; color:#FFFFFF} 라고 하시면 이해가...??
    2009/09/30 18:51
    • 2009/10/01 18:04
      오타 수정했습니다.h4가 아니고 h1.
    • 2009/10/02 16:30
      명절 즐겁게 보내세요 ^^
  3. BlogIcon sweet_star Edit/DelReply
    항상 잘 보고 있어요~ ^^
    이 강의 다 보고 난 이후에 저만의 스킨을 하나 제대로 만들어봐야겠습니다~
    2009/09/30 19:56
    • 2009/10/02 16:30
      오오, 기대됩니다. ^^
      명절 즐겁게 보내세요.
  4. BlogIcon 유리 Edit/DelReply
    컴맹인 저에게 도움이 될 블로그 군요.. 아..어쩌면 저렇게 손쉽게 뚝딱뚝딱 잘 하실까요ㅠ.ㅠ
    2009/09/30 21:22
    • 2009/10/02 16:27
      ㅋㅋㅋ 저도 뚝딱뚝딱은 아니고
      자주 시행착오를 겪어요. ^^;

      즐거운 명절 보내세요 :)
  5. Edit/DelReply
    비밀댓글 입니다
    2009/09/30 21:58
    • 2009/10/02 16:27
      와우! 좋은 정보 감사합니다. 해봐야겠어요 >_<
      즐거운 한가위 보내세요. ^^
  6. BlogIcon 강짜 Edit/DelReply
    보면서 '아~'하고 돌아서면 '응?'하는 이 몹쓸 기억력..
    자주자주 봐야겠습니다 ㅎㅎ
    아이콘이 오른쪽으로 바뀐거 같네요? 어쩐지 흐려보이기도 하고.. 왼쪽에 있을때보다 보기 편하네요~ ^^
    2009/09/30 22:55
    • 2009/10/02 16:26
      혹시 익스6에서 업그레이드 하셨어요?
      익스6에서 댓글 레이아웃이 깨지는 것을 알았지만...
      악의 축 익스6에 대한 분노로 수정하지 않고 있었거든요....ㅋㅋㅋ

      연휴 즐겁게 보내세요. ^^
    • 2009/10/02 21:37
      ㅋㅋㅋㅋ 악의 축 ㅋㅋㅋㅋㅋㅋㅋ
      익스5예요. 업그레이드가 영 귀찮아서 ;;
      파폭이랑 번갈아가면서 쓰기도 하지만 얼른 업그레이드 해야겠네요.
    • 2009/10/03 13:58
      익스5?
      놀랍네요...ㄷㄷㄷ
    • 2009/10/04 22:03
      확인해보니까 6이네요. ㅡ _-;;;
      당시 피시방이었는데 다르게 보이는군요~
      다시 왼쪽으로 돌아왔다는거..
    • 2009/10/05 01:54
      악의 축을 사용하시는군요.. ㅎㅎ
      업그레이드는 선택이 아닌 필수입니당.
    • 2009/10/06 09:44
      웹언어를 할줄 아신다는 grace님이 악의축이라고 말한
      익스6을 버린다는것은 실력이 부족해서 못고치신거 아닙니까? 국내에서 아직도 windows xp에 껴있는 익스6때문에
      정말 많은 사람들이 사용하는데 버리다니요.

      웹표준만 잘준수하셨다면 익스6에서 절대 깨지지않습니다.

      grace님 취미로 웹언어를 배우시나요 ?
      지금 댓글 레이아웃이 깨지는걸 플로아트로 살짝
      핵을써서 바꿔주었더니 완벽하던데 분노가 아니라
      실력이 없어서 못고치는거겠죠..
  7. BlogIcon 지우개 Edit/DelReply
    오늘도 유익한 강좌 감사합니다^^

    그리고 혹씨 블로그나 기타 테스트할 서버나 대용량 파일 업로드 할 경우가 생기면 귀뜸주세요^^
    2009/09/30 23:06
    • 2009/10/02 16:24
      와! 감사합니다. ^^
      그럴 경우 생기면 부탁 드릴게요. 히히
  8. BlogIcon 애용이 Edit/DelReply
    다음 강의가 기대됩니다~~
    정말 감사합니다 : )
    2009/10/01 00:29
    • 2009/10/02 16:21
      블로그에 사진들이 멋지네요 +_+
      즐거운 연휴 되세요. ^^
  9. BlogIcon sla Edit/DelReply
    훌륭한 강의에 늘 감사드립니다.
    2009/10/01 02:07
    • 2009/10/02 16:20
      힘이 되는 댓글에 감사드립니다. ^---^
      즐거운 연휴 되세요.
  10. BlogIcon 한성민 Edit/DelReply
    삽질이 너무 어려워용....^^
    2009/10/01 10:45
    • 2009/10/02 16:19
      그럼 망치질을...ㅎㅎ
      즐거운 연휴 되세요 ^^
  11. BlogIcon 흐르듯 Edit/DelReply
    용의자님 소개(ㅎㅎ)로 들렸습니다. :)
    안 그래도 블로그 상단의 메뉴가 html에 기재되어 있어서 css로 어떻게 옮겨야 하나 내심 깝깝했었는데..ㅎㅎ
    열심히 해보겠습니답 :D
    2009/10/01 10:50
    • 2009/10/02 16:19
      네. 성공하세요. ^^
      즐거운 연휴 되시기를..
  12. BlogIcon 김치군 Edit/DelReply
    아...정말 하나하나 배워야 겠어요.. 너무 이쁜걸요
    2009/10/01 12:29
    • 2009/10/02 16:18
      화이팅!
      연휴 잘 보내세요. ^^
  13. 봄길 Edit/DelReply
    Grace님.수고하십니다.

    실은 제가 궁금한게 있어서 그러는데요
    티스토리에서 새 스킨 올리는걸 연습해보고 있는데요
    티스토리에서 다운받은 스킨들은 올려보면 다 잘 올라가는데
    외국 사이트들에서 다운받은 스킨들은 올려보면 죄다
    "skin.html 또는 style.css 또는 index.xml 파일을 업로드 하지 않았습니다."
    라고 나와버리고 실패하는데요
    왜 그럴까요?
    (추석 잘 보내세요)
    2009/10/01 15:13
    봄길
    • 2009/10/02 16:42
      달공님이 답변해주셨네요.
      티스토리용 스킨을 업로드하셔야합니다.

      즐거운 명절 되세요.
    •  봄길 Edit/Del
      2009/10/04 11:48
      아 그렇군요.
      달공님 그레이스님 감사합니다.
    • 2009/10/06 09:39
      윗분들 답변 참 이상하게 해놓으셨군요.

      해외에서 무료로 제공하는 스킨뿐만 아니라
      티스토리외의 스킨들을 다운로드 한후
      html,css,xml 업로드 해보세요. 업로드는 모두
      완벽하게 되지만 블로그스킨이 개판이 된걸 보실수 있으실겁니다. 스킨을 업로드하는게 중요한게 아니라
      다운받아놓은 스킨들은 티스토리에 맞게

      모두 바꿔줘야하는 쌩노가다가 필요합니다.
    •  봄길 Edit/Del
      2009/10/07 14:39
      그러게나요.
      그것이 문제인거같아요.
      sistool 님.
      감사합니다.
  14. BlogIcon popeye Edit/DelReply
    명절 잘 보내세요^^
    2009/10/02 22:50
  15. BlogIcon 홍콩달팽맘 Edit/DelReply
    송편 맛있게 드시고~~
    즐거운 추석 보내세요. ^^
    2009/10/03 15:35
  16. BlogIcon 드자이너김군 Edit/DelReply
    아앗! 요것 정말 제가 필요로 하던거에요~ ㅋ
    편안한 명절 보내고 계신가요? 어제는 보름달을 보면서 우리가족의 행복을 빌었답니다.^^
    편안하고 행복한 명절 되세요~
    2009/10/04 11:05
  17. 한밤중고양이나미 Edit/DelReply
    사이드바 강의가 어딨지 하고 한참 찾았습니다^^;
    알고보니까 진행중이셨군요~

    좋은글과 예제 감사합니다
    2009/10/05 00:52
    한밤중고양이나미
    • 2009/10/05 01:55
      네. 다음강에서 다룰 예정입니다. '-'
  18. BlogIcon cdmanii Edit/DelReply
    추석 잘 보내셨나용 ? ㅎ

    질문있어요 !

    메뉴별로 아이디가 있는데요. 만약 카테고리에 메뉴를 상단에 링크를 만들었다면 예를 들면 ..

    http://listentomyheart.net/category/테스트메뉴

    이 링크를 상단 메뉴에 넣었다면 이걸 아이디로 잡아서 a:hover 효과를 적용하는건 방법없을까요?
    티스토리에서 아이디를 열어주지 않아서 안되는건 알긴하지만 무슨 꽁수가 없을까하구요.

    자바스크립트를 써야하는건지.. 음.. page , notice , guestbook 만 되고 (당연 media , tag 등도있지만)
    다른 카테고리들도 효과를 주고 싶은데, 생각보다는 막막하네요.
    2009/10/05 10:49
    • 2009/10/06 09:30
      왜 티스토리 아이디와 연관이 있나요?
      자바스크립트까지 배울정도면 css는 마스터하신게 아닌가요? css에서의 속성 hover선택자로 충분히 만들수있는걸 자바스크립를 써야하는지라고 물어보시는지?

      닉네임을 클릭했을시 cdmanii 블로그가 뜨던데

      그블로그와 상관없지만 주소를 써넣었던가
      블로그주인장이 정말 이런질문을 했다면

      스킨수정해드립니다 < 요 페이지 당장없애세요.
    • 2009/10/06 10:23
      음.. 저도 그게 안되어서 물어본것이구요. 티스토리에서 직접 해보시면 아시겠지만 텍스트큐브를 모체를 하고 있지만 제한이 있습니다. 직접해보시고 저한테도 뭐라고 하셨음 좋겠네요 ㅠ;
    • 2009/10/06 16:49
      카테고리별 id 생성은 티스토리에서 지원하지 않는 걸로 알고 있는데,
      편법으로 가능할 것 같아요.

      아이디를 카테고리명 치환자로 지정해주면 어떨까요?
      물론 그렇게 했을 때 카테고리명에 제한이 생기는 단점이 있지만요..
      '카테고리번호' 치환자도 있으면 딱 좋을텐데 말이죠..

      ============
      아. 다시 생각해보니 불가능할 것 같습니다..
      body 자체에 id를 줘야 하는 것을 깜빡 했군요.
      티스토리 고객센터에 건의해도 좋을 듯..
  19. BlogIcon 미리누리는천국 Edit/DelReply
    추석 명절 잘 보내셨나요? 6강이 언제 올라오나 했었는데
    제가 못본거였군요^^
    오늘도 감사합니다.
    2009/10/05 12:17
    • 2009/10/06 15:55
      감사합니다. ^^ 7강은 내일 안으로 올릴게요.
  20. Edit/DelReply
    비밀댓글 입니다
    2009/10/06 00:07
    • 2009/10/06 15:55
      감사해요. ^-^
      바보같이 생각 못했어요. ㅋㅋㅋㅋㅋ
      용의자님은 센스쟁이.
  21. BlogIcon 행복박스 Edit/DelReply
    저는 그것도 궁금해요
    어떤분들 보면 위에다가 카테고리 내용을 메뉴처럼 만들어서
    보이게끔 하셨더라구요..ㅎㅎㅎ

    오늘도 여전히 명강의를 해주셔서
    많은 도움이 되고 있습니다
    하나도 모르다가
    그래도 아~이렇게 이렇게 되는구나..
    그런걸 알게 되니깐 신기하기도 하고 해보다가 꼬여서 실패하기도 하지만
    언젠가는 되겠죠?~^^
    2009/10/06 04:01
    • 2009/10/06 09:36
      a:hover만 생각하지마세요

      li:hover , div:hover , ul:hover 모두 가능합니다.
      단 , 익스6이 링크hover밖에 안되는데 이건 현제
      hover.htc 파일 하나면 완벽하게 모두 작동합니다.

      예) <li>게임<ul><li>롤플레잉</li><li>액션</li></ul></li>

      게임에 마우스를 올려놓으면 롤플레잉,액션 서브메뉴가
      뜹니다.
    • 2009/10/06 15:59
      카테고리를 트리구조가 아닌 리스트 형식으로 출력해서
      CSS에 display:inline 을 주면 가능해요.

      카테고리를 리스트 형식으로 출력하는 팁이 있는 포스트를 링크합니다.
      http://aprilpool.tistory.com/7
  22. BlogIcon popeye Edit/DelReply
    앗 강의시간이 멀었구나,.,. 흐,. 그러면 복습을 해야쥐^^
    2009/10/06 07:55
    • 2009/10/06 15:59
      내일 안으로 7강 올릴게요. ^^
  23. BlogIcon sistool Edit/DelReply
    블로그의 경우 자신의 블로그 타이틀(이름)에 h1을 쓰는것보다는 div로 감싸주고

    h1의 경우는 포스팅 제목타이틀에 붙여주는게 모든면에서 유리합니다.

    현제 블로그의 구조를 봤을때 문서의 구분이 확실해야 하는데 h1~h6 어느하나 들어가 있지 않더군요.

    타이틀에 웹디자인이라고 하셨는데 기초적인 a태그부터 확실히 하시고 가야할것같습니다.

    이미지로 대쳐하셨으면 a title=" "은 필수로 넣으셔야죠..

    상단메뉴는 position으로 위치를 짜맞추기 하셨는데 이부분 바람직하지 않습니다.

    자신의 블로그부터 다듬으시고 강좌를 하시는게 어떠신가요 ?


    자신의 위치부터 돌이켜서 바로잡으시고 강좌를 해주세요. 이만...
    2009/10/06 09:13
  24. BlogIcon sistool Edit/DelReply
    마지막으로 font는 이제부터라도 em을 써주세요.

    정말 현직 웹디자이너인지 궁금할정도라 글남기고 가는겁니다.
    2009/10/06 09:06
  25. BlogIcon sistool Edit/DelReply
    참고로 익스6으로 테스트해봤을시 스크립트 에러 납니다. 참고하세요...
    포토샵,플래쉬 왠만큼 하는분들이 자신의 블로그를 화려하게 하지않고 단순하게 꾸미는 이유도 아시나요 ?

    단순한게 최고의 홈페이지입니다. 여기 블로그는 모든게 이미지로 작업한거라 불필요한 이미지로딩과 스크린리더로 들어왔을시 정말 난잡하게 머리가 아팠습니다.

    http://hyeonseok.com 블로그와 Grace님 블로그스킨을 비교해보세요. 아마도 grace님은 브라우저마다
    position 위치가 잘안맞아서 만드는데도 애먹었을텐데
    다 부질없는 것입니다. 동의를 얻지않고(?) 유효성 검사를 해봤는데 에러가 엄청나더군요.

    xhtml 이쪽만 봤을뿐인데 203개의 에러와 3개의경고가 나왔습니다.

    css또한 23개의 에러가 나왔구요.

    자신의 블로그는 돌아보지 않고 강좌하는건 정말 아니라고 봅니다. 배우는사람들은 이게 모두 맞는거인줄 알거 아닙니까?
    2009/10/06 09:22
    • 2009/10/06 15:46
      맞는 거인줄 (x) --> 맞는 것인 줄(o)
  26. BlogIcon sistool Edit/DelReply
    박수진님의 댓글에 "헙... 정말 당황하셨겠어요..
    sd님 홈페이지에 궁금해서 들어가보았는데 플래시 이후에 메인화면으로 연결 안 해 놓으신거예요?"

    블로그를 운영하면 모두가 웹스킨을 손볼줄 아는 사람들이 아닙니다.

    박수진님은 네이버 인물검색에서도 등록이 된 분이신데 http://people.search.naver.com/search.naver?sm=tab_txc&where=people&ie=utf8&query=%EB%B0%95%EC%88%98%EC%A7%84&os=423410


    플래쉬로 태클거는건 좀 ...
    2009/10/06 10:07
    • 2009/10/07 13:15
      sistool님, 태클의 의미를 잘못 이해하고 있거나 제 댓글에 대해 오해를 하는 것 같군요.

      http://listentomyheart.net/175#comment1408440

      위 주소의 댓글은 태클이 아니라 궁금해서 물어본 것입니다.

      그리고 네이버 인물검색과 '플래쉬로 태클 거는 것'이 무슨 관련이 있다는 것인지 모르겠네요.
  27. am Edit/DelReply
    지나가다 답다해서 글 남깁니다.
    sistool님 말씀이 물론 구구절절 틀린 말은 아닙니다만, 익스6가 문제가 많은 건 사실이구요. 그리고 이 정도의 이미지 기반 블로그에 로딩속도 운운하시기 전에 플래시 엄청 때려넣은 사이트들에 먼저 가서 말씀 드리세요.
    그리고, sistool님께서는 초보자들에게 웹표준과 css 강좌를 하시나요? 만약 하고 계시다면 주소 부탁드리구요. 이러한 강좌 만드는 것 정말 힘듭니다. 일일이 화면 캡춰하는 것도 일이구요. 처음부터 정석대로 배우면 물론 좋겠으나 그저 티스토리 블로그 스킨 정도 내 마음대로 해보고 싶은 사람에게 웹표준이란 멀고 먼 얘기이며 이 정도도 충분하고도 충분합니다. 잘못된 것에 대한, 또 보충할 내용에 대해 댓글을 다는 것은 지향할만한 일이나 sistool님의 댓글들을 쭈욱 보노라니 인신공격성의 문구들이 눈에 띄어 이렇게 글 남깁니다.
    여하튼, Grace*님 다음 강좌 기다릴게요. 치환자 너무 복잡해서 티스토리 스킨 가이드 보다가 답답했는데 여기 강좌 보니 좀 머리에 들어오네요 :)
    2009/10/06 17:21
    am
    • 2009/10/06 18:52
      우와, 도움된다니 보람되네요. ^^
      감사합니다. 7강은 내일 중으로 올릴게요.
  28. BlogIcon 넷평 Edit/DelReply
    @_@이 강좌를 보고 어제 하루종일 html,css 파일을 만지작 거렸네요
    비록 투박하지만 저만의 스킨을 갖는다는것에 즐거움을 얻고 있습니다.

    강의 감사합니다. 다음 강의들이 기대가 되네요
    2009/10/06 22:01
    • 2009/10/07 12:36
      고맙습니다.
      자기만의 집을 갖는 것 보다야 못하지만
      참 즐거운 일이예요. ^^
  29. BlogIcon 조똘보 Edit/DelReply
    티스토리로 이사하고 나서 스킨 수정법을 찾아 다니다 그레이스님 블로그까지 왔는데요.
    그동안 댓글은 거의 안보고 스킨 강좌만 보고 가곤 했는데 오늘 보니
    상당히 전투적인 댓글이 보이네요.

    배고픈 이웃에게 밥 나눠주는 사람보고 너 조리사 자격증 있냐고 따지는거 같습니다.

    전 html도 제대로 쓸 줄 모르고 이미지 작업도 제대로 못하는 사람이라
    지금 쓰는 스킨 수정하는데만 한달 가까이 걸렸습니다.
    그 사이 하루 대여섯 시간씩 "티스토리 스킨"이라는 단어가 들어간 페이지는
    검색 사이트에서 찾을 수 있는 곳이라면 오만데 다 들어가봤어요.

    뭐 깔끔하고 잘 꾸며서 잘 관리하시는 분들 많지만
    스킨 수정법이라고 올려두신 글 중에는 초보인 제가 이해하기 어려운 말들이 많더군요

    웹 표준이고 나발이고 일단 쉽게 설명해 놓은 곳이 몇군데나 있나요?
    이 블로그가 그레이스님 포트폴리오 사이트도 아니고
    돈 받고 작업해준 사이트도 아닌데 너무 전투적인 댓글은 보기 좋지 않습니다.

    상업 강좌도 아니고 개인 블로그 강좌인데..
    내 공간에서 내가 알고 있는 지식으로 남에게 도움을 주겠다는데 뭐가 문젠가요?

    어려운 말로 끼리들만 알아들을 수 있는 강좌가 있고
    쉬운 말로 초보자들도 알아들을 수 있는 강좌가 있습니다.
    강좌의 전문성은 돈 받고 파는 강좌에 적용하셔도 되요.

    그리고 웹 표준을 지키면 절대 깨지지 않는다고 하셨는데
    그렇다면 외국 일각에서 일어난 익스6 사용 안하기 운동은 누가 시켰을까요?
    그 웹디자이너들도 게을러서, 혹은 귀찮아서 그런 운동하고 ucc 퍼뜨리고 그랬을까요?

    단순한게 최고의 홈페이지라는건 뭐 본인의 생각을 쓰신것 같은데
    '사용자의 취향'이라는 걸 전혀 고려하지 않으면 그 말씀이 정답이 맞습니다.
    내 생각에 단순한게 최고라고 남들한테까지 이미지 넣어라 마라 할 문제는
    아니니까요.

    저같은 초보한테는 가뭄의 단비같은 강좌인데
    괜히 강좌 올리시는분 맘 상하게 해서 강좌 없어지게 하지 마시고
    "수고 많으십니다. 지나가다 들렀는데 이부분은 이렇게 고치면 더 좋겠네요."
    하고 격려성 글을 다시는게 품격을 해치지 않고 실력을 자랑할 수 있는 방법이라고 말씀드리고 싶습니다.

    추신: sistool님 링크를 따라가보니 css 홈페이지의 소개말에 한글 오류가 좀 보이네요.
    2009/10/07 10:29
    • 2009/10/07 12:40
      우와, 조똘보님 스킨이 정말 멋져요. +_+
      아직 완성 못하셨다니,
      완성된 모습이 기대됩니다.
  30. BlogIcon 종찬 Edit/DelReply
    와. 정말 잘 읽고 있습니다.
    오늘 하루만에 다 독파했네요.

    이제 블로그에도 날개를 입힐수,,. 있지..
    2009/10/18 00:01
  31. 궁금이 Edit/DelReply
    궁금한 게 있는데요 -ㅁ-
    '샵샵' 이녀석은 왜 바로 ##으로 표시하지 않으시고 '샵샵은 ##으로 바꾸세요' 라고 하는 건가요?
    다른 강좌들도 그런식으로 하드라구요..궁금;;
    2009/10/19 13:47
    궁금이
    • 2009/10/20 15:38
      ##으로 표기하면 글에 표시가 안돼서요;
  32. BlogIcon 하나크린 Edit/DelReply
    열심히 공부하는 중이었는데, 한마디 안남길 수 없네요...
    sistool님께서 Grace님 강의를 조목 조목 틀린 부분 지적하시고 계시네요.
    우리 모두는 초등학교 이상 배웠을 겁니다. 그렇다고 해서 우리가 초등학생 전과목을 잘 가르칠 수 있는 것은 아니죠.

    그것처럼 초보자들을 위해 스킨만들기 이렇게 친절하고 쉽게 만들기 위해서는 많은 고민이 필요했을 것입니다. 그것은 웹 지식보다 다른 차원의 지식이 더욱 풍부해야 할 수 있는 일입니다. 또한 자신의 지식을 나눈다는 봉사정신없이는 할 수 없는 일입니다.


    지적하신 점이 맞다면 (맞는지 모르겠지만,) 아니 맞았다 쳐도,
    남의 글에 의식없이 지적하시는 그 자세는 sistool님의 웹 지식의 수준을 가늠해볼 수 있게 합니다.
    2009/11/12 13:25
  33. 통신원 Edit/DelReply
    저는 글자부분이 왜 □□이렇게 나올까요
    2009/11/13 15:28
    통신원
    • 2009/11/13 15:36
      "메타태그 한글" 로 네이버같은 포털에서 검색해보세요.
  34. BlogIcon 花自開 Edit/DelReply
    안녕하세요.! 티스토리 스킨만들기를 매일매일 열심히 보고있는 초보 블로거에요^^

    한강의 한강의 차근차근 따라가다보니 오 ㅏ! 조금씩 변해가는 내 블로그가 신기할 뿐이에요 ㅋ ㅋ.

    정확하고 친절한 강의 감사드려요^^

    지금은 10강까지 다보고 복습하면서 이것저것 쪼끔씩 건드려보고있는데요..~ 궁금한게 있어서요~

    이 강의에서 <body id="[샵샵_body_id_샵샵]">을 설정하잖아요..~
    여기에 <body id="[샵샵_body_id_샵샵]" class="aaa"> 이렇게 하고 \

    css 에서 .aaa 정의하게되면 id 도 반영되고 class도 반영되나요???
    2009/11/20 11:27
  35. BlogIcon 메리 Edit/DelReply
    와, 신기하다
    2009/12/02 19:59
  36. 밴드부장 Edit/DelReply
    sistool님 아마 부러워서 그러시는듯...

    그분관련된 웹표준어쩌고 하는 사이트 가봤더니 혼자 글쓰시고 댓글은 몇개 없던데

    그레이스님 인기 많으니까 시샘하시는듯...
    2009/12/29 08:57
    밴드부장
  37. Edit/DelReply
    비밀댓글 입니다
    2010/01/04 17:17
    • 2010/01/04 18:23
      그림에 링크 거는 것은 1강부터 3강까지 열심히 보시면 해결 가능합니다.
      카테고리 메뉴 없애는 것은 관리자화면의 사이드바 설정에서 해보세요.
  38. Edit/DelReply
    비밀댓글 입니다
    2010/01/15 15:30
    • 2010/01/15 18:35
      네. 둘 다 가능해요. ㅋㅋ

      배경고정은 아무 포털사이트에서 'css 배경 고정'이라고 검색하면 주루룩 나올 거구요, 제 블로그에도 있어요. '배경'이라고 검색해보세요.
  39. BlogIcon 희품 Edit/DelReply
    블로그 비공식 휴가(?) 내고, 새 단장(?) 할까 해서, 2일 만에 7, 8강까지 따라갔다가. 문제가 발생해서 말이죠.
    #tt-body-search .topmenu .menu_list a {color:#E1EBF9; text-decoration:underline} 요게 css에서 윗부분에 차지하면 밑에 설정이, 음 강의를 예를 들면 #blogImage {...}가 실행을 안한단 말이죠.

    공백에서 시작하려니까 적용이 안되는게 많네요. 티스토리 링크가 안먹혀 있어서 그런가.

    음, 5강까진 괜찮았는데, 7강의 <div id="blogDesc">[샵샵_desc_샵샵] <span class="userID">[샵샵_blogger_샵샵]</span></div> 에서

    [샵샵_blogger_샵샵] 에 자신의 아이디를 입력 해야한다던가 하는, 암묵적인 내용이 많아져서 왕초보 한테는 점점 어려운 강의가 되간다는 기분이..

    문제의 부분.
    <body id="[샵샵_body_id_샵샵]"> 이거랑 #tt-body-search .topmenu .menu_list a{..} 이거 공백에서는 적용안되는건가요? 티스토리에서 4강짜리 시험해보다가 폭탄맞아서 기본 스킨으로 급 변경 하긴 했지만, 역시 body id 를 뭘로 설정해야하는가랑, #tt-body-search << 요거 갑자기 어디서 튀어나온..


    이런거 몰라도 진도는 나갈 수 있지만, 저도 호기심이 상당하기에 모르고는 못넘기는 성격이라 말이죠.
    2010/01/15 20:16
  40. BlogIcon Psi Edit/DelReply
    안녕하세요^^ 스킨을 제작하고 있었는데,FF 에서 출력시 글자가 다 깨지네요 ㅠㅠ.
    인코딩을 euc-kr 로 바꾸면 나오긴 나오는데.. 왜 글자가 깨지는 것일까요>
    2010/01/29 14:42
    • 2010/02/05 10:44
      ㅠ_ㅠ 저도 잘 모르겠어요.. 네이버에 물어봐야겠어요.
  41. deki Edit/DelReply
    이미지를 넣고 부터 갑자기 가운데 정렬이 안되요.
    margin:20px auto;했는데도요. 왜그럴까요?

    주소는 http://temp2gun.tistory.com/media
    2010/02/06 14:42
    deki
  42. BlogIcon 리루 Edit/DelReply
    아 어떡하죠? ㅜㅜㅜ 저 이 강의 초반부에

    h(헤드라인)태그와 a(링크)태그, ul과 li(리스트)태그에 대해서는 4강에서 배우셨으니 아실 줄로 알고
    여기에 쓰인 치환자를 설명하겠습니다.
    [샵샵_blog_link_샵샵]은 블로그 주소입니다.
    [샵샵_title_샵샵]은 블로그 제목입니다. 관리자모드의 환경설정에서 입력한 제목이 나오는거예요.
    [샵샵_blog_link_샵샵]media는 블로그 주소 뒤에/media가 붙어 미디어로그의 주소가 됩니다.
    [샵샵_localog_link_샵샵]은 지역로그의 주소이구요,
    [샵샵_taglog_link_샵샵]과 [샵샵_guestbook_link_샵샵]은 각각 태그로그와 방명록의 주소입니다.

    '샵샵'을 '##'으로 바꿔주는 것 잊지 않으셨죠? 그럼 브라우저에서 결과를 봅시다.

    -> 저도 똑같이 했는데 왜 안 될까요? ㅠㅠㅠ 맘 같아서는 스킨파일을 그레이스님께 보내서 뭐가 틀렸는지 속 시원하게 알고 싶네요 ㅠㅠㅠ 저는 한글로 '상단레이어'라고 쓰여있는 부분에다가 복붙하라고 하신거 쓱 복붙하는 건줄 알았는데... ㅠㅠㅠ 어디에 어떻게 복붙하는건지 잘 모르겠어요 ㅠㅠㅠ
    2010/02/06 22:56
  43. Edit/DelReply
    비밀댓글 입니다
    2010/03/07 15:25
1 ... 18 19 20 21 22 23 24 25 26 ... 202