[HTML,CSS 작성 규칙] 네이버는 이렇게 한다! HTML/CSS 코딩 컨벤션

 

 

[HTML,CSS 작성 규칙] 네이버는 이렇게 한다! HTML/CSS 코딩 컨벤션

 

 

HTML과 CSS를 독학으로 공부하시는 분들은 내가 코드를 올바르게 작성하고 있는지

 

가끔 궁금할 때가 있으시죠.... 하나 하나 일일이 물어 볼 데도 없고요.

 

며칠 전에 네이버 개발자센터라는 사이트를 알게 되어 둘러 보았는데

 

마크업개발 툴 중에서 HTML과 CSS 마크업 언어를 작성하는 사람들에게 유용한 자료가 있어 소개해 드리려고요.

 

 

 

 

NHN은 이렇게 한다! HTML/CSS 코딩 컨벤션

 

http://nuli.nhncorp.com/markup_tools/convention

 

 

네이버 개발자를 대상으로 한, HTML과 CSS 코드를 작성할 때 따라야 할 규칙을 명시해 놓은 문서입니다.

 

웹 사이트가 복잡하고 방대해지면, 원칙 없이 설계했을 때 본인이나 남이나

 

코드 해석하기가 상당히 어렵겠지요

 

그래서 이렇게 원칙을 정해놓고 공유해서 코딩 작업을 하다 보면

 

업무 효율 면에서도 좋고, 오류를 줄일 수 있지 않을까 싶습니다.

 

 

제가 흥미 있게 읽은 부분은 다음과 같습니다.

 

id, class, 이미지, 파일 네이밍 규칙에서

 

이미지 이름은 '형태_의미_상태' 순서로 조합한다(30p.)

 

HTML파일은 '메뉴이름_의미_상태'순서로 조합한다(31p.)

 

 

HTML 요소별 작성 규칙

 

HTML 코드 작성 규칙(들여쓰기, 빈줄, 줄 바꿈, 공백등의 규칙)에서..

 

들여쓰기를 하면 코드의 가독성이 높아지고 전체 HTML 구조를 쉽게 파악할 수 있다.

 

마크업의 중첩이 깊어질 때마다 자식 요소는 1탭 들여 쓰고....

 

반드시 탭을 이용하여 들여쓰기를 하며,(36p.)

의미 있는 객체를 구분하기 위하여 코드 그룹 간 1줄씩 빈 줄을 만드는 것을 허용한다.
빈 줄의 간격은 1줄을 초과하지 않는다.(38p.)

 

 

 

 

 

이름 지을 때도 이렇게 체계과 의미를 지니면 참 좋겠구나 하는 아이디어를 얻었고

 

체계가 내용을 만드는구나 라는 생각도 들었습니다~

 

 

이 문서는 NHN 개발자 대상으로 만든 것이라 복제, 전송, 배포, 변경하여 사용할 수 없고요

 

참고해서 읽어 보시면 좋을 것 같습니다.

 

이외에도 네이버 개발도구 마크업툴이 여러가지가 있는데 사용해 보고 리뷰를 올려 볼게요~

 

 

 

웹개발자 도구, 웹 디벨로퍼 툴바 설치/제거 방법

 

HTML 기초 (markup, 브라우저 종류/ XHTML, XML, HTML5, DHTML 차이)

 

CSS란? (HTML과 CSS의 차이, CSS 작성법)

 

class, id 선택자