[JSP, HTML] 코드로 사용자 브라우저캐시 삭제

화면을 수정했는데, 클라이언트의 브라우져에 캐시가 남아서 이전 화면이 나오는 경우가 있다. 직접 브라우져 설정 들어가서 캐시를 지워달라고 요청 할 수도 있지만, 그게 한두번이 아니게 되니 코드에서 캐시를 지울수 없는지 찾아보았다. HTML 메타태그 이용하기 JSP, Java 사용시 자바 코드 지만 html과 같음. response.setHeader( "Pragma", "no-cache" ); response.setDateHeader( "Expires", -1 ); response.setHeader( "Cache-Control", "no-cache" ); JS, CSS 파일 캐시 사용 방지 js나 css등 정적파일도 종종 변경을 해도 캐시문제로 적용이 되지 않는 경우가 많다. 그럴 경우 파일의 url 뒤에..

• format_list_bulleted Web Programing/기본 정보
• · 2024. 3. 21.
• textsms

Web Storage (localStorage, sessionStorage, cookie)

참조문서 https://developer.mozilla.org/ko/docs/Web/API/Storage https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API 1. Web Storage란? Web Storage는 HTML5 에서 추가된 저장소이다. 간단한 키와 값을 저장(key-value Storage)할 수 있다. Web Storage를 상속받아 구현된 localStorage와 sessionStorage가 존재한다. 키와 값은 뭐가 들어와도 문자열로 변환되어 저장된다. 객체를 읽고쓰려면 JSON.stringify, JSON.parse 를 해야함 브라우저별 용량제한이 다르다. origin(도메인)별 S..

• format_list_bulleted Web Programing/기본 정보
• · 2021. 3. 23.
• textsms

크로스도메인 이슈 (SOP, CORS)

참조문서 https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy https://developer.mozilla.org/ko/docs/Web/HTTP/Access\_control_CORS 클라이언트단에서 해결 브라우저에서 옵션 변경 크롬 확장프로그램 플러그인 JSONP 서버단에서 해결 CORS 이외에도 document.domain 속성을 사용하는 방법, Cross-document messaging 등이 있다. 1. 동일 출처 정책(SOP) 만약 나의 API서버를 외부 웹 서비스에서 막 접근해서 가져다 쓴다면 문제가 있다. 따라서 이런 행위를 차단하려고, 동일한 도메인이 아니면 아래처럼 크로스도메인 이슈를 발생시킨다. XMLHttpRequ..

• format_list_bulleted Web Programing/기본 정보
• · 2021. 3. 23.
• textsms

마크다운(markdown)

1. 마크다운이란? 일반 텍스트 문서의 양식을 편집하는 문법, README 파일이나 온라인 문서, 혹은 일반 텍스트 편집기로 문서 양식을 편집할 때 쓰인다. 마크다운을 이용해 작성된 문서는 쉽게 HTML 등 다른 문서형태로 변환이 가능 2. 기본문법 ※ 개행: 스페이스 2개 + 엔터 ※ 문단구분: 엔터 2번 ①. 제목 # 텍스트 #을 하나 쓰면 HTML의 태그를, #을 두개 쓰면 태그를 의미한다. 즉, #은 하나에서 여섯개까지 쓸 수 있고, #이 늘어날때마다 제목의 수준은 내려간다.(보통 글씨 크기가 작아진다.) ②. 번호 없는 리스트 -/+/* 텍스트 ③. 번호 있는 리스트 숫자. 리스트 ④. 기울인 글씨 (html의 태그) *텍스트* or _텍스트_ ⑤. 굵은 글씨 (html의 태그) **텍스트** ..

• format_list_bulleted Web Programing/UI, UX, html
• · 2021. 3. 23.
• textsms

[UX/UI] HTML 마크업 - http://www.subcide.com (2)

마크업 실습 참조 : http://www.subcide.com/examples/creating-a-css-layout-from-scratch/ skip navication Skip to content Main menu About Services Portfolio Contact us Enlighten Designs is an Internet solutions provider that specialises in front and back end development. To view some of the web sites we have created view our portfolio. We are currently undergoing a 'face lift', so if you have any question..

• format_list_bulleted Web Programing/UI, UX, html
• · 2021. 3. 16.
• textsms

[UX/UI] HTML 마크업 - http://www.subcide.com (1)

