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. 유닛 테스트 등등이 있습니다. 걸프를 사용한다면 위 작업들을 자동화 시켜 한번..

안녕하세요! 레미입니다. 4년전 작업했던 앱에서 본문을 스크롤링하면 상태바와 홈버튼 영역에 컨텐츠가 그대로 노출되는 이슈가 발생하였습니다. 홈버튼 영역의 경우 스크롤링을 하지 않아도 화면 로드시 컨텐츠가 노출이 되어 하단 버튼이 붕 - 떠보이는 현상이 있었습니다. 해당 앱은 특정 서비스가 메뉴로서 들어간 화면이었습니다. 그래서 다른 메뉴의 화면은 정상적으로 표현되나, 저희 화면만 문제가 있어서 해결하는데 좀 더 집중한 작업입니다. 그래서 기록차 글로 남겨봅니다. 1차 테스트 01정상적으로 표현되는 다른 화면과의 차이점 찾기 - safe area 이슈를 구글링하면, meta viewport 태그에 "viewport-fit:cover" 속성을 추가하라는 글을 찾을 수 있습니다. head 태그도 따로 관리가 ..

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

안녕하세요~ 레미입니다. 오늘은 매우 간단한 css 팁을 데려왔어요. 웹사이트에서 기사와 같은 텍스트를 드래깅하면 아래 이미지와 같은 파란색의 배경 + 흰색 글자 색상을 볼 수 있습니다. 브라우저에서 기본적으로 제공되는 스타일이에요. 그 색상을 "::selection" 이라는 선택자로 손쉽게 변경할 수 있는데요. 배경, 글자색 뿐만아니라 더 다양한 항목의 색상과 모양을 바꿀 수 있다는 점이 재밌어요. 저도 이 글을 포스팅 하기 위해 찾아보며 더 자세히 알게 되었습니다. "::selection" 소개 - 글자를 마우스로 선택하거나 드래깅했을 때 특정 태그에 스타일을 적용할 수 있는 가상 선택자입니다. 사용 방법 - css에 아래 예시와 같이 설정할 수 있습니다. "::selection"만 사용 시 모든 태..

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

안녕하세요~ 레미입니다. 오늘은 작업 관련 글이 아닌, 티스토리 블로깅에 유용한 정보를 가지고 왔습니다. 이 곳에 퍼블리싱 관련 정보를 올리기 시작하고 글이 갯수가 많아지는 동안, 방문자의 수는 손에 꼽을 정도로 적었어요. 하하핳 꾸밈없이 유용한 정보를 정리해서 올린 글이었는데 조회수가 너무 적어서 생각이 많아졌습니다. 그래서 오늘은 제가 쓴 글을 직접 구글에 검색을 해봤더니 웬걸? 아예 검색조차 되지 않더라구요. 그래서 구글에 블로그 글 검색되는 방법을 찾아봤어요. 여러 블로그에서 구글 서치 콘솔에서 설정하는 방법은 안내해주셨는데 저는 같은 창을 켜봐도 알려주시는 메뉴가 안보였습니다 ㅠ 그래서 여러 글을 번갈아 봐도 알려주시는 것은 똑같아서 꽤나 헤매였어요. 그러다가 결국 해결했습니다. 구글 서치 콘솔..

안녕하세요! 레미입니다. select 박스 디자인을 변경하는 3가지 방법을 소개해드리려고 합니다. 구글에서 검색하면 아주 손쉽게 방법을 찾으실 수 있는데요. 제가 직접 겪은 디자인 변경 이슈 해결 방안도 함께 공유해 드리겠습니다. 눈에 잘 띄도록 핑크색 화살표로 변경해보았습니다 :) 1. select 박스 자체의 디자인을 제거 후, background를 활용하여 새로운 화살표 이미지 적용하기. - 제일 간단하게 사용할 수 있고, 제일 많이 쓰이는 방법입니다. 위 이미지의 핑크색 점선으로 표시한 속성이 핵심입니다. ① select 박스 자체의 화살표 appearance를 제거합니다. IE 대응을 위하여 스타일 추가 적용이 필요합니다. EX. select { -webkit-appearance:none; /*..

안녕하세요! 레미입니다. 오늘은 수평정렬에 대한 내용을 가져왔어요. display:inline-block; 실무에서 참 많이 사용합니다. 하지만, 큰 단점 하나를 꼽으라면 자체적으로 3~4 픽셀의 여백을 가지고 있다는 점입니다. 수평 정렬을 시킬 땐 1~2픽셀 차이만 나도 조금 분산되어 보이는 느낌이 드는데요. 3픽셀 이상 차이가 나면 반듯한 느낌을 주기 힘들답니다. 그래서, inline-block으로 지정했을 때 여백을 없애는 방법 3가지+flex layout을 소개해 드리려고 합니다. 위 이미지는 display:inline-block;으로 지정 후, 생기는 3~4픽셀 가량의 여백 예시입니다. 꽤 넓지요? 위 이미지는 아래 소개되는 방법으로 여백을 제거한 예시입니다. 1. float 속성 사용하여 강제..