Front

라디오버튼을 구현 하다 보면 조금 더 디자인에 맞게 라디오 버튼의 동그라미 부분을 커스텀 하고 싶을 때가 있다. 그럴때는 이미 기본으로 잡혀져 있는 구성들을 none 처리 해준 뒤 (여기서 다른 웹 사이트들의 기본 설정도 none 처리 해줌) 원하는 모양 대로 그려 나가면 된다.    See the Pen Untitled by Kate lee (@Kate-lee-the-encoder) on CodePen.">See the Pen Untitled by Kate lee (@Kate-lee-the-encoder) on CodePen.   input[type='radio'] { //input type이 radio인 모든 것들 -webkit-appearance: none; //웹킷 기본 구성 없음 ..

[Javascript] 클릭해서 드래그로 가로 스크롤 구현 하기 (click and drag)[목표]가로 스크롤이 필요한 부분을 제공하는 스크롤을 이용해서가 아닌 마우스로 클릭 후 드래그하는 방법으로 구현해보고자 한다.  [코드] 1. 변수 및 초기화 //스크롤을 할 컨테이너를 선택henniee.tistory.com위의 글과 연결 되는 내용인데, 내가 윈도우로 가로 드래그를 구현 후 맥에서 빌드를 하면 자꾸 드래그가 안된다는 이슈가 발생하여 아예 마우스의 휠로 드래그를 할 수 있게 스크립트를 만들었다.  [코드]scrollContainer.addEventListener("wheel", (e) => { e.preventDefault(); const delta = e.deltaY || e.deta..

[목표]가로 스크롤이 필요한 부분을 제공하는 스크롤을 이용해서가 아닌 마우스로 클릭 후 드래그하는 방법으로 구현해보고자 한다.  [코드] 1. 변수 및 초기화 //스크롤을 할 컨테이너를 선택 const scrollContainer = document.getElementById("scrollContainer");let isMouseDown = false; //사용자가 마우스를 클릭 했는지 여부를 추적let startX; // 마우스를 클릭한 최초의 x 좌표 let scrollLeft; // 드래그 시작 시 컨테이너의 가로 스크롤 위치 2. 마우스 누를때 이벤트  scrollContainer.addEventListener("mousedown", (e) => { isMouseDown = tr..

코드를 짜던 도중 textarea가  text 높이에 따라 자동으로 높이 조절을 구현 하고 싶었다.  textAreaElement.style.height = textAreaElement.scrollHeight + 'px'; 이렇게 적어주면 된다는 많은 블로그들의 말에 따라 했는데 이상하게 낮은 버전의 web에서는 이게 안먹히는것이다...... 그래서 원인을 찾던 중 알게 된 scrollHeight 와 clientHeight를 간단하게 작성해보려고 한다.  scrollHeight정의: 요소의 전체 콘텐츠 높이로, 스크롤 여부와 상관없이 요소 내의 모든 콘텐츠 높이를 포함.특징: 요소의 내부 콘텐츠가 현재 뷰포트에 보이지 않더라도 해당 영역까지의 전체 높이를 반환.예시: 텍스트가 많아 세로로 스크롤이 필요한..