마크업 실습 참조 : http://www.subcide.com/examples/creating-a-css-layout-from-scratch/ 그룹 마크업 div 만을 사용해서 마크업을 합니다 skip navication Skip to content Enlighten Designs Main menu About Contact Us Aside 섹션 마크업 브라우저 버전 < IE 9 인 경우에는 HTML5 요소가 제대로 적용되지 않을 수 있습니다. 따라서 아래 링크에서 제공하고있는 브라우저 버전호환을 도와주는 자바스크립트 파일을 사용하는 것으로 해결이 가능합니다. https://raw.githubusercontent.com/aFarkas/html5shiv/master/dist/html5shiv.min.js s..

• format_list_bulleted Web Programing/UI, UX, html
• · 2021. 3. 16.
• textsms

[UX/UI] HTML - 폼 컨트롤

폼의 양식 보통 요즘은 fieldset 테두리도 지우고, legend의 글자도 css로 없애는 편입니다 fieldset legend 버튼 : button | input 기능은 같지만, button에는 내부에 아이콘도 넣을 수 있고, 태그도 집어넣을 수 있기 때문에 디자인적인 면에서 많이 사용하는 편이다. 전송 한 줄 문자입력 : input label - for 속성과 input - id, name 속성을 동일하게 입력해야 합니다. input 태그가 가지는 대표적인 속성 1) disabled = "disabled" 2) placeholder = "입력 힌트 문장" 3) autofocus="autofocus" : 처음에 어디에 포커스를 둘지 설정 4) required="required" : 필수입력항목 지정..

• format_list_bulleted Web Programing/UI, UX, html
• · 2021. 3. 16.
• textsms

[UX/UI] HTML - 링크와 이미지

링크 하나씩 알아가는 블로그 하나씩 알아가는 블로그(새탭) 이미지 이미지 다운로드(IE 제외) webmaster@gmail.com 이미지 이미지에 대한 설명을 작성한다. 작성된 설명은 css를 통해서 보이지 않지만 style을 통해서 밀어내기만 했기 때문에 텍스트가 살아있어서 더 나은 웹 접근성을 확보할 수 있다. 이미지 맵 img의 usemap 값은 map의 id 속성을 참조하여 앞에 #을 붙여서 넣어줍니다. area의 coords 옵션에서의 좌표를 알아내기 위해서는 다음 절차를 따라야 합니다. 1. 해당하는 이미지를 포토샵으로 불러옵니다. 2. Window > info 메뉴를 클릭한 후 각 좌표를 알아냅니다. 3. 해당 좌표를 적어둡니다. 4. area의 태그에 coords 속성에 입력 후 테스트를 ..

• format_list_bulleted Web Programing/UI, UX, html
• · 2021. 3. 16.
• textsms

[UX/UI] HTML - 테이블 셀합치기

샘플 테이블 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 가로로 합치기 가로로 합치기 4 5 6 7 8 9 가로로 합치기 4 5 6 7 8 9 세로로 합치기 세로로 합치기 2 3 5 6 8 9 세로로 합치기 2 3 5 6 8 9 가로세로 원하는만큼 합치기 가로세로 원하는만큼 합치기 3 6 7 8 9 가로세로 원하는만큼 합치기 3 6 7 8 9 출처 : know-one-by-one.tistory.com/23

• format_list_bulleted Web Programing/UI, UX, html
• · 2021. 3. 16.
• textsms

[UX/UI] HTML - 테이블을 구성하는 태그

테이블 레이아웃 테이블 헤더 th 태그를 사용하는 경우에는 scope 속성을 필수로 입력해주어야 합니다 테이블의 헤더 컬럼 테이블의 헤더 컬럼 테이블의 헤더 컬럼 테이블의 헤더 컬럼 테이블 데이터 테이블의 데이터 컬럼 테이블의 데이터 컬럼 테이블의 데이터 컬럼 테이블의 데이터 컬럼 테이블의 데이터 컬럼 테이블의 데이터 컬럼 테이블의 데이터 컬럼 테이블의 데이터 컬럼 테이블 결과값 결과 컬럼 결과 컬럼 결과 컬럼 결과 컬럼 출처 : know-one-by-one.tistory.com/22

• format_list_bulleted Web Programing/UI, UX, html
• · 2021. 3. 16.
• textsms