CSS9 그림판 style 설정 input(type="range") 설정하는 방법은 아래를 참고했다. https://www.smashingmagazine.com/2021/12/create-custom-range-input-consistent-browsers/ Creating A Custom Range Input That Looks Consistent Across All Browsers — Smashing Magazine Range inputs have notoriously been a pain to style. Each browser renders the input differently requiring you to use vendor prefixes in order to create a cohesive look and feel. In.. 2023. 2. 5. [그림 앱 만들기] 이미지, 텍스트 첨부, 저장하기 이미지 첨부 기능 파일 선택을 클릭하여 원하는 이미지를 캔버스 사이즈에 맞추어 업로드할 수 있다. 기술 - 다음 코드를 통해 이미지 파일을 입력받을 수 있도록 했다. (multiple 속성을 추가하여 여러 개 입력받을 수도 있다.) - 해당 파일의 정보를 불러와서 url(해당 브라우저에서만 유효하다)을 생성한다. - img tag를 생성하여 src를 url로 설정한다. // 이미지 파일을 선택하는 event가 발생했을 때 const file = event.target.files[0]; const url = URL.createObjectURL(file); const image = new Image(); image.src = url; - 이미지 파일을 캔버스에 나타내고, input의 value는 초기화한다... 2023. 2. 1. [그림 앱 만들기] 툴(색상 선택, 채우기, 버리기, 지우기) 만들기 색상 선택 기능 색상 네모를 선택하여 선의 색을 선택할 수 있다. 기술 - 색상의 div는 data-color:값으로 설정되어 있다. - 특정 색(div)이 클릭되면 해당 요소의 정보를 불러온다. const chosenColor = event.target.dataset.color; - 이미 설정된 네모를 선택하면 input(type="color")의 색도 함께 바뀌도록 설정한다. data attributes 참고 https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes 채우기 기능 버튼 Fill을 클릭하고 캔버스에 클릭하면 색상이 채워진다. 기술 - isFilling이라는 변수를 만들어 Fill 버튼을 누르면 값을 true.. 2023. 2. 1. [나만의 Home Page] 홈페이지 이름 입력하기 홈페이지의 이름을 입력하면 화면에 표시하도록 설정했다. 기술 - 사용자가 입력하는 정보를 localStorage에 저장하여, 정보가 존재한다면 계속 표시하도록 하였다. - 정보가 없다면 form을 보이고, 있다면 input을 display:none으로 설정하였다. - 정보가 submit될 때 preventDefault()를 설정하여 의도대로 실행되도록 하였다. 디버깅 함 1. hidden 클래스를 만들어 form을 숨기려고 했으나 다음과 같이 display:none이 적용되지 않아 애를 먹었었다. .hidden { display: none; } hidden 클래스를 정의한 파일을 style.css에서 가장 마지막에 import 하기도 하고, 구글링도 해봤으나 의도대로 실행되지 않았다. 고군분투 끝에 다른.. 2023. 1. 27. 이전 1 2 3 다음
