처음에 지도를 가져올 때 1300 x 500으로 가져옴 (pc버전 시안 기준) 카카오맵에서 지도 html을 긁어온 뒤 2. 지도 노드 부분에 인라인으로 width:100%; height:100%를 삽입 3. 실행 스크립트 부분에서 width랑 height값을 지움 HTML CSS .contact-conbox .map-conbox {width:100%; height:500px;} 지도를 감싼 div에 height값을 줌 (반응형 경우 분기점마다 다르게 삽입) *참고 사이트 https://sir.kr/qa/297381
웹폰트 중 한글에서 예쁜 폰트 중 하나가 나눔스퀘어인데 자간이 좁고 가독성이 좋으나 16픽셀 이하로 떨어지면 웹상에서 깨져 보이는 현상이 있음 구글링을 해본 결과 css에 {transform: skew(-0.01deg);}를 주면 깨져 보이는 현상이 덜하다고 함 하지만 16픽셀 이하인 부분만 골라 css를 주는 것도 번거롭기 때문에 우리 회사의 경우 시안에서 title의 경우 혹은 18픽셀 이상인 경우에만 나눔스퀘어를 사용하고 그 외에는 그냥 Noto Sans Kr를 사용한다 (그 외 덜 깨지는 폰트들 : 애플고딕, 나눔고딕, 맑은고딕, 돋움)
하나의 탭 메뉴와 그에 딸린 콘텐츠가 한 div로 묶여 있는 구조 HTML MENU1 sub-menu sub-menu sub-menu MENU2 sub-menu sub-menu sub-menu CSS .board-cont{position: relative;width: 100%;} .board-list .board-tit{display: block;height: 28px;margin-bottom: 15px;color: #c8c8c8;font-weight: 400;cursor: pointer;} .board-list .board-tit.on{color: #383846;font-weight: 500;} .board-list .board-tit .btn-more{float: right;} .board-list ..
body 부분에 어떤 메뉴 영역 div가 있다. PC버전에서는 hover를 하면 하위 메뉴가 나타나고 태블릿에서는 클릭 이벤트로 바뀌며 모바일 시에는 클릭하면 하위 메뉴 중 최상단의 메뉴 링크로 곧바로 이동함 모바일에서만 div에 링크를 걸어야 하는 상황에서 사용한 window.location(); 1. div 클래스를 link-box라고 가정 2. link-box에 속성으로 추가. 따옴표 안에 이동할 링크 주소를 넣어둔다 3-1. 모든 링크가 해당 창에서 링크로 바로 이동하는 경우 $('.link-box').on('click', function(e){ var $Link = $(this).data('url'); window.location.replace($Link); }); 3-2. 일부 메뉴만 새창이 ..
