내 웹 페이지를 찬찬히 살펴보다보면,

불만족들이 하나씩 나오게 된다.

맨 처음 눈이 가는 곳은 바로

제목부분이다.

가운데 정렬해서 웹 사이트의 가운데에 글자가 위치해 있으면 좋을 것 같다는 생각이 들 것이다. (아니어도 그렇다고 쳐야한다)

내가 적은 이 제목 텍스트,

< * hello! Welcome to my home :) * >

이 부분이 코드에서 어디 있는지를 먼저 알아야 한다. (본 강의에서는 제목 텍스트가 WEB 이라고 되어 있다)

웹 페이지에서 어떤 태그인지를 찾아야 한다는 말이다.

바로 <h1> 태그다. 그리고

' 우리는 이 웹 페이지에 있는 <h1> 태그 밑에 있는 텍스트를 더 크게 하고 싶다 '

라는 생각을 하게 될 것이다.
이때 이 웹 페이지에 있는 모든 <h1> 태그는 이렇게 하면 된다.

style 태그 안에서

중괄호({})가 끝나는 지점에서 엔터를 친 다음

h1 {} 를 입력해주고

중괄호{ 와 } 사이에 엔터를 쳐준다.

이제 여기서 우리가 해야 할 것은 무엇일까?

우리는 제목 텍스트의 글자를 크게 하고 싶은데, 어떻게 하면 크게 되는지는 모른다.

그리고 크게 키우는것을 모른다는 것을 우리는 알고 있고,

지식과 개념은 알고 있는 상태다.

그렇다는 것은

검색엔진을 조금만 활용하면 금방 찾을 수 있다는 얘기다.

검색엔진 구*을 켰다.

우리가 알고 싶은 것은 무엇인가?

1. CSS로 웹 페이지를 디자인 하는 것 = 검색어 css

2. 글씨의 = 검색어 text

3. 크기를 키우는것 = 검색어 size

4. 어떤 속성을 이용하면 되는가? = 검색어 property

이것을 모두 더한

css text size property

를 검색하면 된다.

검색했을 때 제일 먼저 위에 뜨는 사이트를 눌러보니ㅡ

이런 사이트가 나왔다.

찾은 결과를 보면,

1. text가 아니라 font 였음을 알 수 있고,
2. size 크기
3. % (퍼센트) 기호가 나와있음을 알게 되었다.

다시 코드로 돌아와서,

검색으로 찾았던 결과를 입력해보자.

font-size: 라고 적고

font-size:60px

여기서 px 는 컴퓨터에서 사용하는 단위이다. 픽셀이라고 부른다.

이제 이 크기가 어떤정도로 하면 적합한지

내 웹 페이지와 비교해보며 수정하면 된다.

^ 크기를 입력하지 않았을 때

^ 60px로 했을 때

60px 을 기준으로 잡고, 45px 정도로 맞춰보았다.

^ 45px 로 했을 때

글자(텍스트) 가운데 정렬 하기

이제 글의 크기(font-size:)는 우리가 할 줄 알게 되었다.

그 다음 해볼 것은 가운데 정렬 이다.

검색어는 css text center property 이라고 치면 된다.

(또는 정렬하다 (align) 라는 단어를 써도 된다)

검색결과에서는

text-align:center 라고 나왔다.

코드로 돌아가 이렇게 입력해주고 저장하니,

왼쪽으로 정렬되있던 제목 글자가

가운데 정렬로 바뀐 것을 볼 수 있다.

코드언어 자동 추천 기능

우리가,

정보 기술이 존재하지 않는 시절에는 우리 머리 속에 모든 지식을 다 가지고 있어야 했다.

뭐가 필요할지 모르기 때문이다.

인터넷, 컴퓨터, 웹, 검색엔진 등

고도로 발전한 정보 기술을 가지고 있기 때문에

우리 머리 속에 font, size, text, align 이라는 구체적인 Property를 가지고 있지 않는다고 하더라도

이것들을 알아내는 데에 1분 밖에 걸리지 않는다면 우리는 저것을 알고 있는 것이나 다름 없다, 라고 할 수 있다.

이러한 시대를 사는 우리가 이런 Property들을 머리 속에 암기 할 필요가 있을까?

눈썰미가 있다면,

코드에서 타이핑할 때

text-a 까지만 쳐도

우리가 쓰고 있는 에디터가 추천을 해준다.

즉, 내가 스펠링을 모르고 있어도 에디터가 알려준다는 말이다.

여기서 엔터를 치면 다음 뭐가 나오는가?

그 다음에 내가 할 수 있는 Property Value 를 또 자동으로 추천해준다. 추천에 나오는 단어들 중 내가 찾는 항목으로 엔터만 쳐도 스펠링을 일일이 다 치고 있지 않아도 된다.

정리하며

우리는 코딩을 할 때, 코딩은 인간이 혼자 하는 것이 아니라 끊임없이 기계의 도움이 받아가면서 코딩을 하고 있다.

이런 시대에서 모든 Property를 외우려고 한다면 우리의 뇌는 혹사 당하는 느낌을 받을 것이다.

그러므로 우리는 이 모든 것을 다 외울 필요는 없다는 것이고,

지금까지 우리가 배운 것만으로도

"우리는 이미 모든 Property를 사실상 아는 것과 다름이 없다."

라고 할 수 있겠다.

앞서 4강에서는 웹 페이지에 css를 삽입하는 방법에 대해 살펴보았다.

여러가지 예제를 통해 css의 문법들을 경험적으로 접해 보았는데,

이번 강의에서는 이론적으로 다시 한번 정리해보는 시간을 갖도록 한다.

🔻CSS 문법 정리 (요약)🔻

위와 같이 예제가 있다.

여기서 a 는 무슨 뜻인가?

이 웹 페이지에 있는 모든 a태그를 '선택한다'라는 점에서

" 선택자 "

" Selector "

라고 부른다.

그리고 가운데 color:red; 라고 되어 있는 부분은

바로 위의

선택자a가 지정하는 태그들에 대해서 어떤 효과를 줄 것인가

에 해당되는 것이다.

" 선언 "

" 효과 "

" Declaration "

라고 부른다.

위의 color:red; 에서 color 는

한국어로

속성

영어로는

Property (프로퍼티)

라고 부른다.

그리고 오른쪽의 red 는

Property 의 값 이라는 뜻에서

Property Value (프로퍼티 벨류)

라고 부른다.

5강 마치며

위의 이것들을 이해하기 전까지의 우리는

무엇을 모르는지 모르는 상태였다.

하지만 이제 이것들 이해하게 되면 이제 우리는

우리가 배우지 않은 선택자,

우리가 아직 모르는 효과를 만나더라도,

또는 효과가 필요하더라도,

무엇을 모르는지 아는 상태가 된 것이다.

무엇을 모르는지를 아는 상태가 되면

검색할 수 있고,

질문할 수 있고,

궁금해 하기 시작한다.

이것은 굉장히 혁명적인 사건이며 중요하다고 볼 수 있다.

style 태그와 속성

웹 페이지에 css를 포함시키기 위해서는

html과 css가 완전히 다른 언어이기 때문에

웹 브라우저로 하여금 어디서부터 어디까지가 css인지를 알 수 있게 해줘야 한다.

여기서는 <style> 이라는 태그가 그런 역할을 한다.

이것 외에는 한 가지 방법이 더 있는데 이런 태그를 통해서 하는 방법이 아닌, 바로 <속성> 을 이용하는 방법이다.

링크를 클릭했을 때 파란색으로 표시하는 법

--

내가 만든 웹 페이지에서, 이렇게만 봐서는

현재 이 사용자가 css라는 링크를 클릭하고 이곳에 있다.

라는 것을 알기는 어렵다.

그래서 "현재 사용자가 이곳에 머물고 있다" 라는 뜻에서

링크가 걸린 2번 텍스트를 파란색으로 표시하고자 한다.

'죵스 유튜브 바로가기' 를 감싸고 있는 <a> 태그에 직접 css코드를 넣는 방법이다.

커서를 <a> 태그 안에 위치한 다음

color 뒤에 : 을 같이 붙여주고

빨간색인 red를 먼저 입력했다.

하지만 이렇게 하면 웹 브라우저 입장에선 이것이 html인지 css 인지 알 수가 없다.

그래서 html 과 css 를 만든 사람들은 방금color:red 라고 적은 태그에 대해서 어떤 css 의 효과를 주고 싶으면

style=" " 이라는 속성을 사용하도록 약속하였다.

코드를 저장 후 내 웹 페이지 를 확인해보면

이렇게 2번 텍스트가 빨간색으로 바뀐 것을 확인할 수 있다.

다시 코드로 돌아와서,

방금 적은 style이라는 속성은, 아래 html과 css의 사용 설명서에서 보면

style이라는 속성을 썼을 때 그 속성의 값을 웹 브라우저는 css의 문법에 따라 해석하고 css의 문법에 따라 해석된 결과를 style 속성이 위치하고 있는 태그에 적용할 것이다.

라고 나와 있다.

여기서 위의 style=" " 표기는, 바로 HTML 의 속성이다. html 속성은 하나의 약속이 되어 있는데,

그 값으로 반드시 "CSS" 의 효과가 들어 온다

라고 약속 되어 있다.

그리고 위에 적었었던 style 이라는 태그는 반대로,

속성이 효과만 있어서는 저 효과를 누구에게 지정할지 를 설명할 수가 없기 때문에

위의 a, 중괄호 { } 라고 하는 이 코드들이 추가적으로 더 필요한 것이다.

그래서 우리가 방금 강조 표시를 한 이것은 (2번 링크의 텍스트)

이 웹 페이지에서 주고 싶은 효과를, 누구에게 줄 것인가를 선택한다- 라는 점에서

선택자 ( Selector ) = a { }

라고 부른다.

우리는 이 선택자( a { } )에게 지정될 효과를 위와 같이 적어두었었다. ( color:black; )

이것을 효과라고도 하고, 영어로는

선언 ( Declaration ) = color : 컬러이름 ;

이라고도 한다.

--

이 declaration 은 우리가 style 태그를 직접 사용한 경우에

위 style태그가 위치하고 있는 태그에게 효과를 줄 것이기 때문에 *선택자 *를 사용할 필요가 없다, 라는 것을 기억하면 좋다.

* 중간 내용 정리 *

웹 페이지 안에 CSS를 삽입하는 2가지 방법

1. style 태그를 사용한다.

2. style 속성을 사용한다.

실습하기.

상황을 좀 더 복잡하게 꼬아서 생각해보자.

예시1) 밑줄 없애기

내 웹 페이지를 보다보니, 저 밑줄이 보기가 싫어졌다. 그래서 밑줄을 없애고 싶다.

이 ;(세미콜론) 기호 바로 뒤에서 엔터를 친 다음

밑줄을 만들고, 또는 없애는 속성은 텍스트(text) 라고 적고 기호 - 를 입력 후

이 텍스트(text)에 꾸밈이나 장식을 뜻하는

데코레이션(decoration) 이

없다(none) 라고 입력해준다. (뒤에 기호 ;(세미콜론) 는 자동으로 붙는다)

그리고 저장 하고 웹 페이지를 켜보면

이 웹 페이지에 있는 모든 a 태그에 대해서 장식이, 즉 밑줄이 없어지게 된다.

코드언어를 구분할때 사용하는

세미콜론 기호 " ; "

여기서 우리는 자주 나오는 이 기호,

; -> 세미콜론 기호

가 슬슬 궁금해질 것이다.

만일 코드창에 입력할 때 이 세미콜론 기호 ; 를 적지 않는다면

코드를 한 줄에 쓰고 싶을때, 구분이 되는가?

대답은 아니오 이다.

하나의 디스크립션이 시작되고 끝나는 것을 구분하기 위해서 구분자로 세미콜론 ; 이라는 것이 있는 것이기 때문에

효과를 지정한 다음에는 끝에 항상 세미콜론 ; 을 입력해 주어야한다.

세미콜론 기호 ; 를 입력해주면 코드 언어가 한 줄에 있어도 잘 동작하게 된다.

내가 원하는 글에만 밑줄 긋기

다시 돌아와서,

내 웹 페이지에서 빨간색으로 표시한 2번 링크의 글에만 밑줄을 긋고 싶다면 어떻게 해야 할까?

2번 글의 코드가 적혀져 있는

요 부분,

(각자 본인의 코드에서 밑줄을 긋고싶은 글의 코드에서 수정하면 된다)

red 라고 적은 단어 바로 뒤에 세미콜론 기호 ; 를 입력해서 코드끼리의 구분을 지어준 뒤

text -

decoration :

밑줄을 뜻하는 단어, underline 이라고 적어주면 된다.

;(코드구분기호)text-decoration:underline

저장 한 다음 웹 페이지에서 확인해 보면?

내가 원하는** 2번 빨간색 링크글에만 밑줄**이 그어졌다.

이번 강의 마무리 및 정리

이번 강의에서는 상당히 중요한 것을 알게됬는데,

웹 페이지에 css를 삽입하는 방법으로

1. style 태그
2. style 의 속성 을 사용하기

효과 라는 것이 있다는 것,

이 효과를 하나의 선택자에서 여러 개의 효과를 지정할 수 있는데

이 경우에는 세미콜론 기호 ; 로 구분 할 수 있다-

라는 것을 배웠다.

앞서 2강에서는 HTML의 문법에 태그를 추가하는 < font > 라는 태그에 대해서 배웠다.

이번 강에서는 훨씬 더 어렵지만 근본적인 해결책인, CSS를 해보도록 하자.

2강을 실습할때 나는 홈페이지의 메인에 위치한 환영하는 문구와, 아래 안녕! 이라고 적은 끝 글자에만 < font > 태그를 이용하여 빨간색 컬러로 변경해주었다.

이번엔 가운데 링크가 걸린 내용에 빨간색 컬러로 변경을 준 뒤 3강 실습을 진행하려 한다.

*Ctrl *을 누른 채 마우스 왼쪽 버튼으로 앞부분에 커서를 하나씩 찍어주면 동시에 입력이 된다.

앞부분에 < font color="red" > 라고 입력하고

맨 뒷부분에 (li태그 앞에)

< / font > 닫히는 태그도 입력해준 뒤 저장.

그러고 내 웹사이트를 켰는데.. 빨간색 컬러로 바껴져 있지 않았다. 앗..

강의를 다시 보니

< a href="" > 태그 다음에 < font > 태그를 입력해야 되는 거였다.

닫히는 태그도 < /a > 태그 앞에 < /font > 태그가 들어가는 거였다.

재빨리 수정해주었다.

수정하고자 하는 4개의 글에 모두 재입력 완료 ..

저장 후 웹페이지를 다시 부랴부랴 켜보니 링크 걸어둔 내용 부분의 4개 글이 모두 빨간색으로 잘 변경된걸 확인할 수 있었다.

다시 수업 내용으로 이어가서,

방금 내가 빨간색으로 바꿨던 요 내용 부분만 드래그해서 복사,

바로 아래 붙여넣기 해준다.

이 상태에서 아래 복사한 내용을, 컴퓨터가 무시하게끔 해보려 한다.

가운데 커서를 두고

< !-- 이라고 입력하고

아래쪽에 --> 이라고 입력해주면

복사했던 내용부분만 글자가 전부 회색깔로 변하게 된다.

< !-- 와 -->

라고 입력한 이 기호는,

내가 웹 브라우저한테

< !-- 이것과 --> 이 기호

사이에 있는 콘텐츠는 없는 것으로 해라 라고, 명령어를 입력한 것이다.

CSS를 사용해서 글자 색깔 변경하기

자, 웹 페이지의 이 상태에서

마지막 문구를 제외하고, 다시 검정색 글자로 다시 변경해주자.

아까는 < font > 태그를 사용해서 빨간색 컬러를 명령어로 입력해주었다면,

이번엔 CSS 를 사용하여 아까와 똑같은 방식으로, 똑같은 모습으로 디자인해주려 한다.

웹 브라우저가 처음 나왔을 때,

웹 브라우저는 어떤 컴퓨터 언어만을 해석해서 처리하는 프로그램 이었을까?

