끄적대기

접근성 관련해서 레이어를 여러 방법을 생각해보다. 닫기 버튼 위치에 관한 고민으로 예전에 작업을 해두었던 코드입니다. 그때 그때 상황마다 커스텀해서 사용하고 있긴한데...언제 개선시키지__)a; 아래와 같은 내용을 기준으로 작업되었습니다. 1. 사용자가 레이어 제목을 읽고 원치 않을 경우 내용을 다 읽지 않아도 닫을 수 있어야 한다. - 닫기 버튼 제목뒤에 한번 제공 2. 사용자가 문서를 다 읽은 후에 닫을 수 있어야 한다. - 컨텐츠 하단에 닫기 제공 - 보통 확인 취소 같은 용도로도 사용 3. 사용자가 다시 레이어 안의 내용을 읽기 위해 텝을 하였을때 레이어 밖으로 나가지 않고 레이어 안에서 돌아야 한다. - 그리 베스트의 방법이라곤 생각하지 않지만 임시로 하단에 a 태그를 생성해서 다시 처음으로 돌아 올수 있는 여건을 만들어 놓음. :Html <a href="#" class="openLayer">레이어 열기</a> <div class="layerWrap"> <div class="layerContainer"> <div class="layerHead">레이어 제목</div> <a href="#" class="firstClose layerClose">닫기</a> <div class="layerCon"><a href="#">1</a><br /><a href="#">1</a><br /><a href="#">1</a><br /><a href="#">1</a></div> ...

작년부터 만들어 볼까 계속 생각중이던 어렸을때 먹었던 양배추 김치를 자취 버전으로 만들어 보았다. 1. 양배추 반통 썰어서 소금물에 절이기 2. 양파 한개 (취향대로, 파, 쪽파도 역시 취향대로) 3. 고추가루 3~5T 4. 액젓 1T 5. 다진마늘 0.5~1T 6. 설탕 0.5~1.5T 7. 맛보고 소금간 알아서 추가 간은 대충 취향대로 강약조절하면 됨. 처음 담근게 맘에 들어서 나중엔 한통을 사서 쪽파도 넣고 만들어서 저장시킴. 라면 먹을때 짱~ 하루이틀 냉장고에 넣었다가 먹으면 아삭하고 좋네~

아래와 같은 코드가 있다고 할때 <a href="#"><img src="" alt="이미지" /></a> 포커스가 있을때 이미지 사이즈를 넘치게 포커스가 표시될 때가 있다. 주로 크롬, 사파리 브라우저에서 나타나며  크롬의 경우 font-size:0을 추가해 주면 해결 된다. 사파리의 경우는  vertical-align:top 을 추가해 주면 해결 된다. 특이 사항으로는 사파리는 font-size:0을 주면 포커스 크기 높이가 0이 되므로 같이 사용하면 안될 듯... 근본적인 원인은 아직 파악 못했는데  은근히 신경쓰이네...

