[HTML] 생활코딩 15~18 _ 링크, 웹, 클라이언트와 서버, 웹호스팅

SMALL

안녕하세요~ 보라해바라기입니다.

작심삼일이 되지 않기를 바라는 마음으로 오늘도 찾아오게 되었습니다!

사실 오늘은 알바와 선약때문에 공부할 시간이 없을거라 생각했어요...

하지만! 알바 휴가라는 예상치못한 상황으로 공부할 시간이 생겼어요!!

공부라는게 남는 시간에 하는 것이 아니라 시간을 내서 하는거라지만...

우리의 현생은 중요하니까요 ㅎㅎ

아무튼! 오늘도 제가 배운 것들에 대해 정리하고 저의 웹페이지를 공유하는 시간을 가져볼게요~

그럼 시작해볼까요?! 렛츠기릿~!

1. 링크(연결)

저번 시간에 <a href="링크 주소"></a>를 이용해서 링크를 클릭하면 연결된 웹페이지로 이동하는 것을 알게 되었어요!

오늘은 그 확장판으로 내가 만든 여러 HTML파일을 링크할 수 있는 방법을 알게 되었답니다.

<a href= "파일 이름.html"> 문장 </a> : 문장을 HTML 파일과 연결. 문장이 정해진 링크로 이동하도록 함.

저는 총 4개의 HTML 파일을 생성해서 각 링크를 연결해보았답니다~

index.html
1.html
2.html
3.html

여기서 index.html 홈페이지. 즉, 웹페이지의 대문 역할이라고 볼 수 있어요.

저의 소스코드와 실행 결과를 보면 이해가 훨씬 수월할 것 같아요^_^

앞에 나열된 목록 순으로 소스코드와 웹페이지 결과를 보여드릴게요!

① index.html

<!doctype html>
<html>
<head>
<title>보해의 인생</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">보라해바라기</a></h1>
<h4>목차</h4>
<ol>
  <li><a href="1.html"> 과거</a></li>
  <li><a href="2.html"> 현재</a></li>
  <li><a href="3.html"> 미래</a></li>
</ol>
<ul>
  <li>초등학교</li>
  <li>중학교</li>
  <li>고등학교</li>
  <li>대학교</li>
</ul>
<h2>보라해바라기는 어떤 사람인가?</h2>
<p>보라해바라기는 진로를 구체적으로 정하려고 노력하는 사람이다.
또한 자신에게 도움이 된다고 생각하면 도전하는 스타일이다.</p>
<img src="study hard.jpg" width="450">
</body>
</html>

② 1.html

<!doctype html>
<html>
<head>
<title>보해의 인생_Past</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">보라해바라기</a></h1>
<h4>목차</h4>
<ol>
  <li><a href="1.html"> 과거</a></li>
  <li><a href="2.html"> 현재</a></li>
  <li><a href="3.html"> 미래</a></li>
</ol>
<ul>
  <li>초등학교</li>
  <li>중학교</li>
  <li>고등학교</li>
  <li>대학교</li>
</ul>
<h2>보라해바라기의 과거</h2>
<p>보라해바라기는 초등학교때부터 <strong>사회 복지</strong> 분야에 관심이 많았다.
<br>그 바탕에는 부모님, 특히 <u>어머니</u>의 영향이 컸다.
초등학교 시절부터 어머니와 함께 노인센터, <a href="http://www.aemangwon.com/" target="_blank" title="애망원">장애인 고아원</a> 등 여러 복지기관에서 봉사를 했다.</p>
<img src="volunteering.jpg" width="450">
</body>
</html>

③ 2.html

<!doctype html>
<html>
<head>
<title>보해의 인생_Present</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">보라해바라기</a></h1>
<h4>목차</h4>
<ol>
  <li><a href="1.html"> 과거</a></li>
  <li><a href="2.html"> 현재</a></li>
  <li><a href="3.html"> 미래</a></li>
</ol>
<ul>
  <li>초등학교</li>
  <li>중학교</li>
  <li>고등학교</li>
  <li>대학교</li>
