ITPUB Project Guide

기본정책
프로젝트 환경
문서 및 버전 HTML5, CSS3, JavaScript
인코딩 UTF-8
웹 유형 PC, Mobile
크로스 브라우징 Chrome, Edge, Firefox, Opera, Safari
해상도 기준 PC 1920px
Tablet 1025px
Mobile 768px
파일 / 폴더 규칙
분류폴더 서브폴더 파일명 설명
css reset.css 파일 다운로드 [스타일] 초기화
layout.css [스타일] 레이아웃
common.css 파일 다운로드 [스타일] 공통
style.css [스타일] 기본 스타일
main.css [스타일] 메인
mobile.css [스타일] 모바일
js common.js [스크립트] 공통
images logo [이미지] 로고
img [이미지] 공통 이미지
ico [이미지] 아이콘
temp [이미지] 임시
포지션 별 문의 & 업무 협의
포지션 작업단계 내용
기획 작업 전

WBS

파일 공유 및 납기 방식

크로스브라우징, 웹접근성 준수 여부
작업 중

검수 및 수정 요청 문의 방식 ex) 구글시트
디자인 작업 전

스타일 가이드

공통 컴포넌트 정의

수정 요청 문의 방식 ex) 피그마 코멘트, 엑셀 시트

에셋 파일 공유 ex) 로고, 아이콘
퍼블리싱 작업 전

깃허브 브랜치 관리 담당 정/부

작업 분량 분담

프로젝트 코드 컨벤션 수립 ex) Prettier, PostCSS

작업 중

퍼블리싱 진척도 공유

코드 검토 및 개선
작업 후

스타일시트 최적화

퍼블리싱 소스 가이드 업데이트
개발 작업 전

프레임워크 선정

라이브러리 버전

파일 경로 ex) html, resource - css, js 등

레이아웃 구조

스크립트 작업 범위 * 탭, 스와이퍼 등 인터랙션 UI 제외
작업 중

AS-IS 활용 범위 (UI 스크립트)

레이아웃 디버깅
작업 후

레이아웃 안정화
프로젝트 진행 프로세스
작업단계 기술 구현 항목 구현 항목별 코멘트
스토리보드 검토 UI/UX 기술 구현 가능 여부 검토 구현 어려울 시 대체 기술 기획자 협의
UI/UX 접근성 제고 여부 검토 웹 컨텐츠 접근성 지침 2.1 을 기준으로 함
접근성 미제고시 UI/UX 접근성 제고 요청
웹 리소스 구조화 리소스 폴더 구조 설계 및 생성 개발자 협의
파일 네이밍 가이드 수립
시안 검토 컨텐츠 분석 및 정보의 논리적 선형화 웹 컨텐츠 접근성 지침 2.1 을 기준으로 함
디자인에 따라 구역 분할
논리구조에 따른 HTML 문서 구조화
디자인에 따라 구역 분할 접근성 미제고시 시안 수정 요청
공통 CSS, JS 가이드 작성
디자인적 접근성 제고 여부 검토
퍼블리싱 CSS 가이드 수립, 문서내 ID / class 구조화 및 정리 W3C Markup Validator 이용
웹 표준, 웹접근성 지침을 기준으로 JavaScript 사용불가 환경 마크업 진행
마크업 유효성 검사
CSS 작성 IE 11, Chrome, FireFox, Safari 등 Major 웹 브라우저 동작 테스트
브라우저 렌더링 화면과 시안 비교
JavaScript 오류 테스트
산출물 최종 확인 브라우저 테스트 Major 웹 브라우저 렌더링 및 동작 테스트
웹 표준 검사
문서의 논리적/의미론적 구조 수동 검사 W3C Markup Validator 이용
W3C CSS Validator 이용
웹 접근성 최종 검토 정량 / 정성 평가 진행
웹 접근성 체크리스트 * 는 필수 체크 항목
웹 접근성 설명
HTML, CSS validator을 통과했는가?
본문 바로가기 및 스킵네비게이션을 제공하는가? 주메뉴 바로가기, 본문 가로가기 제공
텍스트가 아닌 콘텐츠에 적절한 대체 콘텐츠가 제공이 되어 있는가?
새창링크에 target= "_blank", title="새창 열림" 속성이 있는가?
링크 및 마우스 이벤트 요소가 키보드 컨트롤로 모두 접근 가능한가?
온라인 서식요소 (form , input)가 접근성 구조로 마크업 되어있는가? label, title 제공
slide에 이전, 다음, 일시정지 버튼을 제공하는가?
table 요소가 데이터 테이블로서 사용되며 접근성에 맞게 마크업 되어 있는가? scope="col", scope="row" 제공
규칙 가이드 > 표준 규칙
Semantic Markup
Tag Description
article 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다.
aside 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.
detail "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다. 요약이나 레이블은 summary 요소를 통해 제공할 수 있습니다.
figure 독립적인 콘텐츠를 표현합니다. figcaption 요소를 사용해 설명을 붙일 수 있습니다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.
footer 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.
header 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.
main 문서 body의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.
mark 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다.
nav 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다.
section HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통
은 제목을 포함하지만, 항상 그런 것은 아닙니다.
summary details 요소의 공개 상자에 대한 요약, 캡션 또는 범례를 지정합니다. summary 요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힙니다.
time 시간의 특정 지점 또는 구간을 나타냅니다. datetime 특성의 값을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용할 수 있습니다.
특수기호 Entity name
Character ₩ " & < > ·
Entity Name &#8361; &lt; &amp; &lt; &gt; &nbsp; &middot;
참고 링크 HTML 엔티티(새 창 열기)
이미지(image) 네이밍 규칙
기본 규칙

