tolag3/kcc_adr_advc_git
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2024/03/20 [웹접근성 수정] 팝업 탭순서, 튜토리얼 alt 값 수정

Browse Source
This commit is contained in:
subsub 2024-03-20 14:40:22 +09:00
parent 639b584c37
commit 84229b07f6
10 changed files with 106 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/main/webapp/WEB-INF/jsp/web/kccadr/accdnt/arc/corReqCreate.jsp
View File

@ -346,6 +346,7 @@
<option value="yahoo.co.kr">yahoo.co.kr</option>
<option value="korea.com">korea.com</option>
</select> -->
<label for="rpplEmail03" class="label">이메일 공급자 선택</label>
<kc:select codeId="ADR030" defaultText="직접입력" id="rpplEmail03" name="rpplEmail03" defaultValue="" onChange="emailSelect(this);" styleClass="email_select" />
</td>
</tr>

3
src/main/webapp/WEB-INF/jsp/web/kccadr/accdnt/ars/tab/adjstReqStatusTabDetail.jsp
View File

@ -210,12 +210,13 @@
</div>
</c:if>
<c:if test="${!empty dlvinfoList }">
<label for="dlvryInfoSelect" class="label">송달정보 조회 선택</label>
<select class="exp_select" id="dlvryInfoSelect">
<c:forEach var="option" items="${dlvinfoList}" varStatus="status">
<option value="${option.regNm}"><kc:code codeId="CC004" code="${option.dlvryDocTy}"/></option>
</c:forEach>
</select>
<button type="button" class="btnType07" onclick="fnPostChk();" style="vertical-align:middle;">송달정보 조회</button>
<button type="button" class="btnType07" onclick="fnPostChk();" style="vertical-align:middle;" title="새창열림">송달정보 조회</button>
</c:if>
</div>
<table class="tbType01">

2
src/main/webapp/WEB-INF/jsp/web/kccadr/accdnt/ars/tab/docIssDetail.jsp
View File

@ -301,7 +301,7 @@
</table>
<div class="btn_wrap">
<button class="btnType01 tooltip-close" data-focus="fee_popup_close">닫기</button>
<button class="btnType01 tooltip-close" data-focus-next="fee_popup">닫기</button>
</div>
</div>
</div>

12
src/main/webapp/WEB-INF/jsp/web/kccadr/adjst/adjstProgressTutorial.jsp
View File

@ -39,11 +39,14 @@
var imgSrc = $("img").prop("src");
if(imgSrc.indexOf("progress_04.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/progress_03.gif");
$("img").attr("alt","[현재 조정상태를 보여줍니다.] - 조정상태 : 작성중, 수정요청, 직권조정, 조정신청서 제출, 보완요청");
$(".right_mask").removeClass("last");
}else if(imgSrc.indexOf("progress_03.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/progress_02.gif");
$("img").attr("alt","[검색조건을 클릭하고 검색어를 입력하세요.] - 조정번호, 접수기간, 신청인명, 피신청인명, 신청내용, 진행상태, 검색어를 입력하세요. 검색");
}else if(imgSrc.indexOf("progress_02.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/progress_01.gif");
$("img").attr("alt","[전체, 신청, 진행 버튼을 클릭하면 선택한 목록이 보입니다.] - 전체 ｜ 신청 ｜ 진행");
$(".left_mask").addClass("first");
}
});
@ -52,11 +55,14 @@
var imgSrc = $("img").prop("src");
if(imgSrc.indexOf("01.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/progress_02.gif");
$("img").attr("alt","[검색조건을 클릭하고 검색어를 입력하세요.] - 조정번호, 접수기간, 신청인명, 피신청인명, 신청내용, 진행상태, 검색어를 입력하세요. 검색");
$(".left_mask").removeClass("first");
}else if(imgSrc.indexOf("progress_02.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/progress_03.gif");
$("img").attr("alt","[현재 조정상태를 보여줍니다.] - 조정상태 : 작성중, 수정요청, 직권조정, 조정신청서 제출, 보완요청");
}else if(imgSrc.indexOf("progress_03.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/progress_04.gif");
$("img").attr("alt","[조정신청 페이지로 이동합니다.] - 신규조정신청 바로가기");
$(".right_mask").addClass("last");
}
});
@ -65,11 +71,11 @@
</head>
<body>
<div class="mask">
<div class="left_mask first"></div>
<div class="right_mask"></div>
<div class="left_mask first"><button type="button" class="btn_prev"><i></i> 이전</button></div>
<div class="right_mask"><button type="button" class="btn_next"><i></i> 다음</button></div>
</div>
<div class="tutorial">
<img src="/kccadrPb/tutorial/image/progress_01.gif" alt="">
<img src="/kccadrPb/tutorial/image/progress_01.gif" alt="[전체, 신청, 진행 버튼을 클릭하면 선택한 목록이 보입니다.] - 전체 ｜ 신청 ｜ 진행">
</div>
</body>
</html>

