프론트엔드 개발 찔찔이

css로 \r \n 줄바꿈 적용하기

들어가며어드민에서 textarea 태그로 저장한 텍스트를 프론트에서 불러오는데 줄바꿈 처리가 안되는 현상이 있었다.java 파일을 디버깅 했을 땐 '텍스트 \r\n 입니다.' 로 불러와져 프론트 단에서 줄바꿈 처리를 진행해봤다.replace 사용하기let descriptionText = '${info.description}';descriptionText.replace(/\r|\r\n/g, ""); 위 코드를 사용하면 줄바꿈 처리가 되지 않았는데,Java 내부 문자열에는 \n이 줄바꿈처럼 표시되지만 HTML은 그냥 공백처럼 처리해버리기 때문에 \r이나 \r\n을 감지하지 못한다. white-space 사용하기.description { white-space : pre-wrap;}기존 HTML은 연속 공백과 ..

들어가며이전에 styled-components를 이용하여 다크모드를 적용할 수 있는 노트앱을 만들었다.지인에게 피드백을 부탁했는데 제목이 길어지면 말줄임 처리되고 툴팁으로 볼 수 있도록 해보라는 추천을 받았다.툴팁을 이용해 꾸미는것은 처음이라 적용해보며 배워보도록 하겠다. css를 이용한 말줄임 처리 아직 제목의 input이나 css에 아무 조치를 하지 않아서 무한하게 제목을 쓸 수 있다.input에서 maxLength를 이용하면 글자수 제한을 둘 수 있지만 반응형으로 진행하다보면 결국 두 줄, 세 줄로 늘어나게 될 것이다. css에서는 box 속성을 이용하여 말줄임 처리를 할 수 있다.display:-webkit-box; //box로 지정-webkit-line-clamp : 1 //1줄까지 보이게하기-..