RAMY, LEE - 은은한 조약돌이 되기 위한 정진의 길.

안녕하세요~! 레미 입니다. A link로 마크업된 항목들에 마우스 over하면, 브라우저 창 좌측 하단에 링크 연결된 url의 주소가 뜨는 걸 볼 수 있는데요. 프로젝트에 따라 해당 상태바를 안보이게 처리 해달라는 경우가 있었습니다. 01웹 브라우저 좌측 하단 URL 상태바 없애기 위 예시 이미지를 보시면 좌측 하단에 Url이 뜨는게 보이시죠? 저 부분을 간단한 제이쿼리를 사용하면 안보이게 뚝딱 처리할 수 있답니다. Code $("body").on('mouseover', 'a', function (e) { var $link = $(this), href = $link.attr('href') || $link.data("href"); $link.off('click.chrome'); $link.on('clic..

05Test file 생성 - src 폴더 하위에 폴더 구성을 지난번에 잘 마치셨죠~? 이번엔, 그 하위에 실제로 사용할 파일을 생성할 차례입니다. 니꼬쌤의 안내에 따라 위와 같이 만들었습니다. 파일에 대한 상세 설명은 아래를 참고해주세요! 그러나, 절대적인 것은 아니니, 다르게 바꾸셔도 괜찮습니다. 1. src\ index.pug //서버에 뜰 프레임 페이지이며 build 후 html 파일됩니다. 2. img\ 이미지 파일 3. js\ main.js , util.js 4. partials\ footer.pug // 모듈화 시킨 footer pug 파일. 5. scss\ _reset.scss, _variables.scss, style.scss // 기본 reset css, 반복적으로 사용되는 variab..

안녕하세요. 레미입니다🤸‍🤸 이번엔 걸프를 활용한 개발 환경 조성 방법 시리즈를 올리려고합니다. 노마드 코더의 강의를 정리한 내용이에요. Info Gulp ? Node.js와 npm 기반의 태스크 러너이며, 소형화, 연결(concatenation), 캐시 버스팅(cache busting), 유닛 테스트, 린팅, 최적화 등 웹 개발에 수반되는 시간 소모적이고 반복되는 태스크들을 자동화하기 위해 사용된다. 프론트 작업을 몇가지만 꼽아보자면, 1. 브라우저 별 css prefixer 붙이기 2. sass 컴파일링 3. 이미지 압축 4. js 트랜스파일링(es6 to es5) 5. css, js 압축(경량화) 6. 웹서버 띄우기 7. 유닛 테스트 등등이 있습니다. 걸프를 사용한다면 위 작업들을 자동화 시켜 한번..

안녕하세요! 헤이즈입니다. 회사에서 최근까지 사용하던 버전은 v4였습니다. 해당 버전에서 툴팁이 필요하여 해당 홈페이지의 Docs를 참고 하였는데요. 최신 버전인 v5도 작년에 정식 출시가 되었더라구요. 대부분은 최신 버전을 사용하시겠지만, 간혹 저희 회사 처럼 사용빈도가 낮아 구버전을 쓰고 계신분들이 있을 수도 있다는 생각에 v4, v5 두가지 툴팁 설정 방법을 기록용으로 포스팅합니다. v4(구버전)에서 툴팁 사용하기 01기본설정 - v4에서는 npm/yarn, download, cdn 3가지 설치 방법을 제공합니다. 설치는 이미 마치셨다는 가정하에 시작하겠습니다. 설치 다음 단계는 초기화입니다. 풀캘린더에서 안내하는 기본 초기화 코드는 아래와 같습니다. Info 풀캘린더는 기능을 플러그인 단위로 나누..

데이터 시각화를 위한 차트 플러그인 중 가장 오래, 많이 사용 해왔던 차트가 highcharts 입니다. 저희 회사에선 2년전까지만 해도 개발자들이 직접 구현을 하였고, 저는 폰트, 색상 등 디자인과 최대한 비슷하게 구현하도록 가이드만 따로 전달하곤 했어요. 디자인과 얼~추 비슷한 모양새만 한 차트를 보며 이건 안되겠다 싶어 직접 만지작 거렸고, 이제는 디자인을 반영한 차트를 직접 그려서 작업 전달을 하고 있습니다. 원하는 방향을 적용하기 위해 api docs와 구글링을 하며 알게된 것들을 나누고, 복기할 요량으로 포스팅 합니다. 자주 사용하는 기본 옵션/세로 스택 컬럼 차트 옵션 function columStackedBar() { //차트 색상 지정 Highcharts.setOptions({ color..

안녕하세요! 레미입니다. 최근 프로젝트에서 프레임워크를 사용하였습니다. 선택한 이유는 반응형 대응이 잘 되어 있고, 공통으로 사용하는 기능에 대해 처리가 잘되어 있으며, 기본 컴포넌트 구성도 짜임새 있게 되어 있기에 쉽고 예쁘게 화면을 구성 할 수 있기 때문입니다. 크게 유명한 몇 가지의 프레임 워크를 비교하였고, 관련 커뮤니티가 있으면서, 디자인도 깔끔한 semantic UI를 최종적으로 선택하게되었어요. 이번에 마주친 문제는 모바일 디바이스에서 일정 높이 이하로 줄어들 시, close을 클릭해서 창을 닫으면 본 창 스크롤이 먹통이 된다는 점이었습니다. 시맨틱 UI 모달을 닫는 방법은 3가지가 있습니다. 1. dimmed 처리된 검정 레이어 클릭(default로 설정되어 있습니다.) 2. 확인/닫기 등..

안녕하세요. 오랜만입니다. 최근 들어간 프로젝트는 반응형 외부 사이트 멤버십 사이트였습니다. 프로젝트 중반에 해당 기업 사이트가 개편이 됨에 따라 멤버십 사이트 디자인도 전부 변경이 되었어요. 그래서 코로나가 기승을 부리는 때에도 굉장히 바쁘게 보냈던 것 같아요. 감사한일입니다. css 팁 메뉴로 들어가는 내용도 실은 작업하면서 부딪혔던 일들이어서 작업일지로 들어가는게 맞으나, 그때 그때 기록을 남기지 못해서 그런지 그 때 상황이 전부 기억나지 않아요. 이 메뉴에 들어오는 아이들은 작업 당시의 기억이 나는 것 위주로 올리려고 합니다. 자 이제 각설하고, 본론으로 들어갈게요. 모바일 디바이스 크로스 브라우징을 하며 발견한 이슈입니다. 아이폰 input/textarea에 텍스트 입력이 안되는 현상이었어요. ..

2020.07.03 타이틀 태그 옆에 선이 예쁘게 그어지는 작업을 했다. 구현 작업 : 유동적인 타이틀 텍스트에 맞게 우측에 그어지는 선이 유동적으로 움직인다. 예제 : 타이틀_______________ / 타이틀틀_______________ / 타이틀틀틀_______________ 문제점: 타이틀 길이에 맞게 우측의 선이 유동적으로 움직여야 하는데, IE, Edge 브라우저에서 width값 인식이 제대로 되지 않는다. 구현 소스 : HTML JQuery 실제 타이틀 텍스트를 감싼 .txt-wrap 태그는 display:inline-block;으로 설정되어있는 상태이며 padding, margin, border등 어떤 css속성도 적용되지 않은 상태이다. 그런데 IE/Edge에선 페이지 리프레시 후, 화..