에리스: html

레이블이 html인 게시물을 표시합니다. 모든 게시물 표시

2018년 2월 5일 월요일

최초 접속시 css와 script가 로딩되지 않을때

환경

서버 : 톰캣 단독

문제

스프링을 사용중인 웹 사이트에서 최초 접속시 CSS가 로딩되지 않는 현상이 있었다. 새로고침하면 이후부터는 제대로 나오긴 하지만 브라우저를 닫고 다시 웹 사이트에 접속하면 여전히 처음에는 CSS가 로딩되지 않았다. 그런데 index.html에서 페이지 리다이렉트로 문제의 페이지에 접근한 경우에는 제대로 나왔다. 즉 주소를 직접 입력해서 접속시 최초 1회는 페이지가 제대로 나오지 않는 것이다.

그래서 브라우저의 콘솔을 열어보니 아래와 같은 로그가 꽤 많이 찍혀있었다.
“http://127.0.0.1:9080/gim/;jsessionid=02B695062249B5363476B2D5293A2AF9js/vendor/modernizr-2.8.3-respond-1.4.2.min.js” 소스의 <script> 로딩을 실패하였습니다.

메시지를 보면 script가 로딩되지 않는다고 하는데 script와 더불어 CSS가 함께 로딩되지 않아서 디자인 없이 HTML만 불러오는 상황이었다.

문제가 되는 부분을 jsp 소스에서 찾았고 그 중 일부만 보면 아래와 같은 형식으로 되어있었다.
<link rel="stylesheet" href="<c:url value='/'/>css/main.css">
<script src="<c:url value='/'/>js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>

해결

위의 문제는 <c:url value='/'/>의 결과 값인 /gim의 뒤에 세션아이디가 붙어 "/gim/;jsessionid=19B754062123249B5476B2D5435A2AF3" 처럼 경로가 변하면서 문제가 된 것이었다.

2가지 해결방법을 발견하였는데

첫 번째로 아래처럼 상대 경로로 고쳐서 문제를 해결하였다.

두 번째로 아래처럼 <c:url>을 고쳐서 문제를 해결하였다.

2017년 11월 9일 목요일

javascript로 alt 또는 title 달때 내용에 포함된 따옴표 치환하기

alt 또는 title 달때 문자열 중 따옴표가 표함된 경우 잘려서 오류가 발생할 수 있다.
아래처럼 문자열을 replace 해서 문자열이 잘리지 않도록 한다.

/**
* alt 또는 title 달때 문자열 중 따옴표가 표함된 경우 잘려서 오류가 발생하지 않도록 문자열을 치환
* @param tit
* @returns
*/
function imbedTitle(tit) {
if(tit == null || tit == 'null') {
return '';
}

var str = tit;
str = str.replace(/\"/g, '"');
str = str.replace(/ /g,' ');
str = str.replace(/</g,'<');
str = str.replace(/>/g,'>');
return str;
}

2017년 6월 10일 토요일

레이어에 덮여질 수 있도록 플래시 삽입한 예

레이어에 덮여질 수 있도록 플래시 삽입한 예

아래의 파라미터를 추가한 후 적용되었음 (이 외의 속성값은 별다른 차이가 없었음)
'wmode','transparent'

샘플 코드
<script type="text/javascript">
AC_FL_RunContent( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0', 'width', '109', 'height', '146', 'src', '/flash/quick', 'quality', 'high', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'movie', '/flash/quick', 'wmode', 'transparent' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-xxxx-000000000000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="109" height="146">
<param name="movie" value="/flash/quick.swf" />
<param name="quality" value="high" />
<embed src="/flash/quick.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="109" height="146">
</embed>
</object>
</noscript>

===============================================================================

중국어 입력기 테스트 예

플래시 입력란에 중국어 입력기에서 입력한 내용이 채위지지 않는 문제의 처리
1) 플래시 삽입 object 태그의 wmode 속성을 window로 설정하여 문제를 해결
2) window로 변경 후 플래시 위로 레이어가 올라가지지 않는 문제점이 발생함

