티스토리 블로그 Skeleton 반응형 웹 스킨에서 타이틀 이미지로 적용하는 방법
- 블로그 관련 정보
- 2013. 12. 27.
티스토리 블로그 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의 여백은 이미지 크기나 비율에 따라 적절하게 수정하여 사용하세요.