by yebeen -

input tag box-shadow in ios

프로젝트 진행하다가, input 태그에 border를 추가했는데.
Ios에서만 shadow가 적용이 되어 있더라구요!
구글링을 해보니까 Ios에서 있는 버그라고 하더라구요~

당연히 해결방법도 찾았어요!
아래를 참고하세요:)

<style>
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
</style>
by yebeen -

placeholder 스타일 변경

가끔 화면을 만들다 보면 input창에 placeholder속성에 스타일들을 주어야 하는 경우를 볼 수 있어요!

그 경우에는 당황하지말고, 이 스타일들을 참고하세요 🙂

<style>
   /* WebKit, Blink, Edge */
   ::-webkit-input-placeholder {
      //example
        color:    #909;
   }
   /* Mozilla Firefox 4 to 18 */
   :-moz-placeholder {
      //example
       color:    #909;
       opacity:  1;
   }
   /* Mozilla Firefox 19+ */
   ::-moz-placeholder { 
      //example
      color:    #909;
      opacity:  1;
   }
   /* Internet Explorer 10-11 */
   :-ms-input-placeholder { 
      //example
      color:    #909;
   }
   /* Microsoft Edge */
   ::-ms-input-placeholder {
     //example
     color:    #909;
   }
</style>

 

by yebeen -

bxSlider

컨텐츠 슬라이더 하나 추천해드릴게요!
사람들이 가장 많이 사용하는 슬라이더에요!
물론 그만큼 버그도 종종 발견되는 편이지만 구글링을 통해 어느정도 커버가 가능합니다!

제가 추천해드릴 슬라이더는 bxSlider입니다!
들어보신적 있으세요?

bxslider를 사용해야하는 이유!!
Why should I use this slider?

1. 어떠한 디바이스에서도 적용되는 반응형
2. 다양한 슬라이더모드를 가지고 있다. (Horizontal, vertical, fade)
3. 이미지, 비디오 그리고 그냥 HTML코드 내용까지 슬라이드 가능!
4. touch와 swipe를 지원한다.
(사실 이 부분은 공감 못해요! 전.. 이부분으로 인한 버그로 엄청 고생했답니다!)
5. 다양한 브라우저 지원 (Firefox, Chrome, Safari, iOS, Android, IE7+)

이 외에도 여러 이유가 있으니 사이트를 참고해주세요!

http://bxslider.com/

사이트에 들어가시면 예제와 옵션에 대한 설명이 친절하게 설명되어 있어요!
나중에 공부삼아 번역해서 올려볼게요 🙂