퍼즐 놀이 퍼즐 놀이

반응형이 많이 쓰이는 요즘 더 이상 이미지로 화살표나 X버튼을 만들어서 이미지가 깨지거나 수정시 하게 되는 업로드의 불편함을 줄여주는 방법이 되겠다. 화살표 만들기 1. ::after에 border와 transform을 활용해서 만드는 방법 .arrow {position: relative;} .arrow::after {position: absolute; left: 0; top: 0; content: ''; width: 50px; height: 50px; border-top: 5px solid #000; border-right: 5px solid #000; transform: rotate(225deg);} transform 값 4개정도는 알아두고 적절하게 활용하자. 45deg, ∧ 315deg, ∨ ..

1. checked 여부 확인 $("input:checkbox[id='ID']").is(":checked") == true : false /* by ID */ $("input:checkbox[name='NAME']").is(":checked") == true : false /* by NAME */ 2. checked/unchecked 처리 $("input:checkbox[id='ID']").prop("checked", true); /* by ID */ $("input:checkbox[name='NAME']").prop("checked", false); /* by NAME */ 3. 특정 라디오버튼 선택 / 모든 라디오버튼 선택해제 $("input:radio[name='NAME']:radio[value='..

웹사이트를 만들다보면 Contact 페이지에 지도를 넣게 되는데요.구글맵 API를 이용해서 하는 방법을 소개해 드리겠습니다.어려운 건 없으니 따라해 보시면 될꺼예요. https://developers.google.com/maps/?hl=ko구글 API는 너무 자세히 나와 있어서 포스팅이 무색하긴 하네요. Android, iOS, 웹 브라우저 및 HTTP 웹 서비스를 통해 이용할 수 있어요.그중에 저는 웹브라우저에 사용하는 방법을 알려드리겠습니다. 01. HTML내에 자리 만들어주기html 안에 자리를 만들어 주고 id값을 지정해 줍니다. 02. 스크립트 추가하기구글맵을 불러올 수 있는 자바스크립트를 추가해 줍니다. zoom이 0이면 완전히 축소된 지도이고, 확대/축소 수준이 높아질수록 더 높은 해상도로 ..

코딩을 하다보니 이 크로스브라우징 제대로 되지 않는게 확인 된다.기본으로 설정을 했을 때는 문제가 없었으나디자인적인 요소 적용을 했을 때가 문제였다.200px 가로 사이즈의 짧은 구분선을 지정해서 확인해보니크롬에서 확인했을 때 좌측정렬로 잘 보였으나익스에서는 중앙정렬로 보이면서 디자인이 일그러져 버렸다. ㅠㅠ 크로스브라우징을 생각한다면 대신 로 하는 게 현재로써는 가장 편한 방법이지 싶다.