티스토리 블로그 Skeleton 반응형 웹 스킨에서 타이틀 이미지로 적용하는 방법

반응형

티스토리 블로그 Skeleton 반응형 웹 스킨에서 타이틀 이미지로 적용하는 방법


마크쿼리님이 제공해주시는 티스토리 블로그 스킨인 Skeleton이 괜찮은 반응을 얻고 있는 듯 보입니다. 저 역시 적용한 뒤 몇 가지 설명 글을 포스팅 한 적이 있는데요. 몇 개의 설명 글로는 역시 부족한 부분이 없지 않아 있었는지, 댓글이나 방명록 등을 통해 스킨 및 활용에 관해 문의하시는 분들이 종종 있네요. 
 


이번 글 역시 문의글에 대한 답변 형식으로서, 티스토리 블로그 Skeleton 반응형 웹 스킨의 상단 타이틀을 텍스트가 아닌 이미지로 적용하는 방법에 대한 내용입니다. 해당 내용은 이미 마크쿼리 커뮤니티의 도움말 ↩에 설명되어 있기에 참고해보시는 것도 좋으며, 제 블로그에서는 제가 직접 적용한 소스코드를 기준으로 별도로 알려드리겠습니다.


블로그 타이틀 이미지 사이즈 측정



일반적인 티스토리 웹 스킨이었다면 타이틀 이미지의 사이즈는 매우 중요한 요소입니다. 고정된 크기에 딱 알맞도록 보여져야 하기 때문인데요. 반응형 웹 스킨인 Skeleton 스킨에서는 사이즈에 크게 구애받을 필요는 없습니다. 반응형 스킨인 만큼 타이틀 이미지의 크기는 언제든지 변할 수 있고, 변경되는 것에 따라 적절하게 사용자에게 보여질 것입니다. 사이즈는 적절한 비율로만 제작된다면 큰 문제가 발생하지 않습니다.

제가 사용 중인 타이틀 이미지를 기준으로, 타이틀 이미지는 아래의 스펙을 가지고 있습니다.

타이틀 이미지
반응형 웹용 타이틀 이미지

타이틀 이미지 스펙

  • 파일 포맷 : png 이미지
  • 사이즈 : 1170 * 400 px



타이틀 이미지의 구성


기본적으로 티스토리에서 타이틀 이미지를 적용하기 전, 그러니까 기본 모델은 블로그명+블로그 설명 글을 표시해주는 형태입니다. 이것들은 티스토리 자체 치환자를 이용해 표시됩니다. Skeleton 반응형 웹 스킨에서는 이 항목들을 skeleton-header, row, col-sm-12라는 <div>로 감싸고 있습니다. 기본 소스코드는 아래와 같습니다. ▼



위 소스코드를 보게되면, 타이틀 이미지 부분 전체를 skeleton-header가 품고 있는 형태입니다. 그 다음 row가 위치해 있으며 그 안에 skeleton 스킨의 전체 이미지를 조절해 줄 크기를 가진 col-sm-12가 위치해 있습니다. 대략적인 그림으로 보자면 아래와 같습니다. ▼

이미지
타이틀 이미지의 위치


즉, HTML이 호출되면(웹 페이지가 불러와질 때) 크기를 우선적으로 크기를 결정짓는 것은 skeleton-header이며, 그 안에서 모든 작업이 이루어집니다. style.css를 보게되면 skeleton-header에는 별다른 값은 적용되어 있지 않으며 여백 정도가 전부입니다. 따라서 별다른 조치를 취할 필요 없이, HTML을 일부만 수정하고 CSS를 통해 여백 값만 잘 조절해주면 정상적으로 작동하는 타이틀 이미지를 적용할 수 있습니다.


타이틀 이미지 적용하기


먼저 HTML을 수정합니다. 여기에서는 일반적인 HTML 수정과는 다르게 HTML5에 적합한 figure 태그를 이용합니다.(권고 사항). 저는 별도로 캡션 태그는 이용하지 않았으며, 이미지를 클릭할 경우 블로그의 첫페이지로 이동할 수 있도록 링크를 추가했습니다. 소스코드는 아래처럼 적용되었습니다. ▼


Important

소스코드를 복사하고자 하신다면, 소스코드 하단 우측에 있는 RAW버튼을 클릭하여 복사하시면 됩니다.



