[블로그 꾸미기] Tistory - 스크롤이 되는 티스토리 글상자 만들기

티스토리와 같은 블로그시스템에서 에디터로 글을 작성하다 보면 약간의 장식을 하고 싶은 생각이 들 때가 있다. 굳이 외양을 중시하는 예쁜 블로그를 꾸미는 경우가 아니더라도 말이다. 특히 프로그래밍, 엔지니어링 방법에 대해 본인 스스로 잊지 않기 위해 개인 블로그에 메모를 남기는 습관을 가진 필자의 경우는,

$ sudo apt-get install build-essential git cmake libqt4-dev libphonon-dev python2.7-dev libxml2-dev libxslt1-dev qtmobility-dev

와 같은 옆으로 길게 타이핑하는 경우를 표현하는 일이 많은데, 이 때 한 줄에 늘어서 타이핑하는 개념으로 보이려면

$ sudo apt-get install build-essential git cmake libqt4-dev libphonon-dev python2.7-dev libxml2-dev libxslt1-dev qtmobility-dev

와 같이 좌우 스크롤이 생기고 글씨는 오른 쪽에 숨는 모양으로 표현하고 싶을 때가 생긴다. 티스토리에서 제공하는 글상자는 기본적으로 스크롤이 따로 생성되지 않으며, 텍스트가 넘칠 경우 다음 라인으로 넘어 가도록(Wrap) 되어 있다. 이런 경우는 html 편집을 통해 원하는 결과를 내어 볼 수 있다.

웹 표현 언어인 HTML 에 대해 깊은 지식이 없더라도 본 글에서 설명하는 대로 따라하면 간단히 이를 구현해 볼 수 있다. 자, 그 과정은 다음과 같다. 참 간단하지 않은가?

Tistory 블로그에디터에서 글을 작성. 글상자를 만든다.

우선 글상자(textbox) 로 만들 부분을 마우스 드래그로 선택 후에 에디터 상단 '글상자' 버튼으로 박스 테두리를 만드는 부분까지는 익히 해 오던 방법이다. 아래와 같이 글상자를 만들자(여기서는 편의상 좌우를 200px로 고정했다).

한잔의 술을 마시고 

우리는 버어지니아 울프의 생애와 

목마를 타고 떠난 숙녀의 옷자락을 이야기 한다 

티스토리에디터 에디터타입의 HTML 을 클릭, "<div ... style=" 부분 속성을 추가

본 글에서는 "한잔의 술을 마시고" 텍스트가 있는 부분에서 왼쪽 방향으로 찾아 보면 <div class="txc-textbox" style="border: 1px solid rgb(... 부분이 보일 것이다. 이 부분의 style=" 뒤에 overflow:auto; white-space:nowrap; 라고 적어 넣어 주고 저장하자. 즉 <div class="txc-textbox" style="overflow:auto; white-space:nowrap; border: 1px ... 처럼 파란 글씨 부분을 적어 넣어 주면 된다. 결과는 다음과 같이 보일 것이다.

한잔의 술을 마시고 

우리는 버어지니아 울프의 생애와 

목마를 타고 떠난 숙녀의 옷자락을 이야기 한다

참고: overflow 의 다른 값 또는 그의 변형

<div> 영역의 지정된 부분을 벗어나는 경우에 지정할 수 있는 overflow 속성의 다른 값 또는 변형들은 아래와 같다.

overflow: auto; overflow: scroll; overflow-x: scroll; overflow-y: scroll; overflow: hidden; overflow: visible;

영역을 벗어나면 자동으로 스크롤이 생김. 그 이전에는 스크롤 없음 영역을 벗어나면 화면 스크롤이 해당 방향으로 활성화. 항시 스크롤은 보이며 비활성화 영역을 벗어나면 좌우로만 스크롤이 활성화 영역을 벗어나면 상하로만 스크롤이 활성화 영역을 벗어나면 그 부분은 화면에서 보이지 않음. 스크롤은 없음 영역을 벗어나도 화면에서 보임.  스크롤은 없음

보다 다양한 설명과 예시는 html.am 사이트에서 살펴볼 수 있으니, 한 번 방문해 보자.

- Barracuda -