"분류 전체보기"에 해당되는 글 - 39건

Post

placeholder 속성 변경하기

[ html,css ] 2019. 4. 9. 11:04

HTML5 / CSS3 placeholder 폰트 색상 지정

 

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #aaa; font-size:12px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #aaa; font-size:12px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #aaa; font-size:12px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #aaa; font-size:12px;
}



'html,css' 카테고리의 다른 글

유튜브 영상 반응형으로 넣기  (0) 2019.04.09
table태그에서 말줄임 사용하기  (0) 2018.03.23
반응형 폰트설정  (0) 2018.03.21
ie8 이하에서 투명 배경 적용  (0) 2018.03.21

Post

다음페이지 넘어갈때 컨텐츠가 안보이게 하는 효과

[ javascript, jQuery ] 2019. 4. 9. 10:10

다음페이지 넘어갈때 컨텐츠가 안보이게 하는 효과입니다~!

※참조
[다음페이지] / [이전페이지] 를 눌렀을때만 작동합니다~!

 

pagemotion.zip
0.14MB

'javascript, jQuery' 카테고리의 다른 글

INPUT TYPE FILE 파일명 추출  (0) 2019.04.09
JavaScript, jQuery 에서 높이, 너비 구하는 방법 정리  (0) 2019.01.31
video태그 제어  (0) 2018.12.05
타이머 스크립트  (0) 2018.08.21
select 제어  (0) 2018.08.05

Post

INPUT TYPE FILE 파일명 추출

[ javascript, jQuery ] 2019. 4. 9. 09:47

input type file을 jQuery를 이용하여 파일명을 추출하는 방법입니다.

 

<div class="file_box">

    <input type="file" name="" id="" value="" title="">

    <p class="file_name">파일명이 없습니다.</p>

</div>




파일명이 없습니다

'javascript, jQuery' 카테고리의 다른 글

다음페이지 넘어갈때 컨텐츠가 안보이게 하는 효과  (0) 2019.04.09
JavaScript, jQuery 에서 높이, 너비 구하는 방법 정리  (0) 2019.01.31
video태그 제어  (0) 2018.12.05
타이머 스크립트  (0) 2018.08.21
select 제어  (0) 2018.08.05

Post

html, css, js, jQuery, php, SQL 정리

[ 학습자료 ] 2019. 4. 9. 09:24

프로그래밍 설명서 (배포본).xlsx
0.49MB

'학습자료' 카테고리의 다른 글

가상드라이버 다운로드  (0) 2018.06.12
폰트 라이센스  (0) 2018.05.10
브라우저별 쿠키 확인법 (크롬, 파이어폭스, IE11)  (0) 2018.04.10
css 입문  (0) 2018.03.23
jQuery 입문용  (0) 2018.03.23

Post

유튜브 영상 반응형으로 넣기

[ html,css ] 2019. 4. 9. 09:16

유튜브영상 검은바 없이 높이 100% 하는방법

html

<div class="video-container">

    <iframe width="100%" src="http://www.youtube.com/embed/HkMNHkMNOlYcpHg" frameborder="0" allowfullscreen=""></iframe>

</div>

 

CSS

.video-container {position:relative; padding-bottom:56.25%; overflow:hidden;}

.video-container iframe {position:absolute; top:0; left:0; width:100%; height:100%;}




'html,css' 카테고리의 다른 글

placeholder 속성 변경하기  (0) 2019.04.09
table태그에서 말줄임 사용하기  (0) 2018.03.23
반응형 폰트설정  (0) 2018.03.21
ie8 이하에서 투명 배경 적용  (0) 2018.03.21

Post

JavaScript, jQuery 에서 높이, 너비 구하는 방법 정리

[ javascript, jQuery ] 2019. 1. 31. 11:02

Javascript 나 jQuery 에서 지금도 높이, 너비 구할 때 아직도 헷갈릴 때가 있다.

그래서 다음과 같이 정리해 본다.

JavaScript에서 요소의 크기 구하기

1
2
3
var element = document.getElementById('content');
var h = element.clientHeight;
var w = element.clientWidth;
cs

높이
- clientHeight : padding을 포함한 높이
- scrollHeight : padding을 포함한 화면 상에 표시되지 않은 콘텐츠를 포함한 높이
- offsetHeight : border, padding, 스크롤 바를 포함한 높이

