table tr td 에 링크걸기

프로그래밍/HTML & JavaScript|2020. 6. 16. 13:30
반응형

<td onClick="location.href='?page=home'" style="cursor:pointer;">


onClick 에는 연결될 페이지,

style 에는 마우스 올려 놓을때 보여질 커서 모양입니다.



반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

input 찾아보기 스타일 변경 (두가지 스타일 예제)  (0) 2020.07.03
iframe 높이 꽉차게 하기  (0) 2020.07.02
html table <td> 에 그라데이션 배경 주기  (0) 2020.06.16
html 테이블 내용에 따라 가로 사이즈가 늘어나지 않게하기  (0) 2020.06.08
on,off 스위치 만들기 (토글버튼: Togglebutton)  (0) 2020.06.05

댓글()

html table <td> 에 그라데이션 배경 주기

프로그래밍/HTML & JavaScript|2020. 6. 16. 10:10
반응형

<td style="background: linear-gradient(to right, #ef2700, #f6b368);"></td>


to right 는 to left 등으로 변경이 가능하고,

#ef2700 부터 #f6b368 로 색상이 바뀌어 간다는 뜻입니다.



반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

iframe 높이 꽉차게 하기  (0) 2020.07.02
table tr td 에 링크걸기  (0) 2020.06.16
html 테이블 내용에 따라 가로 사이즈가 늘어나지 않게하기  (0) 2020.06.08
on,off 스위치 만들기 (토글버튼: Togglebutton)  (0) 2020.06.05
input 으로 작성한 button 자동 클릭하기  (0) 2020.05.26

댓글()

html 테이블 내용에 따라 가로 사이즈가 늘어나지 않게하기

프로그래밍/HTML & JavaScript|2020. 6. 8. 09:59
반응형

텍스트 가로 사이즈가 길어서 테이블이 정해놓은 가로 사이즈가 늘어날 때가 있습니다.

이 경우 <td> 속성에 아래와 같이 옵션을 주면 텍스트 내용이 길 경우 줄바꿈으로 표시가 됩니다.


<td style='word-break:break-all'>



반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

table tr td 에 링크걸기  (0) 2020.06.16
html table <td> 에 그라데이션 배경 주기  (0) 2020.06.16
on,off 스위치 만들기 (토글버튼: Togglebutton)  (0) 2020.06.05
input 으로 작성한 button 자동 클릭하기  (0) 2020.05.26
실시간 페이지 갱신 (ajax 이용)  (0) 2020.05.26

댓글()

on,off 스위치 만들기 (토글버튼: Togglebutton)

프로그래밍/HTML & JavaScript|2020. 6. 5. 15:35
반응형

<html>

<head>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>


<style>

.switch {

  position: relative;

  display: inline-block;

  width: 60px;

  height: 34px;

  vertical-align:middle;

}


/* Hide default HTML checkbox */

.switch input {display:none;}


/* The slider */

.slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #ccc;

  -webkit-transition: .4s;

  transition: .4s;

}


.slider:before {

  position: absolute;

  content: "";

  height: 26px;

  width: 26px;

  left: 4px;

  bottom: 4px;

  background-color: white;

  -webkit-transition: .4s;

  transition: .4s;

}


input:checked + .slider {

  background-color: #2196F3;

}


input:focus + .slider {

  box-shadow: 0 0 1px #2196F3;

}


input:checked + .slider:before {

  -webkit-transform: translateX(26px);

  -ms-transform: translateX(26px);

  transform: translateX(26px);

}


/* Rounded sliders */

.slider.round {

  border-radius: 34px;

}


.slider.round:before {

  border-radius: 50%;

}


p {

margin:0px;

display:inline-block;

font-size:15px;

font-weight:bold;

}

</style>


</head>


<body>


<label class="switch">

<input type="checkbox">

<span class="slider round"></span>

</label>


<p>OFF</p>

<p style="display:none;">ON</p>


<script>

var check = $("input[type='checkbox']");

check.click(function(){

$("p").toggle();

});

</script>


</body>

</html>



[출처] https://imivory.tistory.com/15

반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

html table <td> 에 그라데이션 배경 주기  (0) 2020.06.16
html 테이블 내용에 따라 가로 사이즈가 늘어나지 않게하기  (0) 2020.06.08
input 으로 작성한 button 자동 클릭하기  (0) 2020.05.26
실시간 페이지 갱신 (ajax 이용)  (0) 2020.05.26
스크롤바 항상 출력 시키기  (0) 2020.05.08

댓글()

input 으로 작성한 button 자동 클릭하기

프로그래밍/HTML & JavaScript|2020. 5. 26. 14:42
반응형

