OK DDODDO LAB

탭 경우 "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 작업 시 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..

이 기능은 iframe 에서 생기는 스크롤을 없애고, windows 스크롤을 이용하고자 할때 사용합니다. HTML

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

작업을 하게되면 top 버튼 구현해 달라고 하는 경우가 많이 있습니다. 모바일 경우는 거의 필수이지 않나 싶은데요? 여러방법이 있을텐데요 내용 참고만 해주시면 되겠습니다. HTML Top CSS div.tbox { margin: auto; width: 500px; height: 2000px; border: 1px solid #bcbcbc; } a.top { /*스크롤해도 위치가 변하지 않도록 만들고, 적당히 위치를 잡은 후 보이지 않게 합니다.*/ position: fixed; left: 50%; bottom: 50px; display: none; } JS $( document ).ready( function() { //스크롤하여 밑으로 내려갔을 때 링크가 보이게 $( window ).scroll( fu..