바로 HTML 이다.

그래서 웹 브라우저는 기본적으로 이 코드를 HTML 이라고 생각한다.

그리고 아직 CSS 라는 언어를 배우지 않았지만 CSS는 HTML 과는 완전히 다른 컴퓨터 언어이다.

그래서, 웹 브라우저에게

나는 지금부터 CSS언어를 쓸 테니 너는 이 코드를 HTML이 아니라 CSS 문법에 따라 해석해야해!

라고 HTML의 문법으로 쓰고자 한다.

저기 있는 < / head > 태그 바로 위에

스타일 태그라는 것을 입력해주었다.

<style>
  </style>

이 태그는 HTML의 문법이면서, 동시에 이 <style> 태그 안쪽에 있는 내용이 CSS 임을 컴퓨터에게 알려준 셈이다.

<style> 태그 안에 이제 CSS를 작성해볼건데,

아까 아래 회색 컬러로 숨겨진 내용, 이 코드가 하고자 하는 진짜 내용은

이 웹 페이지에 있는 모든 < a > 태그의 폰트 컬러를 붉은색으로 해라.

라는 뜻이었다.

이것을 CSS 라는 새로운 언어 문법으로 작성하자면

바로 a 단 한글자이다.

코드 내용의 글자 색상이 전부 바뀐것을 확인할 수 있다.

a = 웹 브라우저야, 이 웹 페이지에 있는 모든 < a > 태그에 대해서...

라는 뜻을 저 한 글자로 설명할 수 있는 것이다.