사용했던 중국어 입력기 프로그램
sogou_pinyin_61_5864.exe
BaiduPinyinSetup-1_6_1_43.exe

2017년 5월 22일 월요일

HTML : Select 박스를 그룹화 하기 - optgroup

1. optgroup으로 그룹화가 된다.
2. optgroup은 선택되지 않는다.
3. optgroup에 style를 부여하면 하위 option 항목은 같은 style이 적용된다
4. 브라우저 버전에 따라 지원되지 않을 수 있으므로 감안해야한다.

<select name="language">
<optgroup label="Linux" style="color:red">
<option>AUX
<option>Unix
<option>Fedora Linux
</optgroup>
<optgroup label="Windows" style="color:yellow">
<option>WindowsNT
<option>Windows2000
<option>Windows2003
</optgroup>
</select>

html에서 특수문자 표현(작은따옴표)

' 를 표현 하는 방법 --> & #039
!!주의 할 점은 세미콜론이 들어가서는 안됨.

메인 화면을 frame으로 덮기

<html>
<head>
<title>환영합니다</title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<meta name="description" content="서로 독립적인 왼쪽과 오른쪽 프레임을 만듭니다.">
</head>

<frameset rows="*" border="0">
<frame scrolling="auto" marginwidth="0" marginheight="0" src="/front/">
<noframes>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
<p>이 페이지를 보려면, 프레임을 볼 수 있는 브라우저가 필요합니다.</p>
</body>
</noframes>
</frameset>

2017년 5월 21일 일요일

textarea에서 wrap 속성의 사용

* textarea wrap 속성

<textarea wrap=off> 초기값으로 가로 길이를 제한하지 않는다.
<textarea wrap=virtual> 가로 길이만 제한한다.
<textarea wrap=physical> 가로, 세로 길이를 제한한다.
<textarea wrap=hard> textarea 폭만큼 문자열을 잘라서 자동 엔터처리함.

인라인 자동완성 기능 막기

* 인라인 자동완성 기능 막음

(IFRAME으로 처리시 자동완성 박스가 밑으로 떨어지는 문제 해결)

<form autocomplete="off">

iframe를 투명하게 처리하기

캐쉬 설정 (페이지를 열때마다 새로 읽기 설정)

primitives에 추가하는 방법

JSP에서 로그인 문제(이전 창에서 로그인 정보 남아있는 문제) 발생시 아래의 코드를 삽입하여 해결
코드 저장후 해당 페이지를 1회 새로고침 한 후 코드가 적용되었음.
아래의 코드는 인쿠르드 당하는 페이지에도 있어야 잘 작동되었음.

<%
response.setHeader("Cache-Control", "no-cache"); //캐쉬 없애기 HTTP 1.1
response.setHeader("Pragma", "no-cache"); //캐쉬 없애기 HTTP 1.0
response.setDateHeader("Expires", 0); //proxy server에 캐쉬되는 것 막는다.
%>

아래는 <html> 태그 위에 적어서 적용해야한다.

<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

아래는 실제 사용했던 예

<%@ page contentType="text/html; charset=utf-8"%>
<%
response.setHeader("Expires", "0"); //캐시가 만료되어 삭제되는 시간. -1의 캐시유지
response.setHeader("Pragma", "no-cache"); //캐쉬 없애기 HTTP 1.0
response.setHeader("Cache-Control", "no-cache"); //캐쉬 없애기 HTTP 1.1
%>

<META content="no-cache" http-equiv="Pragma">

ajax로 불러올때 실제 사용했던 예

타 이미지가 동일 파일명으로 서비스되야 하는 경우 이전 캐시를 읽지 않도록 처리함

<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

//데이터 요청
$.ajax({
    url : 'list.ajax',
    cache : false, //캡처 사진이 동일명칭이라 캐시의 이미지를 읽지 않도록 캐시 날림
    success : function(result) {
    },
    error : function(request,status,error) {
    }
});

