Skip to content

Home

Jump to bottom
indaegu edited this page Apr 23, 2024 · 15 revisions

HTML 코드 작성 규칙

대전제

  • DTD를 제외한 모든 요소와 애트리뷰트는 소문자로 작성한다.
<pre>Good!</pre>
<PRE>Bad..</PRE>
  • 애트리뷰트 값은 큰 따옴표로 묶는다.
<div id="good"></div>
<div id='BAD'></div>

아이디, 클래스

  • 아이디와 클래스의 속성 값은 숫자, 대문자, 특수문자로 시작할 수 없다.
  • 애트리뷰트의 속성 값은 숫자, 특수문자로 시작할 수 없으며, 대문자로는 시작할 수 있다.
  • 아이디는 소문자 카멜 표기법을 사용한다. 스타일 지정을 위해 사용하지 않으며, DOM 조작을 위해 사용해야 한다.
<div id="headerMenu">
  ...
</div>

<div id="layerPop-1">
 ...
</div>
  • 클래스는 아이디와 시각적 구분을 위해 하이픈 표기법을 사용한다.
<div class="slide-label n-3 back-swiper">
  <div class="swiper-wrapper">
    ...
  </div>
</div>

들여쓰기(indent)

  • body 태그 안의 모든 요소는 중첩의 깊이에 따라 1탭 들여쓰기를 진행한다. 1탭의 크기는 공백 2칸이다.
<body class="">
  <div class="ly-wrapper">
    <div class="ly-total-menu">
    ...
</div>

빈 줄

  • 그룹 되어있는 태그들을 구분하기 위하여 코드 간 1줄의 빈 줄을 사용하는 경우가 있지만, 이 경우 주석 사용을 권장하며 빈 줄을 사용하지 않는다.
<!-- bad -->
<div class="section-login">

  <div class="login-before">
  ...
</div>

주석

  • 주석 기호와 내용 사이에는 반드시 공백이 한 칸 있어야 한다. 시작 주석과 끝 주석 모두 작성하는 것을 권장한다.
<!-- 2016.07.20 고객권리안내문 추가 -->
<ul class="policy">
  <li><a href="#none">이용약관</a></li>
  <li><a href="#none">개인정보처리방침</a></li>
  <li><a href="#none">고객권리안내문</a></li>
  <li><a href="#none">전자금융거래표준약관</a></li>
</ul>
<!--// 2016.07.20 객권리안내문 추가 -->

공백 및 종료 태그

  • 태그 명과 애트리뷰트, 애트리뷰트와 애트리뷰트 사이에 한 개의 공백이 필요하며 한 개 이상의 공백은 사용하지 않는다.

  • HTML5를 사용한다면 닫는 기호를 생략해서 문서를 작성하고 XHTML을 사용한 경우는 닫는 기호를 반드시 사용한다.

  • HTML5가 아닌 경우, 종료 태그가 없는 태그의 닫는 규칙 앞에도 한 개의 공백이 필요하다.

<label for="checkboxA-1" class="label">체크 레이블</label>
<input type="checkbox" name="CA-1" id="checkboxA-1" class="checkbox">

// Doctypes XHTML일 경우 종료 태그 앞에도 한 개의 공백이 들어갑니다.
<img src="/img/logo.png" alt="logo" />

// HTML
<input type="text">

// XHTML
<input type="text" />

DOCTYPE

  • 보통 DTD라고 표현하며, HTML 문서를 작성할 때 가장 먼저 선언한다. HTML5를 기본적으로 사용한다.

스타일 선언

  • CSS는 외부 파일에 작성해서 사용한다. 이러한 작업 방식을 External Type 방식이라 명칭한다.
/*  External Type  */
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">

자바스크립트 선언

  • 웹 브라우저가 렌더링을 마치기 전에 자바스크립트로 어떠한 동작을 실행해야 한다면 요소 안에 스크립트를 선언한다.
  • 그 외에는 태그 앞에 자바스크립트를 작성하는 것이 성능적인 측면에서 좋다.
// 브라우저가 랜더링을 마치기 전에 실행할 파일을 선언한다.
<head>
  ...  
  <script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
  ..
  // 모든 콘텐츠가 로드되고 실행될 스크립트 파일을 선언한다.
  <script src="js/main.js"></script>
</body>

CSS 코드 작성 규칙

대전제

  • 모든 속성은 숫자, 대문자, 특수문자로 시작할 수 없고, 영문 소문자로 작성한다.
  • 단어의 구분을 위하여 하이픈 표기법을 사용한다.
  • 마지막 속성 값의 끝에도 세미콜론을 사용한다.
  • 방향에 따라 속성을 지정해야 하는 경위 top, right, bottom, left 순으로 작성한다.

선택자 구분

  • 스타일 엔진은 다음 4개의 카테고리로 스타일 규칙을 분류한다.
  1. ID 규칙 2.Class 규칙
  2. Tag 규칙
  3. Universal 규칙
  • 이 4개의 규칙들은 스타일 규칙을 적용하는데 기본적인 역할을 하므로 이해하는 것이 중요하다.

키 선택자

