[GitHub 웹페이지] 1. 규칙 정하기 - 코딩컨벤션, 네이밍컨벤션,

코딩 컨벤션

HTML

1. 들여쓰기: 2 스페이스
2. 태그 속성 순서: class, id, name, data-, src, for, type, href, title, alt, aria-
3. 자체 닫힘 태그: <br />, <img />, <input /> 등

CSS

1. 들여쓰기: 2 스페이스

2. 클래스 네이밍: BEM(Block Element Modifier) 방법론 사용

   • Block: .header
   • Element: .header__title
   • Modifier: .header__title--large

3. 중괄호 위치: 여는 중괄호는 같은 줄에 위치

   .class {
     property: value;
   }

4. 정렬: 속성은 알파벳 순으로 정렬

JavaScript

1. 들여쓰기: 2 스페이스

2. 세미콜론: 문장 끝에 항상 세미콜론 사용

3. 변수 선언: const와 let 사용 (ES6+)

4. 함수 선언:

   • 함수 표현식:

     const functionName = function() {};

   • 화살표 함수:

     const functionName = () => {};

5. 네이밍 컨벤션: 카멜 케이스 사용 (예: myFunction, variableName)

네이밍 컨벤션

• 폴더명: 소문자와 대시(-) 사용 (예: images, css, js)
• 파일명: 소문자와 대시(-) 사용 (예: index.html, main.css, app.js)
• CSS 클래스명: BEM 방법론 사용
• 자바스크립트 변수/함수명: 카멜 케이스 사용

프로젝트 구조

### 프로젝트 구조
```
my_intro_page/
│
├── common/
│   ├── css/
│   │   └── common.css
│   ├── js/
│   │   └── common.js
│   └── components/
│       ├── header.html
│       ├── footer.html
│       └── navbar.html
│
├── home/
│   ├── index.html
│   ├── home.css
│   └── home.js
│
├── profile/
│   ├── index.html
│   ├── profile.css
│   └── profile.js
│
├── blog/
│   ├── index.html
│   ├── blog.css
│   └── blog.js
│
├── assets/
│   ├── images/
│   │   └── profile.jpg
│   ├── fonts/
│   │   └── custom_font.woff
│   └── videos/
│       └── intro.mp4
│
├── docs/
│   └── README.md
└── .gitignore
```

추가 설명

• common 폴더: 여러 페이지에서 공통으로 사용하는 CSS, JavaScript, HTML 컴포넌트(예: 헤더, 푸터, 네비게이션 바 등)를 저장합니다.
• home, profile, blog 폴더: 각 페이지별 폴더로, 해당 페이지의 HTML, CSS, JavaScript 파일을 포함합니다.
  • home: index.html, home.css, home.js
  • profile: index.html, about.css, about.js
  • blog: index.html, contact.css, contact.js
• assets 폴더: 이미지, 폰트, 비디오 등 모든 정적 자산을 저장합니다.
• docs 폴더: 프로젝트 관련 문서를 저장합니다. (예: README.md)
  • README.md 작성: 프로젝트의 개요, 설치 방법, 사용 방법 등을 포함
• .gitignore 파일 사용: 불필요한 파일이나 폴더를 Git에 포함시키지 않도록 설정