생초보 티스토리 블로그 입문(4) - 리스트썸네일

왠지 자꾸만 내용보다는 디자인으로 내용이 흘러가는것 같어...

다시 디자인적인 내용으로 글을 올립니다. 블로그 어워드 2015 받으신 분들의 블로그를 쭉 둘러보다가 [#1] 스킨을 토대로 아주 깔끔하게 만드신 분을 발견했습니다.(http://bosim.kr/) 글도 그렇고 블로그 페이지도 그렇고 아주 깔끔하고 단정한 느낌이었습니다.

그러다 눈에 들어온 것!

글목록 썸네일이 #1 스킨과 아주 잘 어울린다는 거였죠. 그래서 저도 그분을 흉내내서 HTML과 CSS를 흉내내 봤습니다. (썸네일은 아래 사각형 사진처럼 해당게시글의 대표사진을 목록에 미리 보여주는 거에요)

자 우선 HTML 을 바꿔볼까요?

사실 제가 HTML나 CSS를 다뤄본적이 없기때문에 순전히 제 감으로 진행한 겁니다. 저도 세부적인 원리나 기술적인거 정말 모릅니다. 우선 bosim님 블로그에서 올려주신 스킨파일을 다운받았습니다. 그리고 저는 HTML에디터로 HTML 파일을 열어봅니다. 저는 맥이라 Textwrangler로 활용했습니다. (돌팔이 의사가 머리부터 여는 느낌;;)

우선 제가 찾는 내용이 썸네일 부분이니 찾기에서 'Thumb'로 검색해 봅니다.

아무래도 이 부분이 썸네일 영역인것 같네요. 아 그리고 우선 제 블로그 원래 HTML은 메모장 같은데 우선 복사해 놓고 작업을 해야합니다.(혹시나 잘못되면 복구해야죠) 그리고 블로그메뉴 HTML/CSS에 다시 돌아와 제 HTML에서 해당부분을 찾습니다.

그리고 복사해온 부분을 이 영역에 덮어씌웁니다.복붙복붙

자 이제 그럼 CSS를 건드려 볼까요?

그럼 이제 CSS도 똑같습니다.

bosim님이 올려주신 CSS 파일을 열어서 'thumb'로 검색하면 리스트 부분에 해당 글자가 보입니다. 그런데 여기서 주의해야 할건 해당 수정해야할 부분이 2군데에요. 

(1군데만 고쳐도 되는지는 테스트 안해봤어요)

자 이 부분이 리스트에 썸네일의 스타일에 관한 부분인건 확인했으니

일단 제 블로그 원래 CSS에서 해당 부분을 찾아서 메모장에 옮겨놓습니다.

(1)

(2)

해당 부분을 bosim님  CSS를 가져와 붙여넣고 저장후 왼쪽 페이지를 새로고침 하면~!!

짜잔~!! 썸네일이 생겼네요 ㅋㅋㅋ

(변경후)

(변경전)

아무것도 없는 리스트보다 썸네일이 있으니까 훨씬 세련되죠?

※ 추가로 저는 리스트 위에 마우스를 올리면 제목이 바뀌는 색이 bosim님은 하늘색이었지만 저는 원래 #1 버전(그린)이 좋아서 그 부분만 추가로 수정했습니다.

색상코드를 원래대로 #3db39e 로 바꿨어요.

제가 한데로 따라하셔도 되지만 저는 완전 초보에 돌팔이라 원리는 하나도 모릅니다. 그래도 혹시나 저처럼 썸네일을 넣어보고 싶으신 분들이 계실까봐 참고하실 수 있게 작성해 봤습니다.

다음 블로그는 진짜 내용/컨텐츠 구성적인 부분으로 작성할게요~