너비
- clientWidth : padding을 포함한 폭
- scrollWidth : padding을 포함한 화면 상에 표시되지 않은 콘텐츠를 포함한 폭
- offsetWidth : border, padding, 스크롤 바를 포함한 폭


윈도우 사이즈
window.innerWidth :  스크롤 바를 포함하지 않는 창 너비
window.innerHeight : 스크롤 바를 포함하지 않은 창 높이
window.outerWidth : 스크롤 바를 포함, 창의 너비
window.outerHeight :  스크롤 바를 포함한  창의 높이


jQuery에서 요소의 크기 구하기

높이
- .height() : 요소 높이만
- .innerHeight() : 요소의 padding을 포함한 높이
- .outerHeight() :  요소의 border, padding 포함한 높이
- .outerHeight(true) : 요소의 margin, border, padding 포함한 높이

너비
- .width() : 요소의 폭만
- .innerWidth() : 요소의 padding을 포함한 폭  
- .outerWidth() : 요소의 border, padding을 포함한 폭
- .outerWidth(true) :  요소의 margin, border, padding을 포함한 폭

만약 요소의 display:none; 일 때 높이 사이즈 취득 여부

 구할 수 없는 것 구할 수 있는 것 
 offsetHeight height 
 clientHeight innerHeight 
  outerHeight


'javascript, jQuery' 카테고리의 다른 글

다음페이지 넘어갈때 컨텐츠가 안보이게 하는 효과  (0) 2019.04.09
INPUT TYPE FILE 파일명 추출  (0) 2019.04.09
video태그 제어  (0) 2018.12.05
타이머 스크립트  (0) 2018.08.21
select 제어  (0) 2018.08.05

Post

video태그 제어

[ javascript, jQuery ] 2018. 12. 5. 14:29
// 영상 재생/정지
var myAudio = $('#video');
function aud_play_pause() {
if (myAudio[0].paused) {
myAudio[0].play();
$('.btnPlay').css('background-position-y','-30px');
} else {
myAudio[0].pause();
$('.btnPlay').css('background-position-y','0');
}
}


// 영상 전체 시간
myAudio.on('loadedmetadata',function(){
videoTime = parseInt(myAudio[0].duration);
m = Math.floor(videoTime / 60) + ":" + (videoTime % 60);  // 남은 시간 계산
$('.duration').text(m);
});

// 현재 진행 시간
myAudio.on('timeupdate', function() {
var currentPos = myAudio[0].currentTime; //Get currenttime
var maxduration = myAudio[0].duration; //Get video duration
var percentage = 100 * currentPos / maxduration; //in %
$('.timeBar').css('width', percentage+'%');
});


'javascript, jQuery' 카테고리의 다른 글

INPUT TYPE FILE 파일명 추출  (0) 2019.04.09
JavaScript, jQuery 에서 높이, 너비 구하는 방법 정리  (0) 2019.01.31
타이머 스크립트  (0) 2018.08.21
select 제어  (0) 2018.08.05
숫자만 입력가능  (0) 2018.06.12

Post

타이머 스크립트

[ javascript, jQuery ] 2018. 8. 21. 16:21

<html>

<head>

<title>Timer</title>


<script language="JavaScript">

var SetTime = 5; // 최초 설정 시간(기본 : 초)


function msg_time() { // 1초씩 카운트

m = Math.floor(SetTime / 60) + "분 " + (SetTime % 60) + "초"; // 남은 시간 계산

var msg = "현재 남은 시간은 <font color='red'>" + m + "</font> 입니다.";

document.all.Timer.innerHTML = msg; // div 영역에 보여줌 

SetTime--; // 1초씩 감소

if (SetTime < 0) { // 시간이 종료 되었으면..

clearInterval(tid); // 타이머 해제

alert("종료");

}

}


window.onload = function TimerStart(){ tid=setInterval('msg_time()',1000) };

</script>


</head>


<body >

<div id="Timer"></div>


</body>

</html>



'javascript, jQuery' 카테고리의 다른 글

JavaScript, jQuery 에서 높이, 너비 구하는 방법 정리  (0) 2019.01.31
video태그 제어  (0) 2018.12.05
select 제어  (0) 2018.08.05
숫자만 입력가능  (0) 2018.06.12
자바스크립트 국내지도 svg 오버효과  (0) 2018.05.31

Post

select 제어

[ javascript, jQuery ] 2018. 8. 5. 18:24

jQuery로 선택된 값 읽기

