그리드를 잡다 보면 margin을 통해 각 컨텐츠 간의 간격을 조절하는 경우가 많음 위아래 값을 줘야 해 처음엔 margin-bottom으로 조절했는데 맨 마지막 행에서는 margin-bottom이 필요하지 않고, 마지막 행에서 컨텐츠의 개수가 유동적으로 바뀌므로 margin-top이 더 적합함 방법은 두 가지가 있는데 ① 레이아웃을 감싼 wrap에 마진 마이너스를 줘서 상쇄시킴 ② 계산해서 마진이 없어지도록 함 두 번째 방법을 PC 4열, TB 2열, MB 1열로 가정하면 다음과 같다 PC ver li {width: calc((100% - 61px)/4); margin-left: 20px; margin-top: 20px;} li:nth-child(4n+1) {margin-left: 0;} li:nth-..
FRAMESET ? 회사에서 오래된 웹페이지의 유지보수가 들어오면 대부분 테이블로 코딩돼 있고 메인 페이지가 프레임셋으로 감싸진 경우가 많다. 프레임은 html 문서 여러개가 한 화면에 보이도록 화면의 공간을 나누는 개념으로 복수의 frame을 하나의 frameset이 감싸고 있는 구조를 가진다. iframe과 다른 점이 있다면 frame은 화면 전체를 분할할 때 사용, iframe은 화면 내에서 작은 프레임을 만들 때 사용 (화면 일부를 분할해 영상이나 지도 등을 삽입할 때 iframe 사용) frameset 하나가 문서 하나일 수도 있고 여러 개의 frameset이 모여 페이지 하나를 이루고 있는 경우도 있다. 전체가 하나의 frameset으로 되어 있고 하위 frame이 또 다른 frameset과 ..
처음에 지도를 가져올 때 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. 일부 메뉴만 새창이 ..