[javascript] 게시글 더보기

HongDuHyeon·2022년 3월 10일

JavaScript vanillajs

c to HDMI 케이블에 4만원을 쓴 사람이 있다?

구현사항

일정 너비 이상으로 넘어가게 되면 더보기로 말줄임 ...가 나오고 옆에 있는 더보기를 클릭하면 내용 전체를 보여주는 기능을 구현해보았다.

내가 했던 방식

곰곰히 생각을 해봤다. 필요한 준비물(css)이 뭐가 있는지...........

먼저 이 기능을 위해 따로 사용한 css는 아래와 같다.

text-overflow : ellipsis
overflow : hidden
white-space : nowrap

이게 뭔데? 라고 할수도 있기 때문에 간략히 적어보자면 상단의 구현 사항에 쓰여진 ... <- 이 말줄임 표를 사용하려고 썼다. 내가 설정한 너비 이상으로 텍스트가 넘어가게 되면 말줌임표로 자동으로 바뀌고 함께 사용해야 하는게 overflow와 white-space이다.

먼저 overflow는 말그대로 넘치면 어떤걸 할까? 라고 이해하면 쉽다.
그리고 white-space : nowrap은 요소가 갖고 있는 텍스트를 무조건 한줄로 정렬을 해준다.

앞서 말한 3가지의 특징을 합쳐보면

white-space로 일렬로 정렬해줘 !
그리고 넘치면 가려줘 !
마지막으로 말줄임표로 가려줘 !

이런 방식으로 생각하면 된다. 생각보다 쓰이는 곳이 많아서 이 3가지는 1세트로 봐도 무방할 정도이다.

일단 사용하는 방식은 알았으니 언제봐도 민망한 내 코드를 들여다보자.

<div class="feed-information">
	<span class="feed-id">!backend_dev</span>
    <span class="feed-content">
        안에 어떤 내용을 넣지 안에 어떤 내용을 넣지 안에 어떤 내용을
        넣지 안에 어떤 내용을 넣지 안에 어떤 내용을 넣지 안에 어떤
        내용을 넣지 안에 어떤 내용을 넣지 안에 어떤 내용을 넣지 안에
        어떤 내용을 넣지 안에 어떤 내용을 넣지 안에 어떤 내용을 넣지
        안에 어떤 내용을 넣지 안에 어떤 내용을 넣지 안에 어떤 내용을
        넣지 안에 어떤 내용을 넣지 안에 어떤 내용을 넣지
	</span>
	<a href="#" class="btn-more">더보기</a>
</div>

헷갈릴수도 있으니 클래스가 뜻하는걸 적어놓고 가겠다.

feed-id : 게시글 유저의 아이디
feed-content : 게시글
btn-more : 더보기 버튼

먼저 생각한건 feed-content에 일정한 너비값을 주고 그 값을 넘어가면 말줄임표로 처리해야겠다 라고 생각하고 먼저 display : inline-block을 줬다.

inline-block을 사용한 이유

inline-block을 준 이유는 더보기 버튼 때문이다.
block을 사용하게되면 특정 너비값에서 더보기 버튼은 block이 갖고 있는 성질 때문에 밑에 떨어지게 된다. 그래서 inline-block을 사용했고, 너비값은 줬지만 굳이 높이값은 주지 않는다.
높이값을 주게 되면 더보기 버튼을 눌렀을 때 그 높이값에 auto를 또 작성을 해줘야하는 번거로움이 생기기 때문에 굳이 주지 않았다.

text-overflow / overflow / white-space

이제 내가 원하는 특정 너비값을 넘어가면 말줄임표가 나온다. 하지만 또 준비해줘야 할게 있다. 더보기를 클릭했을때 클래스를 추가해주는 방식으로 작업을 할 것이기 때문에 more이라는 클래스가 붙었을 때 나올 스타일도 지정을 해줘야한다.

말줄임 코드

.feed-information .feed-content {
  display: inline-block;
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}

.more 클래스 코드

.feed-information .feed-content.more {
  display: inline;
  white-space: normal;
}

어렵게 말고 간단히 생각해보자.

제한적인 너비값을 줬다 ? ===> 풀어준다.
글이 개행되지 않고 쭉 써진다 ? ===> 풀어준다.

그래서 more 클래스 코드를 보면 display를 inline으로 바꿔주고 white-space를 normal로 바꿔준다.

그럼 갖고 있는 텍스트의 길이만큼 펼쳐지게 된다.

classList.add()

const btnMore = document.getElementsByClassName("btn-more")[0];

btnMore.addEventListener("click", feedContentMore);

function feedContentMore() {
  feedMore.classList.add("more");
}