-
초보자를 위한 게시판의 글자색을 바꾸는 기능을 만들어 보자Study/JavaScript 2024. 2. 5. 17:57반응형
초보자가 처음 프로젝트로 보통 게시판을 만들게 되는데,
이때 열의에 차서 게시판 기능에도 여러가지 기능을 넣고 싶을때가 있다.
나 또한 수강생시절 게시판 만들기를 했었고
사용자의 편의를 위해서 글자의 색을 바꾸고싶다는 생각으로 기능을 만들어 보았고,
간단하게 만든 기능이니 활용성이 떨어지지만 참고하여 기능을 확장 시키면 좋을듯하다
1.결과화면
글을 작성하는 페이지에 글자색을 사용자가 원하는 색으로 바꾸게해서 사용사의 활용성을 높이고싶다 할때
글자색을 어떻게 바꾸지 할때 제글을 보시길 바란다.
*글자색 바꾸기전
*글자색 바꾸고 난 후
2. 구현 방법
(1)html 코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <textarea id="myTextarea" style="width: 300px; height: 300px;"></textarea> <input type="color" id="colorPicker" value="#000000"> </body> </html>먼저 글을 쓸수 있는 칸이 필요한데, 이거는 textarea 태그를 이용하면 되고 나는 편의를 위해 style을 지정해 사이즈를 정해두었고, 해도그만 안해도 그만임
다만 자바스크립단에서 컨트롤해서 글자색을 바꿀려면 id 는 필수로 지정해야 됨!
그리고 제일 중요한 color를 지정하는 부분은 이미 html5 에서 제공하기 때문에 type="color" 만 지정해주면 된다는사실!
하지만 브라우져에서 지원하고 안하고 차이가 있으니, 이부분은 염두 하고 사용하시길 바란다
이것또한 자바스크립단에서 컨트롤을 해야 하기 때문에 id 지정해주고
기본 value 를 지정하여 디폴트 색상을 지정할수가 있다!
참고로 #00000은 검은색!
(2)javaScript 코드
<script> const myTextarea = document.getElementById('myTextarea'); const colorPicker = document.getElementById('colorPicker'); colorPicker.addEventListener('input', (e) => { myTextarea.style.color = e.target.value; // 사용자가 선택한 색상으로 변경 }); </script>아까 각각 태그에 id를 지정한 이유는 위와 같이 자바스크립으로 컨트롤 하기 위함인데,
변수를 설정해서 각각의 id를 지정해서 변수에 넣어주고
이제 이걸로 자바스크립단에서 유용하게 불러서 쓰고싶을때 쓰면 됨.
아까 html 코드에서 id로 지정한 colorPicker 부분의 input 에 해당하는 태그의 이벤트 리스너를 설정해놓았을때
사용자가 색을 고르는 이벤트가 발생하면 선택한 색을 글자를 쓰는 부분인 id="myTextarea" 의 스타일을
변경하여 사용자가 선택한 색으로 변경하면 됨.
반응형'Study > JavaScript' 카테고리의 다른 글
초보자를 위한 자바스크립트를 이용하여 간단하게 얼굴 인식하기_1( openCV.js 활용) (0) 2024.03.08 초보자를 위한 웹브라우져에 웹캠 비디오 영상 보여주기 (0) 2024.03.07 var 와 let 둘 중 뭐를 써야 될까?? (0) 2023.08.04 초보자도 쉽게 이해하는 jQuery 문법_태그 및 요소 추가하기_ .wrap() .wrapAll() .html() .text()_(2) (0) 2023.03.26 초보자도 쉽게 이해하는 jQuery 문법_태그 및 요소 추가하기_ .append() .prepend() .before() after()_(1) (4) 2023.03.25