WEB1- HTML & Internet

생활코딩 - WEBn

생활코딩 - WEBn 은 웹을 통해서 코딩을 배우는 수업이면서, 코딩으로 웹을 만드는 방법에 대한 수업입니다.

그 중 첫번째인 WEB1 - HTML & Internet 강의를 정리해봤습니다.

html부터 차근차근 다뤄보면서,
현재 이 글도, html로 정리해볼까 합니다.

그럼 시작합니당 !

이제부터,
코딩, 웹, 인터넷, 컴퓨터
라는 거대한 주제에 대한 탐험을 시작합니다.

여행에 앞서 상상력이 필요합니다!

지금부터 자신을 나의 문제를 코딩으로 해결하려는 엔지니어라고 생각해주세요.

어떤 문제가 우리 삶에 중요하고 심각할수록,
그 문제를 해결해주는 공부는 문제로부터 우리를 해방시켜줄 것입니다.

HTML이란

HTML은 두가지 면에서 중요합니다.

쉽습니다.
중요합니다.

하루에 100번 이상 하는 일이 있다면 그 일은 중요한 일일까요? 아닐까요?
중요한 일입니다.

쉽다고 사소하고 하찮다고 생각하지 마세요.
쉬운 것이 가장 중요하고 기본적인 것입니다.

또한 웹의 좋은 점은

퍼블릭 도메인(Public Domain) 이라는 점~

저작권이 없는 것들을 퍼블릭 도메인이라고 합니다.

웹을 만든 팀버너스리와 유럽입자물리연구소는 웹에 대한 일체의 저작권을 내려놓았습니다.

그 덕에 웹은 누구도 주인이 아니고, 모두가 주인입니다. :)

웹은 빨리 발전하진 못했지만, 오랫동안 발전했고,
앞으로도 꾸준히 발전할 것으로 보입니다.

실습환경 준비

코딩을 하기 위해서는 에디터(Editor)라는 프로그램이 필요합니다.

html editor를 검색해봅시당 !

이 수업에서는 Atom 이라는 에디터를 채택했습니다.

태그 추측해보기

<h1>W3C</h1>

h1은 어떤 기능일까요?

HTML h1 tag 를 검색해보아요.

검색결과 heading 은 제목이네요!

예제를 봅시당

See the Pen head tag by 김재희 (@mipmeypx) on CodePen.

우리는 정말 놀라운 시대에 살고 있어요 ;)

만약 우리가 20년 전에 h1 태그가 궁금했다면,

한 시간 동안 차를 타고 도서관에 가서,
20분 동안 책을 찾고,
10분 동안 h1이 무엇인지 찾았을 거에요,,

