개발하는 고라니

프로젝트를 진행하던 중 글 상세조회 페이지에서 이미지를 보여주는데, 이미지가 여러개일 경우 한번에 다 나열해서 보여주기보다, 화살표나 버튼을 클릭해서 다음 이미지, 이전 이미지를 보는 것에 알게모르게 익숙해져있을 것이다. 그래서 트렌드에 맞게 이미지 슬라이더를 HTML, CSS, JS만으로 구현해보도록 하자. 먼저 결과를 보면 위와같은 UI가 될 것이다. 설계 구현을 하기에 앞서 어떻게 구현할지 설계를 해보았다. 가장 바깥에서 버튼들과 이미지가 보여질 곳(B)을 감싸는 녀석을 A라고 하고, 각각의 이미지(D)를 감싸는 프레임을 C라고 생각하면 된다. # A display: flex justify-content: center align-items: center position: relative # B di..

이미지 파일을 서버에 업로드 하기전에 클라이언트 단에서 먼저 이미지를 미리보기 하고 올리고 싶을 경우가 있다. 이전에는 몇 가지 복잡한 방법을 사용했으나, 이제는 간단한 자바스크립트 처리로 충분히 가능하다. FileReader FileReader 객체는 웹 어플리케이션이 비동기적으로 데이터를 읽기 위해 읽을 파일을 가리키는 File 혹은 Blob 객체를 이용해 파일의 내용을 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해준다. File 객체는 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 FileList 객체, 드래그 앤 드랍으로 반환된 DataTransfer 객체 혹은 HTMLCanvasElement의 mozGetAsFile() API로부터 얻는다. Event Handler 이미지 미리보기 먼..

브라우저에서 댓글을 작성해 서버로 전송하는 과정 중 만난 문제와 그때의 해결방법을 기록하고자 한다. XMLHttpRequest 'POST' JQuery를 이용하지 않고 JS로 XMLHttpRequest를 만들어 서버로 JSON 데이터를 'POST'하는 과정에서 만난 오류는 다음과 같다. var reply = { content: content, bid: bid }; request.open('POST', url, true); request.setRequestHeader("Content-Type", 'application/json; charset=UTF-8'); request.send(JSON.stringify(reply)); 해당 URL로 JSON 형식의 데이터를 보냈는데, 이를 어떻게 받아야 할까? 우리는..

라는 체크박스가 있다. 1) 체크박스가 체크되었는지 true/false로 가져오기 $("input:checkbox[name='box']").is(":checked") == true $("input:checkbox[name='box']").is(":checked") 2) 체크박스 해제하기 $("input:checkbox[name='box']").prop("checked", false); 3) 체크박스 선택하기 $("input:checkbox[name='box']").prop("checked", true); $("input:checkbox[name='box']").attr("checked", true); 4) 선택된 체크박스 수 가져오기 (다중 체크박스의 경우) $("input:checkbox[name='b..