반응형

퍼블리싱 로그 43

fade 효과 - setInterval( ) - 2가지 이미지 깜빡이며 보이기

서로다른 이미지 깜박이며 노출 HTML CSS body { background-color:#111; } #wrap{ margin:30px auto; width:600px; } .fade_container { position:relative; width:600px; height:350px; border:2px solid gold; } .fade_container img{ position:absolute; width:100%; height:100%; } .fade_container img:nth-child(1){ background-color:#fff; } .fade_container img:nth-child(2){ background-color:red; } .fade_container img:nth-chi..

이미지 사이즈에 맞게 팝업 띄우기

갤러리 작업할때 이미지를 새창으로 띄우는 경우가 있는데 이런 경우 사이즈가 다 달라서 애먹을 적이 있었습니다. 검색해보니 이렇게 사용하는 경우도 있어서 저도 사용 후 기록합니다. HTML 팝업 확인 > JS function fn_control(img){ foto1= new Image(); foto1.src=(img); Controlla(img); } function Controlla(img){ if((foto1.width!=0)&&(foto1.height!=0)){ viewFoto(img); }else{ funzione="Controlla('"+img+"')"; intervallo=setTimeout(funzione,20); } } function viewFoto(img){ largh=foto1.widt..

탭 UL 접근성

탭 경우 "tab-linker"(탭영역) , "tab-contents" (탭패널) 부분으로 나뉘어 지고, 접근성 작업을 하면서 수정 부분들이 전달 왔습니다. 아래와 같이 코드를 작업했는데 뭐가 잘 못 된건지 모르겠어서 자료를 찾아보니 컨텐츠에는 selected 가 아니라 expanded 를 적용해야 한다고 합니다. 이유는 role="tabpanel"에는 제공하지 않고 role="tab" 등 초점을 받을 수 있는 요소에 제공하는 것이 원칙이라서 이 와 같은 실수를 하지 않기위해 기록하겠습니다. 탭 버튼 컨텐츠 리스트-1 TAB-1 TAB-2 컨텐츠 리스트-1 컨텐츠 리스트-2 컨텐츠-2 자세한 내용 참고 w3c 공식문서: https://www.w3.org/TR/wai-aria-1.1/#tab https:/..

SVG Circle Progress / SVG rem ios 이슈

* SVG Circle 작업 시 rem 단위 경우 ios 사파리 에서 적용 안됨. rem 단위를 px로 변경하면 정상 작동됩니다. HTML 1 2 CSS .circle-wrap { display: flex; justify-content: center; } .circle-wrap .circle-progress { position: relative; width: 3.375rem; height: 3.375rem; } .circle-wrap .circle-progress:nth-child(n+2) { margin-left: 0.375rem; } .circle-wrap .circle-progress svg { width: 3.375rem; height: 3.375rem; transform: rotate(-90de..

따라다니는 배너

익스플로러, 크롬에서 확인하였습니다. HTML 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 배너 CSS #quick-banner { position:absolute; height:300px; /* 퀵메뉴, 배너 이미지의 높이 */ width:170px; /* 퀵메뉴, 배너 이미지의 너비*/ margin:0px 0px 0px 500px; /* 가장 오른쪽의 수치가 화면 가운데에서 얼마만큼 오른쪽으로 레이어를 붙일 것인지 설정 */ top: 110px; /* 배너 상단에서 얼마나 떨어뜨릴지 설..

반응형