그런 다음 중괄호 기호 { 를 입력하고

CSS에서의 폰트 컬러는 그냥 color 이다.

color: 이라고 입력 한 뒤

주고자 하는 컬러는 빨간색이므로

red 라고 적어주고

뒤에 세미콜론 기호인 ; 표시를 찍어주면 된다.

코드내용을 저장한 뒤 웹 페이지를 새로고침 해보면

내가 <a> 태그를 걸었던 부분만 빨간색 컬러로 바뀌었다.

이전의 <font> 태그와 같은 결과를 도출시킨 것이다.

예전의 <font> 는 HTML의 태그였고, 이번엔 CSS 의 새로운 언어의 문법인 <a> 를 사용했다.

수 천, 수 억개의 태그.. 한번에 수정하는 방법

이전의 <font> 태그의 경우에는 red 라고 하는 저 값을 black 으로 바꾸려고 한다면, 그리고 <font> 태그가 1억개가 있다면..

이러한 경우는 정말 힘들게 1억개를 하나하나 다 바꿔줘야 한다.

하지만 CSS의 경우

만약 아까처럼 <a> 태그의 컬러를 검정색으로 바꾸고자 할 때

red 라고 입력했던 이 코드를

검정색으로 바꾸는 순간

** <a>** 태그가 1억개든, 10억개든 한번만에 다 바뀔 수 있다는 점이 CSS 이다.

코딩을 잘하는 방법? - <중복 제거하기>

우리는 초심자 수업이기 때문에 코딩을 '잘하는' 방법 중 하나는,

중복을 제거하는 것이다.

오른쪽 강의 캡쳐내용을 보자.

<font> 라고 하는 저 코드가 몇개나 중복되어 있는가?

(지금은) 무려 4개나 중복되어져 있다.

그렇다면,

중복된 태그를 제거하게 되면 어떠한 장점이 있을까?

<font> 태그가 1억개나 중복되어 있다고 가정한다면, 웹 페이지의 사이즈는 훨씬 더 클 것이다.

그리고 이 사이즈는 우리가 하루에 한두 번 정도 접속하는 사이트라면 큰 차이가 없지만,

Google, Facebook, Naver 와 같은 거대 기업에서 이러한 중복된 코드가 있냐, 없냐에 따라서 하루에 1억씩이나 차이 날 수가 있다.

규모가 커지면 이러한 부분도 굉장히 중요한 문제가 될 수 있다는 거다.

위의 <font> 태그가 똑같은 코드라고 해서 일괄적으로 확 바꿔버리게 되면 이 태그를 작성했던 사람의 의도와는 다르게 바꾸면 안되는 것 조차 바뀔 수 있는 가능성이 생긴다.

그렇게 되면 수정하는 것이 굉장히 힘들어 질 것이다.

하지만

어떤 이유에서든 이런 식으로 누군가 코드를 써놨다면, 아마 여기 있는 black을 red로 바꾸는 것은 같은 성격의 것을 바꾸는 것이라고 상당히 높은 확률로 확신할 수 있을 것이다.

다시 말해 이 웹 페이지를 유지하고 보수하는, 유지보수를 훨씬 더 편리하게 할 수 있게 된다는 거다.

가독성 또한 훨씬 더 높아진다는 것을 볼 수 있겠다.

마치며

아래 드래그 한 코드를 잘 살펴보면, (HTML 코드) ** 디자인과 관련된 코드는 단 한 줄도 들어 있지 않은 것을 알 수 있다.**

대신, 디자인과 관련된 코드는 (CSS 코드) 위의 <style> 이라고 하는 태그 안에 갇혀 있게 된다.

그럼 웹 페이지를 해석하는 여러가지 기계들은

디자인과 관련된 것이 필요 없다면 이 부분은 무시하고(<style>태그쪽)

정보만을 가지고 있는 이 코드를(아래 드래그 해놓은 부분) 분석해서 여러 가지 작업을 각자의 의도에 맞게 할 수 있을 것이다.

CSS 언어가 도입된 중요한 이유 / 마무리

1. HTML은 너무도 중요하다.

** html이 정보에 전념하기 위해서 ** html로부터 디자인에 대한 기능을 뺏어온 것이 CSS이다.

2. CSS를 통해 웹페이지를 디자인하는 것이 HTML을 통해서 디자인하는 것 보다 훨씬 더 효율적이기 때문이다.

웹을 만든 사람들은 웹을 아름답게 만들 수 있는 방법이 뭐가 있는지 고민하기 시작한다.

HTML 이라는 이미 있는 언어의 디자인과 관련된 새로운 태그를 추가하는 것과

디자인에 최적화된 완전히 새로운 언어를 만드는 것 중

어떤 것이 더 쉬울까?

HTML의 디자인에 대한 새로운 태그를 추가하는 것이 더 쉬울 것이다.

웹 브라우저를 만드는 사람들은 이 쉬운 길을 선택하게 된다.

CSS 라는 새로운 언어가 탄생했는데

이 CSS 를 살펴보기 전에, 쉬웠으나 한계가 있었던 방법에 대해 먼저 살펴보겠다.

지금은 사용되지 않는 디자인을 위한 태그가 있다. (지금은 안씀)

바로 font 라는 태그이다. (기억하지 않아도 됨)

글자 색깔을 바꾸기 전의 현재 내 웹 페이지는 이렇게 되어있다.

위 화면은 WEB1-HTML 강의를 통해 내가 입력했던 코딩인데, 여기서 font 태그를 이용해 내용 중 글자의 색깔을 바꿔볼 것이다.

마우스로 두개의 문구를 드래그 해줬다.

**" hello! welcome to my home :) * **

이라고 되어있는 문장 하나와, 아래쪽의

*-안녕!- *

이라고 입력한 글 이렇게 2개이다.

이 글자들의 색상을 빨간색 으로 바꾸고자 한다.

태그 이름은 font !

태그를 입력 할 글자 앞에 커서를 찍고

< font color = "red" > 라고 입력해준다.

아래쪽 안녕! 문구 앞에 역시 똑같이 입력해주었다.

빨간색으로 표시 할 문구 앞에만 < font color ="" > 을 입력해주면 된다.

마지막 뒷부분에는 닫히는 태그를 꼭 입력해줘야 한다.

열리는 태그 < font color = 색상 "" > 닫히는 태그 < / font >

저장해준 뒤 웹 페이지를 새로고침하여 결과를 보면?

위와 같이 내가 빨간색으로 표시하고자 하는 글자만 태그가 잘 적용되었다.

이전에 배웠던 < a href ="" > 태그나 < h1 > 와 같은 태그는 방금 배운 < font > 태그와는 조금 다르다.

< a > 태그는, 내가 적은 어떤 글의 정보가 '링크' 라는 것을 설명하는 정보 태그이다.

< h1 > 이라는 태그는, 내가 적은 어떤 글이 이 웹 페이지에서 '제목' 이라고 하는 중요한 정보 태그이다.

이러한 정보를 해석해서 우리가 알고 있는 검색 엔진과 같은 시스템들이 우리가 필요한 정보를 찾아주게 된다.

< font > 태그는 글자에 대해서 어떠한 정보도 가지고 있지 않다. 다만 빨간색 이라고 표현해야 된다는 '디자인' 을 나타낼 뿐이다.

디자인은 매우 중요하지만 디자인 자체가 정보라고 볼 순 없기 때문이다.

마무리

지금 우리가 짠 코드에는 또 다른 문제가 있다.

위의 내가 작성한 코드에는 현재 ４개의 ＜ ａ ＞ 태그가 있다.

우리가 공부를 하다보면, 이렇게 코딩을 하다 보면,

내가 지금 처해있는 상황을 극단적인 상황으로 몰고 갈 필요가 있을 것이다. 예를 들어 저 < a > 태그가, 4개가 아닌 1억개의 < a > 태그가 있다고 가정해보자.

이런 상황에서 상사가, 또는 클라이언트가 와서 나에게 아침, 점심, 저녁으로 글자의 색깔을 바꾸라고 요청했다.

하루는 빨간색으로 하라고 했다가, 다음날에는 검정색으로 변경해달라 하고, 그 다음날은 들어본 적도 없는 파우더 블루 컬러로 바꿔달라고 매일 같이 요청한다면

우리는.. 나는 굉장히 힘들고, 난처하고, 불행 할 것이다.

하지만 이 불행감이 바로 우리가 공부를 지속하는데 있어서 굉장히 중요한 에너지원이라고 생각한다.

이러한 상황으로 인해 충분히 절망한다면,

그리고 이 상황을 극복하게 해주는 놀라운 기술인 CSS 를 배웠을 때.

비로소 해방된 느낌을 경험할 수 있을 것이다.

그만큼 CSS 가 귀하게 느껴질 것이고 말이다.

이 강의들은 ＷＥＢ２ － ＣＳＳ 수업이며 첫 강 수업 소개 포스팅입니다.

이 수업은 WEB1 의 HTML과 인터넷 수업에 의존하고 있는 수업입니다.

웹이 처음 세상에 등장했을 때 단 하나의 기술이 있었다. 바로 HTML 이다.

HTML을 이용하면 전자 문서를 만들 수 있었다. 컴퓨터를 통해서 정보를 표현할 수 있게 된 것이다.

또 이 정보들은 인터넷을 통해서 전 세계 누구나 볼 수 있게 되었다. 당시에는 혁명적인 사건이었다. 사람들은 웹에 열광했다.

처음엔 HTML만으로도 만족했으나 점차 불평과 불만족들이 많이 생겨나기 시작했다.

이를 채워주게 된 것들 중에 하나가 CSS 가 되겠다.

CSS를 배우면서 스스로 탐구하는 에너지를 가져보도록 하자.

이번 강의는 아파치(Apache) 웹서버를 윈도우 컴퓨터에 설치하는 방법이다.

아파치를 윈도우에 설치하는 것은 까다로운 일이다. 그래서 아파치를 쉽게 윈도우에 설치할 수 있도록 도와주는 프로그램이 있는데,

우선 검색엔진에

" how to easy install apache on window "

라고 검색한다.

아파치 웹서버의 공식 홈페이지를 찾을 수 있었는데, 내용에는 '이렇게 아파치를 설치하면 된다' 라고 나와있는걸 볼 수 있다.

여러 프로그램들로 설치할 수 있다고 나와있는데 우리는 그 중 비트나미(Bitnami) WAMP Stack 이라고 하는 프로그램을 사용해보도록 한다.

검색엔진에

" bitnami wamp stack "

이라고 검색해서

비트나미를 설치할 수 있는 웹 페이지를 찾을 수 있는데

여기서 WAMP 의

W는 Windows(윈도우) 의 약자이고,

A는 Apache(아파치) 의 약자이며,

M은 MySQL이라는 데이터 베이스이고 (아파치와 함께 자주 사용되는 프로그램이다)

P는 PHP라는 미들웨어 프로그램 이름의 약자다. (이것 역시 아파치와 자주 쓰는 프로그램이다)

우리는 이 중에서 딱 A (Apache) 를 위해서 비트나미(Bitnami) 를 설치하는 중이다.

오른쪽에 보면 로컬 인스톨이라는 박스가 있고,

여러가지 버전들이 나와있는데, 그 중 맨 위 최신버전인 7.1.10-1 링크를 눌러준다.

클릭하면 다운로드 받을거냐는 박스가 뜨는데, 위 사이트들을 공유해줄 수 있냐는 물음이 나온다.

아래 NO Thanks 를 클릭한다.

세이브를 눌러 저장하기,

다운로드가 진행중인 화면이다.

다운로드가 끝나면 다음과 같은 파일이 나오는데 이걸 더블클릭해서 설치하기 시작,

Yes 클릭

Next 클릭

또 Next 클릭

이 화면에서는 Bitnami 를 어디에 설치 할건지를 묻는 박스가 나온다.

이 경로를 미리 한번 눈에 익혀두는게 좋다. 내 PC - 비트나미(Bitnami) 경로를 통해 들어가면 저기에 설치파일이 있구나 정도!

그런 다음 Next 클릭.

이건 MySQL 이라는 데이터베이스를 깔 때, 이 데이터베이스의 비밀번호를 지정하라는 것인데

이 부분은 web 강의에서는 사용되지 않지만 우리가 다른 용도, 다른 코딩 강의에서 사용하게 될 수도 있다.

기억하기 쉬운 아무 비밀번호나 입력해준다. 비밀번호는 꼭 기억해주는게 좋다. 어디 메모를 해놓아도 좋다.

같은 비밀번호를 두 번 입력해준 다음,

Next 버튼 클릭

요 화면에 나오는 체크박스는

체크를 해지해준 다음

Next 버튼으로 넘어간다.

역시 Next 클릭하면

드디어 설치가 시작된다.

설치 기다리는중.

설치가 끝나면 다음과 같은 박스가 뜬다. (안뜰수도 있다)

방화벽과 관련된 부분인데, '웹서버의 사용을 허용할 것인지' 에 대한 보안 관련 물음 선택 체크이다.

아래 엑세스 허용(Allow access) 클릭

다음 Launch Bitnami WAMP Stack 에 체크가 되어있는지 확인한 후 (안되있으면 체크해야함)

완료(Finish) 버튼을 눌러 설치를 끝낸다.

Yes 버튼 클릭

설치가 모두 끝나면 위 프로그램 화면이 뜰 것이다.

잘 설치가 됬는지 확인하기 위해서 맨 위 " Go to Application " 버튼을 클릭한다.

ok 눌러서 열어주기

조금 기다리면 위와 같은 화면이 나온다.

이 화면이 잘 나온다면 설치가 성공적으로 된 것을 확인할 수 있다.

비트나미 매니저 프로그램이 꺼져있을 때, 실행시키기

우리가 설치한 이 프로그램은

비트나미 매니저(Bitnami Manager) 라고 하는 프로그램인데,

비트나미를 이용해서 설치한 여러 프로그램들을 관리하는데 도움을 주는 프로그램이라고 볼 수 있다.

만약 이 프로그램이 꺼져있을때, 다시 프로그램을 실행하기 위해서는

1. 윈도우 탐색기에서 비트나미(Bitnami)를 설치한 디렉토리 찾기.
2. C: -> Bitnami

3. C: -> Bitnami -> wampstack-7.1.10-1

4. C: -> Bitnami -> wampstack-7.1.10-1 -> manager-windows

여기서 manager-windows 프로그램을 더블클릭해준다.

Yes 클릭하면

프로그램을 다시 실행 시킬 수 있게 된다.

비트나미 매니저 프로그램을 통한 웹 서버를 키고, 끄는 법

그리고 두번째 칸의 Manager Servers 를 클릭해서

요 화면에서, 우리는 웹 서버를 켜고 끄고를 할 수 있는데

" Apache Web Server " 문구의 앞이 초록색으로 뜨는 것은

Apache 가 켜져 있다는 뜻이고

오른쪽의 Stop 버튼을 누르면

" Apache Web Server " 문구 앞에 빨간색 불이 들어오면서

웹 페이지를

새로고침 했을 때

'파일을 찾을 수 없다' 는 문구와 함께

페이지를 볼 수 없게 된다.

웹서버가 없기 때문에 이 페이지를 볼 수 없게 된것이다.

다시 비트나미 프로그램으로 돌아와서 Start 버튼을 클릭하면

빨간불 -> 초록불로 바뀌고

새로고침을 했을 때

웹 페이지가 출력되어 나오는 것을 확인할 수 있다.

마무리

이번 강에서는

비트나미(Bitnami) 라는 프로그램을 이용해서 쉽게 아파치(Apache) 를 설치하는 방법에 대해 배워 보았다.

18-1 포스팅은 생화코딩 강의 내용 그대로를 정리해 놓았습니다.

https://github.com/ 깃허브 사이트에 로그인한다.

이미 여러 차례 만들어 보고 또 만들어보고 수정해본 내역들이 있다.. 처음 강의 내용 보고 시도했던 것들이 제대로 호스팅 되지 못하고 실패한 흔적들이다.

될 때까지 또 새로 계속해서 실습해본다.

새 리포지토리 만들기를 클릭해준다.

저장소 이름과 설정들이 나온다.

나는 gogo-ganji 라는 이름을 입력했다. 아무 뜻 없다.

공개할지 비공개할지 여부에는 퍼블릭(공개)에 체크한다.

아래 체크항목이 강의 내용과 조금 다르게 나와있다。

한국어 번역해보니 이렇게 나온다.

강의 내용대로 진행할 것이기 때문에 그냥 넘어간다.

저장소 생성 클릭

gogo-ganji 저장소 페이지가 생겼다.

업로딩 파일 링크를 클릭한다.

강의영상 내용과 같은 화면이다.

업로드 할 소스코드 파일들을 전부 드래그해서 옮겨주었다.

파일들이 업로드 중일때

아래 커밋에 메모를 남겨준 다음 초록색 Commit changes 버튼 클릭

나는 실습-1 이라고 메모했다.

로딩중

파일들이 성공적으로 업로드 되었다.

일단 톱니바퀴 아이콘의 Settings(설정) 버튼을 클릭한다.

설정 페이지의 왼쪽 카테코리에서

Pages 클릭

페이지 화면이 나오면

None - main 을 눌러준다.

요 상태에서

같은 깃허브 사이트를 하나 더 켜준다.

페이지가 켜진 깃허브탭과、 새로 킨 깃허브탭。

내 프로필을 누르고、 Your repositories 클릭

내가 호스팅 중인 gogo-ganji 가 목록에 뜰 것이다. 클릭.

아까 소스코드 파일을 올린 그 화면이 나올거다.

여기서

Actions 를 클릭

아무것도 없는 액션 페이지다.

다시 Pages 화면이 열린 깃허브탭을 열고

맨 오른쪽의 Save 버튼을 클릭

웹 호스팅이 활성화 진행을 시작했다.

다시 Actions 페이지가 열린 깃허브탭으로 넘어가서

페이지를 새로고침 하거나, 메뉴의 Actions 버튼을 다시 누르면 페이지가 새로고침된다.

화면이 바뀌면서 pages build and deployment 이라는 문구가 보인다. 클릭.

초록색은 활성화 진행이 완료된 것이고, 노란색이나 하얀색으로 뱅글뱅글 돌아가는 모습은 진행 중인 것이다.

나는 벌써 초록색 체크가 뜬 것으로 보아 완료되었음을 확인할 수 있었다.

이 박스들 중에 ｄｅｐｌｏｙ 박스에 나온

주소（내 도메인주소）를 클릭해보면

새 탭이 열리면서 내가 만든 웹 페이지, 웹사이트 화면이 열리는 걸 볼 수 있다.

Pages 가 열려있던 깃허브탭에서 Pages 를 다시 눌러보면, 화면이 새로고침 되면서

내 도메인 주소가 위에 파란 링크가 걸리며 나타난다. 저 도메인 주소 링크를 클릭하면

똑같이 내 사이트가 열리는 것을 확인할 수 있다.

깃허브 404에러 뜰 때 해결하기, 깃허브 404 에러 방법 찾기

처음 파일을 업로드하여 호스팅을 시도했을 때, 웹 페이지가 열리지 않고 404 에러가 떴었다. 그때부터 온갖 방법들을 찾아보고 검색하고.... 헤매이는 과정이 있었는데

내가 실수했던 것들을 여기 적어보겠다.

첫 번째로

모든 파일 이름 뒤에 index.html 이라고 적어놨던 것이다.!!!ㅜㅜ

지금 위 캡쳐사진에 보이는 파일들은 파일이름 그대로 잘 적혀져 있지만

수정하기 전에는 전부

index.html vlog.html yutube.html (이와중에 youtube 라고 적을것이 yutube라고 오입력되어있다..ㅋ)

이런식으로 파일명 뒤에 html 을 또 중복으로 적어놨던 것이다ㅠ

이유인 즉슨,

Atom(아톰) 코드 편집프로그램에서는 분명 이런식으로 뒤에 html 이 붙어져 있었는데

폴더를 열어서 파일을 확인해보니 뒤에 html이 없길래 엥? 하고 바보같이 또 파일 이름 수정하기를 통해 일일이 html을 적어준 나.... (안돼..///..)

두 번째는

이렇게 저장소 이름을 입력할 때

myweb,1 이라고 입력하니 아래 노란색 박스로 myweb-1 이라고 적으라는 박스가 뜬다.

기호 - 를 포함하여 적는건 괜찮은데 다른 이상한걸 입력해도 안되는 듯 하다. (내생각)

세 번째는

이렇게 업로드까지 다 하고나서

이 Pages 화면에서의 main 으로 설정해줬는지, Save 버튼을 클릭한 뒤에

액션 페이지로 가서 새로고침 한 뒤에 활성화가 잘 진행되고 있는지, 완료되었는지,

이 도메인 주소가 안열린다면

https://깃허브로그인아이디.github.io/저장소이름/ -> https://깃허브로그인아이디.github.io/저장소이름/index.html <-이렇게 index.html을 입력해준 뒤에도

안열리는지 확인해봐야한다.

나는 처음에 index.html을 붙였더니 열렸었는데

신나서 여러번 열어재끼고 하다가,

내가 또 뭘 수정하고 건드리다보니.... 또 안열리는 것이다 ㅠㅠ

네 번째는

생활코딩 강의 중에 비트나미(Bitnami)라는, 가상 어플라이언스 및 웹 애플리케이션, 개발 스택용 소프트웨어 패키지 및 설치 라이브러리가 있다.

WAMP(Windows/Apache/MySQL/PHP) 윈도우 환경에서 아파치(Server), MySQL(DB), PHP(서버사이드)와 같은 웹 개발환경을 통합적으로 구축해주는 프로그램 MAMP(Mac/Apache/MySQL/PHP) 맥 환경에서 아파치(Server), MySQL(DB), PHP(서버사이드)와 같은 웹 개발환경을 통합적으로 구축해주는 프로그램 -https://computer-science-student.tistory.com/390 출처_컴공생의 다이어리 컴공 K 님의 포스팅에서-

여튼 비트나미 라는 프로그램을 설치해서 내 웹 사이트가 열리게 하는건데, <생활코딩 19.1.1. 웹서버 설치편 참고_나는 윈도우라서 윈도우 편을 보았다>

https://bitnami.com/stack/wamp/installer (WAMP 설치) -> 윈도우 https://bitnami.com/stack/mamp (MAMP 설치) -> 맥

여기서 나는 윈도우 이용자이기 때문에

https://bitnami.com/stack/wamp/installer (WAMP 설치) 로 들어가면

비트나미 메인 홈페이지가 나올 것이다.

https://aboneu.tistory.com/243

설치과정은。。。。。위 링크의 설명을 따라 설치하길 바란다.

또는

윈도우 용 비트나미 설치 영상 https://youtu.be/Bvzzee7-kuQ?list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb

맥 용 비트나미 설치영상 https://youtu.be/roETNgQf3x8?list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb

생활코딩 이고잉 선생님의 강의를 따라 설치해도 좋다.

--

--

설치가 다 되었다면

내 PC > 로컬 디스크(C:) > Bitnami(비트나미) 폴더 클릭

나는 wampatack-8.1 .9-0 이라고 나오는데 여튼 비트나미 안에 있는 다음 폴더인 이걸 클릭

apache2 폴더 클릭 (아파치)

htdocs 폴더 클릭

들어가면 원래 이 폴더 안에 있던 파일들이 있을텐데, 그걸 다 지우고 내 소스코드 파일들을 복사(Ctrl+c)해서 이 파일 안에 붙여넣기(Ctrl+v) 해준다. (캡쳐사진은 내 소스코드 파일들을 htdocs 폴더 안에 붙여넣기 한 모습)

끝으로

그런 다음 깃허브 사이트에서 다시 시도해보니

내가 만든 페이지가 열리는 것을 볼 수 있었다!

GitHub에서 웹호스팅 중 404 에러가 뜨면서 내 페이지가 나오지 않을때...

내가 만든 사이트가 계속되는 404 에러 페이지로 인내심을 박살내려 할때..!!!

수많은 시도끝에 비트나미에 파일을 붙여넣기 하고 난 후 다시 새로 도메인 저장소를 만들고 수정된 파일을 업로드 하고 호스팅하다보니 되었다.

(참고로 소스코드를 수정해서 업로드 하는 중이라면 수정된 그 소스코드 파일을 복사해서 비트나미의 htdocs 폴더 안에 또 붙여넣기 해서 바꿔줘야 한다.,)

직접 웹 서버를 운영하려면 컴퓨터가 있어야 하고 컴퓨터가 냉장고처럼 항상 켜져 있어야 하며 인터넷이 끊기지 않아야 한다.

웹 서버라는 프로그램을 배워서 설치하고, 잘 운영할 줄 알아야 한다.

인터넷을 통해서 우리의 정보를 외부로 전송할 수 있게 설정도 할 줄 알아야 한다.

이런 것들은 하나하나가 다 쉬운일이 아니다.

그래서 이런 일들을 대행해 주는 회사가 있다.

인터넷에 연결된 컴퓨터 하나하나를 우리는 호스트 라고 한다.

이런 컴퓨터를 빌려주는 사업은 호스팅 이라고 한다.

요즘은 클라우드 라고도 불린다.

인터넷에 연결된 컴퓨터를 빌려주는 비즈니스 라는 점에서는 같은 개념이다.

호스팅 중에서 컴퓨터의 웹 서버와 같이

웹을 동작하기 위해서 필요한 소프트웨어까지 설치에서 빌려주는 비즈니스를

웹 호스팅이라고 부른다.

GitHub.com (깃허브닷컴, 웹 호스팅 대행 업체) 을 이용한 웹 호스팅

수 많은 웹 호스팅 업체가 있다. 지금부터 우리는 그 중에서 무료이고, 유명한 서비스를 이용할 것이다.

바로 깃허브닷컴 이다. 위 웹사이트는 깃허브닷컴의 메인 화면이다.

잠깐!

여기서부터는,

이고잉 선생님의 생활코딩 강의영상 원본 수업내용이 그대로 진행되는 것이고, 이 다음 포스팅 (포스팅 18-2 과정) 에서 2022년 9월 프로그램을 사용하여 내가 실습한 과정을 이미지와 함께 올렸으니 선생님 강의대로 따라했으나 화면이 다르거나, 페이지 오류가 나오는 등 진행이 잘 안될 시 내가 해본 실습과정도 참고해서 해보길 바란다.

깃허브닷컴 사이트의 메인 화면에서 회원가입을 하기 위해 Sign up 을 누른다.

회원가입을 다 했다면 Sign in 을 클릭하여 로그인 해준다.

깃허브닷컴 사이트는 원래 웹 호스팅을 위해서 고안된 사이트는 아니다.

이 사이트는 개발자들이 자신의 소스코드를 안전하게 백업하고, 백업된 소스코드를 매게로 해서 개발자들끼리 협업하기 위해 고안된 굉장히 유명하고 아주아주 중요한 사이트이다.

앞으로 이 사이트를 자주 사용하게 될 것이다.

이 사이트의 기능 중에는 웹 호스팅 기능이 있기 때문에 그것을 활용 해보려 한다.

본격적으로 웹 호스팅 실습하기

제일 먼저 해야 할 것은 우리의 소스코드를 저장할 공간인

리포지토리(Repositories)

: 컴퓨터 저장소. 정보 시스템의 프로그램이나 데이터 같은 각종 자원을 자원간의 관련까지 포함하여 관리하는 자원 관리 데이터 베이스. 특히 대규모 정보 시스템의 개발과 운용 에서는 모든 정보 시스템 자원을 리포지토리에서 관리하게 된다. 프로그램의 버전 관리나 데이터 항목을 변경할 경우에 수정해야 할 프로그램의 특정화 등 개발, 운용 효율 향상에 큰 효과가 있다. [네이버 지식백과]

라는 것을 만들어야 한다.

왼쪽의 New 버튼을 클릭하거나, (선택1)

또는 오른쪽 위 내 프로필 왼쪽의 + 버튼을 클릭하여 New Repositories 를 클릭해준다. (선택2)

그럼 저장소를 만드는 페이지 화면이 나오는데,

여기에 원하는 저장소 이름을 입력해준다. (강사 선생님은) my-first-web-site 라고 적었다.

저장소 이름을 입력한 후 아래에 보면 Pubilc 과 Private 이라는 아이콘의 체크 버튼이 있다.

Pubilc 은 내가 만든 소스코드를 공개, Private 은 비공개로 설정한다는 뜻이다.

우리는 우리가 만든 소스코드를 공개할 것이기 때문에 Pubilc 에 체크해준다.

제일 아래 초록버튼인 Create repository 를 클릭하여 저장소 만들기를 진행한다.

짝짝짝! 드디어 우리는 웹 호스팅 사이트인 깃허브닷컴에서 첫번째 저장소를 만들었다.

(강사 선생님 말) 이 사이트에서 앞으로도 의미 있는 일을 많이 만들 수 있기를 바란다.

그 다음 할 일은 우리가 만들었던 소스코드를 이 사이트에 업로드 시키는 것이다.

소스코드를 업로드 하기 위해 파란색 링크가 걸린 uploading an existing file 이라는 문구를 클릭한다.

이렇게 생긴 화면이 나오게 되는데, 여기에 우리가 만들었던 소스코드를 업로드 하면 된다.

가운데 choose your files 를 눌러 파일을 찾아 업로드 해도 되고, (선택1)

또는 바탕화면에서 파일이 들어있는 폴더를 열어서 파일들을 모두 드래그 한 다음

파일들을 업로드할 사이트에 드래그하여 끌어다가 놓아도 (선택2)

업로드가 시작된다. 간단한 방법 두가지 중 편한걸로 사용하자.

아래 Commit changes 라고 써진 부분에는 소스코드를 올릴 때 마다, 또는 수정한 파일을 새로 올릴 때 마다 어떤 작업을 했는지 코멘트를 적어주는 칸이다.

(강사 선생님께서는) 웹 사이트 완성!! 이라고 적어주었다.

그런 다음 아래 초록색 버튼을 눌러 업로드를 완료하면,

작업한 것에 대한 첫 번째 보전이 안전하게 인터넷에 저장이 된다.

우리가 작성한 소스코드의 업로드 된 파일들이 위 화면처럼 보이는데,

여기서 index.html 파일을 클릭해서 보면

이 파일의 내용(소스코드 등)을 볼 수 있게 된다.

그리고 이 페이지의 주소를 다른 사람에게 공유하면 이 소스코드 자체를 다른 사람과 공유하고 토론도 할 수 있다.

이렇게 소스코드를 보관할 수 있는 기능을 제공하는 깃허브닷컴 사이트에서는 고맙게도 또 다른 기능을 제공해주는데

바로 깃허브닷컴 안에 내장되어 있는 기능인

깃허브 페이지

를 이용해서 웹 사이트를 운영할 수 있는 기능이다.

메뉴 항목 중 제일 오른쪽에 있는 Settings 를 클릭한다.

Settings 버튼은 현재 저장소에 설정을 할 수 있는 페이지다.

설정 페이지에 들어왔다면 왼쪽 사이드바에서 Pages 라고 하는 메뉴가 있다. 이것을 클릭한다.

Pages 페이지에 들어오면 웹 포스팅 기능을 활성화 시킬 수 있는 이런 화면이 뜰 것이다.

여기서 None 이라고 되어 있는 버튼을 누른다.

나오는 항목 중 main 을 클릭해준다.

이제 버튼 하나만 더 누르면 되는데,

그 전에 이 웹 포스팅을 활성화 시키는 데에는 시간이 좀 걸린다.

그리고 활성화 되고 있는 일이 어떻게 진행되고 있는지 우리는 실시간으로 볼 수 있다.

같은 깃허브닷컴 사이트를 하나 더 켜줬다. 똑같은 깃허브 Pages 페이지 화면이다.

왼쪽 화면을 Pages 페이지로 놔두고, 오른쪽 화면의 메뉴 중 Actions 버튼을 누른다.

그럼

왼쪽은 Pages 화면, 오른쪽은 Actions 화면이 열려있는 상태이다.

여기서 Pages 화면의 Save 버튼을 클릭한다.

(이 Save 버튼을 눌러야만 그때부터 우리 저장소의 웹 서버 기능이 활성화 된다.)

Save 버튼을 클릭한 다음, 오른쪽 Actions 페이지에서 새로고침을 누른다.

Actions 페이지의 모습이 바뀌면서

링크가 걸린 Pages build and deployment 문구가 나오는데

이걸 클릭해주면

build 가 진행되고 deployment 가 진행된다 라는 박스가 보이게 된다.

build 박스를 클릭하면 어떤 절차가 진행되는 과정이 나타나는데,

왼쪽에 초록색 체크가 나타나야 진행이 모두 완료되었음을 확인할 수 있다.

진행이 모두 완료 되었다면 다시 왼쪽 Pages 화면으로 넘어와서

Pages 화면에 나타난 주소를 클릭한다.

짜잔, 우리가 만든 웹 사이트가 화면에 표시 되었다.

위 주소를 통해서 이제 전 세계 누구나 우리 웹 사이트에 방문할 수 있게 되었다.

소스코드 수정하기, 그리고

수정한 소스코드 파일 업로드하기

만약 파일의 내용을 바꿨다면,

예시) < p > hello < /p > -> < p > hollo 2 < /p >

수정된 내용의 파일을 반영하려면 어떻게 해야 할까?

깃허브닷컴의 저장소 홈으로 다시 돌아와서

Add file 버튼을 눌러서 나오는 아래 Upload files 를 클릭,

그리고 코드가 수정된 내용이 저장된 작업 파일을 드래그 해서, 또는 파일찾기를 통해 파일을 업로드 해준다.

코멘트를 꼭 남겨준다.

예시) 수정, 수정된 파일, 1차 수정, 수정 후, 수정됨

