Before
After

요사이 얼마 동안 블로그 스킨을 좀 바꿔볼까 하고 여기저기 돌아다녀 봤는데 딱히 마음에 드는 녀석을 찾지 못했다. 티스토리 기본 디자인은 폰트 크기가 좀 작아서 가독성이 나쁜 것 같아 글씨큰 녀석으로 바꾸고 싶었는데, 글씨가 큰 스킨은 디자인이 구리고, 디자인이 예쁜 스킨은 글씨가 작고… 어찌 이리 맘에 드는 게 없능지 ㅜㅠ…

찾다가 없어서 내가 직접 스킨을 고쳤다. 이런 짓은 다신 안 해야지 했는데 결국 목마른 사람이 우물을 파는구나. 네이버의 나눔고딕을 웹폰트로 설정하고 스타일 시트에서 색상도 진하게 변경. 이제 좀 글이 시원시원하게 볼만해 졌다.

글씨 크기와 함께 불만이었던 점은 링크가 걸린 하이퍼 텍스트가 일반 텍스트와 아무런 구분이 없다는 점인데, 그것 때문에 본문에 자연스럽게 링크를 걸기가 힘들었다. 글을 쓸 때 은근히 신경 쓰이는 부분이었는데 이것도 이참에 수정. 예전 같으면 네이버(http://naver.com) 링크를 이렇게 걸었지만 이제는 네이버라고 바로 링크하면 됨 ~

작년에 아꿈사에서 HTML5 & CSS3 스터디를 했던 게 많은 도움이 되었다. 크롬의 개발자 도구를 이용하니 눈으로만 css를 추적하던 때랑은 비교도 안되게 편리하구나.

스킨을 찾다가 맘에 드는게 없어서 워드프레스로 옮겨버릴까 생각도 잠시 했었지만 폰트 좀 만져놓고 나니 나름 괜찮아 보여서 조금만 더 참아본다.

Posted by leafbird 트랙백 1 : 댓글 0

댓글을 달아 주세요

css3 까지는 아니지만 (지금은 모든 브라우저가 지원하지 않기에 폴백 방안까지 마련하려면 꽤나 피곤해진다) 크롬 최신버전과 IE 9.0만을 타겟으로 하는 호환성을 목표로 기존의 페이스북 수집기 결과물 디자인을 css로 변경해 보는 중입니다. 사실 처음부터 css-driven으로 디자인하고 싶었지만 그땐 코딩의 목표가 C#을 익히기 위함이었기 때문에 다른 부분은 패스 했었지요.

페이스북 수집기는 만들어 놓은 이후로 지금도 개인 블로그 (http://leafbird.tistory.com)에서 아주 잘 사용하고 있습니다. 개인적인 일상 이야기는 페이스북에 편하게 적어두었다가 적절한 주기로 한 번에 블로그로 옮겨오고 있지요. 작성해서 사용해보니 아이폰으로 접속했을 때 잘려버리는 문제점을 발견한 것이 좀 흠이었지만… 이것도 이번에 css로 변경하면서 한 번 고쳐볼 생각입니다.

데스크탑 버전 디자인은 어느 정도 완성이 되었습니다. 티스토리 글 쓰는 화면에서는 css가 적용되지 않아 아래처럼 보이지만,

실제로 블로그 스킨에서 보면 제대로 된 디자인으로 보이지요 :)

책만 읽으면서 공부할 때와는 달리 실제로 코드를 사용해보고 응용해보니 재미있습니다. 크롬과 IE의 개발자 도구는 정말 막강하네요. 디자인 작업을 할 때는 물론이고 이벤트 처리같은 front-end 개발을 할 때에도 정말 유용한 툴이 될 것 같습니다. 저도 디자인 변경작업 할 때 처음에는 tool에 임베딩 해놓은 C#의 WebBrowser 컨트롤에서 lua로 디버깅을 했지만 지금은 그냥 크롬에서 하고 있습니다. 이게 훨씬 빠르고 쉬워요 +0+)b

Posted by leafbird 트랙백 0 : 댓글 0

댓글을 달아 주세요



출처 : 써머즈님 블로그 글 - http://bones.tistory.com/12

웹 디자인 패러다임의 변화에 대해 다루는 'HTML5를 여행하는 비(非) 웹개발자를 위한 안내서' 후편을 작성해 보고 싶은데 언제 하게 될지 몰라 우선 핵심 자료만 먼저 포스팅.

엄청난 gif다. 사실 저거 하나면 내가 굳이 PT 만들 것 없이 모든 설명을 대체한다고 봐도 무방.
Posted by leafbird 트랙백 0 : 댓글 0

댓글을 달아 주세요

안녕하세요.

저도 div정렬문제로 2,3일 고생했습니다.

제가 찾은 가장 좋은 정렬법을 소개해 드리죠.

응용하시면 문제 해결 될거 같네요.


## 소스 ##

<body]
    <div style=" font-size:smaller; position:absolute; background-color:Green; width:300px; height:200px; top:50%; left:50%; margin-left:-150px; margin-top:-100px;"]
        ^^;; 정렬 어렵죠?<br /]
        스타일 보시면 아시겠지만...<br /]
        1.div박스의 크기지정(width:300px; height:200px;)<br /]
        2.화면 가운데로 정렬(top:50%; left:50%;)<br /]
          이렇게하면 div박스의 왼쪽 맨 윗점이 화면의 중간에 위치합니다.<br /]
        3.그러므로 (margin-left:-150px(-width/2); margin-top:-100px(-height/2);)를<br /]
          사용해서 화면 가운데로 옮기는 거죠. ^^<br /]
    </div]
</body]

http://kin.naver.com/detail/detail.php?d1id=1&dir_id=109&eid=XEIvj3T6D3iSbUsm2do5QI2FdReVBMMi&qb=Y3NzIMituOkgsKG/7rWl

TAG CSS, div
Posted by leafbird 트랙백 0 : 댓글 0

댓글을 달아 주세요