목록HTML (18)

Heojju

[HTML] input file accept

Valid Accept Types Type Use CSV File (.csv) Excel Files 97-2003 (.xls) Excel Files 2007+ (./xlsx) Text Files (.txt) Image Files (.png, jpg, etc) HTML Files (.htm, .html) Video Files (.avi, .mpg, .mpeg, .mp4) Audio Files (.mp3, .wav, etc) PDF Files (.pdf)
웹개발/HTML 2018. 5. 14. 14:08
[HTML] details 태그 - 숨겨져있는 추가적 설명

SUMMARY 1. This is paragraph tag 2. All content and graphics on this web site are the property of the company Refsnes Data..실행화면 위의 SUMMARY를 누르면다른 스크립트가 없이 태그만으로 레이아웃 변경이 가능해진다.
웹개발/HTML 2017. 10. 24. 09:33
[HTML] input type='file' accept 속성

▤ input type='file' accept속성어떤 형식의 파일을 허용할 것인지 정해주는 속성입니다. 속성값설명 file_extension - 파일 확장명(예:. gif,. jpg,. png,. doc)으로 시작하는 파일 확장명. - accept="application/msword" 식으로 사용가능.audio/* - 오디오 파일을 허용.video/* - 비디오 파일을 허용.image/* - 이미지 파일을 허용.media_type - 매개변수가 없는 유효한 미디어 유형. IANA Media Types 참고. 위와 같이 지정하게 되면, 위와 같이 사용자 지정 파일 이라는 형식으로 png,gif,jpeg 파일만을 보여줍니다. 브라우저마다 보이는 게 다릅니다.어떤 값을 넣냐에 따라 이미지 파일 / 오디오 파..
웹개발/HTML 2017. 9. 29. 13:14
[jQuery] draggable - div 드래그

$(document).ready(function(){ $( "#draggable" ).draggable(); }); #draggable{width:150px; height:150px; border:1px solid #ccc;} #draggable:hover{cursor:move;} Element
웹개발/jQuery 2017. 8. 23. 18:07
[HTML] input 속성 readonly / disabled / 차이

▤ input 태그의 readonly 속성 결과화면 : 읽기만 가능할 뿐 값 변경은 불가능. ▤ input 태그의 disabled 속성. 결과화면 : 읽기만 가능할 뿐 값 변경은 불가능. ▤ readonly 와 disabled 의 차이form 으로 값을 보낼때 disabled의 값은 전송되지 않는다.
웹개발/HTML 2017. 8. 18. 11:39
[HTML] contentEditable

▤ contentEditablep나 div 태그와 같이 고정되어있는 텍스트를 가지고 있는 태그들에 입히는 속성(attribute)으로 텍스트 수정이 가능하게 된다. This is an editable paragraph.This is an editable paragraph.
웹개발/HTML 2017. 6. 8. 15:49
마우스 클릭시 근처에 레이어 띄우기

.element{width:500px;}#layer{display:none; padding:10px; background:#e6e6e6;}#layerClose{font-size:15px; float:right;}.element:hover, #layerClose:hover{cursor:pointer; opacity:0.8;} 음식입니다. 닫기X $('.element').click(function(e) { var divTop = e.clientY - 20; //상단 좌표 var divLeft = e.clientX - 40; //좌측 좌표 $('#layer').css({ "top": divTop ,"left": divLeft , "position": "absolute" }).show(); }); $("#lay..
웹개발 2017. 6. 8. 14:15
Parallax 패럴렉스 스크롤 간단한 코딩

Toggle navigation Bootstrap Example Home About Contact BOOTSTRAP PARALLAX Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit di..
웹개발 2017. 2. 22. 10:20
[CSS][JavaScript][JQuery] 이미지 어두워지는 방법

▤ CSS div.imgBackground{background:black;} img.center-block:hover {opacity:0.3;} ▤ Javascript div.imgBackground{background:black;} document.getElementById('img1').onmouseover = function(){ this.style.opacity = "0.3"; } document.getElementById('img1').onmouseout = function(){ this.style.opacity = "1"; } ▤ jQuery div.imgBackground{background:black;} $('#img1').mouseover(function(){ $(this).css('op..
웹개발 2017. 2. 2. 14:29
OnePage 간단한 코딩

OnePage .page{height:100vh;} 1page 2page 3page 4page 1page 2page 3page 4page function stopWheel(e){ if(!e){ e = window.event; } /* IE7, IE8, Chrome, Safari */ if(e.preventDefault) { e.preventDefault(); } /* Chrome, Safari, Firefox */ e.returnValue = false; /* IE7, IE8 */ } $("#1page").on('mousewheel DOMMouseScroll', function(e){ stopWheel(); var E = e.originalEvent; delta = 0; if (E.detail) { de..
웹개발 2017. 1. 31. 14:40
Prev 1 2 Next