'html'에 해당되는 글 2건

  1. 2010.01.20 skin.html 과 style.css 에 손을 대다(5) (13)
  2. 2010.01.15 skin.html 과 style.css 에 손을 대다(4) (14)

2010.01.20 12:11 Users/티스토리

간만에 포스팅 합니다. 돈은 않되는데 바쁘기만 하고 실속도 없고 그러네요.

오늘도 티스토리 스킨 변경을 하려고 이것 저것 만져 보다가 어제 kagami님이 질문 하셔서 고치다만 댓글박스 부분에 손을 댓습니다.

수정한 것이 4개 인데요.

Write 이미지의 시뻘건 분위기를 시커먼 분위기로 변경
시뻘건 라인 두개 거무틱틱한 라인으로 변경
입력상자 높이 수정
하단부의 Pre / Next 에 붙어 있는 화살표 색상 변경

먼저 write 이미지는 포토샵에서 아예 검은색 바탕에 흰색 글씨로 변경 하고, 영문 Write를 댓글 작성 완료! 라고 내용도 변경 했습니다.
그리고 Pre / Next 에 붙어 있는 화살표는 흰색으로 변경 했구요.

다음은 소스 수정 부분 인데요
style.css 를 보면 댓글 박스 설정에 대한 부분이 나옵니다.

/* 방명록&댓글 쓰기 */
라는 부분 아래로 내려가면 댓글 상자 설정에 대한 소스가 나옵니다.

