[공부] 코딩 컨벤션 (기본)

📖 코딩 컨벤션 (기본)

HTML

템플릿 구조

기본 템플릿 구조(PC)

 

클래스, Id : 공통

영어 소문자, 숫자, 언더스코어만 사용한다.

 

명명 시작은 영어 소문자를 이용한다.

 

명명시 유추하기 쉬운 단어를 사용한다.

잘못된 예	올바른 예
abc	student

 

단어와 단어를 조합할 때는 언더스코어( _ ) 하나만 사용한다.

잘못된 예	올바른 예
studentScore	student_score
light__star	light_star

 

단어와 숫자를 조합할 때는 붙여 쓴다.

 

잘못된 예	올바른 예
no_1	no1

 

약어 사용? : 이거는 협업하는 사람과 얘기를 해야할 듯.

풀네임	약어
button	btn
function	fnc

 

Id

Id는 레이아웃을 지정할때 사용한다. 절대로 스타일을 적용하지 않는다.

잘못된 예	올바른 예
#id {color: red}	#id {display: flex; justify-content: center}

 

레이아웃 약속어

페이지 전체 영역	머리글 영역	본문 영역	주요 콘텐츠 영역	바닥글 영역
#wrap	#header	#container	#content	#footer

 

팝업 레이아웃 약속어

페이지 전체 영역	머리글 영역	본문 영역	주요 콘텐츠 영역	바닥글 영역
#pop_wrap	#pop_header	#pop_container	#pop_content	#pop_footer

 

class

class가 사용되는 범위에 따라 나뉜다.

종속 확장은 파생되어 나온 class들을 관리할 때 사용한다.

 

반면에 독립 확장은 독립적으로 관리가 필요할 때 사용한다.

기본형	독립 확장	종속 확장
btn	btn1	btn_v1

 

이미지

같은 유형의 이미지가 여러개인 경우, 숫자를 붙여 구분한다.

잘못된 예	올바른 예
btn	btn1.jpg, btn2.jpg

 

이미지 네이밍은 이미지 확장자와 관계 없이 순차적으로 적용한다.

잘못된 예	올바른 예
bu_dot1.gif, bu_dot1.jpg, bu_dot1.png	bu_dot1.gif, bu_dot2.jpg, bu_dot3.png

 

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

잘못된 예	올바른 예
on_recommend_tab1	tab1_recomm_on

 

임의로 축약하지 않는다.

잘못된 예	올바른 예
bnm.gif	btn_naver_mail.gif

 

영문 소문자를 사용한다.

잘못된 예	올바른 예
btn_Search.gif	btn_srch.gif

 

맨 처음에 영어 소문자로 시작한다.

잘못된 예	올바른 예
1btn_search.gif	btn_srch.gif

 

파일

HTML : 서비스의 영문이름_의미_상태로 조합한다.

잘못된 예	올바른 예
newsBoardView.html	news_board_view.html
newsPopView.html	news_pop_view.html

 

CSS : 서비스의 영문이름으로 조합한다.

HTML	예시 1	예시 2
news.html	news.css	news_home.css, news_pop.css

news_e.css 모바일 예외 대응시 ‘모바일 CSS 파일 분기 규칙’에 따 라 사용한다. Folder p_yymmdd_프로젝트이름 신규 프로젝트 작업 시 사용 s_yymmdd_서스테이닝이름 서스테이닝 작업 시 사용 img, css, js image, css, javascript 폴더 사용 p_yymmdd_프로젝트명\메뉴명 HTML 파일의 폴더 분류가 필요한 경우 사용 tmp_ 임시파일

 

폴더

CSS, JavaScript, image 폴더는 약어로 지정한다.

CSS	JavaScript	image
css	js	img