퍼블리싱 초기 설정 관련 포스팅

퍼블리싱 경험을 토대로 하나씩 기준을 세워 작업을 한다.

그것을 정리해서 문서화했다.

1. 웹폰트 
	- ie8 이하 프로젝트의 경우, 웹폰트는 폰트명 각각 설정한다.
	- ie8 이하 프로젝트의 경우, 폰트 굵기는 normal, bold만 설정된다.
	- ie9 이상 프로젝트의 경우, 폰트명 하나에 굵기를 다양하게 지정 가능(100~900)
	- FOUT 현상을 줄이기위해 local을 먼저 불러올 것
	- ie8 이하를 고려하지 않는다면, 과감히 .eot 파일을 버리는 것도 용량을 줄이는 방법 중 하나.



2. 네이밍 규칙 
	3-0. 전체 공통
	- 시작을 대문자, 숫자, 특문으로 시작할 수 없다.
	- 의미-형태-순서-상태 순서로 사용 
	- 숫자는 두자리 정수를 사용한다. (ex: 01, 02, 03...)

	3-1. css
	- 클래스 네이밍은 언더바(_)를 조합 사용한다. 의미_형태_순서_상태 (ex: .btn_cancel_01_off)
	- 아이디는 카멜 표기법을 사용한다. (ex: #textBox)
	- 공통으로 들어가는 UI의 경우, comp_해당UI명 으로 통일한다. (ex: comp_paging, comp_tab...)

	3-2. images
	- 네이밍은 언더바(_) 조합 사용한다. (ex: bg_footer.jpg)

	3-3. JS
	- js와 관련된 클래스 작성의 경우, js_고유클래스명을 만들어 작동하게 한다. (ex: js_tab)



3. CSS 
	2-1. 초기화 (reset.css or normalizing.css)
	- strong 의 굵기를 살릴 것 
	- 반응형의 경우 html, body 에 min-width:320 을 넣어줄 것 (갤럭시 폴더블 접은 사이즈가 320px이다)
	- div에 box-sizing:border-box (ie9이상부터 적용) 속성을 넣어줄 것
	
	2-1. 사용
	- 벤더프리픽스 사용을 의무화한다.
	- selector는 id(큰 레이아웃이 아닌 이상), tag 사용을 지양한다. 
	- ie11 이상의 프로젝트가 아니라면, flex 사용은 지양한다. (웹 프로젝트 시)




4. 접근성 통일 사항
	- HTML 작성은 논리적 순서로 마크업하며, 시멘틱하게 작업한다. (목록 태그나 문단 태그를 남발하진 말 것) 
	- a 태그 작성시 아웃링크 일 경우, target="_blank" title="새창으로 열림" 속성을 추가한다.
	- input, select, textarea 의 경우(radio, checkbox 제외) title을 통일한다. (ex: 이름 입력, 분류 선택, 내용 입력...)
	- 의미가 없는 이미지는 가급적 배경처리하되, 개발에 관련하여 들어가야하는 동적인 이미지들은 alt값을 넣어준다.
	- heading은 순서에 맞게 논리적 순서로 작성한다. (h2 다음 h4 와 같이 위치할 수 없다)

 

 

 

* 퍼가실 땐 댓글 부탁드립니다.