</ul>
<h2>보라해바라기의 현재</h2>
<p>나는 현재 <a href="http://www.knu.ac.kr/wbbs/" target="_blank" title="KNU">대학교</a> 3학년에 재학 중이다.
  나의 꿈은 <strong><u>웹개발자</u></strong>이다. <u>3학년 여름방학</u> 전까지는 막연하게 개발자가 되어야겠다고 생각했다.
  <br>하지만 여러 영상을 찾아보며 내가 입문하기 가장 쉽고 흥미를 느낄 수 있는 개발자 분야가 웹개발자라는 것을 차츰 알게 되었다.</p>
<img src="coding.jpg" width="450">
<p style="margin-top:25px;">웹 프로그래머가 되기 위해서는 HTML, CSS, JavaScript를 필수로 알아야한다. 나는 현재 생활코딩님의 영상을 보며 HTML을 아주 얕게나마 배우고 있다.</p>
</body>
</html>

④ 3.html

<!doctype html>
<html>
<head>
<title>보해의 인생_Future</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">보라해바라기</a></h1>
<h4>목차</h4>
<ol>
  <li><a href="1.html"> 과거</a></li>
  <li><a href="2.html"> 현재</a></li>
  <li><a href="3.html"> 미래</a></li>
</ol>
<ul>
  <li>초등학교</li>
  <li>중학교</li>
  <li>고등학교</li>
  <li>대학교</li>
</ul>
<h2>보라해바라기의 미래</h2>
<p>보라해바라기의 최종 목표는 <u>심리 분야에 기여할 수 있는 웹개발자</u>가 되는 것이다.
이를 위해선 최소 <strong>3년</strong> 이상의 경력을 쌓아야 하고 지금 그 첫 발걸음을 내딛고 있다.</p>
<img src="psychology.jpg" width="450">
</body>
</html>

저번에 배웠던 폰트 굵게 하기, 밑줄 치기, 페이지 제목 바꾸기, 링크 연결하기, 이미지 삽입하기 등을 사용하여

웹페이지 내용을 추가해보았습니다!

저번보단 훨씬 더 웹페이지처럼 보이죠? (뿌듯)

오늘 수업에서는 웹의 역사와 전반적인 원리에 대해서 더 많이 배웠어요~

웹페이지를 만드는 기술을 배우는 것도 중요하지만

내가 다루고자 하는 기술이 어떤 역사를 지녀왔고 어떻게 구성되어있는가를 아는 것이 중요하다는 생각을 해요.

그래서 오늘 강의를 통해 알게 된 내용도 한 번 정리하고 글을 마치겠습니다!

2. 웹이란?

여러분! 혹시 웹이 어느 나라에서 태어났는지 아시나요?

미국? 중국? 인도?

정답은.... 두구두구

스위스랍니다! (요를레히욧~)

정말 의외의 국가이죠? 저도 처음에 이 이야기를 듣고 깜짝 놀랬답니다 ㅎㅎ

그렇다면 스위스에서 발전된 웹에도 첫번째 웹, 원시 웹이 존재하겠죠?

지금 당장 검색 엔진에 info.cern.ch라고 검색해보시면 한 사이트가 여러분 눈 앞에 등장할 것입니다.

짜잔~ 여러분은 지금 역사의 순간을 보고 있는거에요 ㅎㅎ

처음 생성된 웹페이지가 바로 이 웹페이지 입니다.

딱히 특별해보이진 않지만 웹의 시작을 마주하다니... 기분이 새롭지 않나요?

이렇게 웹이 되기 위한 본질만 담고 있으면서 혁신적인 것을 철저히 배제한 원시 웹이

우리가 지금 사용하는 웹의 시초였답니다.

3. 서버와 클라이언트

서버와 클라이언트는 인터넷으로 연결되고 우리는 이를 이용해 웹을 이용하게 됩니다.

이들이 작동하는 원리는 다음과 같이 도식화 할 수 있답니다!