눌러야 실행되는 것을 아래 script 를 추가함으로써 자동 실행 되도록 할 수 있습니다.



<input type="button" id="execute" value="실행" />



<script>

        window.onload = function() {

                document.getElementById('execute').click();

        }

</script>



반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

html 테이블 내용에 따라 가로 사이즈가 늘어나지 않게하기  (0) 2020.06.08
on,off 스위치 만들기 (토글버튼: Togglebutton)  (0) 2020.06.05
실시간 페이지 갱신 (ajax 이용)  (0) 2020.05.26
스크롤바 항상 출력 시키기  (0) 2020.05.08
iframe 부모 url 을 PHP 변수에 넣고 출력하기  (0) 2020.03.18

댓글()

실시간 페이지 갱신 (ajax 이용)

프로그래밍/HTML & JavaScript|2020. 5. 26. 14:33
반응형

index.html

<!DOCTYPE html>
<head>
<meta charset=UTF-8" />
<meta name="robots" content="noindex,nofollow"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA Compatible" control="IE=edge,chrome=1" />
<link rel="stylesheet" type="text/css" href="css/table.css" />
<script type="text/javascript" src="//code.jquery.com/jquery.min.js"></script>

<!-- 자동 갱신 스크립트 include -->
<script>
var timerID;
$(document).ready(function() {
    $('#execute').on('click',function(e) {
        e.preventDefault();
        updateData();
    });
    $('#stop').on('click',function(e) {
        e.preventDefault();
        clearTimeout(timerID); // 타이머 중지
        $('#showtime').html('');
    });
});

function updateData() {
    $.ajax({
        url: "getserver.php",
        type: "post",
        cache : false,
        success: function(data) { // getserver.php 파일에서 echo 결과값이 data 임
            $('#showtime').html(data);
        }
    });
    timerID = setTimeout("updateData()", 1000); // 1초 단위로 갱신 처리
}
</script>
</head>

<body>
<p>time : <span id="showtime"></span></p>
<input type="button" id="execute" value="실행" />
<input type="button" id="stop" value="중지" />
</body>
</html>

 

getserver.php

<?php
    $time = date("H:m:s");
    echo $time;
?>

 

작성 후 index.html 을 불러오면, '실행' 버튼을 눌렀을때 주기적으로 getserver.php 가 실행되어 빨간색 showtime 부분에  출력됩니다.

 

'실행' 버튼 누를 필요없이 자동으로 클릭한 효과를 얻으려면 아래와 같이 조치합니다.

1) input 두개의 type 을 hidden 으로 숨깁니다.

2) 아래 코드를 추가합니다.

<script>

        window.onload = function() {

                document.getElementById('execute').click();

        }

</script>

 

 

출처 : https://link2me.tistory.com/1139 [소소한 일상 및 업무TIP 다루기]

반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

on,off 스위치 만들기 (토글버튼: Togglebutton)  (0) 2020.06.05
input 으로 작성한 button 자동 클릭하기  (0) 2020.05.26
스크롤바 항상 출력 시키기  (0) 2020.05.08
iframe 부모 url 을 PHP 변수에 넣고 출력하기  (0) 2020.03.18
input 클릭시 기본 텍스트 사라지게 하기  (0) 2020.03.06

댓글()

스크롤바 항상 출력 시키기

프로그래밍/HTML & JavaScript|2020. 5. 8. 08:44
반응형

본문 길이가 길어서 화면을 벗어날 경우 스크롤바가 자동으로 생기는데,

이때 본문의 위치가 스크롤바로 인해 좌측으로 약간 밀리는 현상이 발생됩니다.


이를 방지하기 위해 스크롤바를 항상 출력 시키도록 합니다.

<head> 내에 아래 소스 코드를 첨부합니다.


<style>

<!--

html {overflow-y:scroll;}

-->

</style> 




반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

input 으로 작성한 button 자동 클릭하기  (0) 2020.05.26
실시간 페이지 갱신 (ajax 이용)  (0) 2020.05.26
iframe 부모 url 을 PHP 변수에 넣고 출력하기  (0) 2020.03.18
input 클릭시 기본 텍스트 사라지게 하기  (0) 2020.03.06
웹페이지 자동 리프레시 (refresh) 태그  (0) 2018.10.30

댓글()

iframe 부모 url 을 PHP 변수에 넣고 출력하기

프로그래밍/HTML & JavaScript|2020. 3. 18. 08:45
반응형

아래 소스가 담긴 파일을 생성 후

별도의 url 에서 iframe 으로 가져오면 부모의 url 이 출력됩니다.


function parent_url() {

    echo "<script>

        var res = document.referrer;

        document.writeln(res);

    </script>";

}