46
src/main/webapp/WEB-INF/jsp/web/kccadr/adjst/adjstReqRegistTutorial.jsp
View File

@ -34,56 +34,76 @@
var imgSrc = $("img").prop("src");
if(imgSrc.indexOf("19.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/18.gif");
$("img").attr("alt","[조정신청서 제출 버튼을 클릭합니다.] - 조정신청서 제출");
$("body,html").animate({scrollTop : 600}, 400);
$(".right_mask").removeClass("last");
}else if(imgSrc.indexOf("18.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/17.gif");
$("img").attr("alt","[예문을 확인해보세요] - 예문 : 조정신청 예문 *신청취지 *귀하가 권리자인 경우 1)피신청인은 신청인에게 저작권 침해에 따른 손해배상 및 위자료로서 금 □□□□원을 지급한다.라는 조정을 구합니다 2)피신청인은 신청인의 본 건 저작물에 대해 조정성립일 이후의 이용을 금지한다.라는 조정을 구합니다. 3)피신청인이 제작, 보유하고 있는 본 건 침해저작물을 조정성립일로부터 ○○일 이내에 폐기처분한다.라는 조정을 구합니다. *귀하가 침해자인 경우 1)신청인은 피신청인과의 저작권 관련 분쟁에 있어 금 □□□□원 이하로의 손해배상 및 위자료의 조정을 구합니다. 닫기");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("17.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/16.gif");
$("img").attr("alt","[신청 취지/이유를 입력해주세요] - (필수입력)신청취지 예문 : 신청취지 입력 (필수입력)신청이유 예문 : 신청이유 입력 (필수입력)소명자료 신청취지 또는 신청이유를 객관적으로 소명할 수 있는 근거자료를 파일로 첨부합니다. 파일첩무하기(*파일 종류 및 수량에 제한이 없습니다.) 파일명, 종류, 크기 첨부하실 파일을 마우스로 끌어서 넣어주세요. 담당 조정조사관이 서류를 검토한 후 서류보완을 요청할 수 있습니다.");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("16.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/15.gif");
$("img").attr("alt","[저작물 종류를 선택해주세요.] - (필수입력)저작물 종류 : 선택, 어문저작물, 음악저작물, 연극저작물, 사진저작물, 영상저작물, 도형저작물, 컴퓨터프로그램, 편집저작물, 데이터베이스, 저작인격권, 저작인접물");
$("body,html").animate({scrollTop : 300}, 400);
}else if(imgSrc.indexOf("15.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/14.gif");
$("img").attr("alt","[3단계 이동버튼을 클릭합니다.] - 3단계 이동");
$("body,html").animate({scrollTop : 600}, 400);
}else if(imgSrc.indexOf("14.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/13.gif");
$("img").attr("alt","[우편물 수령지를 선택하실 수 있습니다.] - 우편물 수령지로 선택");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("13.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/12.gif");
$("img").attr("alt","[우편번호를 검색해주세요] - 우편번호 검색 / 새창팝업 주소검색");
$("body,html").animate({scrollTop : 550}, 400);
}else if(imgSrc.indexOf("12.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/11.gif");
$("img").attr("alt","[피신청인 정보를 입력해주세요.] - (필수입력)피신청인 이름 : 피신청인 이름 입력 (필수입력)피신청인 사업자 등록번호 : 피신청인 사업자등록번호 입력 (필수입력)주소 : 우편번호 입력, 우편번호 검색, 주소를 입력해주세요,상세주소를 입력해주세요., 우편물 수령지로 선택 (필수입력)이메일 : 이메일 아이디입력 @ 이메일공급자 입력 이메일공급자 선택, 이메일 주소 모름 (필수입력)연락처 : 핸드폰 앞자리 입력, 핸드폰 가운데자리 입력, 핸드폰 마지막자리 입력 (필수입력)이메일 수신여부 : 수신 / 수신하지 않음 (필수입력)SMS수신여부 : 수신 / 수신하지 않음 (필수입력) 우편물 수령지 ※ 기일통지서, 답변서 등 조정진행 관련 문서들이 우편으로 발송됩니다. 실제 우편물 수령이 가능한 주소를 입력하시기 바랍니다. : 우편번호 입력, 우편번호 검색, 주소를 입력해주세요, 상세주소를 입력해주세요.");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("11.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/10.gif");
$("img").attr("alt","[피신청인 분류를 선택해주세요.] - (필수입력)피신청인 분류 : 개인/법인/개인사업자");
$("body,html").animate({scrollTop : 0}, 400);
}else if(imgSrc.indexOf("10.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/09.gif");
$("img").attr("alt","[피신청인을 추가할 수 있습니다.] - 피신청인 추가");
$("body,html").animate({scrollTop : 0}, 400);
}else if(imgSrc.indexOf("09.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/08.gif");
$("img").attr("alt","[2단계 이동버튼을 클릭합니다.] - 2단계 이동");
$("body,html").animate({scrollTop : 600}, 400);
}else if(imgSrc.indexOf("08.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/07.gif");
$("img").attr("alt","[우편물 수령지를 선택하실 수 있습니다.] - 우편물 수령지로 선택");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("07.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/06.gif");
$("img").attr("alt","[우편번호를 검색해주세요] - 우편번호 검색 / 새창팝업 주소검색");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("06.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/05.gif");
$("img").attr("alt","[신청인 정보를 입력해주세요.] - (필수입력)신청인 이름 : 신청인 이름 입력, (필수입력)주소 : 우편번호 입력, 우편번호 검색, 주소를 입력해주세요,상세주소를 입력해주세요., 우편물 수령지로 선택 (필수입력)이메일 : 이메일 아이디입력 @ 이메일공급자 입력 이메일공급자 선택 (필수입력)연락처 : 핸드폰 앞자리 입력, 핸드폰 가운데자리 입력, 핸드폰 마지막자리 입력 (필수입력)이메일 수신여부 : 수신 / 수신하지 않음 (필수입력)SMS수신여부 : 수신 / 수신하지 않음 (필수입력) 우편물 수령지 ※ 기일통지서, 답변서 등 조정진행 관련 문서들이 우편으로 발송됩니다. 실제 우편물 수령이 가능한 주소를 입력하시기 바랍니다. : 우편번호 입력, 우편번호 검색, 주소를 입력해주세요, 상세주소를 입력해주세요.");
}else if(imgSrc.indexOf("05.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/04.gif");
$("img").attr("alt","[신청인 분류를 선택해주세요] - (필수입력)신청인 분류 개인/법인/개인사업자");
$("body,html").animate({scrollTop : 0}, 400);
}else if(imgSrc.indexOf("04.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/03.gif");
$("img").attr("alt","[조정신청 버튼을 클릭합니다.] - 조정신청");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("03.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/02.gif");
$("img").attr("alt","[당사자 본인인지, 당사자의 대리인인지 선택해주세요.] - 네, 본인입니다. / 아니오, 대리인(변호사, 가족, 직원)입니다. ※ 외국인인 경우 한국인 대리 신청만 가능");
}else if(imgSrc.indexOf("02.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/01.gif");
$("img").attr("alt","[분쟁 당사자 중 저작권자인지, 이용자인지 선택해주세요.] - 네, 권리자입니다./아니오, 이용자입니다.");
$("body,html").animate({scrollTop : 0}, 400);
$(".left_mask").addClass("first");
}
});
@ -91,57 +111,77 @@
var imgSrc = $("img").prop("src");
if(imgSrc.indexOf("01.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/02.gif");
$("img").attr("alt","[당사자 본인인지, 당사자의 대리인인지 선택해주세요.] - 네, 본인입니다. / 아니오, 대리인(변호사, 가족, 직원)입니다. ※ 외국인인 경우 한국인 대리 신청만 가능");
$("body,html").animate({scrollTop : 400}, 400);
$(".left_mask").removeClass("first");
}else if(imgSrc.indexOf("02.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/03.gif");
$("img").attr("alt","[조정신청 버튼을 클릭합니다.] - 조정신청");
}else if(imgSrc.indexOf("03.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/04.gif");
$("img").attr("alt","[신청인 분류를 선택해주세요] - (필수입력)신청인 분류 개인/법인/개인사업자");
$("body,html").animate({scrollTop : 0}, 400);
}else if(imgSrc.indexOf("04.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/05.gif");
$("img").attr("alt","[신청인 정보를 입력해주세요.] - (필수입력)신청인 이름 : 신청인 이름 입력, (필수입력)주소 : 우편번호 입력, 우편번호 검색, 주소를 입력해주세요,상세주소를 입력해주세요., 우편물 수령지로 선택 (필수입력)이메일 : 이메일 아이디입력 @ 이메일공급자 입력 이메일공급자 선택 (필수입력)연락처 : 핸드폰 앞자리 입력, 핸드폰 가운데자리 입력, 핸드폰 마지막자리 입력 (필수입력)이메일 수신여부 : 수신 / 수신하지 않음 (필수입력)SMS수신여부 : 수신 / 수신하지 않음 (필수입력) 우편물 수령지 ※ 기일통지서, 답변서 등 조정진행 관련 문서들이 우편으로 발송됩니다. 실제 우편물 수령이 가능한 주소를 입력하시기 바랍니다. : 우편번호 입력, 우편번호 검색, 주소를 입력해주세요, 상세주소를 입력해주세요.");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("05.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/06.gif");
$("img").attr("alt","[우편번호를 검색해주세요] - 우편번호 검색 / 새창팝업 주소검색");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("06.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/07.gif");
$("img").attr("alt","[우편물 수령지를 선택하실 수 있습니다.] - 우편물 수령지로 선택");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("07.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/08.gif");
$("img").attr("alt","[2단계 이동버튼을 클릭합니다.] - 2단계 이동");
$("body,html").animate({scrollTop : 600}, 400);
}else if(imgSrc.indexOf("08.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/09.gif");
$("img").attr("alt","[피신청인을 추가할 수 있습니다.] - 피신청인 추가");
$("body,html").animate({scrollTop : 0}, 400);
}else if(imgSrc.indexOf("09.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/10.gif");
$("img").attr("alt","[피신청인 분류를 선택해주세요.] - (필수입력)피신청인 분류 : 개인/법인/개인사업자");
$("body,html").animate({scrollTop : 0}, 400);
}else if(imgSrc.indexOf("10.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/11.gif");
$("img").attr("alt","[피신청인 정보를 입력해주세요.] - (필수입력)피신청인 이름 : 피신청인 이름 입력 (필수입력)피신청인 사업자 등록번호 : 피신청인 사업자등록번호 입력 (필수입력)주소 : 우편번호 입력, 우편번호 검색, 주소를 입력해주세요,상세주소를 입력해주세요., 우편물 수령지로 선택 (필수입력)이메일 : 이메일 아이디입력 @ 이메일공급자 입력 이메일공급자 선택, 이메일 주소 모름 (필수입력)연락처 : 핸드폰 앞자리 입력, 핸드폰 가운데자리 입력, 핸드폰 마지막자리 입력 (필수입력)이메일 수신여부 : 수신 / 수신하지 않음 (필수입력)SMS수신여부 : 수신 / 수신하지 않음 (필수입력) 우편물 수령지 ※ 기일통지서, 답변서 등 조정진행 관련 문서들이 우편으로 발송됩니다. 실제 우편물 수령이 가능한 주소를 입력하시기 바랍니다. : 우편번호 입력, 우편번호 검색, 주소를 입력해주세요, 상세주소를 입력해주세요.");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("11.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/12.gif");
$("img").attr("alt","[우편번호를 검색해주세요] - 우편번호 검색 / 새창팝업 주소검색");
$("body,html").animate({scrollTop : 500}, 400);
}else if(imgSrc.indexOf("12.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/13.gif");
$("img").attr("alt","[우편물 수령지를 선택하실 수 있습니다.] - 우편물 수령지로 선택");
$("body,html").animate({scrollTop : 500}, 400);
}else if(imgSrc.indexOf("13.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/14.gif");
$("img").attr("alt","[3단계 이동버튼을 클릭합니다.] - 3단계 이동");
$("body,html").animate({scrollTop : 600}, 400);
}else if(imgSrc.indexOf("14.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/15.gif");
$("img").attr("alt","[저작물 종류를 선택해주세요.] - (필수입력)저작물 종류 : 선택, 어문저작물, 음악저작물, 연극저작물, 사진저작물, 영상저작물, 도형저작물, 컴퓨터프로그램, 편집저작물, 데이터베이스, 저작인격권, 저작인접물");
$("body,html").animate({scrollTop : 300}, 400);
}else if(imgSrc.indexOf("15.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/16.gif");
$("img").attr("alt","[신청 취지/이유를 입력해주세요] - (필수입력)신청취지 예문 : 신청취지 입력 (필수입력)신청이유 예문 : 신청이유 입력 (필수입력)소명자료 신청취지 또는 신청이유를 객관적으로 소명할 수 있는 근거자료를 파일로 첨부합니다. 파일첩무하기(*파일 종류 및 수량에 제한이 없습니다.) 파일명, 종류, 크기 첨부하실 파일을 마우스로 끌어서 넣어주세요. 담당 조정조사관이 서류를 검토한 후 서류보완을 요청할 수 있습니다.");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("16.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/17.gif");
$("img").attr("alt","[예문을 확인해보세요] - 예문 : 조정신청 예문 *신청취지 *귀하가 권리자인 경우 1)피신청인은 신청인에게 저작권 침해에 따른 손해배상 및 위자료로서 금 □□□□원을 지급한다.라는 조정을 구합니다 2)피신청인은 신청인의 본 건 저작물에 대해 조정성립일 이후의 이용을 금지한다.라는 조정을 구합니다. 3)피신청인이 제작, 보유하고 있는 본 건 침해저작물을 조정성립일로부터 ○○일 이내에 폐기처분한다.라는 조정을 구합니다. *귀하가 침해자인 경우 1)신청인은 피신청인과의 저작권 관련 분쟁에 있어 금 □□□□원 이하로의 손해배상 및 위자료의 조정을 구합니다. 닫기");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("17.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/18.gif");
$("img").attr("alt","[조정신청서 제출 버튼을 클릭합니다.] - 조정신청서 제출");
$("body,html").animate({scrollTop : 600}, 400);
}else if(imgSrc.indexOf("18.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/19.gif");
$("img").attr("alt","[조정신청이 완료되었습니다.]");
$("body,html").animate({scrollTop : 300}, 400);
$(".right_mask").addClass("last");
}
});
@ -150,11 +190,11 @@
</head>
<body>
<div class="mask">
<div class="left_mask"></div>
<div class="right_mask"></div>
<div class="left_mask first"><button type="button" class="btn_prev"><i></i> 이전</button></div>
<div class="right_mask"><button type="button" class="btn_next"><i></i> 다음</button></div>
</div>
<div class="tutorial">
<img src="/kccadrPb/tutorial/image/01.gif" alt="">
<img src="/kccadrPb/tutorial/image/01.gif" alt="[분쟁 당사자 중 저작권자인지, 이용자인지 선택해주세요.] - 네, 권리자입니다./아니오, 이용자입니다.">
</div>
</body>
</html>

