티스토리 Skeleton 반응형 스킨 본문 이미지 가운데 정렬하는 법

반응형

티스토리 Skeleton 반응형 스킨 본문 이미지 가운데 정렬하는 법


콘텐츠를 자신이 직접 디자인하여 사용한다는 것은 매우 멋진 일입니다. 마크쿼리 ↩님이 개발 및 배포하고 있는 티스토리 반응형 스킨은 사용자가 콘텐츠를 직접 디자인하여 사용할 수 있는 스킨입니다. 기존에 많이 배포되던 일반적인 스킨이 완성형 스킨이라면 마크쿼리 스킨은 커스텀 디자인 여지가 존재하고, 여러가지 아이디어로 콘텐츠 확장성을 겸비한스킨이라고 볼 수 있는데요. 현재 티스토리에서 큰 인기를 끌고 있는 스킨인만큼 마크쿼리 커뮤니티 ↩와 제 블로그 댓글에도 다양한 문의들이 올라오고 있습니다. 그 중에서도 블로그 UI 중에서 기초적이라 할 수 있는 이미지 가운데 정렬법에 대한 문의가 꽤 있어 별도의 포스트로 안내해드립니다.

앞서 언급한 것처럼, 마크쿼리 스킨은 콘텐츠를 사용자가 직접 디자인하여 사용해야 하는 스킨입니다. 즉, 스킨에는 가장 기초적인 구조만 짜여져 있으며, 이것을 어떻게 디자인할지는 사용자의 몫이 됩니다. 본문 이미지 같은 경우에도 누군가는 왼쪽 정렬을, 누군가는 가운데 정렬을, 누군가는 오른쪽 정렬을 원할 수 있는 탓에 어느 하나로 고정시키기가 힘듭니다. 결국 마크쿼리 스킨에서는 일반적인 왼쪽 정렬을 기본으로 설정해두고 있습니다. 하지만 기존에 사용하던 스킨의 본문 사이즈가 현재 사용하는 본문 사이즈보다 작았을 경우, 이미지가 자동 왼쪽 정렬되면서 블로그의 모든 이미지에 공백이 발생하는 현상이 나타납니다. ▼

티스토리 Skeleton 반응형 스킨 본문 이미지 가운데 정렬하는 법

이런 현상은 티스토리에서 이미지를 업로드 할 때 이미지의 사이즈가 고정으로 지정되어 버리는 형식에 의해 발생합니다. 예를들어 기존에 사용하던 스킨의 본문 가로사이즈가 600px 이었다면 업로드 했던 이미지도 강제로 가로 사이즈 600px로 지정되어진 상태로 고정되어있기 때문에, Skeleton으로 변경하여 본문 가로 사이즈가 1000px로 늘어나게 되면서 우측 공백이 발생하는 것입니다. 이런 현상은 지금까지 사용했던 모든 글에서 동일하게 나타납니다. 이 부분을 해결하기 위해서는 이미지를 가운데 정렬로 맞춰주면 적절하게 보여질 수 있습니다.

Skeleton 반응형 스킨 본문 이미지 가운데 정렬

소스코드를 복사하는 방법

1. style.css 에 다음의 코드를 추가합니다. 이미지를 가운데 정렬로 맞춰주는 코드입니다. ▼



이 코드를 추가할 경우, 블로그에 존재하는 모든 이미지들이 가운데 정렬될 가능성이 있어 추가적으로 댓글 부분의 이미지와 방명록에 있는 썸네일 이미지에는 왼쪽 정렬 그대로의 적용을 하기 위해 새로운 코드를 추가해야합니다.

2. style.css 에 다음 코드를 아래와 같이 수정/추가 합니다.▼



이렇게되면 스킨에서 사용하는 대부분의 이미지들을 정상적으로 사용할 수 있음과 동시에 본문 이미지는 가운데 정렬을 할 수 있습니다. 만약 상단 타이틀 부분을 텍스트가 아닌 이미지로 사용할 경우 타이틀 이미지도 가운데 정렬될 수 있습니다. 상단 타이틀 이미지를 왼쪽 정렬하고 싶을 경우에는

3. HTML에서 해당 부분을 찾아 다음처럼 align="left" 속성을 추가해줍니다. 별도의 CSS로 분리하지 않고 HTML에 강제로 왼쪽 정렬을 시킵니다. ▼



이미지를 컨트롤 하는데에는 여러가지 방법이 있습니다. 더 좋은 방법이 떠오른다면, 해당 방법으로도 한번 적용해보세요.

반응형

댓글(4)

  • 2014.02.19 12:00

    이상하게 댓글에 로긴이 안되있네여 ㅋ
    잘 읽고 가요 ㅋ 저 스킨에 대해서 아직 익숙하지가 않아서 눈팅만 하고 있는데 다음에 시간나면 저도 디자인 수정하고 바꿔볼까 고민중이어요 ㅋ 반응형이 아무래도 재밌고?) 좋은거 같아서요 ㅎㅎ
    근데 마크쿼리의 똑같은 스킨 냄새 나는건 아쉬운 느낌이 있네요..
    아무튼 참 재밌는 티스토리 꾸미기어요 ㅎㅎ

  • 2014.02.19 16:59

    아직은 잘 몰라 읽고만 가지만 필요한 시기에는
    꼭 들러 참고하겠습니다~

  • 2014.02.19 22:38

    안녕하세요.

    마크쿼리 커뮤니티 사이트에서 뵙다가 이렇게 티몰스님의 블로그에 처음 방문하여 인사들 드리네요 :D
    멋진 Guide Tip을 올려주셨네요. 많은 도움이 될거같아요.

    Skeleton Skin과 관련하여 다른 방법을 첨언하자면 CSS 부분에 이미지와 관련된 속성값 .img-center가 설정되어 있기때문에 class 태그를 설정해 주어도 가능하지 않을까해요.

    <img class="img-center" width="원하는 설정값" width="원하는 설정값" src="이미지 URL">

    그리고 본문 컨텐츠 영역의 이미지만 가운데 정렬로 지정하기위해 CSS 부분의 .entry-content img 소스코드에 margin-top:100px; 과
    margin-bottom:100px; 를 추가하여 설정하는것도 방법일듯해요.

    여러모로 커뮤니티를 통하여 유익한 답변에 도움을 많이 받고 있습니다.

    건강 조심하기고 또 찾아 뵐게요!

    감사합니다.

Designed by JB FACTORY