| Index |
| 1. GitHub Blog 생성 |
| 2. HTML을 이용한 Page 편집 |
| 3. CSS를 이용하여 Page 꾸미기 |
| 4. Bootstrap을 이용하여 Page 꾸미기 |
| 5. Javascript를 이용하여 동적 페이지 만들기 |
| Reference |
1. 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가 생성되었는지 확인
2. HTML을 이용하여 Page 편집
1. HTML이란
- Hyper Text Markup Language로 웹 페이지를 만드는데 사용하는 언어
- 콘텐츠의 구조와 의미를 정의
2. HTML 기본 구조
- <!DOCTYPE html>: 현재 문서가 HTML5 문서임을 명시
- <html>: 문서의 root 요소를 정의
- <head>: 메타데이터를 정의, HTML 문서에 대하 정보로 웹 브라우저에는 직접적으로 표현되지 않는 정보
- title,style, meta, link, script, base 태그로 표현
- <body>: 웹 브라우저를 통해 보이는 content 부분
3. HTML 요소
- tag 형태: <태그명 속성명="속성값"> 내용 </태그명>
- 속성은 소문자로 작성을 권자으 속성값은 따옴표로 감쌈
4. HTML의 Semantic Tag
- Semantic element는 의미를 가진 요소로 브라우저나 개발자가 의미 파악이 쉬워짐.
- header, nav, main, section, article, aside, footer
- header: 문서나 섹션의 머릿말. 서두의 내용을 위해서 사용
- nav: 네비게이션의 링크의 집합
- main: 문서의 주된 내용을 의미
- section: 문서의 섹션, 내용의 주제에 따라 묶으며 h1~h5, p와 같이 쓰임
- article: 독립된 내용임을 알림. 그 자체로 의미를 가지고 웹 사이트로부터 독립적으로 읽을 수 있어야 함. 포럼 글, 블로그 포스트, 신문 기사
- aside: 위치한 내용과 벗어난 곳에 위치한 내용을 의미, 주변 내용과 연관되어야 함.
- figure & img& figcaption: 이미지의 시각적 설명을 추가해주기 위한 목적.
- footer: 문서나 섹션의 꼬릿말을 의미, 항상 포함된 요소에 대한 정보를 담고 있음., 주로 문서의 저자나 저작권 정보, 사용법을 위한 링크, 연락처를 포함
- detail, figcaption, figure,mark, summary, time
- detail: 사용자가 볼 수 있거나 숨겨진 추가적인 세부 사항을 의미
- mark: 마크되거나 하이라이트된 글ㅇ르 으미
- summary: details를 위한 가시적인 제목을 의미
- time: 날짜나 시간을 의미
5. 주요 Tag
- div, span, p, a, pre, ol, ul, li
- form, input, button
- table
- img, video
3. CSS를 이용하여 Page 꾸미기
1. CSS란
- CSS(Cascading Stylesheets)는 스타일과 레이아웃을 지정.
- 콘텐츠의 글꼴, 색상, 크기 및 간격을 변경 및 애니메이션 효과 적용 가능.
2. CSS 구성요소
- 선택자, 속성
3. CSS reset
4. CSS flex-box / grid
5. 기능별 요소
- 텍스트 스타일링
- 박스 스타일링
- CSS Layout
- 반응형 지다인
4. Bootstrap을 이용하여 Page 꾸미기
1. Bootstrap이란
2. Bootstrap 구성 요소
3. Bootstrap 사용 예시
5. Javacript를 이용하여 동적 페이지 만들기
1. Javascript란
2. Javascript 기본 문법
- 변수: var, let, const
- 입출력: console.log(), prompt(), confirm()
- 연산자: 산술(+, -, *, /, %), 비교(<, <=, >, >=, ==, !=), 조건(&&, ||, !)
- 함수: function, arrow function
- 객체: class, new
3. DOM(Document Object Mapping)
4. Fetch API
5. Javascirpt 동적 페이지 예시
Reference
(Git Blog)
| GitHub 블로그 만들기 시즌1 |
| GItHub 블로그 만들기 시즌2 |
| GitHub 블로그 10분만에 완성하기 |
| [1부터 100까지] GitHub 블로그 만들기 |
(HTML / CSS)
| [Blog: TCP/IP School(HTML)] https://tcpschool.com/html/intro |
| [Video: 생활코딩(WEB1-HTML&Internet)] https://www.youtube.com/playlist?list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb |
| [Blog: Heropy Tech(입문자에게 추천하는 HTML, CSS)] https://heropy.blog/2019/04/24/html-css-starter/ |
| [Docs: MDN(HTML)] https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started |
| [Blog: TCP/IP School(CSS)] https://tcpschool.com/css/intro |
| [Video: 생활코딩(WEB2-CSS)] https://www.youtube.com/playlist?list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B |
| [Docs: MDN(CSS)] https://developer.mozilla.org/ko/docs/Learn/CSS |
| [Docs: Bootstrap()] https://getbootstrap.com/docs/5.3/getting-started/introduction/ |
| [Blog: Heropy Dev(CSS Flex)] https://www.heropy.dev/p/Ha29GI |
| [Blog: Heropy Dev(CSS Grid)] https://www.heropy.dev/p/c6ROLZ |
(Javascript)
| [Blog: TCP/IP School(Javascript)] https://tcpschool.com/javascript/intro |
| [Blog: 개발자 황준일(Vanilla Javascript로 Web Component 만들기)] https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/#_5-%E1%84%8F%E1%85%A5%E1%86%B7%E1%84%91%E1%85%A9%E1%84%82%E1%85%A5%E1%86%AB%E1%84%90%E1%85%B3-%E1%84%87%E1%85%AE%E1%86%AB%E1%84%92%E1%85%A1%E1%86%AF |
| [Docs: MDN(Javscript)] https://developer.mozilla.org/ko/docs/Learn/JavaScript |
| [Docs: Vanilla JS(Javascript)] http://vanilla-js.com/ |
| [Docs: Modern Javscript Tutorial(Javascript)] https://ko.javascript.info/ |
'Appendix > Git & GitHub' 카테고리의 다른 글
| [GitHub] GitHub 메인 페이지 (0) | 2024.01.16 |
|---|---|
| [Git] Windows에서 GitHub 연동 (0) | 2024.01.13 |
| [Git] MacOS(M2)에서 GitHub 연동 (0) | 2024.01.13 |
| [GitHub] GitHub 사용법 (0) | 2023.10.15 |
| [Git] Git-Flow (0) | 2023.10.15 |
