작업 일지 39

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

작업 일지/JS 2024.03.04

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

갤러리 작업할때 이미지를 새창으로 띄우는 경우가 있는데 이런 경우 사이즈가 다 달라서 애먹을 적이 있었습니다. 검색해보니 이렇게 사용하는 경우도 있어서 저도 사용 후 기록합니다. 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..

작업 일지/JS 2024.03.04

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