스크립트 & 소스코드 공유

HTML

<div id="custom-responsive-table">
<table class="table">
<thead class="bg-light">
<tr>
<td>h1</td>
<td>h2</td>
<td>h3</td>
<td>h4</td>
</tr>
</thead>
<tbody>
<tr>
<td data-title="h1">content1</td>
<td data-title="h2">content2</a></td>
<td data-title="h3">content3</td>
<td data-title="h4">content4</td>
</tr>
<tr>
<td data-title="h1">second1</td>
<td data-title="h2">second2</td>
<td data-title="h3">second3</td>
<td data-title="h4">second4</td>
</tr>
</tbody>
</table>
</div>
<p>https://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table</p>

CSS

/*반응형 테이블*/
@media only screen and (max-width: 800px) {

/* Force table to not be like tables anymore */
#custom-responsive-table table,
#custom-responsive-table thead,
#custom-responsive-table tbody,
#custom-responsive-table th,
#custom-responsive-table td,
#custom-responsive-table tr {
display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
#custom-responsive-table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

#custom-responsive-table tr { border: 1px solid #ccc; }

#custom-responsive-table td {
/* Behave  like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 20%; /*컬럼위치조정*/
white-space: normal;
text-align:left;
}

#custom-responsive-table td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}

/*
Label the data
*/
#custom-responsive-table td:before { content: attr(data-title); }
}