그런 다음 완료 버튼 클릭하면

수정된 파일이 업로드 되면서 두 번째 버전이 반영된다.

자동으로 깃허브닷컴이 우리 웹 사이트를 갱신해주는데,

진행 상황을 보고 싶다면 메뉴의 Actions 버튼을 눌러 새로 추가되어 업로드 진행 중인 링크를 눌러 들어간다.

아까와 같이 build 와 deploy 박스의 진행을 눈을 볼 수 있고 초록색 체크박스가 뜨면서 완료됨에 따라

Pages 화면으로 가서 내 주소를 클릭하면 내 웹 사이트가 뜨면서 수정된 내용도 확인할 수 있게 된다.

내용 정리

위의 공부한 내용을 이론적으로 정리해보자면

3개의 요소가 있다.

첫 번째는, 내 컴퓨터가 있다. 이 컴퓨터에는 우리(나)가 만든 웹 페이지가 있다.

두 번째, 내가 만든 웹 페이지를 보고 싶어 하는 방문자들이 있다.

세 번째, 서비스를 대신해서 제공 할 호스팅 업체가 있다.

예시) 깃허브닷컴

1. 우리가 깃허브닷컴 사이트에(호스팅 업체)파일을 업로드 하면 내가 만든 소스코드가 업로드 된다.

2. 웹 호스팅 업체에서는 웹 호스팅에 설치되어 있는 웹 서버를 활성화 한다.

3. 그리고 컴퓨터 도메인의 이름을 부여한다. = 주소 (내 사이트)

4. 방문자가 도메인 주소(내 사이트)로 접속하면 웹 서버가 index.html 을 읽는다.

5. 웹 서버 는 방문자 에게 index.html 의 소스코드를 전송한다.

6. 방문자 의 웹 브라우저에 웹 페이지가 표시되면 이 웅장한 여정이 끝나게 된다.

이번 강의 마무리

웹 호스팅을 이용하는 것의 < 장점 > 이 무엇일까?

바로 쉽다 는 것이다.

우리는 코딩만 하면 된다. 나머지는 업체가 해주기 때문이다. 그래서 현업에서는 전문적인 업체에게 운영을 맡기는 경우가 많다.

하지만 웹 호스팅의 < 단점 > 도 있다. 교육적인 관점에서는 이 원리가 감춰져 있다는 것이다.

웹 서버가 동작하는 원리가 궁금하거나, 웹 서버를 통해서 직접 서비스하는 희열을 느끼고 싶은 사람들은 웹 서버를 이용해서 직접 운영하는 방법에 대한 수업도 준비되어 있으니, 도전해보길 바란다.

다음 강의에서 계속..

웹 브라우저와 웹 서버

이번 강에서는 인터넷이 동작하는 가장 기본적인 원리에 대해 알아보도록 한다.

인터넷이 동작하기 위해서는 컴퓨터가 최소 2대가 필요하다. 1대는 인터넷이 아니고, 3대는 본질적이지 않다.

2대의 컴퓨터가 서로 정보를 주고 받게 되는 순간 인류는 완전히 새로운 존재가 되었다.

팀 버너스 리 는 2대의 컴퓨터를 장만했다.

그리고 두 개의 프로그램을 개발하는데

하나는 웹 브라우저 라는 프로그램이고 하나는 웹 서버 라는 프로그램이다.

그리고 두 대의 컴퓨터는, 인터넷 으로 연결되어 욌다.

웹 서버 가 깔려있는 컴퓨터는 < info.cern.ch > 라고 하는 주소를 가지고 있다. 그리고 하드 디스크 가 있을 것이며 어느 디렉토리 안에 index.html 이라는 파일이 저장되어 있다.

그리고 웹 브라우저 에서 주소창에 info.cern.ch/index.html 이라고 입력하고 엔터를 땅 하고 쳤을 때,

어떤 일이 생기는지 알아 보도록 하자.

웹 브라우저가 설치되어 있는 컴퓨터에는 인터넷을 통해서 전기적인 신호를 info.cern.ch 에 해당되는 컴퓨터에게 찌릿 하고 보낸다.

그리고 그 신호 안에는

'나는 index.html 파일을 원합니다.'

라는 정보가 담겨 있다. (이걸 어떻게 담는지는 마법이다. - 이고잉 선생님.ㅎ)

신호를 받은 웹 서버의 하드디스크에서 index.html 이라는 파일을 찾아서

그것을 웹 브라우저가 설치되어 있는 컴퓨터에게 다시 전기적 신호를 쏴준다. (이 전기적 신호 안에는 index.html 이라는 파일 안에 저장되있던 코드가 담겨 있다) 이것 또한 마법이다........... - 이고잉 선생님왈 . ..

그랬을 시, 웹 브라우저가 설치되어 있는 컴퓨터에 어떤 정보가 도착하는가?

index.html 이라는 파일의 내용 이 도착하게 된다. = 즉 코드 가 도착한다.

이 코드 를 웹 브라우저가 읽어서 해석한 다음 화면에 표시하면,

우리가 알고 있는 웹 사이트 = 웹 이 동작하게 되는 것이다.

웹 브라우저 :: 웹 서버

이 둘의 관계를 잘 보면 서로 정보를 주고 받고 있음을 알 수 있다.

그렇다면 이 중에서 웹 브라우저가 깔려 있는 컴퓨터는

정보를 요청하고 있는가, 아니면 응답하고 있는가?

정답은 요청한다 이다.

반대로 웹 서버가 설치되어 있는 컴퓨터는

정보를 응답하고 있는가, 아니면 요청하고 있는가?

정답은 응답한다 이다.

인터넷을 만든 사람들은 이 두대의 컴퓨터가 서로 정보를 주고 받을 때 각각의 컴퓨터를 역할에 따라서 어떻게 부를까를 고민했을 것이다. 그리고 그 말을 최대한 쉬운 말로 쓰고 싶었을 것이다.

우리의 자본주의 사회에서 가장 자주 사용되는 관계가 무엇일까?

바로, 고객과 사업자 이다.

고객은 영어로 하면 Client '클라이언트' 이고,

서비스를 제공하는 사람을 Server '서버' 라고 한다.

그래서

인터넷을 만든 사람들은 인터넷을 사용하는 컴퓨터들 사이에 정보가 왔다 갔다 할 때,

요청하는 컴퓨터를 클라이언트 Client 컴퓨터 응답하는 컴퓨터를 서버 Server 컴퓨터 라고 부르기로 했다.

우리가 지금 배우고 있는 것은 웹 이다. 그래서 저 웹 브라우저 라고 이름 붙여진 것은 사실 웹 클라이언트 라고 부를 수도 있는 것이다.

만약 우리가 만들고 있는 시스템이 게임이라고 한다면,

그리고 이 게임이 인터넷에 연결되어 있다면

클라이언트 쪽, 즉, 사용자들이 게임을 하는 컴퓨터 또는 스마트폰에 설치되어 있는 프로그램은 게임 클라이언트

그리고 게임 회사가 가지고 있는 서버 컴퓨터에 설치되어 있는 컴퓨터는 게임 서버 라고 할 수 있다.

또, 채팅 시스템을 만든다고 가정했을 때 인터넷이라는 관점을 기준으로 한다면 채팅 클라이언트

채팅 회사가 갖고 있는 서버에 설치되는 프로그램은 채팅 서버 라고도 부를 수 있다.

우리는 이제 웹 브라우저의 사용법은 알고 있다. 웹 브라우저는 익숙하지만, 웹 서버는 낯설것이다.

웹 브라우저는 물질인가? 아니다. 웹 브라우저는 논리적이고 추상적인 대상의 시스템이다.

우리는 매일 같이 사용하고, 사람들과 얘기하고, 웹 브라우저에 대해 생각하기 때문에 이것이 물질적인 것이라고 생각하고 느끼게 되는 경향이 있다.

반대로 웹 서버는 웹 브라우저와 똑같이 인터넷에서 다운받아서, 컴퓨터에 깔고 켜서 쓰면 되는 그냥 일반적인 프로그램이다.

웹 서버에 대해, 그리고 웹 서버를 사용할 수 있게 된다는 것은

" 내 컴퓨터에 있는 문서를, 전 세계에 있는 누구나 인터넷이 연결되어 있는 컴퓨터에 웹 브라우저를 깔면 가져다가 볼 수 있도록 할 수 있다. "

라고 할 수 있다.

1. 자신의 컴퓨터에 웹 서버를 직접 깔아서 실습하기

2. 이런 일을 대행해 주는 업체에게 맡기기

위와 같은 두 가지 선택란이 있다.

위 두가지의 장단점은,

1 - 우리 컴퓨터에 직접 웹 서버를 설치하는 것은 어렵다. 하지만 이 과정에서 인터넷과 관련된 여러가지 개념을 배울 수는 있다.

2- 웹 호스팅이라는 것을 이용해서 회사에 맡기는 것은 쉽다. 하지만 인터넷이 동작하는 원리 등과 같은 것은 감춰져 있기 때문에 배울 수 있는 것이 적다.

다음 강의에서는

먼저 2번의 웹 호스팅 방법을 통해 쉽게 해보고 웹 서버를 통해 원리를 파악해 보는 방향성을 알아 나가는것을 실습해보고자 한다.

16) 원시웹, 웹의 역사

생활코딩 수업은 2개의 산으로 이루어져 있다.

하나는 웹 페이지를 만드는 것이다. 그 과정에서 코딩이 무엇인가를 파악하는 것이 목표였고 우리는 그 목표에 도달했다.

또 하나는 내가 만든 웹 페이지를 인터넷을 통해서 누구나 가져갈 수 있게 하는 방법이다.

이 과정에서 인터넷이 무엇인가를 이해하게 될 것이다.

인터넷과 웹이 어떻게 세상에 등장하게 되었는가 를 살펴보면서 정보기술을 바라보는 관전 포인트를 넓혀보도록 하자.

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

결과부터 얘기하면 둘은 다르다.

인터넷이 도시라면

웹은 그 도시위에 있는 건물 하나이다.

인터넷이 도로라면

웹은 도로위를 달리는 자동차 한 대 라고 볼 수 있으며

인터넷이 운영체제라면

웹은 그 운영체제 위에 있는 프로그램 하나 라고 볼 수 있다.

이 관계를 벤다이어그램으로 나타내면 위와 같다.

인터넷이라는 전체 안에 웹 이라는 부분이 존재하고 웹과 동급인 여러가지 서비스들이 있다.

그리고 이 세 가지 외에도 수 많은 서비스들이 마치 별처럼 많이 존재한다.

우리는 원한다면 웹과 동급인 것을 만들 수 있다.

이 관계를 역사적으로 살펴보면 1960년과 1990년, 정보기술 역사상 가장 중요한 사건 두 개가 있었다.

1960년에 인터넷이 등장하고 무려 30년이 지난 후에 웹이 등장했다.

1960년으로 돌아가서, 1960년엔 제일 화두였던 것이 있었다.

바로 핵 이다. 당시 인류는 핵전쟁을 치른 직후였다. 그래서 핵 에 대한 공포감이 오늘날과는 비교 할 수 없을 만큼 컸다.

미국에서는 미국이 핵 공격을 당했을 때 어떤 일이 생길 것인가를 시뮬레이션 해보았고 그 결과 통신 쪽에서 아주 심각한 약점이 드러나게 된다.

그 당시 통신 시스템은 중앙 집중적이었기 때문에 핵 공격을 당하면 통신이 마비되는 심각한 상황이었다.

그래서 핵 공격에도 견딜 수 있는 강인한 통신 시스템의 필요성이 대두된다.

그 결과로 탄생한 것이 바로 인터넷 이다. 인터넷 은 위 이미지와 같이 저렇게 생겼다. 중앙이 없는 모습이다.

우리의 집에 있는 여러가지 통신 장치들, 이 각각의 통신장치들이 일종의 전화국과 같은 역할을 수행하고 있다.

다시 말해, 수 많은 통신 장치들이 분산해서 전화국과 같은 역할들을 하기 때문에

위와 같은 수 많은 점들 중 하나가 사라져도 나머지 점들이 그 역할을 수행할 수 있는 통신 시스템이 인터넷 인 것이다.

인터넷 은 이렇게 1960년에 출발해서 30년이란 시간동안 천천히 전 세계적으로 확산된다.

이 시간동안 사람들은 인터넷 이 세상에 있다는 것을 모르고 있었다.

왜냐하면 인터넷은 기업이나 연구소, 대학, 군대와 같은 거대한 기관에서 사용하던 통신 시스템이었기 때문이었다.

그러다 1990년에 웹 이 출현하면서 완전히 새로운 길을 걷게 되었다.

여기서 질문, 웹 의 고향 은 어디일까?

웹 은 아주 의외의 공간에서 태어나게 된다.

바로 스위스 이다. 스위스 하면 여러가지를 떠올릴 수 있다. 여행, 관광, 높은 산, 눈, 시골과도 같은 정겨운 풍경들, 정밀 기술도 발전했고 금융도 발전한 부유한 나라.

