행복코딩

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 이므로 연속재생이나 자동재생..

git 에서 어떠한 파일을 제외하고 싶을때 하는 방법.(예를 들어 node_modules ...) 1. .git 이 위치한 파일에 .gitignore 파일 만든다.2. 해당파일에 아래와 같은 규칙으로 작성한다. # 파일전체를 무시할때file_name/ # 파일이름으로 무시할때*.scc //.scc 로 끝나는 파일무시confi* // confi 로 시작하는 파일 무시 #해당 파일명 입력file_name.js // 파일 무시

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..

skipNav 웹접근성의 지침중에 하나로 키보드 tab키를 이용해서 컨텐츠에 접근이 가능해야 한다. html 메뉴바로가기본문바로가기 css /* SkipNavi */#skipNavi{position:absolute;left:0;top:0;z-index:5;width:100%;z-index:1000}#skipNavi li{position:absolute;left:0;top:0;z-index:5;width:100%}#skipNavi a{display:block;width:1px;height:1px;margin-bottom:-1px;font-size:0;overflow:hidden;font-family:'맑은 고딕'}#skipNavi a:active, #skipNavi a:focus{color:#000;wid..

윈도우 팝업 만들기 [ 방법 ] 1. 윈도우 팝업은 태그에 이벤트를 걸어준다.2. 윈도우 팝업은 width="100%"로 하여 만드는 것을 추천한다. (크롬과 익스의 width 계산이 다르다.)3. 가운데 정렬로 띄우기 위해 스크립트를 넣어준다. htmlwin_pop javascript/* 윈도우팝업 */function procedure(w,h,url) {cw=screen.availWidth; //화면 넓이ch=screen.availHeight; //화면 높이sw=w; //띄울 창의 넓이sh=h; //띄울 창의 높이ml=(cw-sw)/2; //가운데 띄우기위한 창의 x위치mt=(ch-sh)/2; //가운데 띄우기위한 창의 y위치test=window.open(url,'tst','width='+sw+',he..