반응형
반응형
반응형



<html>

<head>

<title>Simple Table</title>

<LINK href="./simple.css" rel="stylesheet" type="text/css">

</head>

<body>


<div id="body_content">

<h1>

Title.

</h1>


<table class="reference">

<tr>

<td>col1</td>

<td>col2</td>

<td>col3</td>

<td>col4</td>

<td>md5</td>

<td>col5</td>

<td>col6</td>

</tr>


<tr>

<td>1111</td>

<td>2222</td>

<td>3333</td>

<td>4444</td>

<td>5555</td>

<td>6666</td>

<td>7777</td>

<tr>

</table>


</div>


</body>

</html>



반응형
저작자표시

'프로그래밍 > Html' 카테고리의 다른 글

multipart form data  (0) 2019.08.13
찾아보기 버튼 바꾸기  (0) 2016.08.05
simple table css  (0) 2015.10.30
모바일웹에서 app 설치 확인  (0) 2014.03.24
모바일 웹  (0) 2014.03.24
반응형



        body{

                background: #eee url(https://t1.daumcdn.net/cfile/tistory/246AE03C56E663212D"s2">;

                font: 13px 'trebuchet MS', Arial, Helvetica;

        }


        h2, p {

                text-align: center;

                color: #444;

                text-shadow: 0 1px 0 #fff;

        }


        #body_content {

                width: 960px;

                margin: auto;

        }


        table {

                font-size:100%;

                border-spacing: 0;

                width: 960;

                background-color:#f5f5f5;

        }


        table.reference {

                border: solid #ccc 1px;

                -moz-border-radius: 6px;

                -webkit-border-radius: 6px;

                border-radius: 6px;

                -webkit-box-shadow: 0 1px 1px #ccc;

                -moz-box-shadow: 0 1px 1px #ccc;

                box-shadow: 0 1px 1px #ccc;

        }


        .reference td, .reference th {

                border-left: 1px solid #ccc;

                border-top: 1px solid #ccc;

        }


        .reference td {

                padding: 3px;

                text-align: left;

        }


        .reference td:first-child, .reference th:first-child {

                border-left: none;

        }


        .reference th {

                padding: 5px;

                text-align: center;

                background-color: #eee;

                background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eee));

                background-image: -webkit-linear-gradient(top, #f5f5f5, #eee);

                background-image:    -moz-linear-gradient(top, #f5f5f5, #eee);

                background-image:     -ms-linear-gradient(top, #f5f5f5, #eee);

                background-image:      -o-linear-gradient(top, #f5f5f5, #eee);

                background-image:         linear-gradient(top, #f5f5f5, #eee);

                -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;

                -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;

                box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;

                border-top: none;

                text-shadow: 0 1px 0 rgba(255,255,255,.5);

        }


        .reference th:first-child {

                -moz-border-radius: 6px 0 0 0;

                -webkit-border-radius: 6px 0 0 0;

                border-radius: 6px 0 0 0;

        }


        .reference th:last-child {

                -moz-border-radius: 0 6px 0 0;

                -webkit-border-radius: 0 6px 0 0;

                border-radius: 0 6px 0 0;

        }


        .reference th:only-child {

                -moz-border-radius: 6px 6px 0 0;

                -webkit-border-radius: 6px 6px 0 0;

                border-radius: 6px 6px 0 0;

        }


        .reference tr:last-child td:first-child {

                -moz-border-radius: 0 0 0 6px;

                -webkit-border-radius: 0 0 0 6px;

                border-radius: 0 0 0 6px;

        }


        .reference tr:last-child td:last-child {

                -moz-border-radius: 0 0 6px 0;

                -webkit-border-radius: 0 0 6px 0;

                border-radius: 0 0 6px 0;

        }



반응형
저작자표시

'프로그래밍 > Html' 카테고리의 다른 글

찾아보기 버튼 바꾸기  (0) 2016.08.05
simple table (아래 글의 css 적용)  (0) 2015.10.30
모바일웹에서 app 설치 확인  (0) 2014.03.24
모바일 웹  (0) 2014.03.24
태그의 attribute 값 가져오기, 설정하기.  (0) 2013.02.25
반응형


참조 : http://seotory.tistory.com/9


일반적인 jquery ajax 호출.


http://samedomain/test.json

 {"message":"json test"}


jquery 를 이용한 ajax 호출은 다음과 같이 할 수 있다.

$.ajax({

url : "/test.json",

success: function(data) {

  alert(data.message);

},

error: function(data) {

console.log(data);

}

});



만약 다른 도메인의 url 로 ajax 호출을 할때에는 어떻게 해야 하나??

웹 브라우져에서는 same-origin policy (SOP) 정책에 따라 다른 도메인간의 request을 제한하고 있다.


<script/> 태그는 same-origin-policy (SOP) 정책에 속하지 않는다는 사실을 근거로, 서로 다른 도메인간의 javascript 호출을 위하여 jsonp (또는 json with padding) 이 사용되었다.


jsonp를 사용하기 위해서는 필수적으로 서버단에서 jsonp의 포맷을 따라야한다. 이것은 jsonp를 사용하기 위한 "규칙"이다.

그리고 항상 get 방식으로 호출해야 한다.


http://otherdomain/test.jsonp

myCallback( {"message":"json test"} )


jquery 를 이용한 ajax 호출은 다음과 같이 할 수 있다.

$.ajax({

url : "http://otherdomain/test.jsonp",

dataType: 'jsonp',

jsonp: 'callback',

jsonpCallback: "myCallback",

success: function(data) {

  alert(data.message);

},

error: function(data) {

console.log(data);

}

});


function myCallback(data) {

alert("myCallback : " + data.message);

console.log('myCallback 성공 - ', data);

}



ajax 를 호출하면 실제로 다음과 같이 request 가 된다.

http://otherdomain/test.jsonp?callback=myCallback&_=1446182239995


client - server 간에 미리 협의가 있어야 한다.

- parameter name(callback), parameter value(myCallback)


server 에서 response 할 때 data 를 myCallback 함수로 감싸서 보내면 된다.

client 에서는 myCallback 함수가 호출이 된다.


아래 처럼 사용할 수 도 있다.

<script type="text/javascript" src="http://otherdomain/test.jsonp?callback=myCallback"></script>


혹시 에러날 것을 방지 하기 위해 아래 처럼 try - catch 로 감싸서 내려주면 더 안전하다.

 try { 

    myCallback( {"message":"json test"} ) 

} catch(e) {}



반응형
저작자표시

'프로그래밍 > Javascript' 카테고리의 다른 글

javascript containsAll  (1) 2016.11.04
[jquery] hide, show 함수, visibility 속성  (0) 2016.10.28
한글, 영문 check  (0) 2011.12.27
ajax 예제  (3) 2011.12.02
숫자 입력 체크.  (0) 2011.11.29

+ Recent posts

티스토리툴바