티스토리 Odyssey 스킨: 반응형 글 너비 조절하기 (CSS)

티스토리 블로그에서 Odyssey 스킨의 본문 너비를 변경하는 세 가지 스타일(CSS)을 비교해 볼 수 있습니다. 이 스타일들은 반응형 디자인을 유지하면서도 본문 영역의 가독성을 향상하도록 설계되었습니다.

 

새로운 마음으로 블로그를 시작하며 기존 스킨을 Odyssey 스킨으로 변경했습니다. Odyssey는 깔끔한 디자인과 직관적인 구성으로 콘텐츠를 더욱 돋보이게 해주는 장점이 있습니다.

하지만 블로그 글의 본문 영역은 콘텐츠 전달력을 좌우하는 중요한 요소인데, 기본 설정인 640px 너비는 모바일 환경에서는 적합하지만, 데스크톱에서는 다소 좁게 느껴질 수 있습니다. 특히 이미지, 표, 코드 블록과 같은 콘텐츠를 표시할 때는 가독성이 떨어지고, 보기에도 불편함이 생길 수 있습니다.

 

저는 그동안 860px 너비를 사용해 왔기 때문에, 이를 기반으로 스타일을 만들어 보았습니다.
또한 Odyssey 스킨의 기본 너비인 640px에 더해, 100% 너비 설정도 추가하여 세 가지 스타일을 비교할 수 있도록 했습니다.
아래에서는 체크박스와 버튼을 클릭하면 JavaScript 코드가 실행되어 글 영역을 확인하고 스타일을 적용할 수 있도록 설정했습니다. 이를 통해 바로 이 페이지에서 세 가지 스타일을 비교해 보실 수 있습니다.

 

주요 요소 경계 보이기

다음은 글의 너비를 결정하는 주요 요소 목록입니다. 체크를 하면 해당 요소의 경계선(border)이 지정된 색상으로 표시됩니다.

• .main (전체 영역): 글의 주요 영역과 사이드 요소를 포함한 전체 영역
• .area-main (글 주요 영역): 본문 요소를 포함하는 영역
• .article-view (본문 요소): 실제 본문이 표시되는 영역
• .area-aside (사이드 요소): 사이드바 또는 부가 요소를 포함하는 영역

 

스타일 비교

아래 세 가지 스타일을 선택하여 즉시 비교할 수 있습니다. 웹 브라우저의 너비를 바꾸어 가면서도 비교해 보세요.

• 640px 스타일: Odyssey 스킨에 적용된 기본 너비 설정
• 860px 스타일: 블로그 본문 영역 너비를 860px로 설정
• 100% 스타일: 웹 브라우저 전체 화면을 활용하는 설정

/*
본문 640px 설정 - 원래 설정
*/

.main
{
    max-width: 1020px;
}

.area-main {
    max-width: 640px;
}







.area-aside {
    min-width: 280px;
}


/* 여백 설정 ******************* */

/* 이상하다. 1061px이 아니라 1060px이 정확하지만 1px은 너무 미미해서 넘어감 */
@media screen and (max-width: 1061px) {
    .area-main {
        padding: 0 20px;
    }
}

#article-view {
    padding: 20px 20px 50px;
}

/* 1060px까지는 오른쪽에 숨어 있다가 클릭하면 나온다 */
/* 1061px 부터 area-aside 가 보이므로 */
@media screen and (min-width: 1061px) 
{
    .wrap-right .area-aside {
        margin: 32px 0 0 80px;
    }
}

/*
본문 860px 설정
*/

.main
{
    max-width: 1240px;
}

.area-main {
    max-width: 860px;
}

@media screen and (max-width: 1060px) {
    .area-main {
        max-width: 100%;
    }
}

.area-aside {
    min-width: 280px;
}


/* 여백 설정 ******************* */


/* @media screen and (max-width: 1061px) { */
    .area-main {
        padding: 0 20px;
    }
/* } */

#article-view {
    padding: 0px 0px 50px; /* 이 여백은 없는 것이 맞다 */
}

/* 1060px까지는 오른쪽에 숨어 있다가 클릭하면 나온다 */
/* 1061px부터 area-aside가 보인다. 충분한 공간이 나올 때까지 여백을 작게 20px */
@media screen and (min-width: 1061px) and (max-width: 1281px) 
{
    .wrap-right .area-aside {
        margin: 32px 0 0 20px;
    }
}

/*
본문 100% 설정
*/

.main
{
    max-width: 100%;
}

.area-main {
    max-width: 100%;
}







.area-aside {
    min-width: 280px;
}


/* 여백 설정 ******************* */


/* @media screen and (max-width: 1061px) { */
    .area-main {
        padding: 0 20px;
    }
/* } */

#article-view {
    padding: 0px 0px 50px; /* 이 여백은 없는 것이 맞다 */
}

/* 1060px까지는 오른쪽에 숨어 있다가 클릭하면 나온다 */
/* 1061px 부터 area-aside 가 보이므로 */
@media screen and (min-width: 1061px) and (max-width: 1281px) 
{
    .wrap-right .area-aside {
        margin: 32px 0 0 20px;
    }
}

 

 

 

위 세 가지 스타일을 비교한 제 나름의 결론입니다.

• 640px 스타일
  Odyssey 스킨의 기본 너비로, 모바일 디바이스에서 최적화된 깔끔한 스타일입니다.
  • 장점: 모바일 친화적, 좁은 화면에서 가독성 유지
  • 단점: 데스크톱에서 좁게 느껴질 수 있음
• 860px 스타일
  본문 너비를 860px로 넓힌 스타일입니다.
  • 장점: 이미지와 코드 블록이 더 깔끔하게 보임
  • 단점: 모바일에서는 상대적으로 여백이 줄어듦
• 100% 스타일
  브라우저 화면 전체를 활용하는 스타일입니다.
  • 장점: 디스플레이 크기에 따라 가변적인 레이아웃
  • 단점: 지나치게 넓은 화면에서는 가독성이 떨어질 수 있음

 

스타일 적용하기

1. 블로그 관리 메뉴에서
   • 꾸미기 > 스킨 편집으로 이동합니다.
2. HTML 편집 버튼을 클릭합니다.
3. CSS 선택
   • CSS 소스를 확인합니다.
4. 스타일 소스 추가
   • 위 세 가지 스타일 중 하나를 선택하여 복사한 후, CSS 소스의 맨 아래에 붙여 넣습니다.
5. 적용 완료
   • 적용 버튼을 클릭하면 너비 설정이 완료됩니다.

 

 

여러분의 다양한 의견을 듣고 싶습니다. 많은 의견 부탁드립니다!