textarea {
 width:/*@post-width:-50=*/600px/*@*/;
 padding:5px;
 border-top:1px solid #FE5377;
 border-bottom:1px solid #FE5377;
 background:#fff url(images/txt_comment2.gif) no-repeat 2px 10px;
 color:#9F9F9F;
 font:11px/18px dotum;

이 소스를 보면 댓글 상자의 높이를 선언한 부분이 보이지 않습니다. 그래서 높이 선언 부분을 추가 해서 4라인 입력 상자를 5라인 입력 상자로 변경 했구요, 붉은 분위기의 라인색 코드인 #FE5377 을 검은색 라인 코드 (#000000)로 변경 했습니다. 추가로 폰트 부분도 살짝 바꿨습니다.

textarea {
 width:/*@post-width:-50=*/600px/*@*/;height:90px;
 padding:5px;
 border-top:1px solid #000000;
 border-bottom:1px solid #000000;
 background:#fff url(images/txt_comment2.gif) no-repeat 2px 10px;
 color:#9F9F9F;
 font:11px/18px 맑은고딕, Tahoma, gulim, dotum;;



                                               ↑ 변경전  변경후 ↓



이제 내 블로그에 전반적으로 보이던 붉은 분위기의 액서세리들이 하나 둘씩 떨어져 나가고 있습니다.

 

skin.html 과 style.css 에 손을 대다(1)
타이틀 박스(글제목 상자) 배경색 변경 / font-family 변경
skin.html 과 style.css 에 손을 대다(2)
댓글 폰트 변경 / 포스팅 타이틀 플래쉬로 변경
skin.html 과 style.css 에 손을 대다(3)
카운터 이미지 변경 / 네비게이션 이미지 변경
skin.html 과 style.css 에 손을 대다(4)
사이드바 이미지 변경

 

 

Posted by 얼음무지개

댓글을 달아 주세요

  1. Favicon of http://icf1998.tistory.com BlogIcon 국제옥수수재단 2010.01.20 13:30 신고  댓글주소  수정/삭제  댓글쓰기

    붉은 분위기는 없어지지만 조금더 차분해 지고 정돈되어 보인다고 해야 할까요(제 주관적생각임 ㅋ)^^
    특히 " 댓글작성 완료!! " 맘에 듭니다 ㅋㅋㅋ

  2. Favicon of http://koreanwar60.tistory.com BlogIcon Koreanwar60 2010.01.20 15:57 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 얻어가는데 막상 적용이 잘 안됩니다......ㅎㅎ

  3. Favicon of http://byram.tistory.com BlogIcon by.Ram 2010.01.20 18:12 신고  댓글주소  수정/삭제  댓글쓰기

    저도 오늘 스킨을 싹 바꿨습니다 ; 게시글을 보고 있는데 스킨이 막 깨지더라구요 ; 제가 뭘 건들였는지 ... ;; 엄청 난감했습니다 ㅠ_ㅠ 얼음무지개님 글을 보고 있으니 또 수정을 하고 싶네요 ㅎㅎ 좋은 글 잘 봤습니다 -

  4. Favicon of http://yongja123.tistory.com BlogIcon Garimto 2010.01.20 23:03 신고  댓글주소  수정/삭제  댓글쓰기

    추천감사합니다 ^^
    어휴 ㅠㅠ
    저도 CSS 좀 배우고 싶은데 영 어려워서 못하겠네요 ㅠㅠ

  5. Favicon of http://ok365.tistory.com BlogIcon 오지코리아 2010.01.21 09:22 신고  댓글주소  수정/삭제  댓글쓰기

    저는 여기서 보는것만으로 많이 배우게 됩니다.
    저도 스킨 약간 바꿨답니다.
    잘 읽고 갑니다^^

  6. Favicon of http://toyoufamily.tistory.com BlogIcon 투유♥ 2010.01.21 10:20 신고  댓글주소  수정/삭제  댓글쓰기

    요즘 제 블로그 html에 문제가 생긴것 같은데
    ㅎㅎㅎ 부탁을 좀 ㅋㅋㅋ
    농담이고요. 포스팅 자주자주 좀 해주세요
    (저도 못하지만)헤헤헤

  7. Favicon of http://greenetwork.tistory.com BlogIcon 안달레 2010.01.22 13:58 신고  댓글주소  수정/삭제  댓글쓰기

    으흐흐 요긴하게 잘 써먹겠습니다. 꾸벅^^

  8. Favicon of http://yeoullee.tistory.com BlogIcon 불타는 실내화 2010.01.22 17:31 신고  댓글주소  수정/삭제  댓글쓰기

    요즘 스킨 만드시나봐요. 우와~ 전 컴맹이라 그저 부러울 따름입니다 ㅠㅠ
    봐도 뭐가 뭔지 도통 모르겠네요 -_-;;

  9. Favicon of http://muye24ki.tistory.com BlogIcon 무예인 2010.01.25 08:15 신고  댓글주소  수정/삭제  댓글쓰기

    손을 잘못대서 믹스업이 두개떠요 ㅜ.ㅜ

  10. Favicon of http://egoggan.com/story BlogIcon 이곳간쥔장 2010.01.25 11:12 신고  댓글주소  수정/삭제  댓글쓰기

    조금 멀리가더라도 창의적으로 직접하시는군요 저도 같은 과 지만 효율면에선 항상 의문이 있지만 그래도 조금씩 조금씩 완성되가는 모습에서 업되는 느낌이 좋습니다. 화이팅!~~~

  11. Favicon of http://onlymystory.tistory.com BlogIcon 꺼망 2010.01.25 13:26 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사 잘 배우고 갑니다.

  12. Favicon of http://youiwe.tistory.com BlogIcon 소풍온 나 2010.01.25 15:21 신고  댓글주소  수정/삭제  댓글쓰기

    이게 제홈두 되나요?
    좋은정본데 제가 하기는 ㅠㅠ 하다가 삭제되면 어케요

  13. Favicon of http://haayaa.tistory.com BlogIcon 단미지니 2010.01.27 00:23 신고  댓글주소  수정/삭제  댓글쓰기

    많은걸 배울수 있는 곳이네요^^
    자주 들러야겠어용

2010.01.15 15:27 Users/티스토리

얼음무지개는 HTML을 쥐뿔도 모릅니다. 당연히 CSS 라는것도 모릅니다. 그러다 보니 코딩은 우주인들이 사용하는 문자인 것으로 알면서 살았습니다.

얼음무지개는 디자인을 개뿔도 모릅니다. 당연히 색감 이라는것도 없습니다. 그러다 보니 포토샵을 사용할줄 모르게 진화되었습니다.

그런데 이번에 스킨을 조금씩 조금씩 바꿔가면서 HTML도, CSS도, 포토샵도 14파운드 볼링공으로 맞아가면서 배우면 중급 까지는 아니더라도 이것 저것 할수 있다는 것을 알게 되었습니다. 초보를 벗어나기 까지도 쉽지는 않겠지만 스킨을 바꿔 가면서 새로운 재미를 알게 되었습니다.

컴퓨터를 잘 모른다구요?
HTML은 더 모르겠죠?
거기에다가 포토샵 까지 쓸줄 모르죠?
이것 저것 다 모른다고 그냥 있는대로만 쓸건가요?
일단 덤벼들어 보세요. 까짓거 잘못되어봤자 스킨 새로 적용하면 되잖아요.

이번에는 시뻘건 분위기를 주도 하고 있는 사이드바에 붙어 있는 각종 타이틀을 변경 하려고 합니다.



역시 검은 바탕엔 하얀 글씨 라는 단순무식한 기본 개념으로 글씨 비슷한건 죄다 하얀색을 사용할 겁니다.

그리고 끝선 맞추기를 위해서 가로막대를 하나 넣을 거구요.
폰트는 이폰트 저폰트 적용 하다가 필기체 비슷한 폰트로 결정 했습니다.

쨔잔~~

뭐..좀 유치해 보이기도 하지만 방법을 알았으니 좀 쓰다가 맘에 안들면 다시 바꾸면 되죠.
그래도 내눈에는 바꾼게 더 보기 좋습니다.

첫번째로 시도한 스킨 바꾸기 작업의 끝이 보이기 시작 합니다.

skin.html 과 style.css 에 손을 대다(1)
skin.html 과 style.css 에 손을 대다(2)
skin.html 과 style.css 에 손을 대다(3)

Posted by 얼음무지개

댓글을 달아 주세요

  1. Favicon of http://ok365.tistory.com BlogIcon 오지코리아 2010.01.16 22:05 신고  댓글주소  수정/삭제  댓글쓰기

    힘을 보탭니다.힘내자,아자아자!

  2. Favicon of http://heinrich0306.tistory.com BlogIcon 하인리히 하이네 2010.01.17 17:39 신고  댓글주소  수정/삭제  댓글쓰기

    오오.. 상당히 유용한 방법이네요... 블로그 리뉴얼 할때즈음에 써먹어 보겠습니다 (지금도 중간중간에 추가하고 빼고 하긴 하지만요 ㅋㅋㅋ)

  3. Favicon of http://toyoufamily.tistory.com BlogIcon 투유♥ 2010.01.18 10:19 신고  댓글주소  수정/삭제  댓글쓰기

    덕분에 하나하나 배워갑니다.
    근데 저도 실천을 하긴 해야하는디 ㅠㅠ
    곧 동참하겠습니다.

  4. Favicon of http://koreanwar60.tistory.com BlogIcon Koreanwar60 2010.01.18 11:08 신고  댓글주소  수정/삭제  댓글쓰기

    좋은거 배워 갑니다.

  5. Favicon of http://first-step.tistory.com BlogIcon 더첫걸음 2010.01.19 12:06 신고  댓글주소  수정/삭제  댓글쓰기

    좋은정보 감사합니다
    조금씩이지만 저에게는 큰 힘이 ㅎ

  6. Favicon of http://artbob.tistory.com BlogIcon 해피플루 2010.01.19 14:34 신고  댓글주소  수정/삭제  댓글쓰기

    와, 사이드바에 글자들이 막 여러 색깔로 바뀌네요. +_+
    저도 나중에 해보고 싶어요.
    근데 포토샵 못하는데..;;

  7. Favicon of http://soundcube.co1.kr BlogIcon dj-soho 2010.01.19 19:50 신고  댓글주소  수정/삭제  댓글쓰기

    좋은글 감사합니다 잘읽었어요...^^

  8. Favicon of http://prosense.tistory.com BlogIcon kagami™ 2010.01.19 21:42 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요
    한가지 물어볼께 있는대요, 지금 글쓰는 댓글 입력폼에 세로 높이를 좀 늘리려면 어디를 만져야 하나요.
    나름대로 검색도 해보고 여기저기 다녀봤는대 가로 폭 조절하는방법은 나왔는대 세로폭은 안나왔드라구요.

  9. Favicon of http://timothymerry.tistory.com BlogIcon 티모시메리 2010.01.19 23:31 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 ^^
    저도 폭풍야근 끝나면 따라하기 해봐야겠습니다.

  10. Favicon of http://nutmeg.kr BlogIcon 넛메그 2010.01.20 00:30 신고  댓글주소  수정/삭제  댓글쓰기

    저도 스킨을 직접 고쳐서 쓰고 있지만,
    아 그래도 여전히 HTML은 어려운거 같아요ㅠ

  11. Favicon of http://chanyi.tistory.com BlogIcon chanyi 2010.01.20 02:09 신고  댓글주소  수정/삭제  댓글쓰기

    css는 뭐가뭔지ㅠㅠ

  12. Favicon of http://sonbbang.tistory.com BlogIcon 손빵 2010.01.20 11:38 신고  댓글주소  수정/삭제  댓글쓰기

    ㅋㅋㅋㅋㅋ 신기하네요

  13. Favicon of http://windmark.tistory.com BlogIcon 혜 천 2010.10.29 11:18 신고  댓글주소  수정/삭제  댓글쓰기

    따라서 해보면 될것 같네요. 감사합니다.

이전버튼 1 이전버튼

블로그 이미지
얼음무지개
free counters

글 보관함


티스토리 툴바