diff options
Diffstat (limited to 'files/ko/mdn/guidelines/code_guidelines/general/index.html')
| -rw-r--r-- | files/ko/mdn/guidelines/code_guidelines/general/index.html | 159 |
1 files changed, 159 insertions, 0 deletions
diff --git a/files/ko/mdn/guidelines/code_guidelines/general/index.html b/files/ko/mdn/guidelines/code_guidelines/general/index.html new file mode 100644 index 0000000000..093f50ae47 --- /dev/null +++ b/files/ko/mdn/guidelines/code_guidelines/general/index.html @@ -0,0 +1,159 @@ +--- +title: 모든 코드에 대한 일반 가이드라인 +slug: MDN/Guidelines/Code_guidelines/Code_guidelines +tags: + - Code + - General + - Guide + - MDN Meta + - 가이드 + - 가이드라인 + - 코드 블럭 + - 코드 블록 + - 코드 스타일 +translation_of: MDN/Guidelines/Code_guidelines/General +--- +<div>{{MDNSidebar}}{{IncludeSubnav("/ko/docs/MDN")}}</div> + +<p class="summary">아래 코드 예제 가이드라인에서 HTML, CSS, JavaScript 나 다른 어느 코드로 예로 들건 , 모든 코드 타입에 적용됩니다.</p> + +<h2 id="이_문서_내용은"> 이 문서 내용은</h2> + +<ul> + <li><a href="/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#들여쓰기_여백주기_사이즈">들여쓰기, 여백주기, 사이즈</a> + + <ul> + <li><a href="/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#들여쓰기">들여쓰기</a></li> + <li><a href="/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#코드_한_줄_길이">코드 한 줄 길이</a></li> + <li><a href="/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#코드_블럭_높이">코드 블럭 높이</a></li> + </ul> + </li> + <li><a href="/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#예제_디스플레이_가이드라인">예제 디스플레이 가이드라인</a> + <ul> + <li><a href="/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#렌더링_된_예제_크기">렌더링 된 예제 크기</a></li> + <li><a href="/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#이미지나_다른_미디어의_사용">이미지나 다른 미디어의 사용</a></li> + <li><a href="/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#컬러의_사용">컬러의 사용</a></li> + <li><a href="/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#좋은_예시와_나쁜_예시_강조">좋은 예시와 나쁜 예시 강조</a></li> + </ul> + </li> + <li><a href="/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#레퍼런스_페이지에서_문법_섹션_작성">레퍼런스 페이지에 문법 섹션 작성</a></li> +</ul> + +<h2 id="들여쓰기_여백주기_사이즈">들여쓰기, 여백주기, 사이즈</h2> + +<h3 id="들여쓰기">들여쓰기</h3> + +<p>모든 코드는 2 스페이스로 들여쓰기 해야합니다. 예를 들면:</p> + +<pre class="brush: html example-good notranslate"><div> + <p>This is my paragraph.</p> +</div></pre> + +<pre class="brush: js example-good notranslate">function myFunc() { + if(thingy) { + console.log('Yup, that worked.'); + } +}</pre> + +<h3 id="코드_한_줄_길이">코드 한 줄 길이</h3> + +<p>한 행의 코드는 최대 80자 (<a href="https://github.com/mdn/interactive-examples">대화형 예제</a>는 64자) 이내로 제한 되어야 합니다. 가독성을 위해 합리적으로 행을 분리 하는 것 좋지만 모범 사례를 벗어나지는 마십시오.</p> + +<p>예를 들면, 아래는 안 좋은 예입니다.</p> + +<pre class="brush: js example-bad notranslate">let tommyCat = 'Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine.';</pre> + +<p>이것은 좀 낫지만, 그래도 여전히 좋지 않습니다:</p> + +<pre class="brush: js notranslate">let tommyCat = 'Said Tommy the Cat as he reeled back to clear whatever foreign ' ++ 'matter may have nestled its way into his mighty throat. Many a fat alley rat ' ++ 'had met its demise while staring point blank down the cavernous barrel of ' ++ 'this awesome prowling machine.';</pre> + +<p>템플릿 리터럴을 사용하는 것이 더 좋습니다:</p> + +<pre class="brush: js example-good notranslate">let tommyCat = `Said Tommy the Cat as he reeled back to clear whatever foreign + matter may have nestled its way into his mighty throat. Many a fat alley rat + had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine.`;</pre> + +<h3 id="코드_블럭_높이">코드 블럭 높이</h3> + +<p>코드 블럭은 필요한 만큼 길어야 하지만 너무 길면 안됩니다. 15에서 25 라인 정도의 길이가 이상적입니다. 코드 블럭이 너무 길어진다면, 가장 유용한 스니펫만 보여주고, 나머지 부분은 깃허브 저장소나 코드펜 같은 링크로 연결하세요.</p> + +<h2 id="예제_디스플레이_가이드라인">예제 디스플레이 가이드라인</h2> + +<h3 id="렌더링_된_예제_크기">렌더링 된 예제 크기</h3> + +<p>MDN 메인 콘텐츠 창은 데스크탑에서 약 700px 크기 이므로, 삽입된 MDN 예제는 ( 삽입된 예제를 100% 너비로 설정했을 때 ) 해당 너비에서 잘 보여야 합니다.</p> + +<p>높이의 경우, 최대한의 화면 가독성을 위해 가능하면 렌더링 된 예제 높이를 700px 아래로 유지하는 것을 추천합니다.</p> + +<p>모바일 디바이스에서도 예제가 잘 보이도록 어느 정도는 반응형으로 동작되도록 예제를 작성하는데 신경써야 합니다.</p> + +<h3 id="이미지나_다른_미디어의_사용">이미지나 다른 미디어의 사용</h3> + +<p>가끔 이미지나 다른 미디어를 예제에 삽입하고 싶을 때가 있습니다. 그럴 때에는:</p> + +<ul> + <li>해당 미디어의 라이센스가 사용을 허용하는지 확인하세요. <a href="https://creativecommons.org/share-your-work/public-domain/cc0/" rel="nofollow">CC0</a>와 같은 매우 관대한 라이브러리나, 적어도 일반적인 콘텐츠 라이센스인 <a class="external text external-icon" href="http://creativecommons.org/licenses/by-sa/2.5/" rel="nofollow noopener" title="http://creativecommons.org/licenses/by-sa/2.5/">Creative Commons Attribution-ShareAlike license</a> (CC-BY-SA) 중 하나를 사용하도록 해야합니다.</li> + <li>이미지에 대해서는, <a href="https://tinypng.com" rel="nofollow">https://tinypng.com</a> 나 <a href="https://imageoptim.com" rel="nofollow">https://imageoptim.com</a> 를 사용해 예제의 페이지 무게를 줄여야 합니다.</li> + <li><code>SVG</code>에 대해서는, <a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a>를 통해 <code>SVG</code> 파일이 파일 마지막에 빈 줄을 갖도록 해야합니다.</li> + <li> + <p>페이지에서 아이콘을 보여줄 때 (즉 {{cssxref("background-image")}} 를 이용할 때), 적당한 곳에 <a href="https://mdn.github.io/mdn-fiori/patterns/css/iconography/">빌트인 MDN 아이콘</a>을 사용하고, 다른 경우와 비교하여 스타일을 맞추도록 하십시오.</p> + </li> +</ul> + +<h3 id="컬러의_사용">컬러의 사용</h3> + +<p>소문자 16진수 대신, 음영이나 주요 컬러(즉, 검은색, 흰색, 빨간색)는 키워드를 사용할 수있습니다. 필요한 경우에만 좀 더 복잡한 컬러스킴을 사용하세요.( 예를 들면, 투명색이 필요할 때)</p> + +<p>주요 "기본" 컬러는 키워드로 설정하는것이 좋습니다. 예를 들면:</p> + +<pre class="brush: css example-good notranslate">color: black; +color: white; +color: red;</pre> + +<p>좀 더 복잡한 컬러는 rgb() 를 사용합니다. (반 투명 색 포함):</p> + +<pre class="brush: css example-good notranslate">color: rgb(0, 0, 0, 0.5); +color: rgb(248, 242, 230);</pre> + +<p>16진수 컬러를 사용해야 한다면, 소문자를 이용하세요:</p> + +<pre class="brush: css example-good notranslate">color: #058ed9; +color: #a39a92;</pre> + +<p>그리고 가능한 곳에는 단축형태를 사용하세요:</p> + +<pre class="brush: css example-good notranslate">color: #ff0; +color: #fff;</pre> + +<p><a href="https://mdn-fiori.netlify.app/">MDN's Fiori 가이드라인</a>(프론트엔드 코드베이스용)은 전체 MDN 디자인에 사용된 <a href="https://mdn-fiori.netlify.app/?path=/docs/docs-colors--page">유용한 컬러셋</a>을 포함하고 있습니다. ( 역자주: 영어 원문 링크가 깨져 <a href="https://github.com/mdn/mdn-fiori">MDN Fiori 깃허브 리포</a> 에서 비슷한 링크를 찾아 연결했습니다.)</p> + +<h3 id="좋은_예시와_나쁜_예시_강조">좋은 예시와 나쁜 예시 강조</h3> + +<p>이 가이드라인에서 알 수 있는 것처럼, 좋은 실습예시는 연두색에 웃는얼굴로 강조되며, 나쁜 실습 예시는 슬픈표정에 빨간 바탕으로 강조됩니다.</p> + +<p>이 처럼 하려면, MDN 에디터 콘트롤로 코드 블럭을 <code><pre></code> 블럭이 되도록 하고, 적절한 문법 강조를 설정해야 합니다. 소스 코드는 아래와 비슷하게 보일겁니다:</p> + +<pre class="notranslate"><pre class="brush: js"> +function myFunc() { + console.log('Hello!'); +};</pre></pre> + +<p>이 상태에서 좋은 예시로 만들려면, <code>class</code> 속성의 오른쪽 따옴표 바로 앞에 <code>example-good</code>을 넣으면 됩니다:</p> + +<pre class="notranslate"><pre class="brush: js example-good"> + ...</pre> + +<p>나쁜 예시로 만들려면, <code>class</code> 속성의 오른쪽 따옴표 바로 앞에 <code>example-bad</code>를 넣으면 됩니다:</p> + +<pre class="notranslate"><pre class="brush: js example-bad"> + ...</pre> + +<p>우리는 당신이 이 기능을 사용하길 권장합니다. 모든 곳에 사용할 필요는 없습니다. 당신의 코드에서 좋은 예와 나쁜 예를 구분할 필요가 있을때 사용하세요.</p> + +<h2 id="레퍼런스_페이지에서_문법_섹션_작성">레퍼런스 페이지에서 문법 섹션 작성</h2> + +<p>MDN 레퍼런스 페이지에는 JavaScript 메서드, CSS 속성, HTML 요소 등과 같이 기능의 구문이 무엇을 할 수 있고, 어때야 하는지 명확하게 보여주는 문법 섹션(Syntax section)이 포함되어 있습니다. 이 내용을 작성하는 가이드라인은 <a href="/ko/docs/MDN/Contribute/Structures/Syntax_sections">Syntax sections</a> 문서를 참고하세요.</p> |