<html>
<head>
<script language="javascript">
function test(value){
if(value=='1') {
alert("11111111");
}else{
alert("00000000");
}
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<input type="radio" name="ra" value="1" onclick="test(this.value)"/>
个人
<input type="radio" name="ra" value="0" onclick="test(this.value)""/>
公司
</form>
</body>
</html>

2.onclick(this)代码详解

一般标签中会使用href和onclick两种方式来进行进行页面跳转或执行动作，但是小编一般都会使用onclick来进行执行Ajax函数进行跳转，并同时使用onclick=”xxxxxx(this)”来传递动态参数：例子如下

JSP代码如下：

<a href="javascript:void(0);"  onclick="xxxx(this)" userId=${userId}>${userName}></a>

JSP代码如下：

function  xxxx(obj) {
var thisObj=$(obj);//js对象转jquery对象
var userId=thsiObj.attr("userId");
alert(userId);
}

HTML에서 버튼 생성과 스크립트에서 코드 몇줄이면 간단히 만들 수 있습니다.

HTML

a태그를 통해 onclick으로 함수를 호출합니다.

저는 URL주소복사란 이름의 버튼을 A태그를 통해 만들 예정입니다.

<span class="button gray medium"><a href="#" onclick="clip(); return false;">URL주소복사</a></span>

JAVASCRIPT

a태그에서 호출한 함수인 clip을 작성해줍니다.

url을 변수로 만들고

textarea라는 변수에 textarea의 요소를 생성해줍니다.

이 것을 body의 가장 아래, 즉 </body> 바로 위에 textarea를 추가해줍니다.

(임시 공간이기 때문에 위치는 상관이 없습니다.)

url에는 현재 주소값을 넣어줍니다.

textarea 값에 url를 넣어주고,

textarea를 설정합니다.

그리고 document.execCommand("copy"); 메서드를 사용하면 복사가 됩니다.

그리고 마지막으로 textarea 요소를 없애주고,

복사되었다는 알림창을 띄우면 끝입니다.

<script type="text/javascript">
function clip(){
var url = "<?php echo $_SERVER['SERVER_NAME']?>";
var textarea = document.createElement("textarea");
document.body.appendChild(textarea);
url = window.document.location.href;
textarea.value = url;
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
alert("URL이 복사되었습니다.")
}
</script>

$details = new ReflectionFunction('alert');
print $details->getFileName() . ':' . $details->getStartLine();

무료로 HTTPS 서비스!!!

됩띠다~

할 수 있습띠다! 하하..^^

기술 레벨에 따라 여러 가지 방법이 있었는데요.

저는 cloudflare 쪽 서비스를 이용해서 HTTPS 서비스를 구현해 봤습니다.

https://www.cloudflare.com/ko-kr/

가입하시고 로그인하세요.

01 사이트 추가

HTTPS 무료로 적용하고자 하는 도메인을 추가하는 단계입니다.

Add a Site 클릭하세요.

02 도메인 입력

www 빼고 도메인 입력하세요.

03 도메인 DNS 조회

도메인의 이전 기록을 조회해서 가지고 오는 단계라고 보시면 되겠습니다.

그냥 Next

04 Free 무료 SSL 지원 서비스 선택

유료가 필요한 단계가 나중에 올 수도 있지만 일단 무료로 선택하세요.

나중에 정말 필요하면 전환하시구요.

05 DNS 조회 결과 확인

이전에 서비스 받던 기록들을 그대로 가지고 왔네요.

확인해 보시고 다음 단계로 가시죠.

06 DNS 연결 정보 확인

이전 페이지 하단 부분입니다.

Continue 클릭

07 네임서버 변경 안내

여기서부터는 약간 어려워집니다.

(웹 개발을 하시던 분이라면 큰 문제가 없겠네요.)

하나씩 공부하면서 따라갈 수도 있겠지만 일단 다음으로 가 볼게요.

도메인을 구매한 곳을 알아야 합니다.

카페24, 가비아, 후이즈, 아이네임즈, 닷네임...

너무 많죠?

도메인을 구입했던 홈페이지에 로그인하세요.

그리고는 이제 네임서버 설정을 바꿔야 합니다.

08 네임서버 변경

저는 dotname이라는 곳에서 도메인을 구매했는데요.

메뉴 중에 DNS 설정 > 네임서버 변경이라는 곳으로 이동했습니다.

(으.... 표시를 잘못했네요. 바로 아래 네임서버 변경 항목에 빨간 테두리~~)

09 네임서버 변경 전

네임서버를 바꾸기 전입니다.

카페24라고 보이네요.

그 위에 있는 1차, 2차 두 군데를 바꿀 겁니다.

10 네임서버 변경

자 이제 바꿔 보겠습니다.

아까 cloudflare에서 알려준 네임서버 정보를 입력합니다.

변경하면 네임서버 설정이 끝났습니다.

여기까지 하고 나서 커피 한잔하고 와야 됩니다.

하하...왜냐구요?

네트워크 전파 속도라는 게 있으니까요.

네임서버를 변경하면 바로 적용이 안 됩니다.

전 세계에 퍼져있는 DNS가 서로 통신해서 정보를 교환할 때까지 기다려 주는 겁니다.

몇 분 내지는 몇 시간의 시간이 필요합니다. 최대 24시간!!

공식적으로 그렇다는 말이구요.

몇 분이면 되긴 할 겁니다. (약간 불안정하긴 할 거예요.)

11 DNS 정보 미확인

cloudflare 입장에서 DNS 정보가 아직 확인이 안 된다는 말입니다.

상기 메시지가 나오면 좀 기다리면서 계속 새로 고침을 해야 됩니다.

그 사이 우리 도메인 주소를 치고 홈페이지에 접속 함해 볼까요?

12 보안 연결(HTTPS) 미적용

당연히 아직은 아닙니다.

HTTPS 적용이 안 된 거예요.

제대로 SSL 서비스 적용하면 달라질 겁니다.

일단 확인만 했습니다.

자..

커피 한 잔 드셨고...

몇 분 정도 지나면 아래처럼 바뀝니다.

13 네임서버 연결 완료

Great news!

멘트가 약간 간지럽습니다. 하하^^

전 세계 DNS 서버들까지 순식간에 전파를 해서 정보를 공유했습니다.

이제 cloudflare 쪽에서 DNS 서비스를 받을 수 있게 되었다는 말입니다.

감사한 일이죠.

홈페이지에 접속해 보세요.

다 된 걸까요?

14 왜?

몇 단계 더 추가 작업이 남아 있습니다.

15 페이지 규칙 추가

Page Rules?

홈페이지 접속하면 그 다음은 어떤 규칙을 적용할까?

정도로 이해하면 될 거 같습니다.

이 규칙 설정을 해야 HTTPS 적용이 제대로 되죠.

규칙을 2개 추가하겠습니다.

16 www.domain 접속 규칙

사용자들이 HTTPS(SSL 인증서) 없는 접속을 하면 우리는 HTTPS 보안 인증 접속이 되게 규칙을 설정합니다.

위 설정처럼 하시면 됩니다.

위 입력 항목에 http://www.domain.kr처럼 HTTPS 없이 들어올 때 우리는 바로 아래 설정에서

자동으로 HTTPS 설정으로 넘겨주세요

라고 설정하는 겁니다.

17 www 없는 접속 규칙

사람들이 http://www.websiteman.kr 이렇게만 접속하면 좋은데 www 없이 접속할 때도 있습니다.

그럴 때 규칙을 또 추가합니다.

위 항목 박스에 www 없이 도메인을 입력합니다.

자 이렇게 두 가지 규칙을 추가했습니다.

18 규칙 2가지 추가된 화면

두 가지 규칙이 추가된 화면입니다.

자, 이제 거의 마무리 단계입니다.

홈페이지 접속을 해 봅니다.

음..............

바로 HTTPS 인증 적용이 되어서 보일 수도 있구요.

아닐 수도 있습니다.

DNS 설정이 바뀌면 바로바로 확인이 안 됩니다.

전파되는 시간들이 있기 때문이죠.

커피를 또 한잔 더 하고 오셔야 합니다.

이번에는 커피 말고 물이나 차를 한잔 드시고 오시죠.

계속 새로 고침해 보세요.

드디어....

19 HTTPS 인증 적용

인증서 보이시죠?

클릭하고 상세 내용을 보세요.

20 CloudFlare 인증서

인증기관도 명확하고 유효기간도 1년이네요.

그런데 1년 지나면 또 이 짓(?)을 해야 할까요?

저도 기다려 보는 중입니다.^^

검색을 좀 해 보니 자동 연장이라고 나와 있긴 한데요.

그때 가서 확인해 볼 일입니다.

21 익스플로어 SSL 인증서

익스플로어에서는 HTTPS 보안인증서 위치가 좀 달라요.

브라우저마다 조금씩 다르게 나타날 겁니다.