본문 바로가기

Web/html & css

[HTML/CSS]코딩 컨벤션의 의미와 참고할 수 있는 코딩 컨벤션(네이버/다음)

반응형

HTML과 CSS를 공부하다가 보면 내가 코드를 올바르게 작성하고 있는지, 주석은 이렇게 달아도 되는 건지 궁금할 때가 있다.


 혼자 공부할 때는 '코드야 나만 알아보도록 쉽게 짜면 되지' 라는 생각을 할 수 있지만, 

실무에서는 프로젝트를 진행하기 위해서 코드를 공유하는 것은 필수이다.

 이때, 나 외에 다른 사람들도 내가 작성한 코드를 보고 쉽고 빠르게 이해할 수 있도록 하나의 작성 표준을 정해둔 것이 있는 데, 

이를 코딩 컨벤션이라고 한다.


 코딩 컨벤션의 장점은 다음과 같다.

1. 프로그래밍 할 때 정해진 규칙이 있기에 각 명칭을 쉽고 정확하며 빠르게 정할 수 있다.

2. 모든 사람들이 코드를 이해하기에 쉽고 편리하다.


 즉, 코딩 컨벤션의 장점은 가독성이다.


마크업 개발시 참고할 수 있는 코딩 컨벤션은 다음과 같다.

1. NHN 마크업 코딩컨벤션(https://nuli.navercorp.com/data/convention/NHN_Coding_Conventions_for_Markup_Languages.pdf)

- 네이버 개발자를 대상으로 HTML과 CSS 코드를 작성 할 때 따라야 할 규칙을 명시해 놓은 문서(PDF)

- 네이버에서는 이 밖에 n-MET, n_wax 등 참고할 수 있는 유용한 도구를 제공한다.

  (https://developers.naver.com/opensource/tools/markup/ 참고) 


NHN Markup Coding Convention. last updated: 2012.02.29

네이버에서는 위 그림과 같이 책도 출판하였다


2. Darum(http://ui.daum.net/convention/html)

- 다음 개발자를 대상으로 HTML과 CSS코드 작성, Naming 작성, 그리고 이미지 사용시 지켜야 할 규칙과 비용 최소화를 위한 방안을 중심으로 설명하였다.

- 위 주소로 들어가면 각각의 카테고리에 대한 설명은 물론, 이미지와 표를 사용하여 읽기 쉽다. (아래 이미지 참고)



 HTML과 CSS 코딩을 하면서 이게 정확하게 맞나 싶었는데,, 앞으로 나의 코딩에 소소하게 도움이 될 수 있을 것 같다. 클래스에 이름을 지을 때도 이렇게 체계와 의미를 지닐 수 있는 코딩 습관을 갖기 위해..다시 코딩을 하러 가자!

반응형