선택자의 마지막 선택자를 의미한다. 아래 코드에서 키 선택자는 img, p, [title]이 됩니다. 따라 마지막 작성된 키 선택을 기준으로 규칙을 분류할 수 있다.

a img, div > p, h1 + [title] {...}

ID 규칙

button#backButton {…} /* 이건 ID 규칙이다. */
#urlBar[type="autocomplete"] {…} /* 이것도 ID 규칙이다. */
treeitem > treerow > treecell#myCell:active {…} /* 이것도 ID 규칙이다. */

Class 규칙

button.toolbarButton {…} /* Class 규칙 */
.fancyText {…}    /* Class 규칙 */
menuitem > .menu-left[checked="true"] {…} /* Class 규칙 */

Tag 규칙

td {…} /* Tag 규칙 */
treeitem > treerow {…} /* Tag 규칙 */
input[type="checkbox"] {…} /* Tag 규칙 */

Universal 규칙

[hidden="true"] {…} /* universal 규칙 */  
* {…}        /* universal 규칙 */
tree > [collapsed="true"] {…} /* universal 규칙 */

선택자 작성 규칙

  • 스타일 엔진은 키 선택자로부터 시작하여 왼쪽으로 이동하면서 엘리먼트가 규칙에 적합한지를 확인한다. 만약 엘리먼트가 이 규칙에 적합하거나 적합하지 않다는 게 확인되면 멈춘다.

가장 기본적인 개념은 규칙 필터링이다. 위에서 소개한 4개의 규칙 카테고리는 관계없는 규칙을 제거하기 위함이다. 따라서 스타일 엔진은 엘리먼트와 관계없는 규칙을 매칭하는 데 시간을 낭비하지 않을 수 있다.

성능을 비약적으로 향상시키는 방법은 바로 매칭을 줄이는 것이다. 주어진 엘리먼트가 적합한지 확인하는데 고려해야 할 규칙의 수가 적을수록 성능이 좋아지게 된다.

효율적인 CSS를 작성하기 위한 방법

  • 선택자는 상위 선택자를 포함하여 3개 이상 작성되지 않게 한다.
  • 전체 선택자를 사용하지 않는다.
  • 정규 표현식과 유사한 애트리뷰트 선택자 사용을 지양하며, 부적합한 애트리뷰트 선택자 사용을 지양한다.
  • 아이디 선택자를 사용하지 않는다.
  • 클래스 규칙에 불필요한 태그를 조합하여 사용하지 않는다.
  • 태그 선택자 규칙에 상위 선택자로 태그를 포함하지 않는다.

선택자 개수 제한

  • 선택자를 작성할 때 키 선택자(가장 오른쪽에 위치하며, 마지막에 작성된 선택자를 지칭합니다.)를 포함하여, 상위 선택자는 3개 이상 작성되지 않는 것을 권장한다.
.select-1, .select-2, .select-3 {...}
section div span {...}

전체 선택자의 사용

  • 전체 선택자는 * 같은 형태로 작성되며 한 번에 모든 요소에 대응된다. 브라우저는 선택자를 오른쪽에서 왼쪽으로 읽기 때문에 마지막에 전체 선택자를 사용한 경우 최초 문서 내의 모든 요소에 대응하고 그 이후 상위 클래스로 해당 요소를 선택하는지 확인하는 과정을 거치게 된다. 따라서 요소를 선택하는 CSS 규칙이 깊어지는 경우와 전체 선택자를 마지막 부분에 작성하는 경우 브라우저의 성능 저하가 발생하기 때문에 사용을 지양해야 한다.
/* bad */
* {...}
.selector * {...}

/* better */
.selector * th {...}

애트리뷰트 선택자의 사용

  • 키 선택자로 애트리뷰트 선택자를 사용한 경우는 최초 문서 내의 모든 태그에 해당 애트리뷰와 속성 값이 있는지를 확인하여, 브라우저의 성능 저하가 발생하게 되므로 사용하지 않는다.
/* bad */
[type="text"] {...}
.label [type="checkbox"] {...}

/* better */
input[type="text"] {...}
.layer-pop[data-role="popup"] .header {...}
  • CSS3는 정규 표현식처럼 속성 값에 따라 대응되는 선택자가 추가된다. 그러나 성능적인 측면으로 살펴보면, 클래스를 기반으로 하는 방식 보다 속도가 떨어지게 되므로 사용하지 않는다.
/* bad */
/* 지정한 문자열이 속성값에 포함하는 요소에 대응 */
.regex-selector[type*="value"] {...}

/* 지정한 문자열이 속성 값으로 시작하는 요소에 대응 */
.regex-selector[type^="value"] {...}

/* 지정한 문자열이 속성값으로 끝나는 요소에 대응 */
.regex-selector[type$="value"] {...}

/* 지정한 문자열이 공백으로 나누어진 속성값을 포함하는 요소에 대응 */
.regex-selector[type~="value"] {...}

/* 지정한 문자열이 '-'로 나누어진 속성값을 포함하는 요소에 대응 */
.regex-selector[type|="value"] {...}
  • 다음 두 경우는 성능에 영향을 미치지 않는다.
