svg 포맷을 이용한 이미지 파일의 색상을 변경하는 것에 대해 검색을 해보면 대부분이 svg 파일을 html에 작성해서 fill 또는 CSS를 이용해서 색상을 변경하라는 내용을 볼 수 있습니다. 하지만 그렇게 비효율적인 방법이라면 mdi같이 svg 포맷을 폰트로 만들어서 사용했을 듯 합니다. SVG 파일의 색상을 HTML 작성 없이 CSS만으로 변경하는 것은 의외로 매우 간단합니다. .svg-test { background-color: #eeeeee; -webkit-mask: url('image.svg') no-repeat center; mask: url('image.svg') no-repeat center; } 이런식으로 mask를 이용해서 image를 불러오고 background 색상을 변경 작업해주..

2021.07.21(화) 오버워치 워크샵 커뮤니티 오버맵 5.0.4 업데이트가 진행되었습니다. 기본적으로 표기되어야할 누락된 개인정보처리방침, 문의 등이 추가되었습니다. ■ 업데이트 안내 - 서비스내 하단(푸터) 개인정보처리방침 동작 및 페이지 추가 - 서비스내 하단(푸터) 이용약관 -> 블로그 변경 - 서비스내 하단(푸터) 문의 -> 동작 및 다이얼로그 추가 ■ 개인정보처리방침 - OVERMAP 초기에는 이메일을 이용하였으나, 2.0.0 이후부터는 오직 Google Oauth 2.0인 구글의 소셜로그인만을 이용하고 있습니다. 이러한 문제로 개인정보처리방침 적용에관한 고민이 상당히 많았는데, 구글에서는 인증 요청 API 일일 할당량이 제한되어 있어서 추후에 로그인 관련 문제가 예상되어 누락되었던 개인정보..

『JavaScript 두 걸음』- JavaScript란? 이번 게시글은 MDN의 '웹 페이지에 JavaScript를 어떻게 넣나요?' 게시글을 탐구합니다. 자바스크립트를 사용하기 위해서는 크게 2가지 방식이 존재합니다. HTML 파일 내부의 자바스크립트 선언 및 호출 HTML 파일 외부의 자바스크립트 호출 HTML 파일 내부에서 자바스크립트 사용 See the Pen by GM Yankee (@GMyankee) on CodePen. html 내부에서는 위처럼 html 영역에서 ``를 이용해서 감싸고 사용합니다. body 내부에서 작성하여도 동작하지만, head에 작성하는 경우를 많이 볼 수 있습니다. head에 작성하는 이유는 주로 브라우저가 콘텐츠를 그려내기 전에 미리 호출하여 파일을 불러옵니다. 하지..

MDN에서 발췌한 JavaScript 가이드를 기반으로 CodePen을 이용하여 학습 공유를 재구성하는 시리즈입니다. JavaScript | MDN JavaScript (JS)는 경량, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js, Apache CouchDB, Adobe Acrobat처럼 많 developer.mozilla.org JS를 두서없이 익히고 사용한 지 7년이 지났지만, Python과 마찬가지로 정말 답도없는 쉽다면 쉬운데 깊이가 깊어질수록 끝이 없는 언어입니다. JavaScript 두 걸음이라고 이름을 정한 이유는 단순히 MDN에서 첫걸음이라고 하니, 한번 더 나아가자라는 의미로..

2021.07.09(금) 오버워치 워크샵 커뮤니티 오버맵 5.0.3 업데이트가 진행되었습니다. ■ 버그 수정 ■ 변경 사항 버그 수정 모바일에서 하단 네비게이션 가운데에 위치한 워크샵 등록 버튼이 동작하지 않던 오류 수정 오버맵 메인 페이지에 노출되는 다음과 같은 영상 목록들이 업데이트 되지 않는 오류 수정 영상 패치노트 오버워치 유튜브 오버워치 워크샵 오버워치 시네마틱 패치노트 업데이트가 이루어지지 않는 오류 수정 메인 페이지에 상단 배너 이미지들이 정상적으로 출력되지 않는 문제 수정 변경 사항 모바일에서 워크샵 목록에 존재하는 게시글들의 아이콘 크기가 일괄 하향 조정되었습니다. 모바일에서 워크샵 목록 게시글들의 양쪽 여백을 제거하였습니다. 메인페이지에 우측에 까만 선이 표기되던 현상을 제거하고 요소들..

2021.06.30 오버워치 워크샵 커뮤니티 오버맵 5.0.2 업데이트가 진행되었습니다. 오버워치 워크샵 커뮤니티 - 오버맵 오버워치 워크샵, 유즈맵 코드를 등록하고 공유하며, 다양한 워크샵을 바로 이용하고 공유해보세요! overmap.me ■ 수정 내역 로그인 버튼 수정 로그인 모달(dialog 팝업) 추가 워크샵 상세페이지 높이 조정 ■ 서비스 아키텍처 변경 ■ 확인된 버그 ■ 패치 예정 수정 내역 로그인 버튼 수정 기존 Google 계정으로 로그인 버튼에서 유저 아이콘으로 변경되었습니다. 로그인 모달(dialog 팝업) 추가 로그인 버튼을 클릭하면 로그인을 할 수 있는 로그인 모달 팝업이 나오도록 변경되었습니다. 모바일에서는 modal이 아닌 풀 스크린으로 나타납니다. 워크샵 상세페이지 높이 조정 ..