- 이미지 네이밍의 조합은 카테고리_형태_의미_순서_상태로 조합한다.

- 같은 이름의 이미지가 두 개 이상 존재 시 숫자로 구분한다.

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

- 이미지 예약어에는 숫자, 영문소문자, 언더바(_)을 조합하여 사용할 수 있다.
규칙 예시
이미지 네이밍 조합 ico_arrow_active.svg
ico_circle_tab_02_off.gif
같은 이름의 이미지 존재 시 ico_arrow_01.svg, ico_arrow_02.svg
이미지 네이밍은 확장자 관계없이 순차적용 btn_arr.gif, btn_arr_02.jpg
클래스(class) 네이밍 및 스타일 선언 규칙
기본 규칙

- 네이밍은 - (하이픈) 사용을 기본으로 한다.

- 네이밍에 대문자를 사용하지 않는다.

- 하이픈(-)은 2개 이상의 단어를 조합할 때 사용한다.

- 하이픈(-)을 이용해 4단계를 초과하여 사용하는 방법은 지양한다.

- 다중 클래스 지정을 허용하나, 최대 4개 이상 사용하지 않는다.

- 다중 클래스 결합 선택자 사용 시 포괄하는 요소의 순서대로 기입한다.

- 네이밍으로 마크업 구조를 유추할 수 있게 구성하고 클래스 상세도를 지나치게 높이지 않는다.

- CSS 최적화를 위해 가능한 속성값을 축약한다.

- CSS 끝나는 지점에 세미콜론 ";"을 필수적으로 기입한다.
규칙 좋은 예시 나쁜 예시
네이밍에 - (하이픈) 사용 .header-nav {color : black;} .header_nav {color : black;}
- (하이픈) 4단계 초과 사용 지양 .header-nav-list {color : black;} .header_nav-list-item-active-detail {color : black;}
다중 클래스 최대 4개이상 사용 지양 <button class="btn btn-pri ico-rt"><button/> <button class="btn btn-pri ico-rt color-white click"><button/>
다중 클래스 결합 선택자 사용 시
포괄하는 요소의 순서대로 기입 		h2.title {} .form-input.search {} input.form-input.search {} // .search가 form-input보다 포괄범위가 낮으나 앞에 위치해 안좋은 예시 .search.form-input {}
마크업 구조를 유추할 수 있게 네이밍,
클래스 상세도를 최대한 낮게 유지 		.page-header {} .page-header-tlt {} .page-header-desc {} #wrap .contents section:nth-child(1) {} #wrap .contents section:nth-child(1) h2.tlt {} #wrap .contents section:nth-child(1) p.desc {}
CSS 최적화를 위해 가능한 속성값을 축약 { color: #fff; } { background-position: 0 50%; } // 문자 표현 지양, 숫자 표현 지향 { top: 0; } { color: #ffffff; } { background-position: left center; } { top: 0px; }
미디어쿼리 작성
기본 규칙 데스크톱 퍼스트 원칙에 근거해 데스크톱 디바이스부터 우선적으로 작성합니다. 분기점을 max-width 로 추가하며, 내림차 순으로 정렬합니다. 예외적으로 데스크톱은 min-width 로 최상단에서 제어합니다.
예시 // Small Desktop ~ Desktop @media only screen and (min-width: 1441px){ .test {color:black;} } // Tablet ~ Small Desktop @media only screen and (max-width: 1440px){ .test {color:black;} } // Mobile ~ Tablet @media only screen and (max-width: 1024px){ .test {color:black;} } // ~ Mobile @media only screen and (max-width: 768px){ .test {color:black;} }