코딩75 css 그룹 스타일 지정 그룹 묶음 스타일을 사용해야 할 때가 있음예를 들면, step_1, step_2, step_3이런 클래스를 한꺼번에 스타일을 줘야한다면 [class^="step_"]{color: #333} 이런식으로 줄여서 쓸 수 있음.앞에 ^= 는 괄호 안에 텍스트에 해당하는 클래스를 찾아 한꺼번에 처리 해줌응용하면 [href^="http"]{color: #aaa} 이 문구는 링크에 http 로 시작하는 모든 코드에 속성을 줌. 자세한 것은 아래 참조https://www.w3schools.com/cssref/css_selectors.asp 2018. 1. 25. 동천학교 신문기사 http://www.seouland.com/arti/society/society_general/2980.html 2018. 1. 12. [모바일앱] 스크롤 이벤트 막기 사이드바 열렸을 때, 배경이 스크롤 되는 현상 막기 $('#side-nav').on('click', function (e) { $('#sidenav-overlay').addClass('active'); /* Disable scroll */ $('.contents').on('scroll touchmove mousewheel', function(e){ e.preventDefault(); e.stopPropagation(); return false; }); }); $('#sidenav-overlay').click(function() { $('#side-nav').offcanvas('hide'); $('#sidenav-overlay').removeClass('active'); /* Enable scroll */.. 2017. 11. 21. [html] input file css input[type='file'] 은 브라우저마다 다른 스타일을 갖고있어서 변경하기 까다로움. input[type='file'] {max-width: 100%; height: 34px} input[type=file]::-webkit-file-upload-button {height: 34px} 참고 : https://gist.github.com/pzi/4993431 2017. 10. 11. [html] 셀렉트박스 기본값에 관해 selectbox를 사용할 때, 실제로 데이터를 넘겨주는 option이 있는가 하면, "==선택해주세요==" 와 같이 데이터와 전혀 상관없는 안내문구 옵션을 넣어야 할 때가 있다.(물론 요즘은 접근성 이슈로 기본값을 미리 선택해 두긴 하지만..)이와 같은 옵션을 넣을때 hidden과 disabled 속성을 넣으면 아주 유용하다.default값은 "==선택해주세요==" 로 되어있지만 실제 셀렉트박스를 클릭 시 안내문구는 선택할 수 없게 되고실제 데이터 값만 선택할 수 있게 되어서 개발자가 편할 듯. IE9+, 크롬, 파이어폭스 모두 잘 적용됐다. IE8 테스트는 해보지 못함. ==선택하세요== One Two Three Four Five 2017. 10. 10. [크롬] 자동완성 input 파란색 배경 없애기 크롬브라우저나 모바일 webkit기반 브라우저에서는 자동완성값이 저장된 input박스의 배경색으로 파란색(하늘색)으로 표현해 주는 기능이 있다. 이에 대한 말이 나와서.. 구글링 한 결과 css로 잡을 수 있었다. 역시 갓구글 /* input box color */ input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #fff inset ; -webkit-text-fill-color: #000; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 50.. 2017. 9. 8. a태그 이중 a태그 중첩(이중)으로 사용할 때는a태그 영역을 따로 잡고 z-index를 다르게 하여 사용하면 된다. 대신 href에 tel: 같은 명령어가 있을 경우는 한개만 z-index를 잡으면 뒤에 백그라운드 a태그와는 따로 동작하게 되어있다. 2017. 8. 18. [부트스트랩] 이중 모달창 Multiple Modal창 띄울 때 아래 스크립트를 추가한다.구글에서 찾은 값은 count가 없어서 2개까지만 열 때 가능한 것이고3중, 4중으로 계속 띄울 때가 있을 것 같아서 소스를 조금 수정함. //Bootstrap multiple modalvar count = 0; // 모달이 열릴 때 마다 count 해서 z-index값을 높여줌$(document).on('show.bs.modal', '.modal', function () { var zIndex = 1040 + (10 * count); $(this).css('z-index', zIndex); setTimeout(function() { $('.modal-backdrop').not('.modal-stack').css('z-index', zInde.. 2017. 7. 24. [script] 브라우저, 모바일 체크 브라우저 체크하는 스크립트 // Opera 8.0+ var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Firefox 1.0+ var isFirefox = typeof InstallTrigger !== 'undefined'; // Safari 3.0+ "[object HTMLElementConstructor]" var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!w.. 2017. 3. 28. 이전 1 2 3 4 5 6 ··· 9 다음