취/창업여부 취업 창업 특정 이유로 fieldset을 사용할 수 없다면 role=”radiogroup”, role=”group”을 적절하게 사용. 라디오가 아니라 체크박스인 경우 role="group" 사용. aria-labelledby : aria-labelledby를 사용하면 어떤 요소의 레이블로서 DOM에 있는 다른 요소의 ID를 지정할 수 있습니다. 출처: https://nuli.navercorp.com/community/article/1132737 https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA/forms/Basic_form_hints
role(역할): 특정 요소에 역할정의, 사용자에게 정보제공, 부여한 역할 동적변경 불가 role="application" :동일요소x,div요소와같이 그룹역할을하는 요소로 대체 role="banner" :비슷한 의미로 사용가능 -> 로 사용시 1페이지에서 1개만 사용하기를 권장 role="navigation" :와 동일 role="main" :과 동일 ->1페이지 내에 1개만 사용가능하다. 본문의 주요 컨텐츠 영역 role="aside" :와 동일, 주요컨텐츠와 연관이 적은 의미를 가진 영역 role="form" :와 동일, 서버에 전송될 수 있는 콘텐츠, 폼관련 요소 모임 role="search" :검색 역할을 담당하는 서식영역, 또는 에 사용권장. role="contentinfo" :와 비슷, 로 ..
1. input type="file" 이미지 화 label { display: inline-block; cursor: pointer;} input { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0);} 2. input type="checkbox" 이미지 화 .checkbox { display:none; } .checkbox +label { display: inline-block; height:19px; padding-left: 26px; line-height: 22px; background: url(ico_checkbox.png) no..
vezzle.co.kr에 사용된 JS $(document).ready(function () { vezzle = { mobileSize: 767, init: function () { vezzle.menuopen(); vezzle.mobilemenu(); vezzle.topfix(); }, /* 메뉴 활성화 */ menuopen: function () { if(typeof depth !== "undefined") { var $nav = $(".gnb").find(".menu"); $.each($nav.find("a"), function(index, item) { var _item = $(this).attr("data-menu"); var _depth = _item.split("_"); var _depthSh..
전제를 감쌓는 경우 wrap form body area - 패딩을 넣을 클래스 여러 태그를 그룹화할 경우 *-group 하위 태그를 그룹화 할때 사용 *-itme ul, ol등에 사용 *-simulation 설문 목록을 묶을때 *-box 배경색을 포함한 글자들을 묶을때 menu - 메뉴를 감쌀떄. 단일 태그 혹은 그룹태그에 사용 control 어떤 대상을 조정/제어하는 경우 required 필수값을 표시할떄 pragraph 문단 들에 사용 immutable 변경할 수 없는 곳에 사용
1. 가장 흔하게 사용하는 미디어쿼리 정리입니다. @media all and (min-width:500px){ .step1 .form-group .numbers button { font-size: 42px;} } all: 모든 장치에 적합합니다. print: 인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서입니다. screen: 주로 화면이 대상입니다. speech: 음성 합성장치 대상입니다. @media (orientation: portrait) { ... } 모바일에서 세로모드인 경우 @media (orientation: landscape) { ... } 모바일에서 가로모드인 경우 @media (min-height: 680px), screen and (orientation: portrait) { ..