오늘은 개발자라면 꼭 알고 있어야 할 깃허브 (Github)
너무 어려워서 접근하기 힘든 깃허브지만
개발자가 꿈이 이 사라면 사용할 수밖에 없을 텐데요
오늘은 깃허브에서 이력서를 만들어보겠습니다.
깃(git)과 깃허브 (Github)에 대한 설명과 차이점은
아래 글을 참고해 주세요
저장소
먼저 깃 허브 가입을 하신 후에
저장소 (Repository)를 만들어
이력서 관련 파일들을 저장하겠습니다.
먼저 깃허브에 로그인한 후 Repository
(이제 쉽게 레포라고 부르겠습니다)
에서 New를 클릭하여 새 저장소를 만들어줍니다.
"Repository name"에 원하는
레포 이름을 입력해 줍니다.
저는 resume라고 입력하도록 하겠습니다.
코딩할 때와 마찬가지로 띄어쓰기
즉 스페이스바를 하지 마시고
두 개 단어 이상으로 설정하시려면
gildong-resume처럼
하이픈으로 연결해 주시길 바랍니다.
다 작성하셨다면 Add a README flie 체크 박스를
클릭하신 후
Create repository 버튼을 클릭하여
이력에서 쓸 레포를 만들어줍니다.
소스 작성 환경 만들기
VSCODE 편집기
자동으로 만들어진 레포가 열리면 그 상태에서
키보드 마침표. 를 눌러 주세요.
github.dev라는 편집기가 나타납니다.
온라인에서 사용할 수 있는 Vscode 편집기입니다.
만약 작업에 능숙하시고 따로 사용하시는 편집기가
있으시다면 그걸로 사용하셔도 무방합니다.
이제 이곳에 원하는 html 소스를 작성하여 작업하면
자동으로 깃허브 레포로 파일이 업로드되고,
내용 수정 역시 즉시 반영됩니다.
소스 작성 환경 만들기2
Codeswing
Codeswing은 우리가 직접 작성한 소스가
어떻게 반영되는지 바로 확인이 가능하도록
출력해 주는 기능을 가지고 있습니다.
작업하면서 잘 노출되고 있는지 확인하기 위해
설치해 주도록 하겠습니다.
왼쪽 사이드바에서 확장 아이콘을 클릭한 후 codeswing을 검색하여 설치해 주세요.
그리고 바로 마크업 (Markup)에 들어가도록 하겠습니다.
마크업이란 웹 브라우저가 이해할 수 있도록
기호를 사용하여 구성하는 것을 말합니다.
Index.html / Codeswing
VS Code에서 명령 팔레트를 통해
Codeswing을 검색하고
CodeSwing: Initialize Workspace as Swing을
선택합니다.
그리고 HTML 파일을 만들기 위해
Basic: HTML-only를 선택합니다.
정상적으로 선택했다면 편집기 화면이 두 개로 나뉘면서
왼쪽에는 index.html이 나타나고,
오른쪽에는 CodeSwing 화면이 나타납니다.
index.html은 우리가 앞으로 소스를 작성할 화면이고,
오른쪽의 CodeSwing은 소스를 작성하면서
결과를 확인하기 위한 화면입니다.
<html lang = "en"> -> <html lang = "ko">index.html 화면에서 느낌표! 를 입력한 후
Enter 키를 눌러주세요.
웹 문서의 가장 기본적인 소스 코드가
자동으로 만들어집니다.
그곳에서 "en" 부분을 "ko"로 수정해 주세요.
깃은 영문 페이지로 만들어졌지만
우리는 한글로 작성할 것입니다.
<title>Document</title> <- <title>원하는 제목</title>보이는 소스에서 <title> 태그는 웹 브라우저 탭에
표시되는 이력서 제목입니다.
Document 부분을 원하는 제목으로 바꿔주세요
html 마크업
본격적으로 html 마크업을 시작하도록 하겠습니다.
아래 소스를 복사해서 index.html 문서의
<body> 태그와 </body> 태그 사이에 삽입해 주세요
<header id="header">
<!-- 이력서 헤더 : 이름과 타이틀 작성 -->
<h1>이름</h1>
<hr>
타이틀 (예: 학생 등)
<hr>
</header>
<main>
<article id="mainLeft">
<section>
<h2>CONTACT</h2>
<!-- 연락처 정보 -->
</section>
<section>
<h2>SKILLS</h2>
<!-- 자신이 잘할 수 있는 기술 -->
</section>
<section>
<h2>EDUCATION</h2>
<!-- 학력 -->
</section>
</article>
<article id="mainRight">
<section>
<h2>ABOUT</h2>
<!-- 자기 소개 -->
</section>
<section>
<h2>WORK EXPERIENCE</h2>
<!-- 경력 -->
</section>
</article>
</main>
위와 같이 Codeswing에 출력된다면
아주 잘 따라오고 계신 겁니다.
<header id="header">
<!-- 이름과 타이틀 작성 -->
<h1>이름</h1>
<hr>
타이틀 (예: 학생 등)
<hr>
</header>
<header id="header">
<!-- 이력서 헤더 : 이름과 타이틀 작성 -->
<h1>홍길동</h1>
<hr>
도적
<hr>
</header>이제 필요한 내용들을 각 소스 코드 사이에 써넣어 주시면 됩니다.
위의 예시를 보고 본인의 이력서 내용을 채워 넣어주세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>!!!</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
<header id="header">
<h1>!!!</h1>
<hr>
!!!
<hr>
</header>
<main>
<article id="mainLeft">
<section>
<h2>CONTACT</h2>
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href=!!!</a>
</p>
<p>
<i class="fa fa-github" aria-hidden="true"></i>
<a href=!!!</a>
</p>
<p>
<i class=!!!</i>
<a href=!!!</a>
</p>
</section>
<section>
<h2>SKILLS</h2>
!!!
</section>
<section>
<h2>EDUCATION</h2>
!!!
</section>
</article>
<article id="mainRight">
<section>
<h2>!!!</h2>
!!!
<ul>
!!!
</ul>
!!!
</section>
<section>
<h2>ABOUT</h2>
</section>
</article>
</main>
</body>
</html>스타일 적용하기
너무 정직한 이력서를 조금만 스타일 수정해 보겠습니다.
왼쪽 탐색기 화면에서 새 파일을 추가해 줍니다.
style.css를 검색하시면 오른쪽에
창 하나가 추가됩니다.
이제 이곳에 소스를 적어 스타일을 만든 것을 index.html에 적용시키려면
HTML 문서에 연결해 주어야 합니다.
link 태그를 사용하여 연결시켜주도록 합시다.
<link rel="stylesheet" href="style.css">위 코드를 index.html 문서 </head> 태그
바로 앞에 삽입해 주세요.
Google에서 제공하는 Noto Sans KR 체로
폰트를 바꿔보도록 하겠습니다.
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
body {
max-width: 960px; /* 최대 너비 */
margin: auto; /* 마진 auto - 내용을 화면 가운데 맞추기 위해 */
font-family: "Noto Sans KR", "Nanum Gothic"; /* 글꼴 - 웹 폰트 */
font-size:14px; /* 글자 크기 */
}(이제부터 style 창에서 작업합니다)
위 코드를 삽입해 주세요
적용됐는지 보시려면 오른쪽 위 재생 버튼을 클릭하고
Codeswing 창을 보시면 적용되어 있는 모습을
확인할 수 있습니다.
우리가 만든 문서 제목을 지정하는
<h1> 태그와 <h2> 태그에 대한 스타일도 만들겠습니다
h1 {
font-size: 3rem; /* 글자 크기 */
letter-spacing: 0.6rem; /* 자간 */
padding-top: 1rem; /* 위쪽 패딩 */
padding-bottom: 1rem; /* 아래쪽 패딩 */
}
h2 {
font-size: 1.5rem;
padding-bottom: 1em;
}너무 일자로 출력되어 보기가 힘들어
2줄로 배치를 바꾸고 싶은데
이럴 경우 CSS 그리드를 사용하시면 됩니다.
작성한 각 파트의 너비를 조절하여
양쪽으로 출력될 수 있게 해보겠습니다.
main {
display: grid; /* css grid 사용 */
grid-template-columns: 40% 60%; /* 왼쪽 40%, 오른쪽 60% */
margin-top: 3rem;
}
CSS 그리드를 이용하여 너비를 조절하고
2줄로 출력되게 만들었습니다.
조금 답답해서 여백을 추가하면서
가운뎃 줄을 하나 긋도록 하겠습니다.
header {
text-align: center;
margin: auto 2rem;
}
section {
margin: auto 1rem 4rem 2rem;
}
p {
margin: 0.2rem auto;
}
hr {
border: none;
background-color: lightgray;
height: 1px;
}
h1, h2 {
font-weight: 100;
margin-bottom: 0;
}
i {
margin-right: 0.5rem; /* SNS 아이콘 오른쪽 여백 */
}
#mainLeft {
border-right: 1px solid lightgray;
}
이제 조금 잘 보이는 것 같습니다.
자 이제 깃에 커밋 (commit)을 해보도록 하겠습니다
깃에 커밋을 한다는 말은
변경된 사항을 저장한다는 말입니다.
사이드바에서 Source Control 아이콘을 클릭한 후,
맨 위에 커밋 메시지를 입력하고
바로 위의 체크 버튼을 클릭합니다.
소스 컨트롤 아이콘에 나와있는 3이라는 파란 숫자는
수정된 사항이 3개가 있다고 표시해 주는 겁니다.
깃허브에서도 자동으로 저장되어
잘 업로드되어 있는 걸 확인해 보실 수 있습니다.
깃허브 레포 화면에서 오른쪽에 있는
Settings을 클릭하고 Pages를 선택합니다.
오른쪽 화면에서 Source 항목을 보면
아직 None이라고 되어 있을 것입니다.
None을 클릭한 후 main을 선택합니다.
위 설정의 뜻은
레포 main 브랜치에 있는 파일들을
사용하겠다는 뜻입니다.
마지막으로 Save를 클릭합니다.
페이지 설정을 하고 페이지 주소가 뜨는데
즉시 웹 사이트가 나타나지는 않을 수 있습니다.
404 오류 메시지가 뜨더라도 걱정하지 말고,
5~10분 후에 다시 접속해 보시길 바랍니다.
잘 따라오셨다면 아래와 같이 이력서가 나오게 됩니다.
(개인정보는 가렸습니다)
완성되었습니다.
감사합니다.
궁금하신 사항은 댓글에 남겨주세요
댓글에 남겨주신 내용은
추후 정리해서 올려드리겠습니다
구독 신청하시면 업로드 시 알려드릴게요!
-
조금이라도 도움이 되셨다면
공감&댓글 부탁드리겠습니다
감사합니다!
'Git' 카테고리의 다른 글
| 깃 (git)이란? 깃허브 (github)란? (깃과 깃허브 차이점, 쉬운 설명, 정의) (0) | 2024.03.15 |
|---|