마소의 발표가 있을때마다 정통부가 또 ms에 달려가겠구나 하는 비아냥 섞인 날들이 여러해 지나다 보니 이번에는 얼마나 달라질까 하는 생각이 들면서 올해를 지켜보고 있다. 뒤돌아 보면 과거에 외국에서 부터 시작된 ie6 장례식등의 구형 ie 브라우저 퇴출 캠페인 이후에 결국 한국도 뒤늦게 나마 정통부 및 포탈들의 광고로 클라이언트(이하 갑)들의 인식을 변하게 만드는 결과를 도출해냈다. 우리의 목표는 고객의 만족이 아니라 갑의 만족이다. 참으로 작업자로써 ie6에 대한 핵과 꼼수로 벗어난 멋진 날들이었음. ie6을 저 세상으로 보낸 마소는 본격적으로 하위 ie에 점차 손을 대기 시작했다. 루머로는 예전부터 이럴때 마다 정통부가 active X에 대한 잇슈 때문에 협의 하러 간다는 비이냥소리가 IT에서는 끊이지 않게 된다는... 다른 브라우저들은 자동 업데이트와 하나의 브라우저에 대한 버전관리로 ie만의 표준을 가진 마소가 웹표준이라는 틀안에서 움직이는 다른 브라우저들과의 대결에서 낡은 하위 브라우저들이 연패를 하고 있기 때문이다. (그래도 한국에선 1위!) 하위 브라우저들의 지원 중단 소식은 즐거웠지만 중단될때마다 새로 발표되는 ie를 바라보면서 작업자들은 더 비명을 질렀다. 한국은 ie 하위 브라우저들이 많이 사용되고 있기 때문에 중단한다 하더라도 서비스를 제공하는 웹페이지는 지원을 안할 수가 없고 그리고 새로 추가되는 ie버전도 맞춰야 하기 때문에 크로스 브라우징 체크만 늘어난다는... 마소에서 발표한지는 몇해 전이지만 본격적으로 2015년에 갑자기 기사들이 늘어나기 시작했다. 실제적으로 사이트 마다 다르긴 하겠지만 제가 있는 바닥쪽은 아직 ie8까지 지원을 해야 한다. 작년에 겨우 ie7을 털어 냈다. ㅠ (ie 하위버전 동적페이지 변경시 style 관련 리소스가 적용 안되는 버그 때문에 얼마전에도 머리를 싸맸다) 이번에 가장 눈에 띄는 캠페인은 역시 공룡포탈 네이버다. (다음은 ...

라디오 박스 선택과 관련되서 텝 형식의 js가 필요할때 잘 써보지 않았는데 모바일 관련 작업을 할때 은근 쓸기회가 많아 지는 것 같더군요. .change() PC에서 작업할때는 왜 생각이 안날까... https://api.jquery.com/change/ <div class="specs"> <ul> <li> <input type="radio" id="specs_01" name="specs" checked /><a href="#"><label for="specs_01">specs_01</label></a> </li> <li>           <input type="radio" id="specs_02" name="specs" /><a href="#"><label for="specs_02">specs_02</label></a> </li> <li> <input type="radio" id="specs_03" name="specs" /><a href="#"><label for="specs_03">specs_03</label></a> </li> <div class="specs_01 specsBox">1</div> <div class="specs_02 specsBox...

급하게 만들어서 사용할때 유용하게 씀. jQuery를 사용할때 checkbox의 선택값을 가지고 올때 attr 과 prop가 있는데 attr 은 html의 속성값을 가지고 온다고 생각하면 되고 ex) checked prop는 javascript의 프로퍼티 값을 가지고 온다고 생각하면 된다. ex) true/false <div class="checkArea">   <p><label for="agree01">동의</label><input type="checkbox" id="agree01" name="" /></p>   <div class="agBox">      agBox      <p class="agBoxClose"><a href="javascript:void(0)">닫기</a></p>   </div> </div> <stye> .checkArea .agBox{display:none;padding:10px;border:1px solid red;} .checkArea.current .agBox{display:block;} </stye> <script> $(function(){ $(".checkArea input:checkbox").click(function(){   if($(this).prop("checked")){       $(this).parents(".checkArea").addClass("current");     }else{       $(this).parents(".checkArea").removeClas...

분명 어디다가 적어 놨는데 또 까먹었다. 쉽게 가져다 쓸수 있게 다시 정리 함; 아 이넘의 건망증... <script type="text/javascript"> function windowOpen(e,width,height){ var url = e.href; window.open(url,'newWindow','width='+width+', height='+height+',top=0, left=0,toolbar=0, status=0, menubar=0, scrollbars=0, resizable=0,'); //window.open(url,'newWindow','width='+width+', height='+height+',top='+((screen.availHeight - height)/2 - 40) +', left='+(screen.availWidth - width)/2+',toolbar=0, directories=0, status=0, menubar=0, scrollbars=0, resizable=0'); } </script> <a href="http://www.daum.net" onclick="windowOpen(this,300,200); return false;" target="_blank">Window Open</a> window.open(url, name, features, replace); url : 표시 할 문서의 URL을 지정합니다. name : 새창의 윈도우의 이름을 지정합니다. 공백문자를 사용할 수 없습니다. 표시되는 부분은 없습니다. 링크에 대한 이름이라고 생각하시면 됩니다. features : 기능. 추가 할 수 있는 옵션 들입니...