웹브라우저(http://info.cern.ch/index.html 입력하면)
웹서버(http://info.cern.ch라는 주소 가짐. index.html이라는 파일 저장됨)
브라우저에서 서버로 신호 보냄. "index.html파일 원한다!"라는 신호
파일 찾아서 서버가 브라우저에게 전기적 신호로 보냄. (전기적 신호에는 index.html에 담긴 코드 있음).
브라우저에 index.html내용 도착.
해석 후 화면에 표시.
웹이 동작함.

7단계를 거치며 서버와 클라이언트는 통신을 하게 됩니다.

이 두 개는 인터넷으로 연결되며

웹브라우저는 정보를 요청하는 클라이언트의 역할, 웹 서버는 정보에 응답하는 서버 역할을 하게 되죠.

4. 웹호스팅

개발에서 잔디를 심는게 중요하다는 이야기 들어보셨나요?

갑자기 왜 잔디야? 라고 생각하실 수 있어요 ㅎㅎ

"잔디를 심는다는 것"은 깃허브라는 사이트에서 자신이 만든 코드를 저장하는 것을 의미한답니다.

여기서 깃허브가 웹 서버를 제공해주는 "웹 호스팅" 역할을 하게 됩니다.

즉, 홈페이지를 운영할 수 있는 웹서버를 무료로 제공하는 대표적인 사이트가 바로 GITHUB(깃허브)이죠!

사실 저도 깃허브를 사용해야한다는 말은 많이 들었지만

실제로 어떻게 사용하는지는 잘 몰라서 말 그대로 "잔디"를 못 심고 있었어요... ㅎㅎ

하지만 생활코딩님의 친절한 설명 덕에 오늘부터 잔디를 심을 수 있게 되었답니다!

간단하게 설명드리면

☞ repository라는 저장소가 있고 upload file 버튼을 통해 파일을 올리면 끝납니다~

☞ 만약 코드에 변경 사항이 생겼다면

☞ change commit을 통해 파일을 다시 업로드하여 변경된 사항만 자동 추가가 가능하다는 사실!

☞ setting에서 repository name을 파일이름.html로 저장하고

☞ pages로 들어와 main branch, root를 선택해 저장하면 자신이 만든 코드의 결과를 볼 수 있는 링크가 생성돼요!

제 github를 예시로 보여드릴게요! 아직 잔디가 뻥뻥 비었죠...? ㅎㅎㅎㅎ

이 정도만 알아도 github를 사용하는데 문제없을 것 같아요 ㅎㅎ

github는 왕초보 개발자부터 현직에 종사하시는 시니어개발자까지 다양한 수준의 개발자들이 사용하고 있고

open source를 통해 다른 사람의 코드도 살펴볼 수 있다는 점.

그리고 개발에 대한 자신의 꾸준함을 증명해줄 수 있다는 점에서 아주 유용한 것 같아요!

개발 공부를 시작하신 분이라면 저처럼 아주 조그마한 프로젝트라도 github에 저장하는 걸 추천드려요^_^

오늘도 긴 글 읽어주셔서 감사합니다:)

728x90

저작자표시

'HTML & CSS' 카테고리의 다른 글

[CSS] 생활코딩 8~11 _ 박스모델, 그리드 (0)	2021.07.07
[CSS] 생활코딩 1~7 _ 폰트 색, 밑줄, 크기, 정렬, 선택자 (1)	2021.07.06
[HTML] 생활코딩 19~20, 부록 _ 윈도우에서 웹 서버, 동영상 삽입, 댓글과 채팅 기능, 웹사이트 방문자 분석 (1)	2021.07.05
[HTML] 생활코딩_복습 겸 웹페이지 보강 (1)	2021.07.04
[HTML] 생활코딩 1~14 _ 여러 태그와 속성, HTML의 구성 (5)	2021.07.02

심리학도의 좌충우돌 개발 여행기

[HTML] 생활코딩 15~18 _ 링크, 웹, 클라이언트와 서버, 웹호스팅

1. 링크(연결)

① index.html

② 1.html

③ 2.html

④ 3.html

2. 웹이란?

3. 서버와 클라이언트

4. 웹호스팅

'HTML & CSS' 카테고리의 다른 글

댓글

티스토리툴바

[HTML] 생활코딩 15~18 _ 링크, 웹, 클라이언트와 서버, 웹호스팅

1. 링크(연결)

① index.html

② 1.html

③ 2.html

④ 3.html

2. 웹이란?

3. 서버와 클라이언트

4. 웹호스팅

'HTML & CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바