그런데 왜? 정보기술 역사상 가장 중요한 사건 중 하나로 기억되고 있는 웹 이 하필이면 스위스 에서 태어났을까?

그 이유는, 스위스 라는 국가가 중요한 것이 아니라 스위스 에 무엇이 있느냐가 더 중요하다.

스위스 제네바 에는 유럽 입자 물리 연구소라는 아주 저명한 물리학 연구소가 있다.

이 물리학 연구소에는 강입자 가속기 라고 하는 장치가 있는데, 이 장치는 인류가 지금까지 만든 장치 중에 가장 거대하고 비싸고 복잡한 장치 중에 하나이다.

이 장치는 아주 작은 입자를 보는 장치다. 말하자면 NASA 와 같은 곳이 인류의 망원경이라면

유럽 입자 물리 연구소 는 인류의 현미경과 같은 존재하고 할 수 있다.

이 강입자 가속기 가 얼마나 크냐면 위 이미지 처럼 동그랗게 생겼으며, 둘레가 27킬로에 해당된다.

쇠로 된 튜브 안으로 아주 작은 입자를 고속으로 회전시켜서 입자와 입자를 꽝 하고 충돌 시킬 때 어마어마한 에너지가 방출되면서 어떠한 작은 입자를 발견할 수 있을 것이다, 라는 가설을 세웠는데

그 입자가 바로 힉스 보선 이다.

힉스 라고 하는 것은, 피터 힉스 라는 박사님이 1960년대에

'내가 생각하기에 이 세상이 이렇게 생겼고 그 모델이 맞다면 이런 물질이 존재할 것이다.'

라고 예견 한다.

하지만 당시에는 이것을 실험적으로 확인할 수 있는 방법이 없었기 때문에 확인은 하지 못하고 가설로만 있었다.

그리고 이후에 이것을 확인할 수 있는 때가 되었을 때 전 세계 수 많은 엔지니어와 과학자들이 몇 조에 해당되는 돈을 몇 십년 동안 쏟아 부으면서 이 장치를 만들고 정말로 그 물질이 존재 하냐, 하지 않느냐를 확인하기 위해서 엄청난 노력을 하게 된다.

그리고 최근 몇년 전에 (강의 업로드 날짜가 2017년 이므로 2017년 기준 최근임) 유럽 입자 물리 연구소 에서 인류를 향해서 중대 발표를 했다.

'우리가 실험을 해 보니까 힉스 가 존재한다.'

그 후 피터 힉스 는 그 해에 노벨 물리학상을 받았다.

결과적으로 유럽 입자 물리 연구소 는 이런 곳이다. 이 곳은 127개국에서 모인

12,000명의 천재적인 엔지니어와 과학자가 모여 있는 곳이기도 하다.

1980년과 1990년에는 사람들한테 정보라는 표현 조차도 익숙하지 않았던 시절이다.

하지만 유럽 입자 물리 연구소 는 지금 우리가 살고 있는 현재와 매우 유사한 정보의 바다에서 허우적 대고 있는 작은 지구와 같은 곳이었다고 본다. (-이고잉 선생님의 생각에-)

바로 이런 곳에서 웹 이 등장한 것은 있을 수 있는 일이 아닐까?

어쨌든 1980년부터 유럽 입자 물리 연구소 에서 중요한 사건이 조용히 시작된다.

연구소의 팀 버너스 리 라는 분이 프로그래머이자 비정규직으로 취직하게 된다.

팀 버너스 리 는 입자 물리 연구소에 들어와서 이런 프로그램을 처음 만든다.

인콰이어 <Enquire> 라는 프로그램인데, 이 프로그램은 팀 버너스 리 가 어렸을 때 봤던

Enquire Within Upon Everything이라는 책에서 따온 첫 글자이다.

이 책은 '무엇이든 물어보세요' 와도 같은 책이라서 여러가지 지식들이 들어 있는 책이었다.

하지만 아쉽게도 Enquire 라는 프로그램을 누군가에게 맡기고 떠났는데 그 프로그램이 사라졌기 때문에 지금은 존재하지 않는다.

그러나 이 프로그램이 웹 의 전신중에 하나이기도 하다.

그렇게 팀 버너스 리 는 연구소를 들어갔다 나왔다 를 반복하면서 10년 동안 웹 의 전신이 되는 프로그램을 만들고, 또 만들고를 반복한다.

그리고 1990년에 유럽 입자 물리 연구소 에 중요한 사건이 생긴다. 연구소에 드디어 인터넷 이 들어오게 된 것이다.

그리고 팀 버너스 리 는 지난 10년 동안 도전했던 과제에 인터넷 이라는 것을 합성해서 사건을 일으키기 시작한다.

팀 버너스 리 는

1990년 10월. 세계 최초로 웹 페에지 를 만드는 편집기 를 만든다.

그리고 1990년 11월. 세계 최초의 웹 브라우저 인 World Wide Web 이라는 프로그램을 만들어 낸다.

World Wide Web 은 위 이미지 처럼 생겼다.

1990년 12월 24일.

팀 버너스 리 의 첫째 아이 출산 예정일에 팀 버너스 리 와 그의 동료는

웹 서버 라는 프로그램을 만들고 그 프로그램이 설치되어 있는 컴퓨터에 < info.cern.ch > 라고 하는 주소를 부여했다.

(강의 화면에 이고잉 선생님이 띄운 창이다.)

(저 주소를 검색해보라고 권유하여 나도 직접 검색해보았다.)

이 주소를 검색했을 때 나오는 페이지. 이곳이 바로 웹 의 메소포타미아다.

웹 은 여기에서 시작된다. home of the first website 라고 적혀져 있다.

이렇게 인터넷 이 등장한 1960년 이래로 엘리트들만의 시스템이었던 인터넷 이 1990년에 웹 을 만나면서 드디어 대중화의 길을 걷게 된다.

인터넷 이 갖고 있는 어떤 잠재력 같은 그것을 제대로 사용한 시스템은 많지 않았었다. 하지만 인터넷 이 잠자고 있었던 가능성을 제대로 끌어올린 정보 시스템이 등장하면서 이때부터 인터넷 은 대중들에게도 쓸 만한 시스템이 되었다.

그렇게 인터넷 과 웹 은 빠른 속도로 폭발적 동반 성장을 통해 지금에 이르게 된다.

-16강을 마치며

(이고잉 선생님께서는) 1990년 12월 24일에 팀 버너스 리 가 완성한 웹 을 이렇게 부르고 싶다.

< 원시 웹 >

웹 이 웹 이 되기 위해서 필요한 본질만 담고 있으면서 그렇지 않은 혁신적인 것들은 철저히 배제된 수업이 바로 < WEB1 > 이다.

이제 우리는 웹 브라우저 에서 보여주는 전자문서를 만들 수 있게 되었다.

그럼 이제부터는 무엇을 해야 할까?

전자문서를 전 세계 누구나, 컴퓨터나 인터넷, 그리고 웹이 있다면

마치 자신의 컴퓨터에 있는 문서인 것 처럼 볼 수 있도록 하는 방법을 알아야 한다.

그러기 위해선 인터넷 이 무엇인지 알아야 한다. 인류 역사를 획기적으로 바꿔놓은 인터넷 !

이어서 다음 강의에서 배워보도록 하자.

이 강의 공부는 한참 전에 했는데, 주간은 유튜브 편집도 하고 이어서 뒷 강의를 마저 들으며 여러차례 헤메다가 학습정리 포스팅을 이제야 올린다.

이번 포스팅은 웹 사이트를 완성시키는 단계가 되겠다.

위 사진을 보면 큰 제목과 앞에 번호가 있고 링크가 걸린 소제목의 목록들이 나와있다.

사진에 나와있는 그대로, 내가 만들고 있는 웹 사이트의 제목을 클릭하면 index.html 가 보이게 1번을 클릭하면 1.html 이 2번을 클릭하면 2.html 3번을 클릭하면 3.html 이 보이게끔 이번 강의에서 실습해 볼 것이다.

먼저, WEB 이라는 제목을 적어주는데 가장 큰 크기의 제목태그 < H1 > 태그를 입력해준다.

아래 두번째로 큰 크기의 제목태그를 넣은 HTML 글의 태그는 < H2 > 태그로 수정해준다. 저장하고 웹 사이트를 새로고침 해서 보면 WEB 의 글이 가장 큰 제목이 되고 아래 HTML 글은 두번째로 큰 글로 나타난다.

다음은 각 제목과 1,2,3 번호로 매겼던 글자들의 각 앞에 커서를 클릭하고

< a href=""> 이라고 입력한다.

< /a > 를 뒤에 입력하여 닫아주는 태그도 적어준다.

" " 안에는 맨 처음 언급했었던 것 처럼 WEB 제목쪽에는 따옴표 안에 " index.html " 1번의 HTML 쪽의 따옴표 안에는 " 1.html " 2번 CSS 안에는 " 2.html " 3번 JavaScript 는 " 3.html " 이라고 입력해주고 저장한다.

웹 사이트를 새로고침 해보면 링크가 걸려진 것을 확인할 수 있다.

그런 다음 태그 입력 왼쪽의 프로젝트칸에서,

1. html 페이지의 오른쪽 마우스를 눌러준다.

복제, 복사한다 라는 뜻의 Duplicate 라는 항목을 클릭한다.

그럼 이런 창이 나온다. 새로운 파일을 만들라는 뜻이다.

숫자 1을 2로 수정하여 2. html 이라고 입력된 상태로 엔터를 누른다.

그럼 복사된 파일이 생기면서 1.html 과 2.html 이 만들어진다.

아까와 같이 또 복사 붙여넣기를 통해

1,2,3 번의 html 과 index.html 이라는 이름의 파일을 만들어준다.

이 파일들은 웹 사이트에서 제목인 WEB 과

1. HTML
2. CSS
3. JavaScript 를 각각 클릭했을 때 링크가 연결될 수 있도록 하는 역할을 한다.

웹 사이트에 나와있는 각 번호와 동일한 파일을 눌러 코드 내용을 수정해줄건데,

2.html 파일을 클릭하고 코드 내용중 < h2> HTML < /h2 >이라고 적혀있었던 내용을 < h2> CSS < /h2 > 로 수정해준다.

< h2 > CSS < /h2 > 아래 < p > < /p > 안의 내용을 지우고

구글에서 검색하여 CSS 에 대한 설명글로 쓸 내용을 복사한 뒤 내용글로 붙여넣기 해주었다.

저장 후 새로고침 한 웹 사이트에서는 2. CSS 를 누르니 CSS에 대한 설명과 부제목 글이 나오면서 CSS에 대한 설명 페이지 화면이 뜨게 된다.

오른쪽 < title > 태그로 감싼 내용 중 WEB1 - html 이라고 적었던 부분을 CSS 로 수정해주자.

그 다음 3.html 항목으로 넘어가서 똑같이 타이틀 태그쪽 이름을 JavaScript 로 변경해주고 < p > < /p > 안에 들어갈 내용 역시 JavaScript를 설명하는 페이지를 검색하여 찾은 설명글을 복사하여 붙여넣기 해준다.

< h2 > 로 감싸줬던 소제목 또한 JavaScript 라고 수정 입력한다. 3번 파일 코드까지 전부 수정이 끝났다면 저장 후 웹 페이지를 새로고침 해보자.

1번 파일의 html 을 누르면 맨 위 사이트 이름이 WEB1-html 로 수정되어져 있고 링크가 걸려있는 1.HTML 을 누르면 < h2 > 소제목 태그로 감싸줬었던 HTML 글자가 중간에 뜨면서 맨 아래 < p > < /p > 태그 안에 적었던 내용이 보이게 된다.

각 2번과 3번 링크를 따라 눌러보면 각 페이지 마다 그 단어의 설명에 걸맞게 나타나게 됨을 확인 할 수 있다.

마지막으로 홈페이지의 메인 화면이 될 index.html 파일을 눌러주고 < title > 태그로 적었던 html 글을 지워준뒤

Welcome 이라고 입력해준다.

그리고 아래에 있는 < h2 > 태그의 소제목은 HTML 을 지우고

WEB 이라고 수정해준다. 그리고 이 페이지에도 똑같이 내용에 들어갈 글을 검색하여 복사한 다음

< p > 태그 안에 내용을 붙여넣기 해준다.

저장 후 새로고침 하여 웹 사이트를 살펴보면 완성 된 사이트는 이렇다.

이로써 이번 강의에서는 웹 사이트를 완성하는 실습을 해보았다. 이제까지는 산의 정상에 올라오는 길이었다면, 다음 강의부터는 하산하는 과정에 대해 배워 보도록 한다.

태그가 웹의 왕국이라면 이 태그는 이 왕국의 제왕이다.

현대의 HTML은 150여 개 태그로 이루어져 있지만 이들 모두 이 태그 아래에 있다.

검색 엔진들은 이 태그 덕분에 전 세계의 웹을 항해하면서 웹페이지를 발견할 수 있었고 이 태그 덕분에 최고의 검색 결과를 만들 수 있었다.

이 태그가 없다면 검색 엔진은 존재하지 않을 정도이다. 우리의 일상에서 검색 엔진이 없다면 어떤 일이 생길까?

이 태그는 도시의 길과 인체의 혈관과 같은 것이다. 이 태그가 없었다면 전 세계 모든 웹 페이지는 고립될 것이고 정보 혁명도 시작되지 않았을 것이다.

이 태그는 우리가 가장 많이 접하고, 사용하는 태그이다.

HTML의 약자이며

Hyper Text Markup Language 의 첫 글자,

HyperText가 바로 의미하는 이것.

이 태그의 이름은 " anchor " 의 첫 글자를 딴 < a > 이다. " anchor " 는 배가 정박할 때 사용하는 " 닻 " 을 의미한다.

정보의 바다에 정박한다는 의미인, 시적인 표현인 < a > *의 기능은 바로 *< 링크 > 이다.

왼쪽 웹사이트의 파란컬러 부분에 HTML 이라는 기술의 공식 사용설명서의 링크를 걸어두어 조금 더 자세한 설명을 볼 수 있도록 해보자.

사용설명서를 찾을 때, 검섹엔진에 html speicification 이라고 검색하면 된다. 여기서 'speicification' 의 뜻은 한국어로 '명세' 라고도 한다. '설명서' 라고 보면 된다. 즉 HTML을 만드는 W3C라는 국제 기구에서 만든 공식 설명서 정도로 볼 수 있겠다.

위 웹 페이지 문서는 'W3C' 라는 국제기구에서 운영하고 있는 문서이며

왼쪽 위에 'W3C Recommendation'이라고 되어있는데 이는 '권고안' 이라는 뜻이다.

W3C는 직접 브라우저를 만들지 않는다. W3C는 W3C의 멤버들이 모여서 미래의 웹은 어떠해야 하는가에 대해 의논해서 미래 웹의 기술을 결정하면, 이렇게 Recommendation 이라는 문서를 발표하고 이 문서를 웹브라우저 제작 업체들이 보고 그에 따라서 웹브라우저를 만들어 가게 된다.

아무튼 우리는 이 사이트의 주소를, 아까 링크를 걸려고 한 텍스트에 걸고자 한다.

링크의 태그명은 < a > 이다.

오른쪽 태그편집창의 링크를 걸고자 한 텍스트 앞에 열리는 태그 < a > 와 닫히는 태그 < /a > 를 각각 입력해주고 웹페이지를 새로고침 하면..

링크가 걸리지 않는 것을 볼 수 있을 것이다.

그 이유는

정보가 부족하기 때문이다. 링크가 어디에 앵커를 내려야 될지에 대한 정보가 부족하므로

가져오고자 하는 사이트의 주소를 복사한 뒤

< a > 태그안에 커서를 가져온 다음에 한칸 띄어쓰고 속성값을 적어주는데,

'하이퍼텍스트' 가 곧 '링크' 라고 앞전에 설명했듯이 'HyperText(하이퍼텍스트)'의 첫 글자인 ' h ',

