[JSP: CSS] white-space:pre (feat. vertical-align)

JSP

- [CSS] white-space: pre (feat. vertical-align) -

---

KeyPoint
- "white-space:pre" : 줄바꿈 css
- "vertical-align: middle" : 수직중앙정렬 css

 

 

---

들어가면서

토이프로젝트를 진행하다가 "이력"이라는 데이터를 넣을 일이 있었다.

"이력내용"이라는 컬럼의 데이터에는 \r\n이 포함된 내용이 들어갔는데, 이를 다시 화면에 가져와 출력할 때 엔터키가 먹지 않은 채로, 한 줄로 주루룩 나와서 당황스러웠다.

 

구글링을 해봐도 replace() 함수를 쓰라고 하는데 vue의 v-for를 통해 데이터를 출력하는 나로서는 데이터 개수가 가변적이라 하나하나 설정해주기가 어려웠다.(+textarea를 쓰는 것이 아니라 더 정보를 찾기 힘들었음)

 

---

white-space:pre

이미 DB에 엔터키가 포함된 데이터가 있음에도 불구하고 한 줄로 나오는 데이터를 어떻게 해야할까.. 생각하다가 작년 이맘때쯤 진행했던 학원 팀프로젝트 발표날에 같은 문제가 발생했고, 이를 발표 전에 빠르게 해결했던 기억이 문득 떠올랐다.

그럼 엄청나게 어려운 방법이 아니었을텐데.. 하고 더듬더듬 기억과 기록을 거슬러 올라가다 떠오른 style 적용..

팀 프로젝트 소스를 찾아 해당 부분을 찾으니 딱! 나왔다.

style="white-space: pre;" !!

 

신나서 바로 적용했더니 문제가 해결됐다.

 

▶ 적용 전

<tr class="txt_C" v-for="hist in historyList">
    <td>{{ hist.histCategory }}</td>
    <td>{{ hist.histCtn }}</td>
    <td>{{ hist.userNm }}</td>
    <td>{{ hist.histRegDt }}</td>
</tr>

 

▶ 적용 후

<tr class="txt_C" v-for="hist in historyList">
    <td>{{ hist.histCategory }}</td>
    <td style="white-space:pre; text-align:left;">{{ hist.histCtn }}</td>
    <td>{{ hist.userNm }}</td>
    <td>{{ hist.histRegDt }}</td>
</tr>

(( 약간 편-안 ))

 

---

vertical-align: middle

해결하고 나니 이제 저 위에 올라가있는 문구들이 거슬리기 시작했다.

"수직 중앙 정렬"로 검색한 결과 vertical-align이라는 것을 알게됐다.

바로 td에 적용했다.

<tr class="txt_C" v-for="hist in historyList">
    <td style="vertical-align: middle;">{{ hist.histCategory }}</td>
    <td style="white-space:pre; text-align:left;">{{ hist.histCtn }}</td>
    <td style="vertical-align: middle;">{{ hist.userNm }}</td>
    <td style="vertical-align: middle;">{{ hist.histRegDt }}</td>
</tr>

(( 편-----안 ))

 

---

마치며

(전)우리 조 조장의 프사가 떠오르는 날이었다..

CSS IS AWESOME..

---

 

 

 

 

 

End.

heisely's 괴발개발 개발일지