| Index |
| 1. 환경설정 |
| 2. GitHub Blog 생성 |
| 3. Emmet |
| Reference |
1. 환경설정
개발 도구
- VSCode 설치
- command palette 단축키(cmd + shift + P)
VSCode Extension 설치
- Material Theme
- Material Icon Theme:
- Prettier: 코드 포맷을 유지
- Bracket Pair Colorization Toggler
- Indent Rainbow: 들여쓰기 정도를 구분
- Auto Rename Tag: 시작태그 변경시 종료태그도 변환
- Css Peek: HTML 파일에서 Css 선택시 해당 위치로 이동
- HTML CSS Support
- Live Server: 실시간으로 HTML 파일 변화를 보여줌
- Markdown Preview: Markdown 결과를 시각화
- HTML to CSS autocompletion: HTML에서 정의한 클래스를 CSS에서 자동으로 완성
2. GitHub Blog 생성
1. GitHub 로그인후 New를 클릭하여 새로운 Repository 생성
2. Repository 생성 페이지 입력 후 Create repository 버튼 클릭
- Repository name: 원격저장소 이름 지정(github blog로 사용시 사용자명.github.io로 입력)
- ex) cogito21g.github.io
- Description: 저장소 상세설명
- Public / Private: 공개/비공개 설정
- Add a README.md: 체크시 자동으로 README.md 생성
3. Remote Repository 생성 후 Local Repository 연동
4. Local Repository(GitHub와 연동된 폴더)에 진입 후 HTML 파일 생성
1) Local Repository 진입
2) 해당 경로에서 index.html 파일 생성(하위 폴더에 위치할 경우 blog로 사용 불가)
3) index.html 열어서 기본 설정으로 편집: vscode 사용시 shortcut은 !후 tab
4) HMTL 파일 편집 후 파일 열어서 확인(vscode의 extension에 Live Server가 설치되어 있다면 cmd+L,O)
5) 확인후 GitHub 업로드
ex) index.html 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>브라우저 탭에 표시되는 제목</title>
</head>
<body>
<header>
<nav>
<ol>
<li>Home</li>
<li>My Blog</li>
<li>About</li>
<li>Contact</li>
</ol>
</nav>
</header>
<article>
<p>입력하고 싶은 content</p>
</article>
<footer>
© 2035 by cogito21
</footer>
</body>
</html>
5. Remote Repository에 index.html 업로드 확인 후 github-pages 클릭
6. deployment에 초록색 체크 표시 완료 확인후 https://사용자명.github.io/로 접속
7. 본인의 github blog가 생성되었는지 확인
3. Emmet
Emmet
- HTML을 빠르게 작성하기 위한 도구
- VSCode 기본 내장
(Emmet 문서)
1. HTML 자동완성 : ! + tab키
2. 태그 및 클래스명 자동 완성: tag_name.class_name + tab키
3. 태그 및 id 자동완성: tag_name#id + tab키
4. 부모, 자식 노드: tag_name > tag_name > tag_name + tab키
5. 형제 노드: tag_name > tag_name+tag_name + tab키
6. 반복 노드: tag_name > tag_name*반복횟수
7. 상위 노드: tag_name > tag_name > tag_name^tag_name
8. 그룹화하기: tag_name>(tag_name>tag_name>tag_name*2)+tag_name>tag_name
9. 텍스트 입력: tag_name{text}
10. 숫자 할당: tag_name.class${text $}*5
11. 더미용 텍스트: p>loerm단어길이
Reference
| [Video: 드림코딩(비주얼 스튜디오 코드 설치 및 웹개발을 위한 필수 익스텐션 10개 추천)] https://www.youtube.com/watch?v=bS9yTI2fC0w |
| [Video: 드림코딩(비쥬얼 스튜디오 코드 신규 기능 + 필수 익스텐션 추천)] https://www.youtube.com/watch?v=XMfyfNZooi4&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=36 |
| [Video: 드림코딩(웹개발 툴)] https://www.youtube.com/watch?v=q_rBbcTiSC4&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=31 |
| [Blog: cogito21_python(GitHub에서 Blog 만들기)] https://dataanalysiswithpython.tistory.com/entry/GitHub-GitHub%EC%97%90%EC%84%9C-Blog-%EB%A7%8C%EB%93%A4%EA%B8%B0 |
| [Video: 드림코딩(웹 사이트 발리 만드는 지름길 Emmet)] https://www.youtube.com/watch?v=m7wsrVQsVjI |
| [Docs: Emmet(Documentation)] https://docs.emmet.io/ |
'잡동사니 > Javascript Project' 카테고리의 다른 글
| Porfolio Page - (6) Javascript: DOM (0) | 2024.02.11 |
|---|---|
| Porfolio Page - (5) Javascript: Web API (0) | 2024.02.11 |
| Porfolio Page - (4) Javascript: 기본 (0) | 2024.02.11 |
| Porfolio Page - (3) 반응형 웹 (0) | 2024.02.11 |
| [Project] Porfolio Page - (2) HTML, CSS (0) | 2024.02.11 |
