HTML
-
설정 환경 : 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 파일 설정 다운받고..
textarea 태그에 summernote 에디터 사용하기설정 환경 : 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 파일 설정 다운받고..
2023.03.28 -
브라우저란? 우리가 흔히 인터넷에 접속할 때 사용하는 Chrome, Safari, Edge, Firefox 등을 말한다. 브라우저는 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램이다. 브라우저는 사용자가 원하는 페이지에서 필요한 자원을 서버로부터 받아와서 유저에게 보여준다. 자원은 페이지 외에도 이미지, 비디오 등의 컨텐츠들도 포함한다. 브라우저는 받아온 자원들(페이지, 이미지, 비디오)을 렌더링 과정을 통해 사용자에게 보여준다. 렌더링이란? 서버로부터 HTML, CSS, Javascript 등 제공받은 파일들을 가공하여 브라우저에 보여준다. 브라우저의 기본 구조 브라우저의 주요 구성 요소는 아래와 같다. 1. 사용자 인터페이스 주소표시줄, 이..
브라우저 렌더링 과정브라우저란? 우리가 흔히 인터넷에 접속할 때 사용하는 Chrome, Safari, Edge, Firefox 등을 말한다. 브라우저는 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램이다. 브라우저는 사용자가 원하는 페이지에서 필요한 자원을 서버로부터 받아와서 유저에게 보여준다. 자원은 페이지 외에도 이미지, 비디오 등의 컨텐츠들도 포함한다. 브라우저는 받아온 자원들(페이지, 이미지, 비디오)을 렌더링 과정을 통해 사용자에게 보여준다. 렌더링이란? 서버로부터 HTML, CSS, Javascript 등 제공받은 파일들을 가공하여 브라우저에 보여준다. 브라우저의 기본 구조 브라우저의 주요 구성 요소는 아래와 같다. 1. 사용자 인터페이스 주소표시줄, 이..
2023.03.14 -
History.pushState 란 페이지를 리로드하지 않고 페이지 주소만 변경할 때 사용한다. 쉽게 말해 페이지 이동 없이 주소만 바꿔준다. 브라우저에서 페이지를 이동하면 window.onpopstate 라는 이벤트가 발생하게 되는데 pushState 를 했을때는 popstate 이벤트가 발생하지 않고, 뒤 / 앞으로 가기를 클릭 했을 때 popstate 이벤트가 발생하게 된다. 구문 history.pushState(state, title[, url]); state 브라우저 이동 시 넘겨줄 데이터(popstate 에서 받아서 원하는 처리 가능) title 변경할 브라우저 타이틀 url 변경할 브라우저 주소 실제로 사용해보면 아래와 같다. 아래와 같이 함수를 호출하는 버튼이 있습니다. testPPP Fu..
History pushStateHistory.pushState 란 페이지를 리로드하지 않고 페이지 주소만 변경할 때 사용한다. 쉽게 말해 페이지 이동 없이 주소만 바꿔준다. 브라우저에서 페이지를 이동하면 window.onpopstate 라는 이벤트가 발생하게 되는데 pushState 를 했을때는 popstate 이벤트가 발생하지 않고, 뒤 / 앞으로 가기를 클릭 했을 때 popstate 이벤트가 발생하게 된다. 구문 history.pushState(state, title[, url]); state 브라우저 이동 시 넘겨줄 데이터(popstate 에서 받아서 원하는 처리 가능) title 변경할 브라우저 타이틀 url 변경할 브라우저 주소 실제로 사용해보면 아래와 같다. 아래와 같이 함수를 호출하는 버튼이 있습니다. testPPP Fu..
2023.02.22