다시 돌아오는데 또 한시간이 걸리고
시간 뿐 아니라 돈도 들겠죠 :(

검색을 통해 빠르게 정보를 알아낼 수 있다면
이미 알고 있는 정보나 다름없지 않을까요~~

통계에 기반한 학습

HTML에 약 150개의 tag가 존재하는데,
우린 이 태그들을 다 외워야 할까요?

구글에서 웹페이지를 분석한 결과를 보면,
26개 정도의 태그를 사용하는 웹 사이트가 가장 많습니다.

150개를 전부 다 외우려고 할 필요가 없습니다.

중국어 공부를 하려고 할 때,

1만 개 이상의,
그 많은 한자를 다 외워야 할까요?
frequency of chinese words를 검색해봅시다 !

중국어 1만 단어 중,
1위는
的자입니다.

1000번째 단어가 2미터 키를 가진 사람이라면 적자는 세계에서 10번째로 높은 빌딩의 높이와 비슷합니다.
8000번째 단어가 2미터 키를 가진 사람이라면 적자는 지구의 지름보다 3000km 더 깁니다.

공부를 할 때, 통계를 기반으로 공부방향을 스스로 설정해보는건 어떨까요?

줄바꿈 태그

1. br

무엇인가를 설명하지 않는 태그들은 감싸야하는 컨텐츠가 없기 때문에 태그를 닫지 않는다는 규칙이 있습니다.

2. p, /p

단락(paragraph)을 표현하는 태그입니다.
하나의 단락을 그룹핑할 수 있도록 열고, 닫는 태그가 존재합니다.

단락을 사용할 때 p 태그가더 좋은 선택입니다.
단락에 단락 태그를 사용하는 것이 웹페이지를 정보로서 보다 가치있게 해 주기 때문입니다.

CSS를 이용하면 p태그의 한계를 극복할 수 있습니다.

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

img 태그

img 태그를 사용할 땐 ,
어떤 이미지를 불러올 지에 대한 정보가 필요합니다.

태그 이름만으론 정보가 부족하기 때문에,
속성(attribute)을 적용해야 합니다!

source의 줄임말인 src를 붙여 봅시당

<img src="https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7648.png">

속성의 값인 주소는 이미지의 주소입니다.

내 컴퓨터에 있는 이미지를 표시하고 싶다면
어떻게 해야할까요?

이미지 파일의 위치와 이름을 적어주시면 됩니다.

<img src="../assets/img/coding.jpg">

저작권에 구속받지 않고
자유롭게 사용할 수 있는 이미지를 구하고 싶다면 !
public domain image로 검색해보세용

unsplash.com도 그런 서비스 중의 하나입니다!

부모자식과 목록

1. ul(unordered list)

다른 목록과 구분할 수 있도록 경계가 필요할 때 사용합니다.

See the Pen ul tag by 김재희 (@mipmeypx) on CodePen.

li 태그는 ul 태그를 꼭 필요로 하고,
ul 태그 역시 li 태그가 없다면 존재 가치가 없습니다.

이 둘은 서로 아주 밀접한 관계입니다.

2. ol(ordered list)

See the Pen ol tag by 김재희 (@mipmeypx) on CodePen.

문서의 구조와 슈퍼스타들

<title>WEB1 - html</title>
<meta charset="utf-8">

이 코드들은 본문이 아니고, 본문을 설명합니다.

제목을 나타내주는 title 태그와
한글이 깨지지 않도록 웹페이지를 UTF-8 방식으로 열도록 하는 meta charset 태그입니다.

본문과 본문을 설명하는 코드를 분리하기 위해 본문은 body 태그로,
본문을 설명하는 태그는 head 태그를 사용합니다.

또 body 태그와 head 태그를 감싸는 하나의 태그, html 태그로 전체를 감싸줍니다.
또 이 웹페이지가 HTML로서 만들어졌다는 것을 표현하기 위해서 문서의 시작에 <!doctype html>를 추가합니다.

See the Pen webpage by 김재희 (@mipmeypx) on CodePen.

공부를 하면
눈이 밝아지고 시력이 좋아집니다.

예전에는 보이지 않았던 것이 보이고,
들리지 않았던 것들이 들립니다.

HTML 태그의 제왕

검색엔진들은
이 태그 덕분에 전세계의 웹을 항해할 수 있고,
더 좋은 검색결과를 만들 수 있었습니다.
이 태그가 없다면 검색엔진은 존재하지 않았을 것입니다.

이 태그는 무엇일까요?

HTML의 약자
HyperText Markup Language의
HyperText가 바로 이 태그를 의미합니다.

이 태그의 이름은 anchor의 첫글자 a입니다.

정보의 바다에 정박한다는 의미를 가진,

링크
입니다.

HTML 공식 사용설명서 페이지를 링크로 걸어보겠습니다.

a는 anchor의 약자이고,
href는 HyperText Reference의 약자입니다.

<a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 specification">Hypertext Markup Language (HTML)</a>

target="blank"는
링크를 클릭했을 때
새창에서 페이지가 열리게 하는 속성입니다.

title은
이 링크가 어떤 내용을 담고 있는지 툴팁으로 보여주는 기능입니다.

링크를 따라 여행하는 웹서핑을 즐기고 있다면,
그것이 진정한 공부이고
여러분은 공부를 좋아하고, 잘 하고 있는 거랍니당

원시웹

인터넷과 웹은 같을까요? 다를까요?

Internet VS WEB

인터넷이 도시라면
웹은 도시 위에 있는 건물 하나입니다.

인터넷이 도로라면
웹은 도로 위를 달리는 자동차 한 대 입니다.

웹이 인터넷의 부분집합입니다.

우리가 이 두 기술을 잘 구분하지 못하는 것은

웹이 너무나 성공했고,
사람들이 웹 때문에 인터넷을 쓰기 시작했기 때문입니다.

세계 최초의 웹페이지입니다.

1960년 엘리트 시스템으로 등장한 인터넷이
1990년 웹을 만나면서
본격적인 대중화의 길을 걷기 시작합니다.

서버와 클라이언트

인터넷이 동작하는 기본적인 원리를 알아보겠습니다.

인터넷이 동작하려면, 컴퓨터가 최소 몇 대 있어야 할까요?

2대입니다.
2대의 컴퓨터에 각각의 프로그램을 개발합니다.

하나는 웹브라우저,
하나는 웹서버라는 이름을 붙입니다.

웹서버가 설치된 컴퓨터에는
info.cern.ch라는 주소를 부여합니다.
또 어떤 디렉토리에 index.html이라는 파일을 저장합니다.

웹브라우저가 설치된 컴퓨터의 주소창에
http://info.cern.ch/index.html이라는 주소를 입력하고
엔터를 땅하고 쳐서 이동합니다!

웹브라우저가 설치된 컴퓨터는
인터넷을 통해서 info.cern.ch라는 주소의 컴퓨터에게
전기적인 신호를 보냅니다.
그 신호 안에는 'index.html' 파일의 코드를
원한다고 적혀 있습니다.

그럼 info.cern.ch에 설치된
웹서버라는 프로그램이
index.html이라는 파일을 찾습니다.
그리고 파일을 읽어 웹브라우저가 설치된 컴퓨터에 신호를 보냅니다.

그럼 웹브라우저가 설치된 컴퓨터에는 index.html 파일의 코드가 도착합니다.
웹브라우저는 그 코드를 읽어서 화면에 출력합니다.

웹브라우저가 깔린 컴퓨터는
정보를 요청합니다.

웹서버가 깔린 컴퓨터는
정보를 응답합니다.

따라서,
요청하는 컴퓨터를 클라이언트 컴퓨터
응답하는 컴퓨터를 서버 컴퓨터라고 부르기로 합니다.

서버와 클라이언트는
인터넷을 이용하는 모든 정보 시스템에 적용되는 문법과 같습니다.
이것을 이해한다면
경험이 쌓일수록 인터넷에 대한 이해가 높아질 것입니다.

지금까지 우리는
HTML이라는 언어로, 웹브라우저(웹 클라이언트) 사용법을 배웠습니다.

이제 웹서버를 배울 것입니다.

낯설고 무섭나요?
공부의 목적은 익숙해지는 것입니다.
자꾸 생각하고, 이야기하고, 사용하다 보면 익숙해지게 됩니다.

웹호스팅: github page

직접 웹서버를 운영하는 것은 쉽지 않기 때문에,
대행해 주는 회사들이 있습니다.
인터넷에 연결된 컴퓨터 하나 하나를 호스트라고 하고,
이런 컴퓨터를 빌려주는 사업을 호스팅이라고 합니다.

수많은 웹 호스팅 업체가 있고
그 중에서 github(http://github.com)의 pages 기능을 이용하는 방법이 있습니당
현재 이 페이지가 저의 깃헙 페이지에요 :)

웹서버 운영하기

내 컴퓨터에 웹서버를 설치해서
누구나 내 컴퓨터에 있는 웹페이지를 볼 수 있도록 해 보겠습니다.

우선 우리가 해야 할 일은
웹서버라는 프로그램을 설치해야 합니다.

여러 제품 중 우리가 사용할 소프트웨어는
아파치입니다.

맥에 웹서버 설치

Bitnami라는 프로그램을 설치해서 진행하겠습니다.
bitnami MAMP stack라고 검색해보세요.

프로그램을 다운 받을 수 있는 페이지를 찾을 수 있습니다.
(https://bitnami.com/stack/mamp)

Mac
Apache
MySQL
PHP의 약자입니다.

웹서버와 HTTP

아래의 주소들은 모두 내 컴퓨터에 있는 index.html 파일을 요청하는 주소입니다.
http://localhost:8080/index.html
http://127.0.0.1:8080/index.html

localhost와 같이 의미가 있는 이름을 도메인 네임(domain name),
127.0.0.1과 같이 번호로 되어 있는 것을 ip 주소(ip address)라고 부릅니다.

이렇게 해서 정보기술의 중추라고 할 수 있는
인터넷을 살펴봤습니다.

이번 장은 이렇게 마칩니다. 수고하셨어용 짝짝짝

Dev.zhi