MDN에 애정이 있으신가요? Mozilla 개발자 네트워크들을 홍보하기 위한 자료들을 공유하여 오픈 웹이 더 풍성해지도록 도와주세요! 배경화면, 스티커, 포스터, 애니메이션, 배너등 필요한 건 다 준비되어있습니다. 

MDN에 대해서 또는 웹기술을 위한 관련 Wiki를 만드는 것에 도움을 주는 방법에 대하여 더 알아보고 싶으신가요?

소셜 미디어에 링크를 퍼트리세요

MDN에서 도움이 될만한 내용을 찾았나요? 트위터, 페이스북, 해커뉴스, 레딧등 어디든 좋으니 그 멋진걸 공유하세요. 트위터 @MezDevNet 계정에도 알려주면 좋겠지만 필수는 아니에요. 

답변할 때는 MDN 링크를 사용해요

질문자에게 답변이 될만한 MDN 링크를 찾아서 공유해주세요. 스택 오버플로우에 올라오는 질문, 트위터에서 쏟아지는 외침, 동료개발자가 슬랙 채널로 요청한 것 등 그것이 무엇이든 웹 개발에 관련된 질문의 답은 대부분 MDN에서 찾을 수 있습니다.

개발자 모임에서 MDN을 인용하세요

자바스크립트와 관련된 소규모 밋업(meetup)이나 대형 개발 컨퍼런스에서 발표할 때 MDN 아티클을 사용해서 주제를 보안하고 청중에게 배경지식을 제공하세요. 온라인 슬라이드라면 @MozDevNet 에 자랑해주는 것도 좋아요. 하지만 정말 중요한건 여러분이 필요한 사람들에게 최고의 정보를 제공했다는 겁니다!

WordPress 플러그인

워드프레스용 MDN 홍보 플러그인은 웹 기술이나 Mozillar 관련 제품에 대한 글을 쓰는 블로거들이 MDN과 함께 자기 블로그를 홍보할 수 있도록 해줍니다. 

블로그에 포스팅하고 게시할 때 게시물에 HTML, JavaScript, CSS와 같은 단어들이 MDN의 해당 페이지에 자동링크됩니다. 웹 기술에 대한 글을 쓰면 여러분이 아무것도 하지 않아도 자동으로 관련 문서가 연결됩니다. 엄청 편해요! 자동 변환되는 단어와 관련 MDN 페이지는 Github의 def-list 브랜치에 설정 파일로 있습니다.  (https://github.com/mdn/wp-promote-mdn/tree/def-list)

플러그인 설치하기는 우리 모두에게 도움이 됩니다. 만약 아래 플러그인을 설치하지 않으셨다면 여기서 하세요. 플러그인 개발에 기여하고 싶다면 wp-promote-mdn GitHub 레파지토리 로 이동하세요.

JavaScript 코드 스니펫

최선의 방법은 위에서 소개한 MDN 홍보 플러그인이지만 WordPress를 사용하지 않는다면 아래 Javascript 코드를 여러분의 사이트나 블로그에 추가해서 웹 기술 용어에 MDN 페이지를 링크걸 수 있습니다. 이 스크립트는 WorkPress 플러그인과 동일한 일을 합니다. 내용중 인지한 단어를 관련된 MDN 페이지로 연결해줍니다. 

옵션 객체 omaxLinks 값을 변경하면 링크를 걸 단어 최대값을 정할 수 있습니다. 또한 검색할 HTML  요소와 링크 생성시 사용할 클래스명, 검색에 사용할 키워드와 문서 URL도 설정 할 수 있습니다. 

이 코드는 문서 하단의 </body> 태그 바로 위에 넣기만 하면 동작합니다. 

<script>
    (function (d,f,a) {
        // Your settings here
        var o = {maxLinks: 4, searchElements: ['div', 'h'], linkClass: 
'link-to-mdn', extraLinks: {'keywordx': 'http://example.com'}};

        var s=d.createElement("script");s.type="text/javascript";if(s.f)
        {s.a=function(){if(s.f=="loaded"||s.f=="complete")
        {s.a=null;PromoteMDN(o)}}}else{s.onload=function()
        {PromoteMDN(o)}}s.src="https://raw.githubusercontent.com/riverspirit/promote-mdn-script/master/promote-mdn.js";
        d.getElementsByTagName("head")[0].appendChild(s)
    })(document,'readyState','onreadystatechange');
</script>

이 코드 스니펫을 실행하면 실제로 동작하는 코드는 Github에서 불어옵니다. 만약 보안, 성능등의 이유로 여러분의 서버에 이 코드를 올리길 원한다면, 다운로드해서 여러분의 서버에 올리고, 위 코드 9라인에 URL를 바꿔 넣으면 됩니다. 

배너 이미지

배너를 몇 개 준비했습니다. 여러분의 사이트에 MDN 홍보 배너를 걸고 싶다면 사용하세요. 

MDN Banner: 240x240px Better Docs for a Better Web

By Developers for Developers

Better Docs for a Better Web

MDN과 링크되어있는 배너들을 사용하는 것에 부담가지지 마세요!

데스크탑 바탕화면

2006 Firefox Developer's Summit에서 Chris Beard가 발안하고 Sean Martell이 디자인 하였습니다. 이 그림은 2007년에 개최된 SWSW conference에서 많은 사람들의 호옹을 받았습니다. 이제 데스크탑 배경화면으로 다양한 사이즈가 준비되어 있습니다.

이 배경화면은 Creative Commons Attribution-NonCommercial license를 따릅니다. 또한 이 배경화면은 Mozilla Trademark Policy에 의해 보호됩니다.

문서 태그 및 공헌자

이 페이지의 공헌자: zziuni, gigibean, LimeClover, teoli, Channy, Sagevincent
최종 변경자: zziuni,