두번째로 CSS를 수정해줍니다. CSS에서는 이미지가 표시될 때 나타날 상하좌우 여백을 적용하는 정도로 활용합니다. 이미지 크기 및 보여지는 사이즈 등에 따라 여백은 적절하게 설정되어야 하는데요. 만약 저와 똑같이 표시되도록 작업하신다면(이미지 크기 및 각종 여백값 모두 동일하게), 아래의 CSS처럼 적용하시면 됩니다. CSS 여백 값은 총 2개가 필요합니다. 일반적인 웹 크기(대형 화면)에서의 여백 설정 값과 테블릿이나 모바일처럼 작은 사이즈의 크기에서 표시할 여백 값이 그것입니다.


대형 화면에서는 CSS의 major style이란 코드를 검색하여 .skeleton-header의 값을 수정합니다.

두번째로 작은 화면에서 표시될 값을 수정합니다. 해당 내용은 미디어쿼리 안에 포함되어 있습니다.


위 코드는 작은 사이즈의 화면에서의 여백 설정입니다. Tablet을 찾거나, @media screen...을 찾아 해당 값을 수정하면 됩니다.

Note

CSS의 여백은 이미지 크기나 비율에 따라 적절하게 수정하여 사용하세요.





사진 - Geoff Penaluna

반응형

댓글(19)

  • 2013.12.28 02:55 신고

    감사합니다^^ 적용이 제대로 된것 같네요~~

  • 알 수 없는 사용자
    2013.12.28 07:46

    좋은거 배우고갑니다

  • 2013.12.28 07:55 신고

    티몰스 님 덕분에 많은 분이 이 스킨에 관심을 가지고 계시더라고요 ㅎㅎㅎ
    저도 이 스킨을 적용하고 싶은 욕심이 정말 많이 나네요...ㅎㅎ;

  • 알 수 없는 사용자
    2013.12.28 09:12

    좋은거 배우고 갑니다^^
    감사해요^^

  • 알 수 없는 사용자
    2013.12.28 09:37

    타이틀 스킨 적용법에 대해서 알아보시는 분들께
    정말 좋은 정보네요~ 잘 보고 가요 ^^

  • 알 수 없는 사용자
    2013.12.28 12:19

    티스토리도 정말 하나하나 할려면 너무 어려운거 같아요.ㅎ

  • 2013.12.28 13:07 신고

    덕분에 잘 알아 갑니다 ^^
    요런 꾸미기가 티스토리의 맛이죠 ㅎㅎ

  • 알 수 없는 사용자
    2013.12.28 15:23

    타이틀스킨...

    고민할 수록 더 어려워지는 것같습니다. ^^

  • 2013.12.28 16:27 신고

    다음번에 블로그수정할때 시도해봐야갰군요.
    잘 알아 갑니다~ 즐거운 주말 되세요~

  • 2013.12.29 09:40 신고

    저도 반응형 웹스킨 실험을 한번 해 보긴 해야 하는데 아직까지 엄두를 못내고 있네요. ㅠ.ㅠ

  • 2013.12.29 17:20 신고

    언젠가 좋은 이미지 찾으면 한 번 적용해 볼까요? ^^

  • 알 수 없는 사용자
    2013.12.29 18:15

    좋은 정보 감사합니다

  • 2013.12.30 08:51 신고

    덕분에 올해 블로그에 대해 많이 배웠습니다.
    당장에는 모든 것을 실행하기는 어려워도
    언젠가는 같이 공감하도록 하겠습니다^^

  • 익명
    2014.01.17 03:11

    비밀댓글입니다

  • 익명
    2014.01.17 03:12

    비밀댓글입니다

  • 2014.04.14 12:36 신고

    안녕하세요!! 알려주신데로잘해서 PC화면에서는 타이틀이 제자리를 잘 찾았는데 화면을 줄이면 타이틀부분도 같이 줄어야하는데 이미지가 줄지가않습니다.
    위의 내용대로 했는데도 안되는데 혹시 이것에대한 해결방안을 얻을수있을가요?

  • 2014.04.15 08:31 신고

    ^^ 남시언님~오락가락해서 올려놓으신것 그냥 가져다가 붙였더니 잘됩니다 감사합니다~ 언젠가 한번 뵈면 좋겠네요` 궁금한점이 많아지는 멋진 분같아요`

  • Cacka IMae
    2020.03.12 11:40

    관리자의 승인을 기다리고 있는 댓글입니다

Designed by JB FACTORY