그리고 웹 브라우저한테 "웹 브라우저야, 이 링크는 이 값을 참조해." 라고 할 때의 ' 참조 '.

영어로는 'reference(참조)'인데 이 중에 앞 세 글자인 ' ref ' 을 속성값으로 입력해주면 된다.

속성값 href 의 뒤에는 "가져오고자 하는 사이트의 주소" 를 넣어주면 된다.

< a href="복사했던 사이트주소" >

이렇게 하면 저 텍스트를 클릭했을 때 우리가 준비했던 W3C 사이트로 이동하게 된다.

+추가

1.새 탭으로 열기

저 링크가 걸린 텍스트를 클릭했을 때 새 탭(새 창)이 뜨게 하고 싶을때는

target="_blank" 라고 뒤에 추가로 적어준다.

< a href="사이트주소" tardet="_blank" >

*2. 설명 문구 (툴팁) * 마우스를 올려놓으면 어떤 사이트가 뜰 것인지에 대한 간단한 문구가 적힌 박스를 띄우고 싶을때는

뒤에 title="html5 speicification" 이라고 입력해준다.

< a href="사이트주소" tardet="_blank" title="html5 speicification" > 또는 < a href="사이트주소" title="html5 speicification" >

이런식으로 사용 가능하다.

13) html, head, title, body, meta, 그리고 < !doctype html > (문서의 구조와 슈퍼스타들)

우리는 HTML의 문법을 마스터한 상태이다. 즉, 문장을 완성하는 법을 마스터했다고 할 수 있다.

문장은 모이면 페이지가 된다. 페이지가 모이면 책이 된다.

책에는 표지가 있고, 표지에는 제목과 저자가 표기된다.

이처럼 정보가 많아짐에 따라서 이 정보를 잘 정리 정돈하기 위한 체계, 혹은 구조라는 것이 필요하다.

13강에서는 구조를 만드는 방법에 대해서 공부할 것이다.

위 통계자료에서의 가장 많이 사용하는 태그의 랭킹을 보면, 맨 위부터

< head > < body > < html > < title > < meta >

태그가 나열되어 있다. 빈도수가 압도적으로 높은 태그순이다.

이 슈퍼스타 태그들이 무엇인지, 어떻게 쓰이는지에 대해서 알아보자.

< title >, < / title > : 제목 태그

우리가 만들고 있는 페이지를 보다보면, 다른 웹 사이트의 어떤 페이지들 보다도 뭔가 부족하다는것을 느낀다.

다른 웹사이트의 페이지는 내용을 잘 표현하는 제목을 표시하고 있고, 우리가 만든 페이지는 ' 파일명 ' 이 곧 제목이다.

제목을 만들어주기 위해

' WEB1 - html ' 이라는 글을 적고

열리는 태그와 닫히는 태그로 양 사이드에 < title > < / title > 이라는 타이틀 태그를 입력해준다. 그런다음 저장(Ctrl+s)하고 웹페이지를 새로고침 해주면

웹페이지에 제목이 WEB1-html 으로 바뀐 것을 확인할 수 있다.

< title > 이라고 하는 태그를 사용하면 웹페이지의 제목을 사용자에게 명시적으로 알려줄 수 있을 뿐만 아니라 검색 엔진과 같은 기계들은 바로 이 < title > 이라는 것을 책으로 치면 책 표지와 같은 정보로 사용한다.

그렇기 때문에 우리가 웹 페이지를 만들 때 < title > 태그를 사용하지 않는 것은 굉장히 손해보는 일이라고도 볼 수 있겠다.

아래 < h1 > < /h1 > 이라고 적은 태그에서 HTML 옆에 한글로 ' 이란 무엇인가? ' 를 추가로 입력해보았다.

html 이란 무엇인가? 를 웹페이지에 나타내기 위해서이다.

저장한 후 웹 페이지를 새로고침 하면

웹페이지에서의 한글이 오류가 뜬 것 처럼 나온다. 한국어 문자와 실제로 출력된 결과가 다르게 나오는 이유는

편집 에디터에서 ' 이란 무엇인가? ' 라는 글씨를 작성하면

이 글씨 그대로 컴퓨터에 저장되는 것이 아니기 때문이다.

컴퓨터는 모든 정보를 0 아니면 1로 최종적 저장을 하는데 이 0과 1을 어떻게 저장할 것인지에 대한 여러가지 약속들이 존재한다.

편집에디터의 오른쪽 아래를 자세히 보면

UTF-8 이라는 것이 있다. 이 utf-8 이 무엇인지는 몰라도 상관없다. 하지만 우리가 작성한 이 < html > 편집 파일은

utf-8 이라는 형식의 파일로 저장된 상태이다.

컴퓨터 프로그램 파일에는 '형식' 이라는게 존재하지 않는가?

.jpg .pgm .pdf .gif

코딩 편집 프로그램에서 지금 우리가 편집중인 이 파일의 형식은 오른쪽 아래에 나와있으며 이 형식은 < UTF-8 > 이라는 것이다.

그렇다면, 이 코드를 작성한 파일을 웹페이지에서 열 때도

< UTF-8 > 형식으로 열어야 문제 없이 열린다는 뜻이다.

웹페이지에게 " 내가 한글로 쓴 내용을 포함한 코드를 utf-8 형식으로 열어서 보여줘! " 라고 명령(입력) 할 때에는

< title > 타이틀 태그 밑에 줄에 meta 라고 적고

meta (띄어쓰기) ch (까지 적으면 아래 charset < meta > 라고 뜨는 단어가 자동으로 뜬다) 을 선택한다.

그리고 = " utf-8 " 을 입력 후 괄호를 닫아준다.

< meta charset = "utf-8" > 이라고 입력이 끝났다면 저장한 뒤 웹페이지에서 새로고침 해주자.

이렇게 한글이 웹페이지에서 깨지지않고 결과가 잘 나타나는 것을 볼 수 있다. 이게 바로 utf-8 형식을 코드를 입력하여 웹페이지로 보이게 하는 것이다.

여기서 charset 의 character(캐릭터) 는 문자라는 뜻이고 set(세트) 는 규칙 이라는 뜻으로 쓰이는데 이를 합친 CHARSET 은 즉, " UTF-8 로 문서를 읽어라 " 라고 웹페이지에게 명령(코드입력)한 것과 같다.

위의 두 줄의 코드와 아래쪽의 코드들 사이에는 차이가 있다.

그렇기 때문에 가운데 띄어쓰기를 해놓은 것인데,

아래쪽의 코드들은 < 본문 > 이다.

반면에 위의 두 줄 코드는 < 본문을 설명 > 한다. 즉, < title > 이라고 하는 태그는 " 본문의 제목이 무엇인지를 설명 " 하고 있고

그리고 < meta charset="utf-8" > 이라는 것은 이 < 본문 > 이 ' utf-8 ' 이라는 방식으로 저장되어 있다, 라는 것을 설명한다.

HTML을 만든 사람들은 이 < 본문 > 을 < body > 라는 태그로 묶기로 약속했다.

아래쪽의 코드들인 < 본문 > 내용에, 열리는 태그 < body > 와 닫히는 태그 < / body > 를 입력해준다.

그리고 < 본문을 설명 > 하는 위의 두 줄 태그 즉, 바디를 설명하는 태그에는 < head > < / head > 태그를 입력하여야 한다.

HTML에 있는 모든 태그는

< head > 태그, 또는 < body > 태그 이 둘 중 하나 아래에 놓이게 된다.

이런 점에서 이 두 태그(head태그와 body태그)는 상당히 고위직 태그라고 볼 수 있다. 그리고 이 고위직 태그들을 감싸는 단 하나의 최고위층 태그가 있는데 이것이 바로 < html > < / html > 이라는 태그이다.

그리고 이 < html > 이라는 태그 위에 관용적인 표현이며 이 문서는 HTML 이다, 라고 알려주는

< ! doctype html > 를 적어주면 된다.

정리하자면 위의 이미지와 같다.

< !doctype html > < html > < head > 본문을 설명하는 태그 < /head > < body > 본문 < /body > < /html >

실제로 이렇게 쓰여지고 있는 코드의 예를 보고 싶다면 아무 웹 사이트에 들어가 오른쪽 마우스 - 페이지 소스 보기를 눌러 확인하면 된다.

나는 '네0버' 검색엔진 사이트에서 페이지 보기를 해보았다.

페이지 소스에 나오는 코드 내용 중 가장 맨 위에 보이는 것이 무엇인가?

< !doctype heml > 와 그 아래 < html > 태그 그 아래에는 < head > 태그가 있고 < title > , < meta > 아래를 더 내리다 보면 < body > 태그가 있을 확률이 높다.

우리는 이렇게 빈도수가 압도적으로 높은 태그들을 배우면서 전 세계에 있는 거의 모든 웹 페이지들이 가지고 있는 구조를 파악하게 되었다.

우리는 공부하면서 얻을 수 있는 중요한 효용으로 눈이 밝아짐을 느낄 수 있을 것이다.

옛날에는 보이지 않았던 것이 보이기 시작하고, 들리기 시작하는 능력을 가지게 된 것이다.

12) parent 와 child (부모 자식 관계의 태그와 목록)

태그에는 서로 포함 관계로 연관되어 있는 부모 자식간의 태그가 있다.

< parent > < /parent > 태그와 < child > < /child > 태그가 있을때

< parent > < child > < / child > < / parent >

위와 같이 자식태그를 포함하고 있는 태그가 부모 태그, 포함되어 있는 태그를 자식 태그라고 부른다.

HTML에 있는 여러 태그들은 서로 부모 자식 관계가 바뀐다.

어떤 태그들은, 자식태그가 있는 곳에 항상 부모태그가 있고 부모가 있는 곳에 항상 특정한 자식 태그가 있는 사이 좋은 태그들이 몇 있다.

이번 강의에서는 이런 태그들에 대해서 살펴볼 것이다.

그리고 맨 처음 기획서를 구상할 때

1. html
2. css
3. javascript

이 3가지 목차 만들기를 완성해 볼 것이고 배우는 과정에서 부모 자식 관계에 해당되는 태그를 살펴보도록 하자.

편집기에 순서대로 html , css , javascript 를 입력하고 저장, 웹 페이지에 새로고침하면 일렬로 글이 나타날 것이다.

여기서 목차답게 하기 위해 줄바꿈 태그를 사용해보자.

각 글자의 뒤에 < br > (줄바꿈) 태그를 입력해주었다. 그리고 목차로 쓰일 순서에 맞게

1,2,3 의 숫자를 입력해주고 새로고침하니 페이지에 그럴 듯 하게 목차같이 보여진다.

그러나 HTML 을 만든 공학자들은, 목차를 쓸 때 사용하라고 어떠한 태그를 고안해냈다. 우리는 이 태그를 사용해야만 이 태그가 의미에 맞게 사용되는 것이라고 할 수 있는 것이고 웹 페이지가 더 가치있게 된다.

<목차> 라는 태그를 사용할 것인데, 목차는 영어로 'list' 이다. list 의 앞에서 2글자는 < li > 이다. 즉, < li > 가 바로 목차 태그이다.

글의 앞뒤로 열리는 태그 < li > 와 닫히는 태그 < / li > 를 써주는데,

이때 1번부터 3번까지 일일이 목차 태그를 입력해주게 되면 나중에 1 ~ 100 번의 목차가 있다고 가정했을 때, 전부 입력해주는게 쉽지 않을 뿐더러 시간이 많이 소요될 수 있을 것이다.

여기서 팁은

열리는 태그를 입력 할 숫자 1번 앞을 클릭한 뒤 Ctrl 을 누르며 숫자2번과 3번 앞을 하나씩 클릭해준다. 그런 다음 누르고 있던 Ctrl 키를 때고 태그를 입력해주면 각 번호 앞에 동시에 태그입력이 가능해진다.

이를 이용하여 < li > 라는 태그를 동시에 입력한 뒤

마찬가지로 글자의 뒤쪽에 닫히는 태그인 < / li > 를 입력해준 뒤 저장하고

웹 페이지를 새로고침 해주면 위와 같이 목록의 형태를 띄며 바뀐 것을 확인 할 수 있다.

여기서 부모태그와 자식태그를 사용해보자면,

예시로 [ egoing ] , [ k8805 ] , [ youbin ] 이라는 닉네임을 가진 참여자들을 적었다고 가정해보자.

이 닉네임들 앞에도 똑같이 < li > 과 < / li > 목록 태그를 표시해주었을때

위의 3개는 수업의 순서를 나타내는 목록이고, 아래 3개는 닉네임을 가진 참여자 라고 했을때, 웹페이지에는 총 6개의 목록으로 나열되어 나타나진다.

여기서 우리는 각각의 목록을 구분해주기 위해 줄바꿈 태그인 < br > 을 입력하여 구분됨을 표시할 수도 있다.

그러나 이런 경우에 사용하라고 고안된 태그는

< li > 이라는 자식 태그의 부모 태그인 < ul > 이라는 태그이다.

위 이미지처럼 < li > 태그의 위에 전체를 감싸주는 식으로 < ul > 태그의 열리는 태그와 닫히는 태그를 입력해준다.

그리고 이렇게 적었을 때 한줄로 정리되어지지 않은 태그들을 볼 수 있는데, 이를 좀 더 정리된 태그 모습을 위해

자식태그로 감싸져 있는 목록내용을 전부 드래그한 뒤, 단축키 Tab 를 누르면 문단이 한칸 앞으로 들여진다.

편집된 내용을 저장 후 웹페이지를 새로고침 하면 위와 같이 목록이 구분되어지고, 여백이 정리되어 표시됨을 알 수 있다.

이때 사용하는 ul 태그는, 순서가 정해지지 않은, 순서가 없는 목록을 적을때 사용하는 태그이다.

그리고,

순서가 1번부터 ~ 1000번 이상의 목록을 나열해야 된다고 했을때는 이 ul 태그를 사용할 수 없다.

그럴때 사용하는 태그는 바로 < ol > 태그이다.

위 그림처럼 < ul > 태그를 지우고 < ol > 태그를 열리는 태그와 닫히는 태그로 입력해주었다.

< ol > 태그는 < ul > 태그와 반대로 숫자를 표시해주며 순서가 있는 목록을 형성해준다.

그렇기 때문에 1번과 2번이라고 적힌 숫자를 지워준 후 저장, 웹페이지를 새로고침해주면

숫자를 쓰지 않았음에도 불구하고 웹 페이지에는 1번부터 2번까지의 숫자가 순서대로 나열되어 나타나게 된다.

< ul > , < ol > 요약

우리가 배운 < ul > 과 < ol > 태그는 공통적으로 뒤에 ' L ' 이 들어간다.

l <- 은** List** 의 약자이다.

ol 태그는 ' Ordered List ' 의 약자이고 ul 태그는 ' Unordered List ' 의 약자이다.

ol 은 말 그대로 순서가 있는 목록을 뜻하는 태그 ul 은 순서가 없는 목록을 뜻하는 태그를 뜻한다.

< li > , < / li > = 목차 태그 , list의 약자 li , 자식 태그 < ul > , < / ul > = 순서가 없는 목록 태그 , unordered list의 약자 ul , 부모 태그 ** < ol > , < / ol >** = 순서가 있는 목록 태그, ordered list의 약자 ol , 부모 태그

위 그림은 이전에 통계 분석할 때 보았던 표이다.

표를 보면 이번 시간에 배운 태그들은 사용 빈도수가 매우 높은 쪽에 속해 있음을 알 수 있다.

우리는 이 태그들을 여러 상황에서 좀 더 복잡한 태그들을 자주 접하게 될 것인데

예를 들어 표를 작성한다고 가정시

표는 영어로 < table > 태그로 표시한다.

< li > 와 < ui > 같은 경우 자식과 부모, 2대 관계라면,

< table > 태그의 경우에는

< table > , < tr > , < td >

이렇게 3대가 같이 다니며 사용하게 된다.

그렇기 때문에 복잡한 태그사용이 되겠지만 우리는 나중에 혼자서도 충분히 이러한 표를 작성할 수 있도록 학습하고 사용할 수 있게 될 것이다.

10) html (html이 중요한 이유)

