728x90
안녕하세요. 이번 시간에는 웹 브라우저에 표시되는 텍스트들을 일부만 표시하고 버튼 클릭 이벤트에 따라 표시되는 양을 조절하는 기능을 만들어보려 합니다.
흔히 sns 같은 게시글들을 보면 텍스트가 일정 줄까지만 입력되고 다음부터는 ... 와 같은 형태로 마무리된 뒤, 하단의 더보기 버튼을 클릭할 때 전체 내용을 확인할 수 있게 처리되어 있는 경우가 많은데요.
아래 예제는 이와 유사하게 텍스트가 길어질 경우 일정 길이까지는 ...로 표시한 뒤 더보기를 통해 전체 내용을 볼 수 있게 구현한 코드입니다.
우선 텍스트 내용 예시와 더보기/줄이기 텍스트가 포함된 html 파일입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="text-wrapper">
<!-- 텍스트 내용 -->
<span class="text">긴 텍스트 내용이 들어갑니다.긴 텍스트 내용이 들어갑니다.긴 텍스트 내용이 들어갑니다.긴 텍스트 내용이 들어갑니다.</span>
<!-- 더보기, 줄이기 텍스트 -->
<span class="more-text">더보기</span>
<span class="less-text">줄이기</span>
</div>
</body>
</html>
다음으로 css 코드입니다.
.text-wrapper {
/* 임의의 넓이 설정 (200px이 넘어갈 경우 텍스트 줄바꿈) */
width : 200px;
}
.text {
/* 요소의 내용이 영역을 벗어날 경우 그 부분은 숨겨지게 처리 */
overflow: hidden;
/* 요소의 표시 방법을 -webkit-box로 표시 */
display: -webkit-box;
/* webkit-box로 표시된 자식 요소들의 배치 방법 결정 (여기서는 수직) */
-webkit-box-orient: vertical;
/* 요소 내 텍스트를 지정한 라인수까지만 표시 */
-webkit-line-clamp: 2;
/* 텍스트 양쪽정렬 */
text-align :justify;
}
.more-text {
/* 글씨 크기,색상 지정 */
font-size: 16px;
color:blue;
/* 마우스 포인트가 올라갔을 때 커서 모양을 포인터로 변경 */
cursor: pointer;
}
.less-text {
/* 글씨 크기,색상 지정 */
font-size: 16px;
color:blue;
/* 마우스 포인트가 올라갔을 때 커서 모양을 포인터로 변경 */
cursor: pointer;
/* 줄이기 버튼 (처음에는 안보이게) */
display: none;
}우선 text-wrapper에서는 텍스트가 표시될 너비를 지정합니다.
그 후 text 클래스에서는 -webkit-line-clamp : 2 속성을 활용해 두 줄로 텍스트를 제한하였고, 이 속성을 사용하기 위해 요소의 표현 방식을 -webkit-box로 설정하였습니다.
마지막으로 text-align : center로 텍스트를 양쪽 정렬 처리하였습니다.
더보기/줄이기 텍스트의 경우 글자 크기/색상을 디자인 한 뒤 cursor: pointer 속성으로 마우스가 올라갔을 때 버튼 위에 올라간 것 처럼 커서 모양이 포인터로 바뀌게 지정하였고, 줄이기 텍스트는 처음에는 보이면 안되기 때문에 display:none으로 설정하였습니다.
다음으로 자바스크립트 코드입니다.
// 코드에 필요한 요소들 변수에 할당 (전체 ui를 감싸는 div, 내용 텍스트, 더보기/줄이기 텍스트)
const textWrapper = document.querySelector('.text-wrapper');
const text = document.querySelector('.text');
const moreText = document.querySelector('.more-text');
const lessText = document.querySelector('.less-text');
// 더보기 텍스트 클릭시 이벤트
moreText.addEventListener('click', () => {
moreText.style.display = 'none'; // 더보기 텍스트 삭제
lessText.style.display = 'inline-block'; // 줄이기 텍스트 표시
text.style.display = 'inline-block'; // 텍스트의 속성을 -webkit-box에서 일반 inline-block 으로 변경
});
// 줄이기 텍스트 클릭시 이벤트
lessText.addEventListener('click', () => {
lessText.style.display = 'none'; // 줄이기 텍스트 삭제
moreText.style.display = 'inline-block'; // 더보기 텍스트 표시
text.style.display = '-webkit-box'; // 텍스트의 속성을 다시 -webkit-box로 표시
});더보기 텍스트를 클릭할 경우 대신 줄이기 텍스트가 보여지도록 처리합니다. 이후 -webkit-box 속성을 디폴트 값인 inline-block 형태로 바꿈으로써 webkit-box에 의해 두줄까지만 보여지게 하는 제한을 풀어버립니다.
반대로 줄이기 텍스트를 클릭할 경우에는 display 형식을 다시 webkit-box형태로 바꿈으로써 기존의 두줄까지만 보여지는 원래 형태로 전환합니다.
전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
.text-wrapper {
/* 임의의 넓이 설정 (200px이 넘어갈 경우 텍스트 줄바꿈) */
width : 200px;
}
.text {
/* 요소의 내용이 영역을 벗어날 경우 그 부분은 숨겨지게 처리 */
overflow: hidden;
/* 요소의 표시 방법을 -webkit-box로 표시 */
display: -webkit-box;
/* webkit-box로 표시된 자식 요소들의 배치 방법 결정 (여기서는 수직) */
-webkit-box-orient: vertical;
/* 요소 내 텍스트를 지정한 라인수까지만 표시 */
-webkit-line-clamp: 2;
/* 텍스트 양쪽정렬 */
text-align :justify;
}
.more-text {
/* 글씨 크기,색상 지정 */
font-size: 16px;
color:blue;
/* 마우스 포인트가 올라갔을 때 커서 모양을 포인터로 변경 */
cursor: pointer;
}
.less-text {
/* 글씨 크기,색상 지정 */
font-size: 16px;
color:blue;
/* 마우스 포인트가 올라갔을 때 커서 모양을 포인터로 변경 */
cursor: pointer;
/* 줄이기 버튼 (처음에는 안보이게) */
display: none;
}
</style>
<body>
<div class="text-wrapper">
<!-- 텍스트 내용 -->
<span class="text">긴 텍스트 내용이 들어갑니다.긴 텍스트 내용이 들어갑니다.긴 텍스트 내용이 들어갑니다.긴 텍스트 내용이 들어갑니다.</span>
<!-- 더보기, 줄이기 텍스트 -->
<span class="more-text">더보기</span>
<span class="less-text">줄이기</span>
</div>
<script>
// 코드에 필요한 요소들 변수에 할당 (전체 ui를 감싸는 div, 내용 텍스트, 더보기/줄이기 텍스트)
const textWrapper = document.querySelector('.text-wrapper');
const text = document.querySelector('.text');
const moreText = document.querySelector('.more-text');
const lessText = document.querySelector('.less-text');
// 더보기 텍스트 클릭시 이벤트
moreText.addEventListener('click', () => {
moreText.style.display = 'none'; // 더보기 텍스트 삭제
lessText.style.display = 'inline-block'; // 줄이기 텍스트 표시
text.style.display = 'inline-block'; // 텍스트의 속성을 -webkit-box에서 일반 inline-block 으로 변경
});
// 줄이기 텍스트 클릭시 이벤트
lessText.addEventListener('click', () => {
lessText.style.display = 'none'; // 줄이기 텍스트 삭제
moreText.style.display = 'inline-block'; // 더보기 텍스트 표시
text.style.display = '-webkit-box'; // 텍스트의 속성을 다시 -webkit-box로 표시
});
</script>
</body>
</html>
결과 영상입니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] Owl Carousel을 활용한 캐러셀 구현하기 (0) | 2023.07.29 |
|---|---|
| [JavaScript] Todo list 만들기 (0) | 2023.07.24 |
| [javaScript] contenteditable 속성으로 row 수정,저장하기. (0) | 2023.07.09 |
| [JavaScript] C3.js를 활용하여 차트 그리기 (0) | 2023.06.29 |
| [Javascript] target 속성과 closest() 함수를 조합하여 ui 선택하기 (0) | 2023.06.14 |
