1. 모든 html 파일에서 메뉴명을 수정해야 하다니...회사 홈페이지의 서브 메뉴를 수정할 일이 있었다. 해당 html 파일을 열어 수정했고 다 끝났다고 생각했고 행복했다. 만약 이야기의 결말이 이랬다면 이 글은 쓰지 않았을 것이다.회사 홈페이지는 각 메뉴별로 각각 메뉴를 가지고 있는 방식이다. 다시 말해 메뉴별로 html 파일이 존재하고 각 페이지는 동일한 네브바 코드가 작성되어 있다. 심지어 어떤 메뉴는 서브메뉴도 이와 같은 구조로 되어 있다. 결국 소메뉴의 명을 하나만 수정할 것이 아니라 모든 html 파일에서 수정해야 한다는 것이며-어쩌면 처음으로-SPA가 무척 고맙게 느껴졌다.모든 html 파일에서 소메뉴의 명을 수정한다는 것은 이번 한번만이라면 해줄 만하다. 그래, 충분히 그럴 수 있다. 하..

당신이 잘 모르는 8가지 HTML 팁 여러분의 마음을 사로잡을 HTML 팁 모음입니다! 1. 장치 카메라를 여는 캡처 속성 input 태그에 이메일, 문자, 비밀번호 등의 속성이 있는 것처럼 모바일 기기의 카메라를 열어 이미지를 캡처하는 속성도 있습니다. 이것은 두 가지 값을 가질 수 있는 capture속성으로 수행됩니다. 전면 카메라 사용자 후면 카메라 환경 2. 웹사이트 자동 새로고침 head태그에서 일정 시간이 지나면 웹사이트가 새로고침 되도록 설정할 수 있습니다! 이 스니펫은 10초마다 웹사이트를 새로고침 합니다. 3. 맞춤법 검사 활성화 HTML spellcheck 속성을 사용하고 이를 true로 설정하여 활성화할 수 있습니다. lang속성을 사용하여 사용할 언어를 지정합니다. 표준 속성이며 모..

이미지의 어떤 영역에 마우스를 올려놓으면 설명을 띄우거나 링크를 연결하고 싶었는데 map 태그로 쉽게 기능을 구현할 수 있었다. Image Map Generator 사이트에서 사용할 이미지를 업로드(Select Image from My PC) 한 후 해당 이미지의 부분만 설정해 주면 쉽게 선택에 부분의 좌표가 포함된 map 태그를 가져올 수 있다. https://www.image-map.net/ Free Online Image Map Generator Easy free online html image map generator. Select an image, click to create your areas and generate html your output! www.image-map.net 복사한 코드를..

바닐라 자바스크립트로 웹사이트를 만들고 있는데, 외부 HTML 파일을 가져와 화면에 렌더링 하고자 하였다. 이때 Ajax처럼 기존에 렌더링 된 화면은 그대로 두고 원하는 부분만 새로 렌더링 하고 싶었다. 결과적으로 적용한 코드는 다음과 같다. // ID에 렌더링 function openContent(htmlFileName) { const h = `` document.querySelector("#showContents").innerHTML = h; loadHtml(); // 외부 HTML 파일 로딩 호출 } // 외부 HTML파일 로딩 함수 function loadHtml() { window.addEventListener('click', function() { var allElements = documen..

"김인우. (2019). 스프링 부트 시작하기. 프로그래밍인사이트"로 실습 중에 발생한 문제이다. [그림 1]의 "게시글 상세 화면"에서 "수정하기" 또는 "삭제하기" 버튼 클릭 시 아래와 같은 에러가 발생하였다. org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'POST' not supported HTML은 POST와 GET 방식의 요청만 지원하고 PUT, DELETE 방식은 지원하지 않는다. 스프링은 웹 브라우저에서 사용되는 POST, GET 방식을 이용해서 PUT, DELETE 방식을 사용할 수 있도록 HiddenHttpMethodFilter 기능을 지원한다. 스프링 부트 2.1.x 이상의 버전에서는 이미 ..

위 코드에는 프로필 이미지 파일을 base64로 인코딩한 문자열이 포함되어 있다. 따라서 별도의 이미지 파일과 url이 불필요하다. [그림 1]은 위 코드를 실행한 결과이다. base64는 ASCII에서 특수문자를 제외한 26인 64개의 문자로 이루어진다. 즉, "A~Z, a~z, 0~9, +, /"로 표현된다. 아래의 base64encode.net에서 이미지 파일을 base64 문자열로 변환할 수 있다. https://www.base64encode.net/ Base64 Encode - Online Tool Base64 encode Encode base64 string from 'base64 encoder' to 'YmFzZTY0IGRlY29kZXI=' www.base64encode.net

숟갈이 원하는 밥상에 숟갈을 얹을 때 밥장에게 구애(?)의 메시지를 함께 보내려고 한다. 여러 방법이 있겠지만 모달을 띄우고 textarea에 메시지를 작성하는 방법으로 구현하고자 했다. 모달은 다른 곳에서도 사용할 수 도 있으므로 slot으로 만들어 재사용 가능하게 했다. id도 정확하게 잘 맞춘 후 작동을 시켰는데 헐, [그림 1]과 같은 결과가 발생했다. 모달을 아무리 클릭해도 반응하지 않았고 코드를 다시 살펴봐도 문제라곤 보이지 않았다. 테스트 코드를 만들고 거기서 작동시키면 잘된다. 뭐가 문제 일까? 한참을 삽질하다가 [그림 2]와 같은 정상적인 결과를 얻었다. 문제의 원인은 HTML에서 모달을 작성한 위치였다. "현재 신청한 숟갈들"을 모니터링해주는 div 안에 작성했던 게 문제였던 것이다. ..

3월에는 Do it! 스터디룸에서 "고경희. (2021). Do it! 자바스크립트 입문. 이지스퍼블리싱"을 완독 인증하였다. 자바스크립트 입문자라면 이 책으로 시작하면 좋겠다. 이 책으로 시작하면 "포기하지 않을 자신"이 생긴다! "고경희. (2021). Do it! HTML+CSS+자바스크립트 웹 표준의 정석. 이지스퍼블리싱" "자바스크립트 입문"은 HTML, CSS를 잘 몰라도 공부하는데 전혀 문제가 없다. 하지만 웹 프런트엔드 개발에서 HTML, CSS, JavaScript는 한 몸과 같아서 어느 것 하나 소홀할 수 없다. 그래서 희망했던 책이다. 잊고 지냈는데 택배 문자를 받고 몹시 반가웠다! 이 책으로 더 자신감 넘치게 될 미래를 상상해본다! 독자와 함께 성장하는 이지스퍼블리싱을 항상 응원한다!