![]()
1) navigator.clipboard.writeText() navigator.clipboard.writeText라는 method를 사용할 것이다. 사용 방법은 다음과 같다. var text = "저장하고 싶은 문자열"; navigator.clipboard.writeText(text) .then(() => console.log("클립보드에 성공적으로 복사되었습니다.")) .catch(error => console.error("클립보드에 복사하는 데 실패했습니다: ", error)); 이 기능은 HTTPS나 Localhost에서만 사용이 가능하다고 하며 자세한 정보는 공식 문서를 확인하면 좋다. 링크 : https://developer.mozilla.org/en-US/docs/Web/API/Clipboa..
객체(Object)의 값을 출력하고 싶은 경우에 주로 객체를 문자열로 변환하려고 하면 [object Object]와 같은 형태로 나오는 것을 알 수 있다. 따라서 객체의 내용을 확인하고 싶다면 JSON.stringfy()함수를 사용하면 된다. const obj = { id: '0', name: 'dodol', age: '100', } console.log(obj); // 결과 : [object Object] console.log(JSON.stringify(obj)); // 결과 : {"id":"0","name":"dodol","age":"100"} 엔터가 들어간 형태로 확인하고 싶다면 obj 뒤에 , null, '\t'를 넣어주면 된다 console.log(JSON.stringify(obj, null, ..
가끔은 입력하다보면 내 커서 위치를 구해야 할 일이 생길 수도 있다. 그리고 커서 위치를 알아두면 좀 더 자유롭게 단축키로 여기저기 왔다갔다 할 수도 있게 된다. 또는 특정 문자열의 위치로 커서를 변경할 수도 있다. const inputTextarea = document.getElementById('inputTextarea'); console.log(inputTextarea.selectionStart); // 커서의 시작 위치 console.log(inputTextarea.selectionEnd); // 커서의 끝 위치 만약 커서를 옮길 때 selectionStart값만 변경하게 되면 드래그가 발생하게 된다. 그래서 드래그를 의도한 것이 아니라면 selectionEnd값도 옮겨주어야 한다. 또한, 입력할..
개인적으로 많이 사용한다고 느끼는 선택자는 hover와 active인 것 같다. 하지만 요즘 다른 웹사이트를 보면 hover는 사용하지만 active를 사용하는걸 제외하는 추세인 듯 하다. 그래도 나는 눌릴때의 구분을 주는게 좋다고 생각하여 active를 넣어주는 편이다. - hover : 마우스 커서가 대상 위로 올라왔을 때 .text { color: #408cff; } .text:hover { filter: brightness(0.5); } HTML 삽입 미리보기할 수 없는 소스 - active : 마우스로 클릭했을 때 .text { color: #408cff; } .text:active { filter: brightness(0.5); } HTML 삽입 미리보기할 수 없는 소스 이 밖에도 다음과 같은..
보통이면 다음과 같이 작성할 것이다. 하루 관리 서비스 하지만 새창으로 열고 싶다면 태그안에 target="_blank"를 포함하여 아래와 같이 작성해주면 된다. 하루 관리 서비스 - 결과물 하루 관리 서비스 miruzima 더 나은 하루를 보낼 수 있게 iflab.run 누르면 새 창으로 이동하는 것을 알 수 있다.
![]()
CSS로 텍스트에 그라데이션 효과를 넣는 방법은 매우 간단하다. background: linear-gradient(방향, #색상 코드, #색상 코드, #색상 코드,... , #색상 코드); 이 속성은 그라데이션을 넣어주는 속성이다. 방향은 45deg, 124deg와 같이 각도도 되고, to bottom이나 to right도 가능하다. 그리고 색상 코드는 #1c1c1c, #c1c1c1과 같이 작성하면 된다. -webkit-background-clip: text; 이 속성은 요소의 배경이 어디까지 색을 채울지 정하는 속성이다. -webkit-text-fill-color: transparent; 이 속성은 텍스트 문자의 채우기 색을 지정하는 속성이다. 이게 지정되지 않으면 color의 색상을 따라간다. 또한,..