/* better */
/* 지정한 문자열이 속성값에 일치하는 요소에 대응 */
.regex-selector[type="value"] {...}

/* 지정한 속성명에 일치하는 요소에 대응 */
.regex-selector[type] {...}

아이디 선택자의 사용

  • ID는 하나의 HTML 파일에 유일하게 존재해야 하는 값이다. ID 선택자를 사용한 다는 것은 그 스타일을 한 요소에만 사용하게 된다는 것을 의미한다. 이러한 구조는 스타일 규칙의 재 사용이 불가능하게 만들어 CSS 파일 사이즈를 크게 만들고, 유지 보수와 확장성에 불편함을 가져오게 된다.
/* bad */
#container {...}

태그와 클래스 선택자의 사용

  • 태그와 클래스 조합으로 불필요하게 사용된 선택자는 사용하지 않아야 한다. 고유한 이름의 클래스를 작성해 안전하게 사용할 수 있는 방법을 사용하며, 불필요한 태그를 조합하여 사용하지 않으므로 파일 용량을 줄이는 동시에 태그에 대응할 필요가 없기 때문에 브라우저의 성능도 높일 수 있다.
/* bad */
.guide-box li.selected::after {...}

/* better */
input.radio {...}

태그와 태그 선택자의 사용

  • HTML 문서 수정에 따른 CSS 파일 수정을 최소화하기 위해서 태그 규칙에 상위 선택자로 태그 선택자를 사용하지 않는다.
/* bad */
.notice-box li span {...}

/* better */
.notice-box .list .span {...}

줄바꿈과 들여쓰기

  • 여는 중괄호의 다음, 닫는 중괄호의 다음, 세미콜론의 다음에 줄 바꿈 하는 스타일을 권장한다. 미디어 쿼리 및 vendor prefix 대한 속성 사용으로 속성을 한 줄에 작성을 하게 되면 코드의 가독성이 떨어져 유지 보수와 수정 작업에 불편함이 따르기 때문이다. 또한 코드의 들여 쓰기는 중첩의 깊이에 따라 공백 2칸으로 설정한다.

  • 파일의 용량 증가 문제는 서비스에 반영하기 전 minify를 진행하여 배포함으로 문제가 없습니다.

html {
  position: relative;
  margin: 0 auto;
  ...
}

@media (width:320px) {
  .input-text.jumin {
    width: 46.1%;
  }
}

속성 우선순위

  • 아래의 나와 있는 순서로 작성하는 것을 권장한다. csscomb 와 같은 빌드 스크립트를 이용하여 서비스 반영 전에 우선순위 및 코드를 정리할 수도 있다.
display
list-style
position
float
clear
width / height
padding / margin
border / background
color / font
text-decoration
text-align / vertical-align
white-space
other text
content

큰따옴표

  • 다음과 같은 경우 큰따옴표를 사용하며, 그 밖의 속성에는 사용하지 않는다.
@charset "uft-8";

작은따옴표

  • 다음과 같은 경우 작은따옴표를 사용하며, 그 밖의 속성에는 사용하지 않습니다.

  • font-family 속성의 폰트명에 공백이 포함된 경우와 한글명의 폰트를 사용한 경우

  • @font-face 속성의 url 값 및 format 값

  • background 속성의 url 이미지 경로

  • content 속성의 값

font-family: 'ns-r';
src: url('../font/NotoSans/NotoSans-Light.eot?#iefix') format('embedded-opentype');
background: url('../img/bg-btn-collapse.png') no-repeat;
content: '';

JS 코드 작성 규칙

  • 가능한 1줄에 명령 하나만을 적는다.
  • 코드 명령이 다 끝나면 세미콜론(;)을 표시한다.
  • Operators(=+-*/)의 앞, 뒤와 컴마(,) 뒤로는 가능한 띄어쓰기를 1칸을 붙인다.

image

  • 여는 중괄호는 앞에 한 칸 띄어쓰기를 붙인다.

  • 코드 내용에 따라 들여쓰기 해야 하는 부분에는 Tab키를 사용한다.

  • 변수명, 함수명은 영문으로만 입력한다. 띄어쓰기가 필요한 경우 대문자로 구분한다.

  • Complex/compound statement를 사용한 경우, 중괄호 안의 내용은 다음 줄부터 작성한다.

  • 닫는 중괄호는 새로운 줄로 내리고 끝에 세미콜론(;)을 붙이지 않는다.

  • 블록 내용이 1줄이라도 중괄호로 감싼다.

image

  • Object(객체)에서는 속성과 값을 하나의 줄에 각자 써주며 끝에 컴마(,)로 구분한다.
  • 콜론(:)의 뒤에는 띄어쓰기를 1칸 붙인다.
  • 마지막 속성&값 끝에는 컴마(,)를 붙이지 않는다.
  • Object의 경우, 닫는 중괄호는 새로운 줄로 내리고 끝에 세미콜론(;)을 붙인다.
  • 객체 속성&값이 1개인 경우에도 줄을 나누어 작성한다.

image

Prefix, Subfix, Suffix

공통적으로 많이 사용되는 영역 분류 image

분류별 prefix image image

분류별 subfix image

분류별 suffix image

Clone this wiki locally