3. 게시판 확장 II - 긴 제목을 한 줄로 표시

현재 게시판에서는

게시물의 제목이 긴 경우 두 줄 이상으로 출력된다.

이 경우 지저분해 보일 수 있기 때문에

다음 그림과 같이 지정된 글자수로 한 줄로 잘라서 보여주는 경우가 많다.

화면에 보여줄 때 제목의 글자수(길이)가 지정된 글자수보다 많은지 확인하고

많으면 자르는 방식으로 구현하면 된다.

다만, 자르려고 하는 글자가 한글일 때 문제가 발생하게 된다.

영어와 숫자를 제외한 문자는 2바이트(EUC-KR)내지 3바이트(UTF-8)로 처리된다.

따라서 별도의 처리가 필요하지만 본 예제에서는 utiletc.java 파일에 getShortString 함수로 구현되어 있다.

몇 년 전 다른 사람 것을 가져다 사용 중 인데(출처가 기억안나서…) 그냥 사용하길 바란다.

본 예제에서는 데이터를 뿌려줄 때 (boardList.jsp) 글자를 자르는 메소드(getShortString)를 호출해서 사용하도록 했다. 

화면에 맞추어 최대 35만 보이도록 표현했다.

<c:forEach var="listview" items="${listview}" varStatus="status">   
    <c:url var="link" value="board3Read">
        <c:param name="brdno" value="${listview.brdno}" />
    </c:url>       
                                           
    <tr>
        <td>
            <c:out value="${searchVO.totRow-((searchVO.page-1)*searchVO.displayRowCount + status.index)}"/>                   
        </td>
        <td><a href="${link}"><c:out value="${listview.getShortTitle(35)}"/></a></td>
        <td><c:out value="${listview.brdwriter}"/></td>
        <td><c:out value="${listview.brddate}"/></td>
        <td><c:out value="${listview.brdhit}"/></td>
    </tr>
</c:forEach>

boardList.jsp

JSP에서는 boardVO에 있는 함수를 호출(getShortTitle)하고, getShortTitle는 실제 글자를 자르는 함수를 호출한다.

글자를 자르기 위해서는 getShortString 함수를 호출한다는 것만 기억하자.

public class boardVO {
    private String brdno, brdtitle, brdwriter, brdmemo, brddate, brdhit, brddeleteflag;

    public String getShortTitle(Integer len){
        return utiletc.getShortString(brdtitle, len);
    }
  ~~ 생략 ~~
}

boardVO.java

getShortString 함수는 UTF-8로 한글을 자른다.

따라서 영어나 숫자가 있을 때와 없을 때(한글이 많을 때) 출력된 모습이 다른 걸 알 수 있다.

한글이 많을수록 짧게 표현된다. 

UTF-8은 3바이트로 처리하고 화면에 출력되는 것은 2 바이트(EUC-KR)로 처리되어서 그런 것으로 추측되는데

EUC-KR처리하면 바꿔야 하는 다른 것들이 많다(UTF-8이 거의 표준).

이것을 프로그램으로 처리하면 이상과 같이 다소 어려움이 있다.

하지만, 다음과 같이 디자인에서 사용하는 CSS를 이용하면 아주 쉽게 처리할 수 있다.

<td style="border: 1px solid black; max-width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">

<a href="${link}"><c:out value="${listview.brdtitle}"/></a>

</td>

이 코드는 글자를 출력하다 지정된 너비(width)를 넘어가면 줄여서 표시하게된다.

자세한 내용은 찾아보길 바란다.

실행후 F12를 눌러서 DOM 탐색기로 보면

다음과 같이 글 제목의 전체 내용이 다 있지만

브라우저에서는 적절하게 잘려서 출력되는 걸 볼 수 있다.

IE 7 이하에서는 적용되지 않지만

대부분 IE 9 이상을 사용하기 때문에 CSS로 사용하는 것이 더 좋을 것 같다.