Front-end(170)
-
textarea로 입력 받은 글을 줄바꿈 살려서 출력하기
textarea로 입력받은 글을 출력하게 되면 줄바꿈이 적용되지 않는 것을 볼 수가 있다. 그 이유는 데이터베이스에 저장될 때 개행문자가 \n, \r, \r\n 이런식으로 저장이 되기 때문이다. 처음에 검색해보았을 때 저런 개행문자를 정규표현식으로 모두 찾아서 replace, replaceAll 메소드를 통해 으로 바꾸어주면 된다는 방법을 보긴했었는데 어떤 이유인지 되지 않아서 헤맸다가 생각보다 간단한 방법으로 1초만에 바꿀 수 있었다. 바로 pre 태그로 출력하면 된다. 그러면 복잡한 방법 필요 없이 그냥 바로 해결이 된다! 🌭 textarea로 입력받은 글을 p로 출력했을 때(줄바꿈 적용 안된 모습) 🍕 textarea로 입력받은 글을 pre로 출력했을 때(줄바꿈 적용 된 모습)
2021.04.02 -
CSS 3줄 이상일 때 더보기/간략히 버튼 보이게 하기(ellipsis)
.video__description p.video__description__text=video.description .description_moreDetails 더보기 .video__description { font-size: 14px; line-height: 25px; padding-bottom: 50px; padding-left: 60px; border-bottom: 1px solid #e0e0e0; } p.video__description__text.abstracted { height: 75px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: verti..
2021.04.02 -
Safari에서 버튼 그라데이션/테두리곡선 고치는법
개발할 때 크롬으로 테스트해보면서 만든 후 배포한 다음에 사파리에서 테스트를 해보니 버튼이 그라데이션과 테두리곡선이 적용된 것을 볼 수 있었다. 내가 원하는 디자인으로 보이지 않아서 방법을 찾아보았다. 사파리에서는 기본적으로 버튼에 그라데이션과 테두리 곡선이 들어가있다고 한다. 이는 간단하게 이 코드를 통해 해결할 수 있다. 또한 내가 input에 text-shadow 넣은 것도 적용되지 않았었는데 그 문제도 이 코드를 통해 해결될 수 있었다. input, textarea, button{ -webkit-appearance: none; } 해결 전 해결 후
2021.04.01 -
[백준] 4344. 평균은 넘겠지 (자바스크립트/node.js/javascript/배열)
[백준] 4344. 평균은 넘겠지 (자바스크립트) 시간 제한 메모리 제한 제출 정답 맞은 사람 정답 비율 1 초 256 MB 108753 39857 34011 37.342% 문제 대학생 새내기들의 90%는 자신이 반에서 평균은 넘는다고 생각한다. 당신은 그들에게 슬픈 진실을 알려줘야 한다. 입력 첫째 줄에는 테스트 케이스의 개수 C가 주어진다. 둘째 줄부터 각 테스트 케이스마다 학생의 수 N(1 ≤ N ≤ 1000, N은 정수)이 첫 수로 주어지고, 이어서 N명의 점수가 주어진다. 점수는 0보다 크거나 같고, 100보다 작거나 같은 정수이다. 출력 각 케이스마다 한 줄씩 평균을 넘는 학생들의 비율을 반올림하여 소수점 셋째 자리까지 출력한다. 예제 입력 1 5 5 50 50 70 80 100 7 100 9..
2021.04.01 -
event.target VS event.currentTarget
event.target VS event.currentTarget 🎵event.target 이벤트버블링의 가장 마지막에 위치한 최하위의 요소를 반환 (즉 더 세밀하게 클릭된 요소를 기준으로 사용할 때) (event.target은 내가 이벤트를 건 대상만 발생하는 것이 아니라 그 자식(후손)도 될 수 있다) 🎶event.currentTarget 이벤트가 바인딩된 요소를 반환한다. 🎀 예시 이런 코드가 있다고 하면, 나는 div 태그를 클릭했을 때 삭제 작업을 진행하고 싶은 경우div태그에 onclick 이벤트리스너를 추가했다하더라도, 내가 아이콘 부분을 누르면 event.target은 div태그가 아니라 i태그가 event.target이 된다. 이것을 해결하기 위해서는 event.currentTarget을 ..
2021.03.29 -
[백준]백준에서 node.js 입출력 방법 정리(백준/자바스크립트/코딩테스트/알고리즘)
안녕하세요. 이번 시간에는 백준에서 node.js 입출력 방법에 대해 알아보겠습니다. 자바스크립트로 코딩테스트를 준비할 경우, 백준에서는 node.js를 선택하여야 합니다. 그런데 node.js가 좀 번거롭습니다. 프로그래머스에서는 입출력은 상관 없이 함수 하나만 작성하면 되었는데 백준에서는 입력과 출력을 직접 해주어야 합니다. 그럼에도 불구하고 프로그래머스보다 백준이 문제가 훨씬 많으므로 node.js 입출력 방법을 정리해보도록 하겠습니다. 백준에서 node.js 입출력 방법으로 사용하는 방법은 크게 두 가지가 있습니다. 아직 어떤 차이가 있는지는 잘 모르나, fs 모듈의 경우 코드가 간단하고 다른 블로거 분들의 말을 보니 readline으로 시간초과가 나올 때 사용한다고 합니다. 저는 vscode에서..
2021.03.29