본문 바로가기

반응형

Story/html/css

bootstrap 4 file input doesn't show the file name 부트스트랩에서 파일 첨부시 파일명이 안보일때 기본으로 되지는 않고 jquery 의 도움을 써서 해결이 되었다. $("input[type='file']").on('change',function(){ $(this).next('.custom-file-label').html(event.target.files[0].name); }); Choose file 더보기
아이폰에서 iframe 내용에 스크롤이 되지 않을때. 아이폰으로 모바일웹을 사용하는대 필요에 의해서 iframe 을 넣어서 사용하였다. 그런대 iframe 내용이 길게 되어 스크롤이 되어야하는대 parent 때문인지 스크롤이 되지 않아 밑부분을 볼수가 없다. 안드로이드 폰이나 pc 에서 확인하면 정상적인대... 문제를 해결하고자 구글링을 하다가 다음과 같은 해결책을 발견하였다. Place your s in wrappers with -webkit-overflow-scrolling: touch; iframe 을 감싸고 -webkit-overflow-scrolling: touch; 스타일을 주는것이다. #outside { height: 400px; width: 200px; background: blue; overflow: scroll; } .space { hei.. 더보기
window sapari 브라우져에서 한자가 깨져보일때 사파리 브라우져를 사용해서 중국사이트를 볼경우 window 환경에서 한자가 깨져서 뭉개져 보이는 경우가 있다. 이러 저러한 이유로 사파리 브라우져를 사용해야만 한다면 여간 불편한게 아니다. 이럴때 설정을 바꿔서 정상적으로 보이게 하는 방법은 다음과 같다. 우선 메모장을 열어서 파일형식 모든형식으로 선택후 safari_css.css 란 파일을 만들어 준다. 내용은 위와 같이 * { font-family: Lantinghei SC,Microsoft YaHei,Arial, Helvetica, sans-serif, '돋움', '굴림' !important; } 을 넣고 적당한 위치에 저장한다. 다음으로 브라우져 상단 메뉴중 "편집"을 누르고 맨아래 "기본설정"을 클릭한다. 설정창이 뜨는대 그중에 "고급"탭을 선택.. 더보기
Youtube 연속재생 loop youtube 를 자신의 홈페이지등에 넣고싶을때 youtube 에서 공유 > 소스코드 에서 다음과 같은 코드를 받아서 사용을 한다. 하지만 바로 재생되지도 연속 재생 되지도 않는다. 우선 페이지 접근시 바로 재생되도록 하려면 위 처럼 autoplay=1 을 넣어주어야 한다. 다음으로 연속재생을 하는 방법은 꼼수? 를 사용해야 된다. playlist 를 이용해서 loop 를 사용 할 수 있도록 처리한다. 이렇게하면 플레이 리스트에는 두개의 목록이 생기는대 물론 같은 영상이어서 똑같은 영상이 반복된다. 플레이 리스트에 하나만 남겨두고 반복재생하려면 처럼 사용하면 된다. 더보기
css style 로 input 에 대문자로만 입력받기 보통 javscript 를 이용해서 key press 등의 이벤트에 대문자로 바꾸는것으로 작업을 많이 했는대 간단하게 style 로도 가능하다. 정말 간단하다. css 에 추가해두어도 된다. http://www.w3schools.com/cssref/pr_text_text-transform.asp CSS Syntax text-transform: none|capitalize|uppercase|lowercase|initial|inherit; Property Values Value Description none No capitalization. The text renders as it is. This is default capitalize Transforms the first character of each w.. 더보기
파일첨부에 이미지만 첨부할 수 있도록 처리 input file form 을 이용해서 파일을 전송할때 이미지 파일만 전송처리 파일첨부 을 통해서 저장시 전송이후 서버스크립트로 처리하는 방법은 많이 존재 하지만 전송전에 체크하는 방법은 많이 않아 정리해둔다. 첫번째 최근 브라우져 ie10 이후 지원 되는 방법 accept 로 사용하게 되면 파일찾기 클릭해서 탐색창이 나올때 이미지 외에 파일은 보이지 않는다. 다만 "사용자 지정 파일" 로 되어있는 부분을 "모든 파일" 로 수정하면 이미지 파일뿐 아니라 모든 파일이 보이게되 막을수가 없게 된다. 하지만 이 방법만으로도 일반인들에게는 많은 효과를 걷을수있을것이다. 추가로 할 수 있는 방법은 javascript 를 사용해서 막는 방법이다. 두가지 방법을 다 사용하는것이 더 효과적일 것이다. 더보기
반응형 및 여러 디바이스 미리보기 반응형 및 여러 디바이스 미리보기 https://www.browserstack.com/responsive 더보기
카카오스토리 공유하기 카카오스토리 공유하기가 웹에서 지원이 된다. 기존에는 카카오링크가 앱에서 지원이 되었는대 웹에서는 없었다. 이번에 카카오스토리 공유하기가 지원되면서 각종 웹페이지에 사용될거 같다. 사용방법은 https://developers.kakao.com/docs/social-plugins/story-share 에 자세히 나와있고 다음과 같다. 1. 아래의 코드를 페이지에 삽입하세요. 태그 바로 뒤에 추가하는 것을 권장합니다. 2. 스토리 공유 버튼을 표시할 위치에 다음 코드를 삽입하세요. 또 다른 방법으로 이 두가지 예를 조합해서 사용할수도있다. 또한 공유창에 스크랩되는 내용은 OG 프로토콜에 따라 정해진다. 더보기
OG 프로토콜 - The Open Graph protocol - facebook , KakaoStory og 프로토콜이라고 들어 보셨는지.. facebook share 버튼이나 like 버튼등 소셜 버튼을 사용할때 공유되는 글에 나타나는 글씨나 이미지 url 등을 지정해주는 방법이 존재하는대 이 규칙을 og 프로토콜로 정의된다. facebook 에서만 적용되는줄 알고있었는대 이번에 카카오스토리 웹 공유버튼이 지원되면서 카카오스토리에도 이 방법이 적용되어있는걸 확인했다. 요즘 각종 소셜사이트들이 있는대 각종 기능을 제공하는 버튼이 존재한다. 하나의 공통된 규칙으로 내용을 채우고 사용할수있으면 했는대 좋은 선택인거 같다. 다음은 open graph protocol 에 대한 내용이다.. The Open Graph protocol Introduction The Open Graph protocol enables a.. 더보기
YouTube 내장 플레이어 및 플레이어 매개변수 YouTube 내장 플레이어 및 플레이어 매개변수 개요 이 문서에서는 애플리케이션에 YouTube 플레이어를 삽입하는 방법을 설명하고 YouTube 내장 플레이어에서 사용할 수 있는 매개변수를 정의합니다. YouTube 플레이어는 태그 또는 재생할 콘텐츠 선택 내장 플레이어를 구성하여 동영상, 재생목록, 사용자가 업로드한 동영상 또는 특정 검색어의 검색결과를 로드할 수 있습니다. 그러나 단일 동영상을 로드하는 것 이외의 옵션은 AS3 개체 삽입 및 AS3 플레이어를 로드하는 IFrame 삽입에서만 지원됩니다. IFrame 삽입에서 HTML5 플레이어를 로드할 수도 있습니다. 다음 목록은 이러한 옵션을 설명합니다. 동영상 로드 IFrame 삽입의 경우 로드할 동영상의 YouTube 동영상 ID는 IFram.. 더보기

반응형