메일폼 등에서 이미지 특정부분에 링크를 걸어야 하는 경우 이미지맵 사용 이미지맵은 이미지 상의 좌표값을 활용하기 때문에 기본적으로 반응형이 적용되지 않는다 그래서 이미지맵의 좌표값들이 반응형으로 적용되도록 플러그인 사용 (rwdImageMaps) /* * rwdImageMaps jQuery plugin v1.6 * * Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize * * Copyright (c) 2016 Matt Stow * https://github.com/stowball/jQuery-rw..
게시판에 에디터가 붙어있는데 작성한대로 보이지 않는 현상이 발생해 일단 아래를 추가.view-contents *, .view-contents p{ color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; word-break: break-all;} 하지만 h로 작성한 내용들이 제목 스타일 먹지 않는 문제가 여전히 있음 부트스트랩이 따로 include 되어있지 않으므로 h 태그 폰트사이즈 지정/* basic */.view-contents{font-size: 16px;line-height: 1.5em;word-break: break-all;}.view-contents img{max-width: 100%;}.view-con..
특정 디바이스(아이폰 등 일부 모바일)에서 폰트 사이즈가 크게 보이거나 마크업대로 보이지 않을 때 none : 디바이스의 크기에 따라 폰트사이즈를 조정하지 않음 auto : 디바이스 크기 따라 폰트 사이즈 자동 조절 (사용 지양) %(퍼센트) : 100%는 모든 디바이스에서 폰트 사이즈 동일, 퍼센트 값 낮추면 디바이스별로 동일하게 작아짐 html, body{ -webkit-text-size-adjust : none; /* 크롬, 사파리, 오페라 신버전 */ -ms-text-size-adjust : none; /* IE */ -moz-text-size-adjust : none; /* 파이어폭스 */ -o-text-size-adjust : none; /* 오페라 구버전 */ } 참고 https://stac..
PC에서는 좌우로 나뉘는 2단 레이아웃이었다가 모바일에서 1단 레이아웃으로 바뀌는 구조 HTML title sub title text area 1 text area 2 CSS .left-box, .right-box{width: 50%;padding: 0 3%;} .left-box{float: left;} .right-box{float: right;} .img-box{width: 100%;height: 300px;margin-bottom: 30px;} @media screen and (max-width: 768px){ .left-box, .right-box{float: none;width: 100%;padding: 0;} .right-box{padding-top: 20px;} } jQuery $(docum..
link link