누구나 기초가 중요하다고 말한다.

하지만 기초가 중요하다는 말을 잘 들어보면 응용으로 가는 과정으로서 기초가 중요하다는 뜻인 경우도 많이 있다. 사실 기초는 기초만으로도 할 수 있는 일이 많다.

우리는 웹사이트를 만든다는 거대한 목표를 향해서 나아가고 있지만, 지금까지 우리가 배운 것은 그런 큰 목표가 아니더래도 이것 자체로 쓸모가 많다.

이번 10강에서는 여기까지 배운것만으로 할 수 있는 일을 하나를 소개해준다.

위 화면은 https://opentutorials.org 라는 사이트인데 우리가 실습하고 있는 예제의 미래 모습이다.

이렇게 글 쓰는 화면에는 블로그, SNS 등이 있는데

우리가 글을 쓸 때 내부적으로 어떤 일이 일어나는가를 살펴 볼 수 있는 기회이기도 하고 일반인이 글을 쓸 때와 우리처럼 코딩에 대해 배운 사람들이, 지식인들이 글을 쓸 때에는 어떤 차이가 생기고 이것이 미래에 얼마나 큰 차이를 가져오는지를 한 번 생각해보는 시간으로 보도록 하자.

일반인이 일반적으로 글을 쓸때처럼 coding 이라고 위에 입력하고,

지식인이(코딩을 배운 사람) coding 이라고 아래쪽에 글을 쓰고

이 두 사람이 이 coding 이라는 글을 제목으로 수정할때의 차이점이 어떠한가를 가정해보겠다.

위에 글을 쓴 일반인의 경우에는 "coding" 을 드래그해서 선택한 후, 글의 크기를 먼저 정할 것이며

글의 굵기를 선택해서 진하게 표시할 것이다. 이렇게 해야 제목처럼 보이기 때문이다.

반대로 아래 글을 쓴 지식인의 경우 format 이라는 카테고리에서 제목 글씨가 예시로 나와있는 항목중에 적당한 제목크기의 사이즈를 찾아 눌러준다.

이랬을 경우 위** 일반인이 쓴 coding** 과 아래 지식인이 쓴 coding 의 두 글씨와 사이즈로 보기에는 눈으로 봤을 때 별 반 차이가 없음을 알 수 있을 것이다.

카테고리 중 source 라고 되어 있는 항목을 클릭하면

이렇게 코드내용이 적힌 화면이 나오는데

이는 편집이기를 이용해서 글을 쓴다는 것, 컨텐츠를 만든다는 것 등이 내부적으로 HTML 코드를 생산하는 행위였다. 라는 것을 알 수 있다.

우리가 HTML을 몰라도 사실 우리는 HTML을 만들어내고 있었던 것이다.

다시 돌아와서 일반인의 제목과 지식인의 제목 사이에는 차이가 있다.

지식인의 제목은 보시다시피 깔끔하다. 그리고 제목이 < h3 > < / h3 > 라는 태그로 감싸져 있기 때문에 어디서부터 ~ 어디까지가 세 번째로 중요한 제목이다, 라고 하는 정보가 태그(코드)상에 나타나있다.

반대로 일반인이 작성한 제목에는, 앞뒤로 srtong 이라고 하는 정보가 아닌, 그냥 진하게 표시한다는 태그와 중간의 font-size:22px 이라는 CSS 라는 언어로 디자인적으로만 꾸며져 있는 것을 볼 수 있다.

위 일반인이 적은 글과 새로 적은 글은 둘 다 같은 동급으로 여겨진다. 이는 글의 형식이 차이가 없다는 뜻이다.

아래 지식인이 적은 글은 < h3 > 라는 태그가 들어간 형식의 글이기 때문에

위의 텍스트와 아래 텍스트는 완전히 격이 다른 글이라고 할 수 있다.

일반인이 쓴 글의 형식 VS 지식인이 쓴 글의 형식 을 위 화면으로 보았을 때, 검색엔진을 통해 이의 차이점을 쉽게 알아낼 수 있는데

" coding " 이라고 검색했을 때 더 상위 페이지 항목에 제목으로 노출되어 나오는 사이트는 오른쪽의 태그가 포함된 형식의 coding 글이 나올 확률이 매우 높다.

왼쪽의 일반인이 쓴 시각적으로만 제목처럼 보이는 coding 이라는 글이 있는 사이트는 100페이지 뒤까지 찾아봐야 겨우 나올 수도 있다.

오늘날 현대사회에서 검색엔진이 차지하는 위상은 너무나도 크기 때문에 검색엔진에 노출이 되지 않는다는 것은 =실질적으로(현실적으로) 존재하지 않는다. 라는 의미를 갖는다. 우리가 웹을 만들면서 화려하게 만들고 싶고 더 편리하게 만들고 싶고, 여러 욕심이 생기겠지만 훨씬 더 중요한 것은 바로 웹이 갖고 있는 본래의 의미, " 정보 " 라는 것을 탄탄히 하는 것이 훨씬 더 중요한 이슈가 될 수 있다. 경우에 따라서는 문서를 예쁘게 보이게 하기 위해서 이미지로 글을 쓰는 경우가 많이 있다. 그러나 이렇게 할 경우 검색엔진에는 존재하지 않는 페이지가 된다. HTML을 의미에 맞게 정확하게 사용한다는 것은 비즈니스적인 측면에서 생명줄과 같이 중요한 문제라는 것을 우리는 인지해야 할 필요가 있다.

HTMl이 중요한 또 하나,

웹의 핵심적인 철학은 접근성이다.

"웹은 모든 운영체제에서 동작하고 웹 페이지의 소스코드는 누구나 볼 수 있고 웹은 저작권이 없는 순수한 공공재이다. 바로 이것들이 웹을 다른 기술들과 구별되는 특별한 기술로 만드는 것이라고 생각한다." (강사의견)

이러한 개방성을 접근성, 영어로는 accessibility 라고 한다.

웹이 중요하게 생각하는 접근성 중에 하나는 신체적인 장애가 있는 분들도 정보로부터 소외되지 않도록 노력해야 한다는 것이다.

예를 들어 시각장애가 있는 분들은 시각적인 정보를 청각화해서 정보를 접하게 되는데 '스크린 리더' 라는 프로그램이나, 각종 보조장치를 이용해서 정보를 접하게 된다.

그런데 웹페이지를 만들때 웹페이지를 예쁘게 만들고 싶다는 생각에서 문자까지 통으로 이미지로 만든다면 시각장애가 있는 분들에게는 존재하지 않는 정보가 된다.

시각장애인을 배려하지 위한 여러가지 기술과 테크닉이 있으나, 그 중요한 첫 출발은 HTML의 태그를 정확히 알고 의미에 맞게 사용하는 것이다.

우리가 이렇게 한다면 우리도 모르게 누군가에겐 큰 도움을 줄 수 있는 것이다.

이렇게 HTML은 비즈니스적인 측면에서 중요할 뿐만 아니라 휴머니즘적인 측면에서도 매우 중요한 기술이라고 볼 수있다.

11) 속성 이해하기 + 이미지 (최후의 문법 속성 & img)

지금까지 우리는 html의 가장 중요한 문법인 '태그'를 배워보았다.

이번 시간에는 '속성' 이라고 하는 태그의 심화된 문법을 배울 것이다.

+인기 있는 태그 img 도 같이 배워보자.

다음은 왼쪽의 웹페이지 화면과 오른쪽 코드편집프로그램 화면이다.

글만 있으니 뭔가 답답해보인다. 어떤 이미지를(사진을) 웹 페이지에 포함시킬 때 사용하는 태그의 이름은 < img > 이다.

*img 는 image 의 줄임말이다.

코드편집화면의 내용 중간에 < img > 라고 적고 웹 페이지를 새로고침 해보니, 아무것도 바뀌지 않았다.

이유는, 그냥 < img > 라는 태그만 입력하면 어떤 이미지를 보여줄 건지에 대한 얘기가 없기 때문이다.

이처럼 태그의 이름만으로는 정보가 부족할 때가 있는데, 태그라는 문법을 만든 컴퓨터 공학자들은 이를 인식하고 새로운 문법을 출현시키게 된다.

어떤 이미지인지를 알려주기로 약속된 속성이 바로 source 이다. 공학자들은 이대로 사용하기엔 용어가 길기 때문에 " src " 로 줄여서 쓰기로 하였다.

그리고 " " 따옴표 안에 우리가 원하는 이미지의 주소를 입력해주면 웹브라우저가 적혀있는 주소를 저 위치에 이미지로서 표현해주게 된다.

(강사추천사이트) https://unsplash.com/

먼저 이미지를 가져오기 위해서 저작권없는 무료 이미지 사이트에 접속한다.

coding 이라고 입력 후

연습으로 사용할 이미지 하나를 고른 뒤

파일을 저장해주는데 저장경로는 바탕화면에 만들었던 web 폴더안에 저장해준다.

파일명은 coding 으로, 이름 뒤에 .jpg 이미지 파일 형식을 같이 입력해준다.

-> coding.jpg

그런다음 따옴표 형식 안에 파일명을 입력해준다.

< img src = " coding.jpg " >

Ctrl + S 로 저장.

웹페이지에서 나오는 이미지의 사이즈가 엄청 큰 상태인 것을 볼 수 있는데, 사이즈를 조정하기 위해

뒤에 width = "450" 이라고 입력해주고 저장 후 새로고침 해본다.

사이즈가 그래도 크게 나온다면 입력값에 100% 로 입력하자.

웹 페이지에 보여지는 이미지가 자동으로 100% 크기에 맞게 사이즈가 맞춰지게 된다.

< img > 태그를 통한 속성이라는 문법 정리

속성

위의 src="coding.jpg" 와 width="100%" 을

우리는 속성(Attribute) 이라고 부른다.

그리고 src="coding.jpg" 와 width="100%" 는 누가 먼저 앞쪽에 써져 있고 없고 위치의 상관이 없다.

태그가 태그의 이름만으로는 정보가 부족할 때 이러한 속성을 통해 더 많은 의미를 부가할 수 있다.

8) 통계 (통계에 기반한 학습)

통계를 기반으로 해서 공부하는 방법에 대해서 배워보자.

HTML에는 현재 최신 버전에서 약 150개 이상의 태그가 존재한다. 우리는 150개의 태그를 다 외워야 할까? - NO

혁명적 변화로 인해서 우리가 태그가 뭔지에 대해서 알고 있다면, 사실 모든 태그를 알고 있는 것과 다름없다. 검색이라는 엔진을 통해 우리는 1분도 안되서 찾을 수 있기 때문이다.

그럼에도 불구하고 태그를 하나도 모르고 있다면 우리는 매우 불편할 것이다. 어떤 태그들은 어느정도 지식이 있어야 이해 할 수 있는 것들도 있다.

이번 학습내용은, 기본적으로 밑천으로서 가지고 있을 만한 태그가 무엇인가를 스스로 판단할 수 있게 하기 위한 것이라고 보면 된다.

구글에서는 전 세계에 있는 수많은 웹 페이지를 분석한다. 그 중에서 중요한 통계들을 공개한 적이 있었는데, 아쉽게도 지금은 사라졌으나 이 정보를 기반으로 해서 내용을 보기 좋게 정리정돈한 사이트가 있다.

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

이라는 사이트인데,

사이트의 내용을 보면 전 세계에 있는 수 많은 웹 페이지들이 몇가지 종류의 태그로 이루어져 있는지 통계로 보여주고 있다.

통계에 따르면 약 25~26개 정도의 태그를 가지고 있는 웹페이지가 가장 많다고 나와있다.

우리는 현재까지 < strong > , < u > , < h1 > 등의 태그를 알고 있다. 여기서 h1은 h1~h6 총 6개까지의 태그가 있기 때문에 총 8개의 태그를 알고 있는 셈이다.

웹이 세상에 처음 태어났을때는 태그가 18개 정도만 있었다. 우리는 이미 충분히 많이 알고 있다고도 볼 수 있겠다.

위의 그래프는, 여러 태그들이 웹페이지에서 사용되는 랭킹을 보여주는데

이 중에서 1등은 head 태그이다. 우리는 수업의 어떤 방향성 때문에 아직 head 태그를 배우지 않았으나 뒤에서 차차 배울 예정이다.

또 우리가 알고 있는 태그에는 55.8%의 비율로 h1, h2 태그도 보인다.

다음으로 strong 태그도 아래에 있다.

이번수업에서 우리는 통계적으로 가장 많이 쓰는 태그의 빈도수를 이렇게 그래프로 확인할 수 있었다.

9) 줄바꿈 (줄바꿈 : br vs p)

이번 9강에서는 인기 있는 2가지 태그에 대해 배울 것이다.

이 두 태그는 서로 경쟁 관계에 있는데 우리는 어떤 경쟁 관계에 있는가를 통해서, 정보로서 웹이라는 관점에 대해서 생각해보는 계기가 될 수 있다.

또, CSS 라는 기술이 깜짝 출연할 예정이다. CSS를 배우는 수업은 아니지만 CSS를 지배하는 혁명적인 규칙을 접해보는 시간도 가지도록 한다.

저번 시간까지 진행하던 웹페이지를 보면, 페이지에 보충 내용이 좀더 들어가야 할 것 같음을 느끼고

내용을 추가한 뒤 왼쪽의 웹 페이지를 새로고침 한다.

그런데 결과가 나타나는 왼쪽화면에서는 내용부분이 어딘가 답답하게 느껴진다. 이유는 내용과 내용을 구분하는 단락이 없어서이다.

오른쪽 코드에디터 프로그램에는 분명히 줄바꿈이 되어 있음에도 불구하고, 페이지에는 반영되지 않았다.

검색엔진을 통해 위 추천검색어를 검색해보자.

** html new line tag** " 새로운 라인의 태그 " 라는 뜻인데,

검색을 통해 찾아보니, 이 뜻의 태그는 < br > 이라고 나와있다.

오른쪽 코드편집 화면에서 내용 중간에 < br > 이라고 입력하고,

줄바꿈은 의미가 없기 때문에 없애버리고 글을 이어준다. 그런 뒤에 새로고침을 눌렀을 때

왼쪽의 웹사이트 페이지에서 br 태그의 앞 뒤 문단으로 문장의 줄바꿈 한줄이 아래로 떨어진 것을 확인할 수 있다.

br 태그를 연속해서 두번 입력하게 되면 줄바꿈이 한번 더 생기면서 단락이 생긴 것 처럼 만들어지게 되고

br 태그를 세번 연속해서 쓰게 되면 좀 더 여백이 강조된 단락을 표현할 수 있게 된다.

상당히 자주 쓰는 태그로, 단락을 쉽게 표현할 때 < br > 태그를 이용하면 되는데

이 br 태그는 특징적인 부분이 하나 있다.

우리가 지금까지 배웠던 태그들 중 한 예로 < h1 > 태그는 어디서부터 ~ 어디까지가 < h1 > 이다 라는 것을 설명하기 위해서 열리는 태그와 닫히는 태그가 쌍으로 존재했다. 하지만 < br > 태그는 단지 줄바꿈이라고 하는 시각적인 의미만을 가지고 있기 때문에 무언가를 감쌀 필요가 없다.

그래서 < br > 태그는 닫히는 태그를 쓰지 않는다.

그런데 이 < br > 태그 말고도 HTML을 만든 사람들이, 단락을 표현할 때 쓰라고 어떤 특정한 태그를 따로 만들어뒀는데

이 태그를 우리가 직접 찾아보기 위해

검색엔진에 " html paragraph tag " 라고 검색한다.

여기서 " paragraph " 는 단락 을 뜻한다.

검색하니 < p > 라는 태그를 찾을 수 있었다.

이 < p > 태그는 paragraph 의 첫번째 앞글자를 땄다.

< p > 태그를 사용하기 앞서 기존의 < br > 태그를 모두 지워준다.

< p > 태그는 < br > 태그와는 다르게 어디서부터 어디까지가 한 단락 인지를 표현할 수가 있기 때문에 열리는 태그와 닫히는 태그가 존재한다.

