Spring Boot, Thymeleaf 환경에서 URL 자체를 넘겨 HTML 의 img src 속성에 설정했다.접근한 URL 과 불러오는 이미지 URL 자체의 도메인이 달랐기 때문에 CORS 문제가 터졌다.안드로이드 폰에서는 이미지 자체를 잘 불러왔으나 아이폰에서는 안나와서 찾아보니iOS 의 브라우저는 CORS 정책이 엄격하다고 한다. 그래서 여러가지 방법을 찾아보다가 가장 안정적이고 쉬운 방법은 backgroud-image css 설정을사용해 화면에 보여주는걸로 해결했다. 처음에 시도했던 방법은 CSS background-image 사용 예시 VS span[background-image] 차이점 정리 항목 span + background-image 브라우저 CORS 검사엄격 (iOS에서 차단)..

설정 환경 : Spring Boot, thymeleaf, bootstrap 5 버전, jquery 3버전 1. summernote js 및 css 파일 다운로드 아래 주소에서 Download compiled 를 클릭하여 다운로드 받는다. https://summernote.org/getting-started/#clone-or-fork-via-github Summernote - Super Simple WYSIWYG editor Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online. summernote.org 2. js 및 css 파일 설정 다운받고..

브라우저란? 우리가 흔히 인터넷에 접속할 때 사용하는 Chrome, Safari, Edge, Firefox 등을 말한다. 브라우저는 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램이다. 브라우저는 사용자가 원하는 페이지에서 필요한 자원을 서버로부터 받아와서 유저에게 보여준다. 자원은 페이지 외에도 이미지, 비디오 등의 컨텐츠들도 포함한다. 브라우저는 받아온 자원들(페이지, 이미지, 비디오)을 렌더링 과정을 통해 사용자에게 보여준다. 렌더링이란? 서버로부터 HTML, CSS, Javascript 등 제공받은 파일들을 가공하여 브라우저에 보여준다. 브라우저의 기본 구조 브라우저의 주요 구성 요소는 아래와 같다. 1. 사용자 인터페이스 주소표시줄, 이..

History.pushState 란페이지를 리로드하지 않고 페이지 주소만 변경할 때 사용한다.쉽게 말해 페이지 이동 없이 주소만 바꿔준다. 브라우저에서 페이지를 이동하면 window.onpopstate 라는 이벤트가 발생하게 되는데pushState 를 했을때는 popstate 이벤트가 발생하지 않고, 뒤 / 앞으로 가기를 클릭 했을 때popstate 이벤트가 발생하게 된다. 구문history.pushState(state, title[, url]); state브라우저 이동 시 넘겨줄 데이터(popstate 에서 받아서 원하는 처리 가능) title변경할 브라우저 타이틀 url변경할 브라우저 주소 예시실제로 사용해보면 아래와 같다. 아래와 같이 함수를 호출하는 버튼이 있습니다. testPPP Functio..