Mong dev blog

1. 들어가며…웹사이트를 탐색하다 보면, 일정 길이를 초과한 텍스트에 말줄임(…) 처리가 된 것을 볼 수 있다. 특히, 뉴스 피드나 검색 결과 페이지처럼 많은 정보가 한눈에 들어와야 하는 상황에서, 말줄임 기법은 중요한 역할을 한다. 이 방법은 글을 일정 부분에서 잘라내고 "…"을 추가하여 화면 공간을 보다 효율적으로 사용하게 해준다. 아래 이미지는 말줄임 기법이 적용된 예시로, 텍스트가 일정 길이를 넘을 경우 어떻게 처리되는지 보여준다.그렇다면, 이러한 말줄임은 어떻게 구현할 수 있을까?JavaScript를 사용해 글자를 특정 길이로 자른 후 '…'를 추가할 수 있으며,또는 CSS의 text-overflow 속성을 활용할 수도 있다. 아래는 CSS를 이용한 말줄임 처리 예시이다. See the Pen..

확장자 빼고, 파일명만 말줄임하는 방법1) 미리보기(1) 파일명 말줄임한 예시 See the Pen only-file-name-abbreviation by KumJungMin (@kumjungmin) on CodePen.(2) 커스텀 파일 입력창 + 파일명 말줄임 예시 See the Pen file-input-name-abbreviation by KumJungMin (@kumjungmin) on CodePen.2) 전체 코드보기만약 파일 입력창에 파일명을 표기할 때, 확장자를 제외하고 파일명만 말줄임 하고 싶다면?아래 3가지를 적용하면 된다 🙂(1) 부모요소에 파일명, 확장자 요소를 각각 선언한다. (ex. .name , .extension)(2) 부모의 display에 flex를 적용한..