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

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

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

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

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

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

소스코드를 복사하는 방법

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

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

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

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

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

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