5
src/main/webapp/kccadrPb/tutorial/css/reset.css
View File

@ -40,4 +40,7 @@ select:disabled,select[disabled="disabled"]{background-color: #eee !important; c
/* a:hover, a:active,a:hover:active { outline: none; }
a:focus:not(:focus) {outline: none;}
a:focus:not(:focus-visible){outline: none;} */
a:focus:not(:focus-visible){outline: none;} */
/* 폰트 */
@font-face{font-family:'Noto Sans KR';font-style:normal;font-weight:300;src:url('/kccadrPb/usr/css/font/NotoSansKR-Light.woff') format('woff'),url('/kccadrPb/usr/css/font/NotoSansKR-Light.woff2') format('woff2'),url('/kccadrPb/usr/css/font/NotoSansKR-Light.ttf') format('truetype');font-display:block}@font-face{font-family:'Noto Sans KR';font-style:normal;font-weight:400;src:url('/kccadrPb/usr/css/font/NotoSansKR-Regular.woff') format('woff'),url('/kccadrPb/usr/css/font/NotoSansKR-Regular.woff2') format('woff2'),url('/kccadrPb/usr/css/font/NotoSansKR-Regular.ttf') format('truetype');font-display:block}@font-face{font-family:'Noto Sans KR';font-style:normal;font-weight:500;src:url('/kccadrPb/usr/css/font/NotoSansKR-Medium.woff') format('woff'),url('/kccadrPb/usr/css/font/NotoSansKR-Medium.woff2') format('woff2'),url('/kccadrPb/usr/css/font/NotoSansKR-Medium.ttf') format('truetype');font-display:block}@font-face{font-family:'Noto Sans KR';font-style:normal;font-weight:700;src:url('/kccadrPb/usr/css/font/NotoSansKR-Bold.woff') format('woff'),url('/kccadrPb/usr/css/font/NotoSansKR-Bold.woff2') format('woff2'),url('/kccadrPb/usr/css/font/NotoSansKR-Bold.ttf') format('truetype');font-display:block}@font-face{font-family:'Noto Sans KR';font-style:normal;font-weight:800;src:url('/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.woff') format('woff'),url('/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.woff2') format('woff2'),url('/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.ttf') format('truetype');font-display:block}

10
src/main/webapp/kccadrPb/tutorial/css/tutorial.css
View File

@ -3,9 +3,13 @@ body{position: relative; width: 100%; height: 100%;}
.tutorial img{position: absolute;width:100%; left: 50%;top: 0;transform: translateX(-50%);}
.mask{position: fixed; display: flex; width: 100%; height: 100%; left: 0; top: 0; z-index: 5;}
.left_mask,.right_mask{width: 50%; height: 100%; background-color: transparent; background-repeat: no-repeat;}
.left_mask{background-image: url(/kccadrPb/tutorial/image/prev_btn.png); background-position: 10% center;}
.left_mask.first,.right_mask.last{background-image: none;}
.right_mask{background-image: url(/kccadrPb/tutorial/image/next_btn.png);background-position: 90% center;}
.left_mask button,.right_mask button{position:absolute;width:80px;height:150px;margin:0;padding:0;top:50%;transform:translateY(-50%);font-size:19px;font-weight:300;color:#fff;text-align:center;letter-spacing:1px;}
.left_mask button{left:10%;}
.right_mask button{right:10%;}
.left_mask.first button,.right_mask.last button{display:none;}
.left_mask button i,.right_mask button i{display:inline-block;width:80px;height:80px;margin:0 0 10px 0;}
.left_mask button i{background:url(/kccadrPb/tutorial/image/prev_btn.png) no-repeat center center;}
.right_mask button i{background:url(/kccadrPb/tutorial/image/next_btn.png) no-repeat center center;}
@media all and (max-width: 1800px){
.tutorial img{width: 100%; min-width: 1680px;}
}

BIN
src/main/webapp/kccadrPb/tutorial/image/next_btn.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
src/main/webapp/kccadrPb/tutorial/image/prev_btn.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

42
src/main/webapp/kccadrPb/tutorial/tutorial.html
View File

@ -19,56 +19,74 @@
var imgSrc = $("img").prop("src");
if(imgSrc.indexOf("19.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/18.gif");
$("img").attr("alt","[조정신청서 제출 버튼을 클릭합니다.] - 조정신청서 제출");
$("body,html").animate({scrollTop : 600}, 400);
$(".right_mask").removeClass("last");
}else if(imgSrc.indexOf("18.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/17.gif");
$("img").attr("alt","[예문을 확인해보세요] - 예문 : 조정신청 예문 *신청취지 *귀하가 권리자인 경우 1)피신청인은 신청인에게 저작권 침해에 따른 손해배상 및 위자료로서 금 □□□□원을 지급한다.라는 조정을 구합니다 2)피신청인은 신청인의 본 건 저작물에 대해 조정성립일 이후의 이용을 금지한다.라는 조정을 구합니다. 3)피신청인이 제작, 보유하고 있는 본 건 침해저작물을 조정성립일로부터 ○○일 이내에 폐기처분한다.라는 조정을 구합니다. *귀하가 침해자인 경우 1)신청인은 피신청인과의 저작권 관련 분쟁에 있어 금 □□□□원 이하로의 손해배상 및 위자료의 조정을 구합니다. 닫기");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("17.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/16.gif");
$("img").attr("alt","[신청 취지/이유를 입력해주세요] - (필수입력)신청취지 예문 : 신청취지 입력 (필수입력)신청이유 예문 : 신청이유 입력 (필수입력)소명자료 신청취지 또는 신청이유를 객관적으로 소명할 수 있는 근거자료를 파일로 첨부합니다. 파일첩무하기(*파일 종류 및 수량에 제한이 없습니다.) 파일명, 종류, 크기 첨부하실 파일을 마우스로 끌어서 넣어주세요. 담당 조정조사관이 서류를 검토한 후 서류보완을 요청할 수 있습니다.");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("16.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/15.gif");
$("img").attr("alt","[저작물 종류를 선택해주세요.] - (필수입력)저작물 종류 : 선택, 어문저작물, 음악저작물, 연극저작물, 사진저작물, 영상저작물, 도형저작물, 컴퓨터프로그램, 편집저작물, 데이터베이스, 저작인격권, 저작인접물");
$("body,html").animate({scrollTop : 300}, 400);
}else if(imgSrc.indexOf("15.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/14.gif");
$("img").attr("alt","[3단계 이동버튼을 클릭합니다.] - 3단계 이동");
$("body,html").animate({scrollTop : 600}, 400);
}else if(imgSrc.indexOf("14.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/13.gif");
$("img").attr("alt","[우편물 수령지를 선택하실 수 있습니다.] - 우편물 수령지로 선택");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("13.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/12.gif");
$("img").attr("alt","[우편번호를 검색해주세요] - 우편번호 검색 / 새창팝업 주소검색");
$("body,html").animate({scrollTop : 550}, 400);
}else if(imgSrc.indexOf("12.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/11.gif");
$("img").attr("alt","[피신청인 정보를 입력해주세요.] - (필수입력)피신청인 이름 : 피신청인 이름 입력 (필수입력)피신청인 사업자 등록번호 : 피신청인 사업자등록번호 입력 (필수입력)주소 : 우편번호 입력, 우편번호 검색, 주소를 입력해주세요,상세주소를 입력해주세요., 우편물 수령지로 선택 (필수입력)이메일 : 이메일 아이디입력 @ 이메일공급자 입력 이메일공급자 선택, 이메일 주소 모름 (필수입력)연락처 : 핸드폰 앞자리 입력, 핸드폰 가운데자리 입력, 핸드폰 마지막자리 입력 (필수입력)이메일 수신여부 : 수신 / 수신하지 않음 (필수입력)SMS수신여부 : 수신 / 수신하지 않음 (필수입력) 우편물 수령지 ※ 기일통지서, 답변서 등 조정진행 관련 문서들이 우편으로 발송됩니다. 실제 우편물 수령이 가능한 주소를 입력하시기 바랍니다. : 우편번호 입력, 우편번호 검색, 주소를 입력해주세요, 상세주소를 입력해주세요.");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("11.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/10.gif");
$("img").attr("alt","[피신청인 분류를 선택해주세요.] - (필수입력)피신청인 분류 : 개인/법인/개인사업자");
$("body,html").animate({scrollTop : 0}, 400);
}else if(imgSrc.indexOf("10.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/09.gif");
$("img").attr("alt","[피신청인을 추가할 수 있습니다.] - 피신청인 추가");
$("body,html").animate({scrollTop : 0}, 400);
}else if(imgSrc.indexOf("09.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/08.gif");
$("img").attr("alt","[2단계 이동버튼을 클릭합니다.] - 2단계 이동");
$("body,html").animate({scrollTop : 600}, 400);
}else if(imgSrc.indexOf("08.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/07.gif");
$("img").attr("alt","[우편물 수령지를 선택하실 수 있습니다.] - 우편물 수령지로 선택");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("07.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/06.gif");
$("img").attr("alt","[우편번호를 검색해주세요] - 우편번호 검색 / 새창팝업 주소검색");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("06.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/05.gif");
$("img").attr("alt","[신청인 정보를 입력해주세요.] - (필수입력)신청인 이름 : 신청인 이름 입력, (필수입력)주소 : 우편번호 입력, 우편번호 검색, 주소를 입력해주세요,상세주소를 입력해주세요., 우편물 수령지로 선택 (필수입력)이메일 : 이메일 아이디입력 @ 이메일공급자 입력 이메일공급자 선택 (필수입력)연락처 : 핸드폰 앞자리 입력, 핸드폰 가운데자리 입력, 핸드폰 마지막자리 입력 (필수입력)이메일 수신여부 : 수신 / 수신하지 않음 (필수입력)SMS수신여부 : 수신 / 수신하지 않음 (필수입력) 우편물 수령지 ※ 기일통지서, 답변서 등 조정진행 관련 문서들이 우편으로 발송됩니다. 실제 우편물 수령이 가능한 주소를 입력하시기 바랍니다. : 우편번호 입력, 우편번호 검색, 주소를 입력해주세요, 상세주소를 입력해주세요.");
}else if(imgSrc.indexOf("05.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/04.gif");
$("img").attr("alt","[신청인 분류를 선택해주세요] - (필수입력)신청인 분류 개인/법인/개인사업자");
$("body,html").animate({scrollTop : 0}, 400);
}else if(imgSrc.indexOf("04.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/03.gif");
$("img").attr("alt","[조정신청 버튼을 클릭합니다.] - 조정신청");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("03.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/02.gif");
$("img").attr("alt","[당사자 본인인지, 당사자의 대리인인지 선택해주세요.] - 네, 본인입니다. / 아니오, 대리인(변호사, 가족, 직원)입니다. ※ 외국인인 경우 한국인 대리 신청만 가능");
}else if(imgSrc.indexOf("02.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/01.gif");
$("img").attr("alt","[분쟁 당사자 중 저작권자인지, 이용자인지 선택해주세요.] - 네, 권리자입니다./아니오, 이용자입니다.");
$("body,html").animate({scrollTop : 0}, 400);
$(".left_mask").addClass("first");
}
@ -78,57 +96,75 @@
var imgSrc = $("img").prop("src");
if(imgSrc.indexOf("01.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/02.gif");
$("img").attr("alt","[당사자 본인인지, 당사자의 대리인인지 선택해주세요.] - 네, 본인입니다. / 아니오, 대리인(변호사, 가족, 직원)입니다. ※ 외국인인 경우 한국인 대리 신청만 가능");
$("body,html").animate({scrollTop : 400}, 400);
$(".left_mask").removeClass("first");
}else if(imgSrc.indexOf("02.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/03.gif");
$("img").attr("alt","[조정신청 버튼을 클릭합니다.] - 조정신청");
}else if(imgSrc.indexOf("03.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/04.gif");
$("img").attr("alt","[신청인 분류를 선택해주세요] - (필수입력)신청인 분류 개인/법인/개인사업자");
$("body,html").animate({scrollTop : 0}, 400);
}else if(imgSrc.indexOf("04.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/05.gif");
$("img").attr("alt","[신청인 정보를 입력해주세요.] - (필수입력)신청인 이름 : 신청인 이름 입력, (필수입력)주소 : 우편번호 입력, 우편번호 검색, 주소를 입력해주세요,상세주소를 입력해주세요., 우편물 수령지로 선택 (필수입력)이메일 : 이메일 아이디입력 @ 이메일공급자 입력 이메일공급자 선택 (필수입력)연락처 : 핸드폰 앞자리 입력, 핸드폰 가운데자리 입력, 핸드폰 마지막자리 입력 (필수입력)이메일 수신여부 : 수신 / 수신하지 않음 (필수입력)SMS수신여부 : 수신 / 수신하지 않음 (필수입력) 우편물 수령지 ※ 기일통지서, 답변서 등 조정진행 관련 문서들이 우편으로 발송됩니다. 실제 우편물 수령이 가능한 주소를 입력하시기 바랍니다. : 우편번호 입력, 우편번호 검색, 주소를 입력해주세요, 상세주소를 입력해주세요.");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("05.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/06.gif");
$("img").attr("alt","[우편번호를 검색해주세요] - 우편번호 검색 / 새창팝업 주소검색");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("06.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/07.gif");
$("img").attr("alt","[우편물 수령지를 선택하실 수 있습니다.] - 우편물 수령지로 선택");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("07.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/08.gif");
$("img").attr("alt","[2단계 이동버튼을 클릭합니다.] - 2단계 이동");
$("body,html").animate({scrollTop : 600}, 400);
}else if(imgSrc.indexOf("08.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/09.gif");
$("img").attr("alt","[피신청인을 추가할 수 있습니다.] - 피신청인 추가");
$("body,html").animate({scrollTop : 0}, 400);
}else if(imgSrc.indexOf("09.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/10.gif");
$("img").attr("alt","[피신청인 분류를 선택해주세요.] - (필수입력)피신청인 분류 : 개인/법인/개인사업자");
$("body,html").animate({scrollTop : 0}, 400);
}else if(imgSrc.indexOf("10.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/11.gif");
$("img").attr("alt","[피신청인 정보를 입력해주세요.] - (필수입력)피신청인 이름 : 피신청인 이름 입력 (필수입력)피신청인 사업자 등록번호 : 피신청인 사업자등록번호 입력 (필수입력)주소 : 우편번호 입력, 우편번호 검색, 주소를 입력해주세요,상세주소를 입력해주세요., 우편물 수령지로 선택 (필수입력)이메일 : 이메일 아이디입력 @ 이메일공급자 입력 이메일공급자 선택, 이메일 주소 모름 (필수입력)연락처 : 핸드폰 앞자리 입력, 핸드폰 가운데자리 입력, 핸드폰 마지막자리 입력 (필수입력)이메일 수신여부 : 수신 / 수신하지 않음 (필수입력)SMS수신여부 : 수신 / 수신하지 않음 (필수입력) 우편물 수령지 ※ 기일통지서, 답변서 등 조정진행 관련 문서들이 우편으로 발송됩니다. 실제 우편물 수령이 가능한 주소를 입력하시기 바랍니다. : 우편번호 입력, 우편번호 검색, 주소를 입력해주세요, 상세주소를 입력해주세요.");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("11.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/12.gif");
$("img").attr("alt","[우편번호를 검색해주세요] - 우편번호 검색 / 새창팝업 주소검색");
$("body,html").animate({scrollTop : 500}, 400);
}else if(imgSrc.indexOf("12.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/13.gif");
$("img").attr("alt","[우편물 수령지를 선택하실 수 있습니다.] - 우편물 수령지로 선택");
$("body,html").animate({scrollTop : 500}, 400);
}else if(imgSrc.indexOf("13.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/14.gif");
$("img").attr("alt","[3단계 이동버튼을 클릭합니다.] - 3단계 이동");
$("body,html").animate({scrollTop : 600}, 400);
}else if(imgSrc.indexOf("14.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/15.gif");
$("img").attr("alt","[저작물 종류를 선택해주세요.] - (필수입력)저작물 종류 : 선택, 어문저작물, 음악저작물, 연극저작물, 사진저작물, 영상저작물, 도형저작물, 컴퓨터프로그램, 편집저작물, 데이터베이스, 저작인격권, 저작인접물");
$("body,html").animate({scrollTop : 300}, 400);
}else if(imgSrc.indexOf("15.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/16.gif");
$("img").attr("alt","[신청 취지/이유를 입력해주세요] - (필수입력)신청취지 예문 : 신청취지 입력 (필수입력)신청이유 예문 : 신청이유 입력 (필수입력)소명자료 신청취지 또는 신청이유를 객관적으로 소명할 수 있는 근거자료를 파일로 첨부합니다. 파일첩무하기(*파일 종류 및 수량에 제한이 없습니다.) 파일명, 종류, 크기 첨부하실 파일을 마우스로 끌어서 넣어주세요. 담당 조정조사관이 서류를 검토한 후 서류보완을 요청할 수 있습니다.");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("16.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/17.gif");
$("img").attr("alt","[예문을 확인해보세요] - 예문 : 조정신청 예문 *신청취지 *귀하가 권리자인 경우 1)피신청인은 신청인에게 저작권 침해에 따른 손해배상 및 위자료로서 금 □□□□원을 지급한다.라는 조정을 구합니다 2)피신청인은 신청인의 본 건 저작물에 대해 조정성립일 이후의 이용을 금지한다.라는 조정을 구합니다. 3)피신청인이 제작, 보유하고 있는 본 건 침해저작물을 조정성립일로부터 ○○일 이내에 폐기처분한다.라는 조정을 구합니다. *귀하가 침해자인 경우 1)신청인은 피신청인과의 저작권 관련 분쟁에 있어 금 □□□□원 이하로의 손해배상 및 위자료의 조정을 구합니다. 닫기");
$("body,html").animate({scrollTop : 400}, 400);
}else if(imgSrc.indexOf("17.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/18.gif");
$("img").attr("alt","[조정신청서 제출 버튼을 클릭합니다.] - 조정신청서 제출");
$("body,html").animate({scrollTop : 600}, 400);
}else if(imgSrc.indexOf("18.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/19.gif");
$("img").attr("alt","[조정신청이 완료되었습니다.]");
$("body,html").animate({scrollTop : 300}, 400);
$(".right_mask").addClass("last");
}
@ -139,11 +175,11 @@
</head>
<body>
<div class="mask">
<div class="left_mask first"></div>
<div class="right_mask"></div>
<div class="left_mask first"><button type="button" class="btn_prev"><i></i> 이전</button></div>
<div class="right_mask"><button type="button" class="btn_next"><i></i> 다음</button></div>
</div>
<div class="tutorial">
<img src="/kccadrPb/tutorial/image/01.gif" alt="">
<img src="/kccadrPb/tutorial/image/01.gif" alt="[분쟁 당사자 중 저작권자인지, 이용자인지 선택해주세요.] - 네, 권리자입니다./아니오, 이용자입니다.">
</div>
</body>
</html>