Guide

프로젝트 가이드

컴포넌트 모음

안내 From 그룹장

아래 가이드의 모든 규칙은 현장의 PL 의 그라운드 룰이 우선 이며 모든 규칙은 개발과의 협의와 회의를 통해서 정하셔야 합니다.
아래 예제에 사용 하는 실제 데이타를 넣으시면 됨니다! 아래 문서는 안내 From 그룹장 부분을 제거 하시고 산출물로 대체 할수 있습니다.
형제 자매님들 오늘도 무탈한 하루가 되길 빕니다!

기본 가이드 - 리스트 타입

기본 가이드를 프로젝트에 맞게 작성 합니다.

기본 가이드 - 리스트 타입

기본 가이드를 프로젝트에 맞게 작성 합니다.

Codinglist

코딩리스트(작업 현황판)

파일	설명
cl.html	코딩리스트 html
codinglist.js	코딩리스트 js
_codinglist.scss	코딩리스트 css

Components

프로젝트 가이드(산출물 겸용)

파일	설명
component.html	컴포넌트 가이드 페이지 메인
_component_header.html	컴포넌트 가이드 페이지 헤더 html
_component_footer.html	컴포넌트 가이드 페이지 푸터 html
_component_navigation.html	컴포넌트 가이드 페이지 네비게이션 html
component_guide.json	컴포넌트 가이드 페이지 네비게이션 json
component_guide.js	컴포넌트 가이드 페이지 js
_component_guide.scss	컴포넌트 가이드 페이지 scss

Convention

코딩 컨벤션(산출물 겸용)

파일	설명
convention.html	코딩 컨벤션
semantic01.html	시맨틱 태그 올바른 사용
semantic02.html	시맨틱 태그 잘 못 된 사용
nesting.html	중첩 코드 최소화
aria.html	지원되는 상태 및 속성
role.html	역할 모델

소스(폴더) 구조

프로젝트 세팅 시 필요한 공통적인 소스구조입니다.

기본 폴더 구조

폴더	설명
pages	웹사이트나 애플리케이션의 각각의 페이지에 해당하는 HTML 파일 또는 페이지 컴포넌트 파일을 저장하는 데 사용
assets	웹 사이트나 애플리케이션에 필요한 다양한 정적 파일들을 저장하기 위해 사용

html

폴더	설명
pages/include	인클루드 파일 폴더
pages/components	컴포넌트 파일 폴더
pages/main	메인 파일 폴더

style

폴더	설명
assets/styles/abstracts	글로벌 변수, 함수, 믹스인 및 플레이스홀더 등을 포함합니다.
assets/styles/base	프로젝트의 기본적인 스타일 설정을 포함합니다. 여기에는 HTML 요소(예: h1, p, a)에 대한 기본 스타일이 포함됩니다.
assets/styles/utilities	유틸리티 클래스를 포함하며, 이들은 프로젝트 전체에서 공통적으로 사용됩니다.
assets/styles/components	재사용 가능한 UI 컴포넌트의 스타일을 정의합니다.
assets/styles/layout	사이트 또는 애플리케이션의 레이아웃 관련 스타일을 정의합니다 (예: 헤더, 푸터, 사이드바).
assets/styles/pages	특정 페이지에 특화된 스타일을 정의합니다.
assets/styles/themes	다양한 테마 또는 스킨에 대한 스타일을 포함합니다.
assets/styles/vendors	서드파티 라이브러리 및 프레임워크의 오버라이드 및 커스텀 스타일을 포함합니다.

script

폴더	설명
assets/common	-
assets/uiComp	-
assets/pageComp	-
assets/lib	-

image

폴더	설명
assets/images	-