2023. 6. 5. 10:07ㆍLectures - 코딩 강좌/HTML 웹페이지 강좌
# 들어가기 앞서서...
고등학생 때 부터 보건 위생에 관심이 많았던 상아는 대학생 창업 지원금을 받아 구강 위생에 관하여 창업 계획을 세우게 된다. 편리한 구강 위생 용품의 설계와 디자인, 수익성 분석, 마케팅 계획 등 모든 부분을 혼자서 철지히 세운 상아는 역시 제 성격대로 사업사 기질이 보이는 듯 하다. 하지만 이러한 천하무적의 상아에게도 한가지 약점이 있었으니... 컴퓨터 쪽으로는 뛰어난 머리가 있지 않아 쩔쩔매고 있었다. 상아는 사업의 방향과 상품 들을 예상 소비자들에게 보여줄 수 있는 비즈니스 홈페이지가 필요했지만 이것 저것 만져보아도 영 시원지 않은듯 하다 ㅠ_ㅠ. 상아는 결국 혜성이에게 웹사이트를 손 쉽게 개발 하는 방법에 대해 물어보게 된다.
웹 호스팅 부터 디자인, 여러가지 기능을 가진 페이지를 구현하기 까지 많은 도움이 필요한 상아! 과연 혜성이는 상아가 자신만의 비즈니스 홈페이지를 가질 수 있게 해 줄 것인가...
#이번 시간의 목표!
웹페이지를 만드는데 가장 중요한게 무엇이라고 생각하나요?
디자인? 물론 가독성이 좋고 예쁘게 꾸며주면 사람들이 방문을 많이 하긴 할거에요.
마케팅? 사람들이 사이트에 방문을 많이하면 장기적으로 운영하는데 도움이 되긴 하죠.
아쉽게도 이 둘은 제가 원하던 답이 아니었습니다. 저는 웹사이트 구축에 있어서 가장 중요하다고 생각되는게 바로 호스팅(Hosting) 이라고 생각을 합니다! 웹사이트가 어떻게 되던 일단 사람들이 접근을 할 수 있어야 디자인이라던가 아니면 마케팅을 하던지 하겠죠?
이번 시간에는 깃허브(GitHub)를 이용해서 웹사이트를 호스팅 해볼거에요!
그런데 왜 깃허브를 이용해서 웹사이트를 호스팅 하는거냐 물어보는 사람이 하나 둘 보이네요. 좋은 질문입니다! 이번 강좌에서 깃허브를 이용하는 이유는 계정 하나만 만들면 데이터 파일을 담을 그릇을 용량도 무제한으로 제공해 주면서, 무료료 웹사이트를 만들 수 있도록 도메인도 제공을 해줍니다!
그래서 우리가 준비해야 할 것은 본인의 깃허브 계정 하나와 텍스트 편집기(저는 VS Code를 사용할 거에요) 이 정도 되겠네요!
그러면 웹사이트 첫번째 강좌 시작해 보도록 하겠습니다. 이번 강좌에서는 웹페이지를 호스팅하고, 간단한 문장 하나가 홈페이지에 표시 되도록 해보겠습니다!
# 1.1. 레퍼지토리 생성하기
웹페이지는 비공개로 하지 않는 이상 주소를 알면 누구든지 접근을 할 수 있습니다. 그러기 위해 우리는 깃허브(깃허브는 단순히 허브의 역할만 합니다)에 레퍼지토리를 생성하고, 그 안을 채워넣고, 마지막으로 기본 제공 해주는 도메인(개인 도메인으로 호스팅 하는 방법은 추후 강좌를 작성 할 예정입니다)에 연결하는 과정 까지 해보겠습니다.
먼저 깃허브에 들어가서 로그인을 해주도록 합니다.
GitHub: Let’s build from here
GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea...
github.com
깃 허브 우측 상단을 보시면 "십자가" 모양이 있는데 이것을 클릭하고 "New Repository"를 클릭해 줍니다.
그리고 레퍼지토리 이름을 정해줍니다. 이 이름은 깃허브에서 제공해 주는 도메인에 사용되기 때문에 신중하게 정해주세요. 그리고 바로 아래에 공개 범위를 "Public" 으로 설정해 줍니다. 웹페이지를 외부로 공개 해주어야 하기 때문에 "Private" 를 선택하면 안됩니다(나중에 setting 에서 수정이 가능합니다).
다 되었다면 레퍼지토리를 생성하시면 됩니다.
# 1.2. 웹 페이지 기본 파일을 만들자! - index.html
다 만들었다면 이번에는 텍스트 에디터를 열어주도록 할게요. 열었다면 대충 코딩 한번 해볼게요. 복붙용 코드랑 설명 적어두었습니다.
<!DOCTYPE html>
<html lang="en">
<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>Ivory Lee</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
361x 는 무시해 주세요... Power Mode를 깔아서 타이핑 할 때 마다 콤보가 올라갑니다.
HTML 구문은 다음 강좌에서 더 자세히 설명할 예정이라 그냥 넘어가셔도 좋지만, 궁금한 분들을 위해 설명을 작성해 두었습니다!
| 1) Column 1, 12 document type의 약어로, 웹 문서가 어떠한 형식으로 작성되었는지 최상단에 문서의 형식을 선언해주는 역할을 합니다. 문서가 html 형식임을 선언해 주어 각 브라우저가 html 문서를 동일하게 인식할 수 있도록 하면서 문서 간의 호환성을 높여 줄 수 있습니다.12번 줄(마지막 줄) 에서 태그를 닫아줍니다. |
| 2) Column 2 문서의 언어를 지정해 줍니다. 위 코드는 기본 언어를 영어로 지정했음을 의미합니다. |
| 3) Column 3~7 본문에 나다나지 않는 코드를 작성합니다. 다음 강의에서 더 자세히 설명하겠습니다! |
| 4) Column 9~11 본문에 나타나는 코드를 적습니다. 웹 문서에 Hello, World! 가 표시 되도록 하는 코드 입니다. |
다 작성했으면 파일을 "index.html" 로 저장해 주겠습니다. 여기서 파일 명을 "index" 로 지정해 준 이유는 웹 페이지 방문자가 웹 사이트에 접근을 요청할 때 다른 페이지가 지정되지 않은 경우에 웹 사이트에 표시된 기본 페이지에 사용되는 가장 일반적인 이름이기 때문입니다. 미리 약속된 이름인 셈이죠. index 외에도 default 나 home 처럼 미리 약속된 페이지 이름이 있습니다.
여기에서 또 궁금할 만한 내용이 있을 텐데요, 기본 페이지 이름을 "index"로 지정하면 도대체 어떤 이득이 있는걸까요?
제 블로그 처럼 일반적인 웹사이트를 보면 여러가지 페이지가 존재하게 되고 각각 다른 디렉토리에 저장되게 됩니다. 이때 방문자가 다른 디렉토리에 있는 페이지에 접근하도록 할 때 URL에 파일 이름을 입력하지 않아도 독자가 해당 디렉토리의 페이지에 접근 할 수 있으므로(기본 페이지의 명칭이 index 이기 때문이다) "404 페이지를 찾을 수 없음" 오류가 발생하지 않습니다. 또한, 보안의 기능을 담당할 수 있기 때문입니다. 대부분의 웹 서버는 방문자가 기본 파일 없이 디렉토리에 있을 때 해당 폴더의 디렉토리 및 기타 파일과 같이 숨겨진 웹 사이트에 대한 정보를 얻기 쉬워집니다. 따라서 기본 명칭을 사용한다면 이러한 보안적 위험을 줄일 수 있습니다.
잠시 다른 소리가 길어졌네요 ㅎㅎ;;
다시 깃허브에 메인 브랜치에 방금 만들었던 "index.html" 파일을 업로드 해주겠습니다!
"Add Files - Upload Files" 를 눌러줍니다.
방금 만들었던 파일을 업로드 해주시고 메인 브랜치에 커밋 해주도록 하겠습니다. 이렇게 하면 테스트 웹 페이지 준비는 어느정도 되었다고 볼 수 있겠네요.
# 1.3. 웹 페이지 기본 파일을 만들자! - index.html
마지막으로 테스트 웹페이지 파일을 넣어두었으니 마지막으로 웹페이지에 url을 연결하여 직접 테스트 웹페이지를 확인해 보도록 할거에요!
먼저 레퍼지토리 로 돌아가서 상단 배너에 "Setting"을 눌러볼게요.
그 다음 좌측 카테고리에서 "General" 로 들어가서 레퍼지토리 이름을 수정해 줄거에요.
레퍼지토리 이름을 "(닉네임).github.io" 로 바꿔줄게요. 여기에서 "(닉네임).github.io" 는 이제 우리가 만들었던 "index.html"로 접근할 수 있는 url 이 될겁니다!
다 되었다면 좌측 배너에 "Pages" 로 가볼게요. 중간에 Branch 라고 되어 있는 부분을 수정할 거에요. "None"이라고 설정되어 있는 부분을 클릭해서 "main" 으로 바꿔준 뒤 우측에 저장 버튼을 누르면 준비가 다 되었습니다!
방금 설정에서 보았던 "(닉네임).github.io" 를 주소창에 입력하면 위 그림처럼 상단바에는 "Ivory Lee (혹은 여러분들이 정했던 문장)"가, 본문에는 "Hello World's (혹은 여러분이 적어준 메세지)"가 적혀진 웹페이지를 볼 수 있습니다!
여기까지 무난하게 따라오셨다면 당신은 100점! 사실 생각했던 것 보단 쉽기 때문에 많이 놀라셨을 수도 있습니다.
그러면 이번 강좌는 여기까지 하도록 할게요!
#강좌를 마치며...
이번 시간에는 깃허브에 레퍼지토리를 만들고 "index.html" 파일을 업로드하여 직접 테스트 웹페이지에 접속하는것 까지 해보았습니다! 다음 강좌에서는 본격적으로 HTML에 대해 알아보고 직접 코드를 짜보는 시간을 가져볼거에요.
혹시 이해가 잘 안된다, 제 블로그 글에 피드백이 필요한 것 같다 생각이 드는 분들은 자유롭게 댓글 남겨주셔도 좋고 아래에 연락처로 편하게 연락 해 주셔도 됩니다!
| 디스코드: Dizzt#0116 이메일: eorhkd69@gmail.com (이메일은 잘 못 볼 가능성이 큽니다 ㅠㅠ) |
긴 글 읽어 주셔서 감사합니다!
'Lectures - 코딩 강좌 > HTML 웹페이지 강좌' 카테고리의 다른 글
| [HTML 웹사이트 #02] 레쿠쟈의 정보는... - HTML에 대해 알아볼까요? (상편) (3) | 2023.06.07 |
|---|