티스토리 본문에 스크롤 달기

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

 

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

 

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

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

 

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

 

 

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

 

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

 

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

 

 

 

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

반응형

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

 

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

 

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

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

 

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

 

 

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

 

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

 

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

 

 

 

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

를 사용합니다.

 

 

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

 

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

 

<div class="article">
      
</div> 

 

 

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

 

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

 

 

<div class="article" style="overflow-y:scroll;width:600px;height:400px;">
      
</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">
      
</div>

...

 

style.css

...

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

 

 

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

 

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

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

 

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

 

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

 

 

 

 

 

 

 

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

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

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

반응형

를 사용합니다.

 

 

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

 

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

 

<div class="article">
      

반응형

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

 

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

 

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

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

 

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

 

 

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

 

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

 

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

 

 

 

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

를 사용합니다.

 

 

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

 

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

 

<div class="article">
      
</div> 

 

 

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

 

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

 

 

<div class="article" style="overflow-y:scroll;width:600px;height:400px;">
      
</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">
      
</div>

...

 

style.css

...

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

 

 

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

 

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

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

 

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

 

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

 

 

 

 

 

 

 

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

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

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

반응형

</div> 

 

 

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

 

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

 

 

<div class="article" style="overflow-y:scroll;width:600px;height:400px;">
      

반응형

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

 

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

 

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

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

 

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

 

 

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

 

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

 

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

 

 

 

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

를 사용합니다.

 

 

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

 

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

 

<div class="article">
      
</div> 

 

 

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

 

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

 

 

<div class="article" style="overflow-y:scroll;width:600px;height:400px;">
      
</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">
      
</div>

...

 

style.css

...

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

 

 

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

 

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

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

 

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

 

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

 

 

 

 

 

 

 

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

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

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

반응형

</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">
      

반응형

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

 

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

 

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

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

 

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

 

 

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

 

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

 

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

 

 

 

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

를 사용합니다.

 

 

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

 

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

 

<div class="article">
      
</div> 

 

 

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

 

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

 

 

<div class="article" style="overflow-y:scroll;width:600px;height:400px;">
      
</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">
      
</div>

...

 

style.css

...

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

 

 

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

 

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

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

 

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

 

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

 

 

 

 

 

 

 

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

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

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

반응형

</div>

...

 

style.css

...

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

 

 

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

 

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

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

 

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

 

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

 

 

 

 

 

 

 

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

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

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