오른쪽 코드 편집화면에서 첫 단락과 두번째 단락으로 나눌 앞부분에 열리는 태그 < p > 와 끝부분에 닫히는 태그 < / p > 를 입력해준다.

2개의 < p > 태그와 2개의 단락으로 나누어 준 뒤 저장 후 왼쪽의 웹페이지에서 새로고침을 해보자.

결과는 아까 < br > 태그를 썼을 때와 별반 다르지 않은 것을 볼 수 있다.

하지만 사용한 태그는 분명히 다르고, 이 각각의 태그 중에 이 맥락에서는 < p > 태그를 쓰는것이 더 좋은 결정이 될 수 있다.

< p > 태그는 이 웹페이지를 좀 더 정보로서 가치 있게 만들어 주는데

구체적으로 설명하자면

< br > 태그는 단지 줄바꿈 일 뿐인데 < p > 태그는 우리가 선택한 저 만큼이 단락 " 이다 " 라는 것을 의미론적으로 표현해 줄 수 있기 때문이다.

< br > 태그와 < p > 태그의 비교

< p > 태그에는 단점이 있다 < br > 태그는 줄바꿈을 많이 하고 싶을 때, 이 태그를 여러번 많이 사용하면 되지만 < p > 태그는 정해진 여백 만큼이 벌어지게 되 있어서 시각적으로는 자유도가 떨어진다.

하지만 이 경우 CSS 라는 기술이 있는데 CSS에서는 태그와 태그 사이의 여백을 나타내는 코드가 있다.

태그 < p > 앞에 style="margin-top:45px;" 를 입력하고 새로고침을 하면 왼쪽 웹페이지의 원하는 단락의 윗부분에 여백이 생기게된다.

여백은 CSS라는 코드를 이용하면 이와같이 더 섬세한 조절이 가능하다.

우리는 기본적인 < p > 태그와 < br > 태그를 보통 이용하게 될 것이지만, 더 정교한 작업이 필요할 경우에는 CSS 코드를 이용하는 것이 상황에 따라 사용되는 경우도 많다.

생활코딩 web 6~7강 까지의 학습 내용 정리.

6) 태그 표시하기 (기본문법 태그)

6강에서는 위의 web사이트의 빨간 박스안 내용글을 어떻게 표시하는지 배워보고 web 브라우저에 나타내보도록 하겠다.

내용으로 쓸만한 글은 한글이나 영어 상관없이 본인 자유형식으로 사용 가능하다.

Atom 에디터 편집 프로그램의 빈 화면에서

내용글에 채워질만한 아무 글을 적는다. 나는 네이버에 html 이라고 검색하여 나온 설명글을 복사해서 붙여넣기하여 가져와보았다.

그리고 이 상태에서 Ctrl + S 를 눌러 저장한다.

우리가 1~5강까지 학습용으로 만들고 활용중인 1.html 연습 사이트에서 새로고침(F5)을 하면 내가 Atom에서 저장한 내용글이 그대로 나타난다.

Atom 프로그램에서 작성한 내용글이 웹 페이지로 결과가 나타남. (HTML 언어의 문법에 맞게 작성된 = 코드(Code) or 소스(Source))

여기 내용 중에, 우리는 어떤 한 문구를 중요한 문장으로 표시하고 싶을때 표시하고 싶은 그 문구를 진하게 설정할 수 있다. 지금 이 단락에서 보여지는 진한글씨들처럼 말이다.

그것을 어떻게 html 에서는 표시하는지 배워보자.

다시 Atom 에디터 편집 프로그램으로 돌아와서, 나는 가져온 내용 중 제일 앞쪽에 있는 문구를 진하게 표시할 예정이다.

" < , > " 이 기호는 문장 부호 표시인 묶음표 기호로, 위와 같은 태그를 입력할 때 사용하며 " / " 슬래시 기호는 태그의 마지막 사용입력시 닫히는 태그 기호 로 사용한다.

글자를 진하게 표시할 때의 태그단어는 strong 이며 태그의 앞 뒤로 꺽새(묶음표 기호)를 붙여 표시한 " < strong > 가 진하게 표시한다는 입력어 태그가 된다.

< , > = 꺽새 = 묶음표 기호 = 입력해야할 태그가 들어갈 괄호기호

열리는 태그는 앞의 < strong > 이고, 내용 뒤의 슬래시 기호가 포함된 < / strong > 은 닫히는 태그라고 한다.

• 태그(Tag)의 2가지 특징
• 열리는 태그와 닫히는 태그가 있다.
• 앞에 있는 것과 뒤에 있는 것을 구분하기 위해, 닫히는 태그에는 " / " 슬래시 기호를 붙여 사용한다.

여기까지 입력한 다음 Ctrl + S 를 눌러 저장하고, 1.html 사이트를 켜서 새로고침을 하면

내가 강조하고 싶은 문구가 진한글씨로 표시된 것을 결과물로 볼 수 있게된다.

이번엔 단어에 밑줄 표시하는 방법을 배워보자. 나는 빨간 박스로 표시한 단어에만 태그를 이용하여 밑줄이 생기게 해볼 예정이다.

밑줄은 영어로 underline 이다. 태그에서는 underline 의 첫번째 글자인 " u " 를 따서 사용한다.

밑줄 치고자 하는 단어의 앞에 열리는 태그인 < u > 닫히는 태그인 < / u > 를 입력하고 Ctrl + S 로 저장.

사이트를 새로고침하면 내가 원하는 단어 아래 밑줄이 쳐져 있는 것을 확인할 수 있다.

6강 학습정리요약

이러한 문법인 TAG를 우리는 일상에서 쓸까, 안쓸까? 옷을 샀을때 붙어 있는 딱지를 우리는 TAG라고 부른다. 이 태그는 우리의 옷을 설명한다.

strong과 u와 같은 열리는 태그와 닫히는 태그는, ** '안에 있는 내용글이 중요하다. 진하게 표시해야 된다.' 라는 것을 **설명할 수 있다.

HTML과 같은 언어를 만든 사람들은 이렇게 생긴 문법을 어떻게 설명해야 할 것인가에 대해 생각해봤을 것이다. 그리고 이것의 이름을 정할 때 한번도 들어보지 못했던 이름을 정하는 것과 우리가 일상에서 자주 쓰는 것 중. 저 문법과 성격이 유사한 것을 비유적으로 사용한 것 중에 어떤것이 더 쉬울까? 를 본다면 당연히 일상에서 자주 쓰는, 비유적으로 사용하는 것이 더 사용하기 쉬울 것이다.

우리 일상과 밀접한 관계에 있는 용어일 가능성이 굉장히 많은 것이 컴퓨터 공학 또는 프로그래밍 언어의 용어 공부이다. 물질을 기반으로 하지 않고 논리적인 것을 기반으로 하기 때문에 사람들에게 설명해주고 사람들이 그것을 받아들이기 위해서는 여러가지 비유와 은유를 사용할 수 밖에 없는데 이는 마치 '시'와 유사하다고도 볼 수 있다.

7) h1, 제목태그 (혁명적인 변화)

우리는 태그를 배우기 전과, 태그를 배우고 난 후로 나눌 수 있다.

지금 보여주는 이 웹 사이트는 W3C 라고 하는 국제 민간 표준 기구의 홈페이지이다. 웹을 만드는 곳이라고 생각하면 된다.

W3C 라는 사이트가 어떤 코드로 만들어졌는지 보고 싶다면, 페이지의 오른쪽 마우스 - 페이지 소스 라는 것을 눌러서 볼 수 있다.

위와 같이 이 웹페이지는 어떤 HTML 코드로 이루어져 있는데, 우리가 태그를 배우기 전에 이걸 본 것과 태그를 배우고 난 후의 이것을 보았을때. 우리는 굉장히 다른 상태에 있다고 본다.

위의 많은 코드 중 h1 이라는 코드를 발견했고 Atom 에디터로 옮겨 가져와서 학습을 진행해보자.

(강의화면)

여기서 h1을 제외한 나머지는 지우고

< h1 > W3C < /h1 > 만 남겨놓았다. h1은 무엇을 나타내는 것인지는 모르지만, 우리는 괄호 안의 h1 표시가 태그 라는 것임을 알 수 있다. 그리고 지금부터는 처음 보는 모르는 태그를 보면, 우리는 검색엔진을 통해 검색이 가능하다.

(강의에서 강사가 추천하는 검색 키워드)

본인에게 익숙한 검색엔진을 켜서 검색하면 되는데, 나는 구* 을 통해 검색해 보았다.

검색해보니 h1 은 제목을 뜻하는 태그였다. 그리고 h1 이 첫번째로 제일 큰 제목, h2 가 두번째로 큰 제목, h3 가 세번째로 큰 제목 순으로 단계별로 나뉘어 표시할 수 있음을 알 수 있었다.

참고로 h1 ~ h6 까지 있고 h7은 없다.

Heading tag 의 앞글자를 딴 h는 머리글 태그를 의미한다.

h1이 가장 큰 제목이고, 뒤에 붙은 숫자가 커질수록 글자가 작아진다. (위사진) 1이 글자가 가장 크고, 6이 가장 작아지는 단계식이다.

h1태그를 사용해보기 위해, 오른쪽 에디터의 맨 윗줄에 HTML 이라고 적고 줄바꿈을 해준다. Ctrl + S 를 눌러 저장한 뒤 사이트에서 다시 새로고침을 하니

줄바꿈도 되지 않았고, 글씨도 작은 상태 그대로 사이트에 나타나졌다.

HTML 앞에 태그를 입력해보자. 가장 큰 글자의 제목으로 하기위해선 h1 을 적으면 된다. < h1 > 을 앞에, < / h1 > 을 뒤에 입력하고 Ctrl + S (저장)

웹사이트에서 새로고침해보면

왼쪽 사이트 화면의 HTML 글자가 커지면서 제목처럼 된 것을 볼 수 있다.

태그가 무엇인지 기초적인 교양만을 알고 있어도 충분히 우리는 많은 것을 배울 수 있다.

이번 7강에서는 웹사이트의 페이지 소스에서 어떤 코드를 사용했는지 보는 방법과 검색엔진을 통해 이 태그가 무엇인지, 어떻게 쓰이는지, 어떤 것과 같이 쓰는지 알아보는 방법 제목 태그는 h1 형식으로 표시하며, 크기별로 h1~h6 까지 있는 것에 대해 알 수 있었다.

1~2) 강사님 인사, 수업소개, 프로젝트 동기 설명

3) 기획하기. (기획)

무엇인가를 만들기 전에 우리는 무엇을 만들지 상상하고 계획하고 구체화 하는 과정을 거친다. 만들기 전에 무엇을 만들것인가를 설계하는 과정을 기획이라고 한다. 현업에서는 이를 기획자라고 부른다.

->위 그림은 내가 기획하고자 하는 것 (머릿속에 상상한것, 시각적으로 표현하고싶은것)

4) 구현하기. (코딩과 HTML)

구현하기 앞서, 미래에 우리가 어떤 일을 하게 될지 미리 보자.

화면이 2개로 나뉘어져 있다. 어떤 쪽이 사람이 하는 일이고, 어떤 쪽이 기계가 하는 일인지 분리해서 생각해봐야한다.

어떤 것이 원인이고, 어떤 것이 결과인지 추론해보자. (강의 내용중에 가장 중요한 부분)

오른쪽 화면이 사람이 하는 일이면서 = 원인 왼쪽 화면이 기계가 하는 것 = 결과

원인(사람이 하는 일)을 부르는 표현에는 여러가지가 있다.

Code : 부호/신호의 의미인 <코드> Source : 원천이라는 뜻의 <소스> Language : 약속이라는 의미 (기계와 사람이 이해할 수 있는 공통의) <컴퓨터 언어>

결과(기계가 하는 일)을 부르는 표현에는 아래와 같이 있는데

Application (애플리케이션, 응용프로그램) -> 줄여서 App(앱) / Program(프로그램) -> 구체적으로는 Webpage(웹페이지) -> 웹페이지가 모여있으면 Website(웹사이트) 등의 표현이 있다.

이러한 다양한 표현들은 같은 대상을 바라보는 관점에 따라 표현이 조금씩 달라진다.

즉, 원인(사람이 하는일)인 코드(부호,신호)를 통해 결과(기계가 하는 일)를 만든다는 것이 코딩을 이해하는 핵심이다.

우리가 하고자 하는 것은 웹페이지를 만들고자 하는 것. 세상에는 다양한 종류의 코드가 있다. C, C++, 자바, 자바스크립트, 파이썬 등

이 중에서 웹페이지를 만드는 코드는 " HTML " 이라는 이름의 코드이다.

* HTML이라는 언어에 대한 2가지 측면

1. HTML 언어는 쉽다.
2. HTML 언어는 중요하다.

모든 디지털 정보가 담기는 가장 거대한 글은, 바로 웹페이지 이다.

이러한 웹페이지를 만드는 컴퓨터 언어는 HTML(HyperText Markup Language) 이다.

(강사가) 웹을 좋아하는 또 다른 이유.

우리는 한글을 사용할 때, 세종대왕에게 라이센스 비용을 지불하는가? - NO 영어를 사용할 때 누군가에게 로얄티를 지불하는가? - NO

이유는 인간의 이러한 언어들이 저작권이 없는 PUBLIC DOMAIN 이기 때문이다.

이는 WEB도 마찬가지이다. WEB을 만든 팀 버너스리는 WEB을 어떠한 저작권도 존재하지 않는 완전한 자유를 의미하는 PUBLIC DOMAIN 으로 선언했다.

5) 코딩하기. (HTML 코딩과 실습환경 준비)

HTML 언어를 이용해서 코딩을 배워보자.

배우기 전 준비물은 다음과 같다.

1. 웹브라우저가 있어야함
2. HTML 이라는, 컴퓨터와 사람도 이해할 수 있는 컴퓨터 언어의 문법에 맞게 코드를 작성할 프로그램이 필요함 = TEXT 편집 프로그램

(강사추천) Atom 이라는 에디터 편집 프로그램을 추천함. https://atom.io 또는 추천 검색어 : HTML Editor or Best HTML Editor 2022 등

(개인적으로 나는 강사를 따라 Atom 을 이용해서 설치했다.)

-> 프로그램 설치후 (위 사진)

-> Atom 아이콘 모습 (위")

-Atom 실행 후 첫 모습 (위")

-Atom 실행 첫화면에서 X를 눌러 박스들을 전부 다 꺼준다. (위")

(위의 빈 화면에서) 우리는 오른쪽의 에디터에서 HTML 파일을 만들 것이고, 그 결과를 웹브라우저에 출력할 것임.

1. 바탕화면에 새 파일을 하나 생성한다.

바탕화면 - 오른쪽 마우스 클릭

2. 새 파일 이름은 WEB 으로 수정

3. 다시 Atom 편집 프로그램으로 돌아와서,

File(파일) - Open Foder(오픈 폴더)를 클릭한다. 파일 열기 단축키는 Ctrl + Shift + O 임.

4. 바탕화면 - 새로 만들어뒀었던 WEB 폴더 클릭 - 폴더 선택 클릭

5. 왼쪽의 Project 칸은, WEB 이라고 하는 바탕화면에 생성한 디렉토리를 관리하는 화면창을 말한다.

6. 새 파일을 하나 만들건데, Project 칸의 WEB 폴더 오른쪽 클릭.

New File 클릭. 파일 이름은 1.html 이라고 작성한다.

7. 크롬일 경우 새 창을 킨 뒤 빈 화면에서 단축키 Ctrl + O 를 누르면 파일을 선택하는 창이 뜬다.

바탕화면 - WEB 폴더 안의 1 파일 선택 후 열기

8. 왼쪽 화면과 오른쪽 화면을 같이 켜준 뒤, 오른쪽 편집 프로그램에 hello web 을 입력하고 저장한다. 단축키는 Ctrl + S

9. 저장 후에 왼쪽의 웹 브라우저에서 새로고침(또는 F5) 누르면 오른쪽 편집 프로그램에서 입력했던 글이 나타난다.

10. 여기까지, 웹 페이지를 만들고 만들어진 웹 페이지를 웹 브라우저로 실행해보았다.