행복코딩

ie8 에서 배경을 width:100%; height:100% 한것처럼 나오게 한다. css filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://www.w3schools.com/cssref/pineapple.jpg', sizingMethod='scale')

opacity 속성은 css3 이기 때문에 ie8 이하에서는 적용이 안된다. 크로스브라우징을 위해서는 다르게 적용해야 한다. ie8 적용 opacity : 0.2;-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" ie7 적용 filter : alpha (opacity=50)

iframe 을 활용한 유투브, 구글맵을 반응형으로 꽉채우는 방법이다. # 유투브 1. html 구조 (영상은 임의로 아무거나 가져온 것이다.)유투브에 공유하기에서 iframe 으로 가져온 소스이다. 2. css 구조 html,body{margin:0;padding:0;} .container{width:80vw;height:100vh;background:grey;margin:0 auto;} .movie{position:relative;max-width:100%;height:0;overflow: hidden;} .movie iframe{position:absolute;width:100%;height:100%;top: 0;left: 0;} .is-4by3 {padding-top: 75%;} /* 3 / 4 ..

요즘은 비디오 태그를 이용해서 배경으로 자동재생해서 넣는 경우가 종종 있다..gif보다 부드럽고 예쁘게 나타낼수 있어서 비디오 태그의 효과가 더 극적인거 같다. 그러나 비디오 태그는 ie8 이상부터 가능하기 때문에 크로스브라우징 이슈를 고려해서 사용해야 한다. 1. 자동재생 : autoplay비디오 자동재생은 웹접근성에 위배되서 크롬같은 일부 브라우저가 막아놓았다. 그러나 음소거일 경우에는 가능하다고 하니 muted 속성과 같이 쓰면 된다. 2. 연속재생 : loop연속재생 속성을 넣으면 무한으로 돌아간다. 3. 로딩이슈 : preload브라우저 로딩시 미리 로딩을 준비해 놓으면 빠르게 렌더링 할수 있다. 4. 네이티브 컨트롤러 : controlsdefault 값이 false 이므로 연속재생이나 자동재생..

select 박스는 폼태그로 브라우저에서 스타일정의가 어렵게 만들었다.접근성에 스타일변경을 막은것이기 때문이다. 그러나 ie9 이상부터는 select 도 스타일을 줄수 있게 되었다. css로! html 글자 css .select {display: inline-block;position: relative;}.select:after {display: inline-block;content: '';position: absolute;right: 9px;top: 11px;width: 8px;height: 8px;border-bottom: 1px solid #363636;border-left: 1px solid #363636; -webkit-transform: rotate(-45deg);-ms-transform: r..