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

구글맵 넣기 HTML JS function initialize() { /* http://openapi.map.naver.com/api/geocode.php?key=f32441ebcd3cc9de474f8081df1e54e3&encoding=euc-kr&coord=LatLng&query=서울특별시 서초구 서초동 위의 링크에서 뒤에 주소를 적으면 x,y 값을 구할수 있습니다. */ var Y_point = 37.4850609; // Y 좌표 var X_point = 127.0323093; // X 좌표 var zoomLevel = 17; // 첫 로딩시 보일 지도의 확대 레벨 var markerTitle = "SIR"; // 현재 위치 마커에 마우스를 올렸을때 나타나는 이름 var markerMaxWidth ..

아코디언 메뉴 HTML title 1 sub1 sub1 sub1 title 2 sub2 title 3 sub3 sub3 CSS body {margin:20px auto;padding: 0;font-family:"맑은 고딕";font-size:0.9em;} ul#navi {width: 200px;text-indent: 10px;} ul#navi, ul#navi ul {margin:0;padding:0;list-style:none;} li.group {margin-bottom: 3px;} li.group div.title {height: 35px;line-height: 35px;background:#9ab92e;cursor:pointer;} ul.sub li {margin-bottom: 2px;height:..

2023년도 IE는 배제하고 작업을 하는 경우가 대부분 이겠지만. 아직까지 IE적용도 요청하는 곳도 있어서 정리해 봅니다. 익스플로러 8이하의 경우 ie8.css파일을 적용한다

반응형 웹을 만들기 위한 미디어쿼리 입니다. MediaQuery 최신 Fold 폰까지 나와서 너무 머리가 아프지만 정리를 해보겠습니다. responsive / adaptive * responsive (반응형) 크기만 변함 * adaptive (적응형) 일정 크기에 도달하면 틀이 아예 바뀜 * hybrid (요즘 사용하는 반응형) 이 둘을 합친것 크기 바뀌다가 어느정도 크기점이 되면 틀도 바뀐다. 미디어쿼리 이해 출력 장치의 여러 특징 가운데 일부를 참조하여 CSS 코드를 분기 처리함으로써 하나의 HTML 소스가 여러가지 뷰를 갖도록 구현할 수 있는 명세이다. 일반적으로 뷰포트 해상도에 따라 CSS 코드를 분기한다. CSS 코드 내부에서 분기하는 방법 CSS 코드 내부에서 사용하는 미디어 쿼리의 기본적인 ..

작업자 마다 다르고, 프로젝트 마다 다른 나만의 css reset 입니다. 참고만 하세요. /* Reset */ * { background-repeat: no-repeat; } html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; } body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select {-webkit-text-size-adjust: ..