$("#selectBox option:selected").val();

$("#select_box > option:selected").val()

$("select[name=name]").val();

 

jQuery로 선택된 내용 읽기

$("#selectBox option:selected").text();

 

선택된 위치

var index = $("#test option").index($("#test option:selected"));

 

-------------------------------------------------------------------

 

// 맨마지막에 option 추가

$("#selectBox").append("<option value='1'>Apples</option>");

$("#selectBox").append("<option value='2'>After Apples</option>");

 

// 맨 앞에 option 추가

$("#selectBox").prepend("<option value='0'>Before Apples</option>");

 

// select 옵션 전체 변경

$("#selectBox")

.html("<option value='1'>oranges</option><option value='2'>Oranges</option>");

 

// Replace items at a certain index

$("#selectBox option:eq(1)")

.replaceWith("<option value='2'>apples</option>");

$("#selectBox option:eq(2)")

.replaceWith("<option value='3'>bananas</option>");

 

// 지정된 index 값으로 select 하기

$("#selectBox option:eq(2)").attr("selected", "selected");

 

// text 값으로 select 하기

$("#selectBox").val("Some oranges").attr("selected", "selected");

 

// value 값으로 select 하기

$("#selectBox").val("2");

$("#selectBox > option[@value=지정값]").attr("selected", "true");

 

// 지정된 인덱스 값의 item 삭제

$("#selectBox option:eq(0)").remove();

 

// 첫번째 item 삭제

$("#selectBox option:first").remove();

 

// 마지막 item 삭제

$("#selectBox option:last").remove();

 

// 선택된 옵션의 text 구하기

alert($("#selectBox option:selected").text());

 

// 선택된 옵션의 value 구하기

alert($("#selectBox option:selected").val());

 

// 선택된 옵션 index 구하기

alert($("#selectBox option").index($("#selectBox option:selected")));

 

// SelecBox 아이템 갯수 구하기

alert($("#selectBox option").size());

 

// 선택된 옵션 앞의 아이템 갯수

alert($("#selectBox option:selected").prevAll().size());

 

// 선택된 옵션 후의 아이템 갯수

alert($("#selectBox option:selected").nextAll().size());

 

// 0번째 item 다음에 삽입

$("#selectBox option:eq(0)").after("<option value='4'>Some pears</option>");

 

// 3번째 item 전에 삽입

$("#selectBox option:eq(3)").before("<option value='5'>Some apricots</option>");

 

// select box 값이 변경될때 선택된 현재값

$("#selectBox").change(function() {

           alert($(this).val());

           alert($(this).children("option:selected").text());

});

'javascript, jQuery' 카테고리의 다른 글

video태그 제어  (0) 2018.12.05
타이머 스크립트  (0) 2018.08.21
숫자만 입력가능  (0) 2018.06.12
자바스크립트 국내지도 svg 오버효과  (0) 2018.05.31
자바스크립트 지역셀렉트 선택  (0) 2018.05.14

Post

ssl로 데이터파일, sql 압축 및 압축풀기 받기

[ 그누보드5 ] 2018. 8. 5. 18:10

파일 백업

ssl  - > 아이디 - > 비번 -> 경로설정 ( cd www) ->  tar -pzvcf 백업할파일명.tar.gz  * -> 압축하기


파일 압축풀기

ssl  - > 아이디 - > 비번 -> 경로설정 ( cd www) ->  tar -pzvxf 백업할파일명.tar.gz  -> 압풀기


db 백업

mysqldump -u qr_feel(아이디) -p backup(디비명) > backup.sql(저장할 파일명) 엔터후 ftp비밀번호


db 압축풀기

mysql -u qr_feel(새로옮기는 아이디) -p qr_feelomc(새로옮기는 디비명) < feel_db.sql(파일명) 엔터후 ftp비밀번호


db압축 푼 후 data - > dbconfin.php db정보 변경

'그누보드5' 카테고리의 다른 글

그누보드5 3.1.2 세팅  (0) 2018.05.11
반응형 스마트에디터 입니다.  (0) 2018.05.09
게시판 첨부파일 썸네일 호출방법  (0) 2018.04.30
게시판 리스트 에디터에서 썸네일만 호출하기  (0) 2018.03.28
게시판 작성일자 형태 변경  (0) 2018.03.21
◀ 이전 1 2 3 4 다음 ▶
▲ top
▲ top

티스토리툴바