2017년 5월 20일 토요일

이중 submit 되지 않도록 주의 필요

이미지 버튼 클릭시 자동 서브밋 됨.
이미지 버튼에서 스크립트로 서브밋 하면 두번 서브밋 됨

줄바꿈 금지 처리

<table border="1">
<tr>
<td width="200">
<nobr>2222222222222 222222222222222222 22222222222222</nobr>
</td>
<td width="200" nowrap>
2222222222222 222222222222222222 22222222222222
</td>
</tr>
</table>
<table border="1">
<tr>
<td width="200">
<nobr>222222222222222222222222222222222222222222222</nobr>
</td>
<td width="200" nowrap>
222222222222222222222222222222222222222222222
</td>
</tr>
</table>

1. nobr
nobr의 경우 무조건 줄바꿈을 금지한다.
영문, 숫자의 경우 공백이 있건 없건 줄바꿈을 금지한다.
익스플로, 파이어 폭스 모두 사용가능하다.

2. nowrap
nowrap의 경우 영문 또는 숫자이면서 공백이 없는 경우에만 줄바꿈을 금지한다.
익스플로, 파이어 폭스 모두 사용가능하다.

image map 사용하기

image map 사용하기

<map name="menu">
<area shape="rect" coords="261,357,311,381" href="#" onClick="fnFunction()">
<area shape="poly" coords="21,16,33,7,49,13,38,23,20,15" href="#" title="">
</map>
<img src="" usemap="#menu">

tab 키로 포커스 순서 설정하기

* tab로 이동되는 포커스(focus) 설정 : tabindex="2"

META 태그 활용하기

META 태그의 사용

* 사용자의 컴퓨터에 캐시파일 생기지 않게 하기
<META content="no-cache" http-equiv="Pragma">

* 일정 시간이 경과후 이벤트 시행
<meta http-equiv="refresh" content="0;url=/bbs/list.jsp?tb=webqna">
<meta http-equiv="refresh" content="2;self.close()">

* 이미지 툴 바 띄우지 않기
<meta http-equiv="imagetoolbar" content="no">

페이지 내용 퍼가지 못하게 설정

페이지 내용 퍼가지 못하게 설정

* 이것은 오른클릭, 드래그, 셀렉트 막는 방법
<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">

* 이것은 이미지에서 저장하는 박스 안뜨게 하는 방법(2가지)
페이지내 모든 이미지에 적용 : <meta http-equiv="imagetoolbar" content="no">
해당 이미지에만 적용 : <img src="map.gif" galleryimg="no">

* body의 속성
oncontextmenu="javascript:alert('오른 클릭 이용 불가함'); return false"
oncontextmenu="return false"
ondragstart="return false"
onselectstart="return false" //긁어오기 금지
onselect="return false"

플래시 삽입 (투명처리 태그 속성)

플래시 삽입 (투명처리 태그 속성)

lash object wmode 속성
window : 기본값으로 모든 html 엘리먼트 위로 flash 가 나타나구..
opaque : flash 위에 html 엘리먼트를 위치 시킬때
transparent : flash 를 투명하게 하여 flash 아래의 html 엘리먼트가 화면상에 나오게 할때

2017년 5월 17일 수요일

viewport의 사용시 주의사항

viewport의 사용시 주의사항

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"/>
- viewport가 붙으면 모바일에서 글자가 잘보이도록 처리됨.
- viewport가 없으면 모바일에서 페이지 폭 전체가 화면에 들어오도록 축소되어 글자는 잘 보이지 않는 상태가 됨.
- 모바일에서 PC버전 화면이 제대로 나오려면 전체 폭이 고정되거나, 각 레이어의 최소폭(min-width)이 동일해야 함. 만일 각 레이어의 폭이 들쭉날쭉한 경우 잘 작동되지 않았음.
- PC 버전에서는 viewport가 붙지 않는 것이 좋겠음
- 반응형인 경우 viewport가 필요할 것임