-
Javascript, jQuery 2017‧03‧02
체크박스 라벨을 이미지 만들었고 클릭해도 반응 없을 때
input 중에 checkbox를 만들고 checkbox는 안보이게 포지션 잡은 뒤 label안에 디자인된 체크박스를 넣었을 때 가끔 이 안의 이미지를 눌러도 checkbox 값이 변경되지 않는 경우가 있다. 이럴 때 스크립트를 넣어주자. $("label img").on("click", function() { $("#" + $(this).parents("label").attr("for")).click(); });
-
Html, CSS 2013‧09‧11
css3 - 이미지 교체
미디어쿼리를 사용할 때 이미지를 교체할 경우가 있다. #id img{ content: url("image.png"); } # id 자식 요소 중에 img가 있다면 image.png로 이미지를 노출한다. 하지만 이 방법은 아직 추천하지 않는다. 크롬 조차 제대로 작동하지 않을 때도 있고 css3이다보니 제대로 안보여지는 경우가 많다. 알아두면 좋은 정보니까 메모! img[data-src-desktop] { content: attr(data-src-desktop, url); } 위 방법도 있다고 하니 참고!
-
Html, CSS 2013‧04‧04
이미지에 여백이 생길 때 해결 방법들
이미지 태그를 이용하다보면 이상한 약간의 여백이 발생한다. 위 이미지를 보면 사진틀 이미지를 위아래로 나눈 것인데 아랫부분에 여백으로 인해서 약간의 공간이 생겼다.확대해서 보면 아래와 같다. 약간의 여백이 생겨서 위 아래 이미지가 떨어진 현상을 발견하였다.파이어 폭스로 해당 이미지의 부모 div 요소를 선택하면 아래와 같이 셀렉트 되어진다. 이유는 모르겠지만 해결 방법은 아래와 같다. 1. 이미지 요소에 vertical-align:top;을 […]