코딩야학 5기 - 2일차 190103 : ~웹호스팅 (github pages) 까지

코딩야학 5기 - 2일차 190103
: ~웹호스팅 (github pages) 까지

만든 날짜:

2019-01-03 오전 9:30

본 글은 에버노트에서 작성되었습니다.

기본문법 - 태그

 태그에 대해서 설명

혁명적인 변화

 우리는 모르는 것이 뭔지만 알면 인터넷을 통해 1분만에 알 수 있는 시대에 살고 있다.

통계에 기반한 학습

통계에 기반을 둬서 공부하는 방법.

https://www.advancedwebranking.com/html/

150여개의 태그 중.

통계를 기반으로 공부를 하면 효율적이다.

ex)

frequency of english words

https://www.wordfrequency.info/free.asp?s=y

시험을 보게되면 어려운 것은 중요한 것이고,

쉬운 것은 사소한 것이라는 해로운 인식이 생긴다..

쉽다고 무시하지 마라. 쉬운 것을 토대로 융합하는 것이 더 어렵다.

가야 할 길 보다. 거쳐온 길을 보면서 나한테 유리하게 상황을 해석하자! 나는 내편.

---

줄바꿈

<br> , <p></p>

뭔가를 설명하지 않는 태그들은 감싸야되는 컨텐츠가 없기 때매 태그를 닫지 않는다. img, input, br, hr, meta 등.

 단락을 표현할 때는 줄바꿈 태그(br) 보다는 단락을 표현하는 p 태그가 더 좋다. 간격은 css를 통해 조절하자.

<p style="margin-top:45px;">

---

HTML이 중요한 이유

공부를 하면 보이지 않던 것이 보이기 시작한다.

들리지 않던 것이 들리기 시작한다.

html은 누구나 접근이 가능. 누구나 차별없이 정보에 접근할 수 있어야 한다는 철학을 접근성 이라고한다!

블로그를 사진으로만 작성하는 것은, 누군가를 소외시키는 행위이다. 하지만 의미론적으로 잘 쓴다면 누군가에게 도움을 주고있는 셈이다. 비즈니스 뿐만 아니라 휴머니즘 측면에서도 중요한 기술이다.

---

최후의 문법 속성과 img

img 태그와 src 속성.

저작권이 없는 이미지 ( public domain image / unsplash.com)

---

부모 자식과 목록

<parent>

    <child></child>

</parent>

<p>

    <a href="https://opentutorials.org">opentutorials</a>

</p>

위 코드는 p태그가 부모 a태그가 p태그의 자식

목차가 바로 그 예이다.

목차가 영어로 list인데 앞에 두 글자 li를 따온다.

<ul>

<li>1. HTML</li>

<li>2. CSS</li>

<li>3. JavaScript</li>

</ul>

<ul>

<li>egoing</li>

<li>k8805</li>

<li>sorialgi</li>

</ul>

li태그는 ul태그를 꼭 필요로 한다.

ul은 unordered list

ol은 ordered list

---

문서의 구조와 슈퍼스타들

정보를 정리하기 위한 체계/구조 만드는 방법을 공부한다.

title태그.

---

HTML 태그의 제왕

anchor 의 첫글자 a 태그. anchor는 닻을 의미한다. 바로 링크다.

href는 HyperText Reference 의 약자이다.

링크를 통해서 하자.

---

웹사이트 완성

 링크를 통해 결합되어있는 것을 웹사이트라고한다.

---

원시웹

 만튼 웹페이지를 인터넷을 통해 누구나 가져갈 수 있게 하자.

 웹의 역사. 1990 부터 시작되었다.

인터넷 vs 웹

Internet{

    ftp{}

    web{}

    email{}

}

웹의 고향은 스위스이다. 스위스에는 유럽입자물리 연구소가 있다.

팀 버너스 리가 그곳에 가게된다. 세계 최초의 웹브라우저를 만들게된다. world wide web. 1990년 크리스마스 이브에 웹서버를 완성 (info.cern.ch)

최초 웹 페이지

이 원시웹을 토대로 웹 마스터가 되어보자.

---

인터넷을 여는 열쇠 : 서버와 클라이언트

2대의 컴퓨터가 있어야 최소의 인터넷이 동작한다.

웹브라우저 프로그램, 웹서버 프로그램 (http://info.cern.ch/ 주소 부여)

위 두개는 인터넷으로 연결되어있다.

http://info.cern.ch/index.html

클라이언트(웹브라우저, 웹클라이언트)가 서버에 index.html을 원한다는 요청을 보낸다. 그럼 서버의 웹서버 프로그램이 index.html을 찾아서 응답해준다.

 만약 게임을 만든다면, 사용자의 컴퓨터에 설치된 프로그램을 게임 클라이언트라고한다.

 게임회사의 서버 컴퓨터에 설치된 프로그램을 게임서버라고 하는 것이다.

 서버와 클라이언트는 인터넷을 이용하는 모든 정보 시스템에 적용되는 문법과 같다.

 "수학은 이해하는 것이 아니라 익숙해지는 것이다." - 폰 노이만

 "공부의 목적은 익숙해지는 것이다. 이해는 익숙해지기 위한 방법 중의 하나일 뿐이다." - 이고잉

 이제 웹서버로 관심을 돌리고 익숙해져보자.

 웹서버 만들기 2가지 방법.

1. 우리의 컴퓨터에 직접 웹서버를 설치 (어렵다.)
2. 웹서버를 제공해주는 업체(웹호스팅업체) 사용 (쉽지만 많은 것이 감추어져있다.)

우리는 2번->1번 의 순서로 익숙해지자.

---

웹호스팅 (github pages)

 우리가 직접 웹서버를 운영하기는 쉽지 않다. 그래서 대신해주는 웹호스팅업체가 제공하는 서비스를 이용한다.

 그 중 무료면서 유명한 github를 사용할 것이다. 홈페이지를 운영할 수 있는 웹페이지를 제공해준다.

repository는 저장소

(드랍박스, 구글클라우드 등 서비스들이 파일을 보관해준다. 그거와 비슷한 기능이다. 다만, 프로그래머 전용)

리드미 체크 꼭 하기.

버전관리.

깃허브는 업로드된 html파일로 웹서버 운영이 가능하다.

 위 주소를 사용해서 웹서버를 간단히 무료로 구현가능하다.

 php, python, ruby 등을 배우면 다이나믹웹호스팅을 필요로하게된다.

 미래에 웹호스팅을 사용할 때 추천 검색어로는 "free static web hosting"

 등등의 서비스를 제시한다.