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

댓글()

[html] 원하는 위치에 포커스 (focus) 이동

프로그래밍/HTML & JavaScript|2017. 8. 18. 17:48
반응형

<html>

<head>

<style>

A:focus {outline:3px solid blue;}

</style>

</head>

<body>

<center>


<a href="link.html?no=1" class="imageAnchor" id="one"><img src="" width="50" height="50"></a>

<a href="link.html?no=1" class="imageAnchor" id="two"><img src="" width="50" height="50"></a>

<a href="link.html?no=1" class="imageAnchor" id="three"><img src="" width="50" height="50"></a>

<a href="link.html?no=1" class="imageAnchor" id="four"><img src="" width="50" height="50"></a>


</center>


<script src="jquery-1.12.4.js"></script>

<script>

$("#three").focus();

</script>


</body>

</html>



* 파란색 : 포커스를 한눈에 알아볼 수 있게 포커스한 a태그에 테두리를 줌

* 빨간색 : jquery 를 이용한 포커스 위치 이동. 예제에서는 id 값이 three 인곳에 포커스를 주었다.


반응형

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

웹페이지 자동 리프레시 (refresh) 태그  (0) 2018.10.30
Checkbox 하나만 선택되게 하기  (0) 2017.09.01
URL 을 통해 받아온 변수 출력이 되지 않을때  (0) 2017.08.07
[javascript] 페이지 자동 리프레쉬  (0) 2015.08.31
TextArea 에서 두줄입력시 스크립트 오류입니다.  (0) 2015.07.06

댓글()

URL 을 통해 받아온 변수 출력이 되지 않을때

프로그래밍/HTML & JavaScript|2017. 8. 7. 08:40
반응형

접속 형식 : http://sysdocu.tistory.com/index.html?page=1

 

위와 같이 접근 했을때 화면에 1 이라는 숫자가 보이지 않을 경우 아래처럼 코드를 추가한다.

 

<?

$page=$_GET['page'];    // 이렇게 받아서 다시 변수에 넣음. POST 방식은 $_POST['page'];

echo "$page";

?>

반응형

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

Checkbox 하나만 선택되게 하기  (0) 2017.09.01
[html] 원하는 위치에 포커스 (focus) 이동  (0) 2017.08.18
[javascript] 페이지 자동 리프레쉬  (0) 2015.08.31
TextArea 에서 두줄입력시 스크립트 오류입니다.  (0) 2015.07.06
[JavaScript] innerHTML을 이용한 div 내부 내용 변경  (0) 2015.07.06

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

티스토리툴바