path: root/files/ko/mdn/guidelines/code_guidelines/general/index.html

---
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">&lt;div&gt;
  &lt;p&gt;This is my paragraph.&lt;/p&gt;
&lt;/div&gt;</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>&lt;pre&gt;</code> 블럭이 되도록 하고, 적절한 문법 강조를 설정해야 합니다. 소스 코드는 아래와 비슷하게 보일겁니다:</p>

<pre class="notranslate">&lt;pre class="brush: js"&gt;
function myFunc() {
  console.log('Hello!');
};&lt;/pre&gt;</pre>

<p>이 상태에서 좋은 예시로 만들려면, <code>class</code> 속성의 오른쪽 따옴표 바로 앞에 <code>example-good</code>을 넣으면 됩니다:</p>

<pre class="notranslate">&lt;pre class="brush: js example-good"&gt;
  ...</pre>

<p>나쁜 예시로 만들려면, <code>class</code> 속성의 오른쪽 따옴표 바로 앞에 <code>example-bad</code>를 넣으면 됩니다:</p>

<pre class="notranslate">&lt;pre class="brush: js example-bad"&gt;
  ...</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>