ob_start();

parent_url();

$output = ob_get_clean();

echo $output; 



반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

실시간 페이지 갱신 (ajax 이용)  (0) 2020.05.26
스크롤바 항상 출력 시키기  (0) 2020.05.08
input 클릭시 기본 텍스트 사라지게 하기  (0) 2020.03.06
웹페이지 자동 리프레시 (refresh) 태그  (0) 2018.10.30
Checkbox 하나만 선택되게 하기  (0) 2017.09.01

댓글()

input 클릭시 기본 텍스트 사라지게 하기

프로그래밍/HTML & JavaScript|2020. 3. 6. 11:39
반응형

* 참고 : placeholder를 사용하지 마세요. (https://ibrahimovic.tistory.com/30)



위 참고 URL 을 보니 단점이 많은 placeholder 로 인해 다른 대체 방법을 찾아 보았습니다.

header 부분에 아래와 같은 코드를 입력하여 둡니다.


<script>
    function clearText(thefield) {
        if (thefield.defaultValue == thefield.value)
            thefield.value = ""
    }
</script>



그리고 form 부분의 input 에 아래와 같은 코드를 입력합니다.


<input type="text" name="domain" value="도메인 입력" onFocus="clearText(this)">



반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

스크롤바 항상 출력 시키기  (0) 2020.05.08
iframe 부모 url 을 PHP 변수에 넣고 출력하기  (0) 2020.03.18
웹페이지 자동 리프레시 (refresh) 태그  (0) 2018.10.30
Checkbox 하나만 선택되게 하기  (0) 2017.09.01
[html] 원하는 위치에 포커스 (focus) 이동  (0) 2017.08.18

댓글()

웹페이지 자동 리프레시 (refresh) 태그

프로그래밍/HTML & JavaScript|2018. 10. 30. 15:35
반응형

<!-- 새로고침 간격 (10초) -->

<meta http-equiv="refresh" content="10">




반응형

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

iframe 부모 url 을 PHP 변수에 넣고 출력하기  (0) 2020.03.18
input 클릭시 기본 텍스트 사라지게 하기  (0) 2020.03.06
Checkbox 하나만 선택되게 하기  (0) 2017.09.01
[html] 원하는 위치에 포커스 (focus) 이동  (0) 2017.08.18
URL 을 통해 받아온 변수 출력이 되지 않을때  (0) 2017.08.07

댓글()

Checkbox 하나만 선택되게 하기

프로그래밍/HTML & JavaScript|2017. 9. 1. 17:00
반응형

오늘 업무요청을 받으며 라디오버튼을 체크박스로

변경해달라는 요청을 받았다.

라디오버튼은 이름이 같으면 그중에 하나만 선택되는데..

체크박스는 그렇지 않고 다중 선택이 되는 까닭에..

그냥 바꾸어주면 프로그램상 상당한문제이기도 하고..

업무 요청한곳에서도 다중선택의 문제라기보다는


라디오버튼은 한번 선택하면 그 중에 한가지를 택해야하니..

체크박스로 아무것도 선택 안하는 경우를 염두한거 같다..


서문이 길었는데.. 간단하게 자바스크립트 이벤트를 걸어주었다.


function doOpenCheck(chk){

    var obj = document.getElementsByName("aaa");

    for(var i=0; i<obj.length; i++){

        if(obj[i] != chk){

            obj[i].checked = false;

        }

    }

}


그리고 체크박스에는 onclick 이벤트를 걸어주면 되겠다.


<input name="aaa" type="checkbox" value="1" onclick="doOpenCheck(this);">aaa <br />

<input name="aaa" type="checkbox" value="2" onclick="doOpenCheck(this);">bbb <br />

<input name="aaa" type="checkbox" value="3" onclick="doOpenCheck(this);">ccc <br />



'this' 를 넘겨주어서 클릭되어진 객체의 값을 넘겨주고 'aaa' 로 값을 가져온것과 비교 하면서

클릭된 객체와 일치 하지 않는것들은 체크를 해제해주면 되겠다.



출처: http://canworld42.tistory.com/25 [깨어 있는 세상]

반응형

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

input 클릭시 기본 텍스트 사라지게 하기  (0) 2020.03.06
웹페이지 자동 리프레시 (refresh) 태그  (0) 2018.10.30
[html] 원하는 위치에 포커스 (focus) 이동  (0) 2017.08.18
URL 을 통해 받아온 변수 출력이 되지 않을때  (0) 2017.08.07
[javascript] 페이지 자동 리프레쉬  (0) 2015.08.31

댓글()
이전 1 2 3 4 5 ··· 7 다음

티스토리툴바