본문 바로가기

웹프로그래밍/HTML

(8)
input number hide spin button 증가 감소 버튼 숨기기 input[type=number]::-webkit-outer-spin-button{-webkit-appearance: none;margin: 0;} input[type=number]::-webkit-inner-spin-button{-webkit-appearance: none;margin: 0;}
크롬(chorme)에서 textarea 사이즈조절 막기 크롬(chorme) 브라우저에서는 textarea 가 자동으로 resize 기능이 되어 로드된다. 이점이 좋을때도 있지만 사실상 안좋을때가 더 많다. 이 기능은 스타일 추가로 막을수 있다.
모바일 웹 개발시 유용한 팁 모바일 웹 개발시 유용한 팁 [Viewport] - 기본설정 모바일 웹브라우저의 기본 화면크기 및 확대/축소 배율등을 정하는 모바일 웹사이트 및 웹앱을 만들시 제일 중요한 Meta 태그입니다. 기본적으로 아이폰의 사파리 웹브라우저는 넓이가 980px인 해상도로 보여주기 때문에 아이폰에서 아이폰3G(S)에 맞춰 디자인 한 웹페이지(320x480)를 본다고 가정한 경우 뷰포트를 설정하지 않는다면 가로 좌우 여백이 330px의 여백이 남는 아주 작은 화면을 보게 됩니다. 다음처럼 뷰포트를 사용하면 1:1 비율로 아이폰의 해상도에 맞게 최적화 할 수 있습니다. width : 넓이 - device-width | N px (200~10000 px, default 980 px) height : 높이 - device-..
(Chrome) ID/Password 자동 완성 방지 password 자동완성 막기 크롬에서 아이디 비번 저장 한 경우, < input type="password" id="user_pwd" name="user_pwd" autocomplete="off"> 이게 한개면 자동으로 세팅된다. 그래서 가짜 패스워드를 만들어 주면 된다. < input type="password" id="user_pwd_fake" name="user_pwd_fake" autocomplete="off" style="display: none;"> < input type="password" id="user_pwd" name="user_pwd" autocomplete="off">
HTML5 비디오태그 <video></video> 비디오 태그는 웹페이지에서 동영상을 볼 수 있게 만들어주는 기능을 수행한다. 원래 HTML5 시대가 오기 전에는 비디오도 윈도 미디어 플레이어 또는 플래시와 같은 플러그인을 사용해서만 볼 수 있었다. 하지만 HTML5 시대가 오면서 웹표준만으로 동영상을 볼 수 있게 되었다. *유튜브는 플래시를 사용해서 동영상을 재생하게 설계되었지만 https://www.youtube.com/html5 에 들어가서 HTML5 기능을 실행하면 플래시 없이 동영상을 볼 수 있다. video 태그의 속성 속성 이름 값 설명 src URL 비디오파일의 경로지정 height 숫자 비디오의 높이를 지정 width 숫자 비디오의 너비를 지정 poster URL 비디오 준비중일 때의 이미지 파일 경로 지정 muted "muted", ""..
HTML5 오디오태그 <audio></audio> 오디오 태그는 웹브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 HTML5 태그 이다. HTML5에서 추가된 기능이므로 IE8 이하에서는 사용할 수 없다. audio 태그의 속성 속성 이름 값 설명 src URL 음악파일의 경로지정 controls "controls", "" , - 음악 재생 도구를 출력할지 지정 autoplay "autoplay", "", - 음악을 자동 재생할지 지정 loop "loop", "", - 음악을 반복할지 지정 preload "none", "metadata", "auto" 음악을 재생하기 전에 모두 불러올지 지정 none : 사용자가 오디오를 필요로하지 않을 것이라고 명시, 미리 다운로드 하지 않음 metadata : 사용자가 오디오를 필요로 하지 않을 ..
HTML escape 문자 Character Escape Sequence ^ %5E & %26 ` %60 { %7B } %7D | %7C ] %5D [ %5B " %22 %3E \ %5C
크롬 웹브라우저에서 input 클릭할 경우 외곽테두리가 생기는 경우 input {outline-style:none} IE나 Firefox 에는 적용할 필요가 없다.