이러쿵저러쿵


오늘은 간단한 팁을 알아볼 예정인데요.

 

바로 티스토리 본문에 스크롤을 다는 방법입니다.

 

본문의 내용이 많아지면 대부분의 블로그는 모든 내용의 화면을 스크롤 없이 표시하여 줍니다.

만약 너무 많은 내용이라, 일부만 표시하여 주고, 나머지 내용은 스크롤을 하여 볼 수 있도록 본문에 스크롤을 달 수 있는 방법은 없을까요?

 

있습니다!! 그리고 간단합니다. 한번 따라 해볼까요?^^

 

 

티스토리 블로그의 관리자 페이지로 이동합니다.

 

관리자 페이지 좌측 메뉴에서 [꾸미기 - HTML/CSS 편집] 메뉴를 클릭합니다.

 

우측에 HTML과 CSS를 편집할 수 있는 창이 나타납니다.

 

 

 

티스토리는 사용자가 작성한 본문을 표시하는 영역을 나타내는 키워드로

[##_article_rep_desc_##]

를 사용합니다.

 

 

위의 skin.html 에디트 박스 영역에서 위의 텍스트를 찾습니다. [Ctrl+F] 키를 눌러 찾기 창을 띄운 다음에 '_article_rep_desc_' 를 입력하여 찾으시면 됩니다.

 

처음 찾게 되면 아래와 같은 HTML 코드를 보실 수 있습니다.

 

<div class="article">
      [##_article_rep_desc_##]
</div>
 

 

 

본문 내용은 div 태그에 감싸져 있는 것을 보실 수 있습니다.

 

그럼 스크롤은 위의 div 태그에 속성으로 넣어주면 됩니다. 한 번 넣어 볼까요?

 

 

<div class="article" style="overflow-y:scroll;width:600px;height:400px;">
      [##_article_rep_desc_##]
</div>

 

원래의 div  태그에 위와 같이 스타일 속성을 추가하여 줍니다.

 

overflow-y:scroll 속성은 세로 스크롤(Vertical Scroll)만 생성 하겠다는 의미입니다.

가로 스크롤을 생성하기 원한다면 overflow-x:scroll 속성을 주면 됩니다.

 

width:600px 와 height:400px 는 본문 영역의 사이즈를 지정합니다. 600 x 400 px 사이즈로 본문 영역을 지정하였습니다.

 

내용 양에 상관없이 항상 세로 스크롤이 나타납니다.

 

만약 본문 영역(높이)보다 내용이 적은 경우는 스크롤을 표시하지 않고, 내용 높이가 400px 를 초과하는 경우에만 스크롤을 달고 싶다면

overflow-y:scroll 대신 overflow-y:auto 속성을 주면 됩니다.

 

 

 

위와 같이 코드를 수정한 후, 하단의 [저장] 버튼을 클릭합니다.

 

'스킨이 적용되었습니다.' 라는 메시지가 뜨면 정상적으로 저장된 것입니다.

 

 

 

이제 게시물을 작성해 볼까요?

 

아래는 제가 이전에 작성한 임의의 게시물입니다.

 

게시물 우측에 스크롤바가 생겨났습니다.

 

 

 

 

 

 

 

내용이 높이 400px을 초과하기 때문에 스크롤을 내려서 본문 전체 내용을 보실 수 있습니다.

 

쉽지요?^^

 

위의 속성 값을 조금만 응용하면 원하는 본문 영역 사이즈, 스크롤의 표시 여부 등을 마음대로 설정하실 수 있습니다.^^

 

 

 

-부록! 스크롤 응용하기- (보너스~~)

 

만약 스크롤 높이를 500px로 설정하였다고 가정합니다. 그런데 이렇게 하니 내용이 적어서 스크롤이 필요없어도 무조건 500px 높이만큼 스크롤이 생겨버리는 군요..

사실 내용이 500px보다는 작을 때는 스크롤도 나오지 않고, 높이도 500px이 아닌, 실제 내용에 맞게 높이가 설정되었으면 하는데 말입니다.

내용이 500px 를 초과하는 경우에만 스크롤을 표시하고 싶은데 어떻게 하면 될까요?

 

이도 어렵지 않습니다.

바로 max-height 속성을 사용하면 됩니다.

 

max-height는 이 속성 값이 적용된 오브젝트의 최대 높이값을 지정하는 속성입니다.

즉 max-height 값보다 오브젝트 높이가 작다면 별 상관이 없지만 max-height 값보다 큰 경우에는 해당 오브젝트가 더 이상 늘어나지 않게 됩니다. (하지만 max-height 값을 설정해도 스크롤을 설정하지 않으면 내용이 많은 경우, 무한정 늘어나 보이기는 합니다. ㅎㅎㅎ)

 

max-height 과 스크롤 속성overflow-y를 조합하면 위의 요구사항을 해결할 수 있습니다.

 

1. 블로그 관리자 페이지에서 꾸미기 - HTML/CSS편집 창을 열어 아래와 같이 수정합니다.

 

 

 

기존에는 div 스타일 속성을 직접 div 태그에 작성하였는데, 클래스(class) 로 분리하였습니다.

 

기존 div 태그 class 에 적용해주었던 스크롤 관련 속성은 모두 삭제하고 scroll_style 클래스만 추가합니다.

(scroll_style은 아래 style.css에서 정의하기 위해 제가 임의로 정한 스타일 속성 클래스 명입니다.)

 

아래 style.css 입력 박스 가장 하단에 위의 div에 적용한 scroll_style 클래스를 정의합니다.

 

width : 600px; -> div 너비는 600px 로 정의

max-height : 1000px -> div 너비는 최대 1000px로 정의

overflow-y : auto : 오브젝트가 max-height 보다 작으면 스크롤이 생기지 않고, 초과하는 경우에만 스크롤을 화면에 표시.

 

skin.html

... 

<div class="article scroll_style">
      [##_article_rep_desc_##]
</div>

...

 

style.css

...

div.scroll_style {
    width : 600px;
    max-height : 800px;
    overflow-y : auto;
}

 

 

이제 아래 저장 버튼을 클릭하고, 게시물을 다시 등록 또는 수정하여 볼까요?

 

게시물 내용이 1000px 높이 보다 작다면 게시물 내용에 맞게 높이가 설정됩니다.

그리고 1000px 높이 보다 크다면 게시물에 스크롤이 나타납니다.

 

아래 스크린샷을 보시면 어떻게 화면에 출력되는지 보실 수 있습니다.

 

내용이 1000px을 넘어가면 스크롤이 나타나고, 1000px을 넘지 않으면 해당 내용 영역만큼만 스크롤 없이 표시됩니다.

 

 

 

 

 

 

 

------------------------------------------------------------------------------------------------------------------------

본 게시물은 [힞타토시] 님(hit***)을 위해 작성한 게시물입니다.

------------------------------------------------------------------------------------------------------------------------

저작자 표시 비영리 변경 금지
신고


Comment +6

  • 와 진짜 감사합니다 절이라도 해드려야하나 어떡하징 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 감사합니다 감샇갛감사가삽사웰부레부렙샤ㅓ약 감사합니당 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 감사해용 저 닉넴바꿔서 저가 그 힞타**입니다 감사합니다 지금 당장 하려고 달려왔어요

    • 사랑베베님 진짜롱 감사합니당ㅠㅠ님의 강같은 글 덕분에 무사히 스크롤바를 달았습니다
      그런데 제가 높이를 1500px?으로 맞춰놨는데 이게 본문자체가 1500의 여백으로 지정되는..그러니까 뭐라해야되지요
      1500으로 지정해놓으니 1500이 넘으면 스크롤바가 생기긴 하는데요
      1500이전의 높이라도 일단 1500의 높이로 떠져욜ㅠㅅ ㅠ
      그러니까 두줄짜리 글이여도 본문 높이가 기본으로 1500으로 떠서 완전 길어지고 여백이 엄청나게 생기는데요
      이거 아무리 구글링해봐도 아는 게 없으니 검색이 안되네요
      뭐라 검색하면 뜰까요?

    • 안녕하세요. 십사랑님.
      도움이 되셨다니, 감사합니다.^^

      제가 회사에서는 블로그를 할 수 없다보니, 이렇게 밤 늦게나 새벽에 답변을 드리고 있네요. 좀 늦더라도 이해해 주세요.

      한가지 더 질문 주셨는데, 스크롤 높이가 넘어가지 않는 게시물은 스크롤 없이 내용만큼만 게시물이 표시되면 좋겠고, 스크롤 높이가 넘어가는 게시물에만 스크롤이 생겼으면 하시는 것 같은데요.^^

      물론 어렵지 않습니다.

      그래서 해당(동일한) 게시물에 [-부록! 스크롤 응용하기- (보너스~~)] 라는 제목으로 게시물 아래에 추가 내용을 작성하였습니다

      한 번 참조하시고 해보시기 바랍니다.
      잘 안되시면 문의 주시구요. 제가 직접해보았는데, 잘되는 것 같습니다.^^

      좋은 밤 되세요~

  • 님 정말 대단하십니다......고쳤습니다 잘나옵니다ㅠ ㅅ ㅠ !!!!!!!!!!!!!!!!!!!!!!!!
    진짜 html에 대해서는 무지하지만 스킨을 어떻게든 요리조리 뜯어고치고 싶었는데 아무리 검색해도 티스토리용으로 본문에 스크롤 다는 방법이 안나오는거에요.
    그래서 구글링으로 티스토리 스킨 관련 포스팅 올리는 곳 찾아 들어가서 어떻게 해야 하냐고 물어보고 다니긴 했는데 대충 이래이래 저래저래 하면 됩니다 같은 대답정도만 기대했지
    이렇게 쉽고 차근차근하게 누구나 따라할 수있도록 잘 정리해주시는 분이 있을 줄은 정말 몰랐네여.
    일하랴 뭐하랴 등등으로 바쁘신 분인데 이런 귀찮은 일 하나하나 상대해주시고 정말 감사 ㅠ 감개무량 ㅠㅅ ㅠ !!!
    이 글은 지금은 저에게만 유용한듯 보이지만 분명히 저와 같은 고민을 가진 사람들이 앞으로도 계속 생길 거고
    그때 그 사람들이 다 여기서 이 글을 보겠죠. 그렇게나 많은 사람들을 고민에서 구제해주시거 ㅠㅠㅠㅠㅠㅠㅠ
    이게 자원봉사지 자원봉사가 따로 있을까요 ㅠㅅ ㅠ 이 주제에 대한 포스팅은 님이 쓰신것 밖에 없답니다 ㅠㅅ ㅠ진짜 감사합니다

    • 그리고 저는 야행성이라 밤이 낮이고 낮이 밤이랍니다 괜찮습니다 예예 ㅠㅅ ㅠ!!

    • 안녕하세요. 십사랑님.^^

      제가 작성한 게시물이 많이 도움이 되었다니 저도 감사합니다.
      그리고 너무 과찬의 말씀을 해주시니 몸둘바를 모르겠습니다.^^
      아무튼 잘 해결이 되신 것 같아 다행입니다.^^

      오늘도 늦게 퇴근한 저는 ㅠ.ㅠ 이제야 답변을 달아드리네요. ㅎㅎㅎ

      좋은 블로그 만드시고, 가끔 또 방문해주세요.^^

      곧 주말인데, 즐거운 주말 되세요~

티스토리 툴바