코드공부방

레이어팝업을 띄우면 뒤쪽 콘텐츠의 스크롤을 막아달라는 요청이 간혹 있다. (그냥 스크롤이 가능하게 되길 희망하는 클라이언트도 있다.) /* CSS */ .hidden {height:100%; min-height:100%; overflow:hidden !important; touch-action:none;} //Javascript function scrollDisable(){ $('html, body').addClass('hidden'); } function scrollAble(){ $('html, body').removeClass('hidden'); } 레이어팝업을 띄우는 함수안에 위와 같은 함수를 만들어 넣어주면 된다. 위 함수는 html과 body태그에 "height:100%; overflow:hid..

작업을 하다보면 리사이즈 됨에도 박스비율을 유지해야 하는 경우가 있다. (특히 반응형 작업에서) 박스의 width값은 100%로 지정하면 되지만 height값을 어떻게 해야 박스의 비율을 유지할 수 있을까? max-width가 500px인 레이아웃안에 1.618:1 비율의 박스가 들어가야 한다고 가정해보자. 그리고 이 박스는 브라우저 사이즈가 작아져도 같은 비율을 유지해야 한다. 최초 박스 비율 세팅은 max-width 500px에 맞게 309px로 css에서 height값을 지정을 하여 1.618:1의 비율로 지정했지만 브라우저 resize시 width값은 계속 줄어들지만 height값은 309px로 고정값이기 때문에 그 비율은 유지할 수 없게된다. BOX 1 : 1.618 .boxs {max-widt..

웹사이트 작업을 하다보면 임시 이미지를 삽입해야하는 경우가 많이 생긴다. 간혹 디자이너가 만들어주기도 하지만 그렇지 않은 경우도 많다. 그럴땐 구글 검색 해서 적당한 이미지 URL을 따와서 사용했었는데, 더 좋고 깔끔한 방법이 있다. 바로 placeholder.com URL에서 나타내듯 placeholder image 서비스이다. 사용법도 매우 간단하다. 위와 같이 작성하면 300px * 300px 사이즈의 이미지가 아래와 같이 바로 로드된다. 임시 이미지에 해당 이미지의 사이즈까지 친절하게 쓰여져 있어 더욱 편하다. 정사각형이 아닌 경우는 200x400과 같이 가로x세로를 써주기만 하면 된다. 이미지 확장자는 gif뿐만 아니라 jpg, jpeg, png도 사용 가능하다. 생성(?)된 이미지를 다운로드 ..