[javascript] 게시글 더보기

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

구현사항

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

내가 했던 방식

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

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

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

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

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

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

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

이런 방식으로 생각하면 된다. 생각보다 쓰이는 곳이 많아서 이 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");
}

더 보기를 누르면 add()로 more을 추가해 주는 기능이다.

결론

assignment에서 따로 해야 하는 건 아니었지만 왠지 이 기능은 해보고 싶었고, 나중에도 유용하게 사용할 수 있을 것 같아서 도전해 봤는데 내가 원하는 대로 나와서 기분도 좋았지만 아직 해야 할게 많다.
파이팅🔥