HTML 편 - 1일차

 

1일차

 

 

---

01. 수업 소개

• 코딩, 웹, 인터넷, 컴퓨터라는 거대한 주제에 대한 탐험을 시작하기에 앞서 상상력이 필요하다.
• 다른 사람의 문제를 통해 코딩을 배우려는 학생이 아니라 나의 문제를 코딩으로 해결하려는 엔지니어라고 상상하라.
• 공부의 효용을 뇌에게 자주 증명해 보인다면 우리의 뇌는 공부를 좋아하게 될 것이다.
• 이 수업이 지식을 알려주는 것도 좋겠지만 그것보다는 공부와 친해지는 계기가 되었으면 정말 좋겠다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=tZooW6PritE

 

---

 

02. 프로젝트의 동기

• 2010년 저자는 직장에서 컴퓨터 프로그래머로 일하고 있었고, 프로그래머가 아닌 동료들과 함께 일을 하고 있었는데 난해한 개념 때문에 개발자들과의 소통에 어려움을 겪는 동료들이 있었다.
• 어느날 문득 직장 동료들에게 SQL이라는 컴퓨터 언어를 알려주고 싶다는 생각이 들어 강의를 열었고 반응이 나쁘지 않았다. 생각보다 재미 있었고, 점점 판이 커지기 시작하여 큰 규모로 일반인을 대상으로 강의하기 시작하였다.
• 강의는 귀한 일이었지만 하는 쪽이나 받는 쪽이나 너무 많은 돈과 시간을 써야했고 똑같은 이야기를 반복해야 하고, 멀리 있거나 시간이 되지 않는 사람들은 참석할 수 없는 한계를 느끼기 시작하였다.
• 그 쯤에 유튜브나 비메오 같은 온라인 동영상 서비스가 생겨나기 시작하였고, 컴퓨터 화면을 촬영하여 동영상으로 수업을 공유하기 시작함.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=Z7uBInm1PJY

 

---

 

 

반응형

 

 

03. 기획

• 우리가 뭔가를 만들기 전에 내가 무엇을 만들 것인가를 미리 상상하고 계획하고 구체화하는 과정이 필요하다.
• 이렇게 뭔가를 만들기 전에 무엇을 만들 것인가를 설계하거나 그려보는 과정을 '기획'이라고 하며, 이런 일을 하는 분들을 현업에서 '기획자'라고 한다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=QwCdCcsPVTQ

 

---

 

04. 코딩과 HTML

• 기획을 끝냈다면 이제 구현할 차례이다.
• 구현하기에 앞서 염두에 둬야 할 부분은 어떤 쪽이 사람이 하는 일이고 어떤 쪽이 기계가 하는 일인가를 분리해서 생각하는 것이다. 또 어떤 것이 원인이고, 어떤 것이 결과인지 추론해 보는 것이다.
• 사람이 하는 일, 다시 말해 원인을 가리키는 여러 가지 표현이 있다.
  • 부호 또는 신호라는 의미에서 코드(code)
  • 원천이라는 뜻의 소스(source)
  • 기계도 이해할 수 있고 사람도 이해할 수 있는 공통의 약속이라는 의미에서 언어(language), 그중에서 프로그래밍 언어라는 표현을 쓴다.
• 기계가 하는 일, 다시 말해 결과를 가리키는 여러 표현이 있는데,
  • 애플리케이션(application), 줄여서 앱(app)
  • 응용프로그램, 줄여서 프로그램(program)
  • 조금 더 구체적으로 웹 페이지(web page), 웹 페이지가 모여 있다면 웹사이트(website)라는 여러 가지 표현이 있다.

 

• 우리가 하고자 하는 일은 웹 페이지를 만드는 것이다.
• 세상에는 다양한 종류의 프로그래밍 언어가 있다.
  • C, C++, 자바(Java), 자바스크립트(JavaScript), 파이썬(Python), PHP, SQL 등등...
  • 그중에서 웹 페이지를 만드는 컴퓨터 언어는 바로 HTML(HyperText Markup Language)이라는 언어이다.
• HTML은 두 가지 측면에서 좋다.
  • 그중 하나는 쉽다는 것이다. 앞으로 배울 어떤 프로그래밍 언어도 HTML보다 어려울 것이라 확신할 수 있다. 그리고 이 언어의 문법을 완전히 다 배우는데는 10분도 채 걸리지 않는다.
  • 다른 한 가지 측면은 중요합니다. 인류가 생산하는 거의 모든 디지털 정보가 담기는 가장 거대한 그릇은 바로 웹 페이지이며, 그 웹 페이지를 만드는 프로그래밍 언어가 HTML이다. HTML은 쉬우면서 중요하다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=MLXlXCwA0T4

 

---

 

05. HTML 코딩과 실습 환경 준비

• 코딩을 하기 위해 필요한 준비물은 크게 두 가지이다.
  • 하나는 웹 브라우저
  • 또 하나는 HTML이라는 컴퓨터도 이해할 수 있고 사람도 이해할 수 있는 프로그래밍 언어의 문법에 맞게 코드를 작성해야 하는데 그 코드를 작성할 프로그램이 필요하다. 이러한 프로그램을 편집하는 프로그램이란 뜻에서 에디터(editor)라 한다.
• 컴퓨터에는 훌륭한 에디터가 이미 내장되어 있다.
  • 윈도우에는 메모장
  • macOS에는 텍스트 편집기
  • 리눅스에는 gedit
• 각 에디터가 가진 기능이 원래 코드를 작성하는 용도는 아니기 때문에 코드를 작성하는 데 최적화되어 있는 전문적인 도구를 사용한다.
• 저자가 선택한 도구는 Atom(https://atom.io/)이다.

Sunsetting Atom

• Atom 말고 다른 에디터를 쓰고 싶을 수 있으며, 저자가 Atom을 쓰는 이유는 그냥 개인적인 선호일 뿐이다.
• 현 시점에서 최신 에디터가 무엇인지 궁금하다면 2022년을 기준으로 'best HTML editor 2022'이라고 검색하면 아마 최신 에디터를 찾을 수 있을 것이다.

 

• Atom을 설치 완료한 후 바탕화면에 'web'이라는 디렉터리를 만든다.
• Atom을 실행하여 작업 디렉터리를 web으로 선택한 다음 작업을 준비한다.
• '1.html'이라는 파일을 만들고 웹 브라우저(ex. chrome)을 열고 'Ctrl + O'(파일열기)를 눌러 1.html을 열면 하얀색 화면이 나온다.
• Atom의 오른쪽 화면에서 'hello web'이라 입력하고 저장(Ctrl + S)한다.

hello web

• 그리고 웹 브라우저로 와서 페이지를 새로고침(F5)했을 때 'hello web'이라는 글자가 나타나면 웹 페이지를 만드는 일을 했고, 만들어진 웹 페이지를 웹 브라우저로 실행 또는 열어본 것에 성공한 것이다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=iRZJHhjh8DU

 

---

 

 

 

 

 

06. 기본 문법과 태그

• 아래와 같은 텍스트를 '1.html'이라는 파일에 붙여넣는다.

Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.

• 그리고 저장한 후 웹 브라우저를 새로고침하면 에디터에 작성한 내용이 원인으로 작용해서 브라우저의 웹 페이지가 만들어진다.
• 에디터에 작성된 내용은 코드나 소스, 좀 더 구체적으로 설명하면 HTML이라는 프로그래밍 언어의 문법에 맞게 작성된 코드나 소스인 것이다. 그 결과인 웹 페이지가 브라우저에 표시되는 것이다.

 

• 웹을 지배하는 가장 중요한 문법이자 세상에서 가장 쉬운 문법은 바로 태그(tag)이다.
• 일단 경험적으로 'creating web pages'를 진하게 표시하기 위해서 아래와 같이 작성해보자.

Hypertext Markup Language (HTML) is the standard markup language for <strong>creating web pages</strong> and web applications.

• 그리고 'creating web pages'에서 'web'이라는 글자에 밑줄을 쳐보자.
• 밑줄은 영어로 underline이고 이것의 첫번째 글자는 'U'이다. 아래와 같이 작성해보자.

Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.

• 저장 후 새로고침을 하면 해당 글자에 밑줄이 생긴 모습을 볼 수 있다.

 

• 지금까지 <strong>과 <u>라는 태그 두 가지를 배웠다.
• 앞에 있는 <strong>과 뒤에 있는 </strong>을 태그라 하며, 앞에 있는 태그를 열리는 태그, 뒤에 있는 태그를 닫히는 태그라고 한다. 이것을 구분하기 위해 '/'를 붙이는 것을 알 수 있다.
• 일상에서 태그라는 말은 옷을 사면 그 옷에 붙어 있는 딱지를 태그라고 하며, 옷에 붙은 태그는 그 옷을 설명한다.
• <strong>이라는 태그는 '중요하다', '진하게 표시해야 한다'라는 것을 설명한다.
• 이처럼 문법에 사용되는 용어는 대부분 비유적으로 사용되며, 용어가 어렵고 힘들게 느껴지면 사전을 찾아 어떤 의미인지 찾아보면 이해하기 쉽다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=9GkFI1ovBbU

 

---

 

07. 혁명적인 변화

• 공부에 대하여 오해한 것이 있다. 중요한 것은 어렵고, 쉬운 것은 사소하다는 생각이다.
• 이렇게 생각한 이유를 생각해보면 쉬운 것은 시험에 나오지 않았기 때문이었던 것 같다.
• 코딩을 하면서 느낀 것은 꼭 그런 것은 아니라는 것이다. 우리가 처음에 배우는 것은 너무나도 쉽지만 제일 중요한 것이다.

 

• https://www.w3.org/

W3C

• 위의 웹 페이지는 국제민간표준화기구의 홈페이지이다. W3C는 웹을 만드는 곳이라고 생각하면 된다.
• W3C라는 사이트가 어떤 코드로 만들어졌는지 알고 싶다면 웹 브라우저에서 마우스 오른쪽 버튼을 클릭한 후 [페이지 소스 보기]라는 항목을 누르면 이 웹 페이지가 어떤 HTML 코드로 이뤄졌는지 볼 수 있다.
• 그중 <h1>이라는 태그를 찾아서 필요 없는 부분을 다시 지우면 아래와 같다.

<h1>W3C</h1>

• W3C라는 단체명을 둘러싼 <h1> 태그가 무엇인지 아는가?
• <h1>가 어떤 태그인지를 모르지만 <h1>이 태그인 사실은 알고 있다.
• <h1>이 어떤 태그인지 검색을 통해 알아보자.
  • 검색 엔진을 켜서 'HTML h1 tag'를 검색하여 직접 <h1>이 무엇인지 찾아보자.
• 그 중 어떤 사이트가 나왔는데 그 곳에서 나온 예제는 아래와 같다.

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

• 이 예제를 웹 브라우저에서 확인해서 짐작해보자.
• 코드를 보면 h 뒤에는 숫자가 붙고, 숫자가 올라갈수록 글씨가 작아지며, h와 숫자가 나오는 태그를 쓴다면 일반적인 텍스트보다는 글씨가 더 두꺼워지고 줄바꿈이 되는 것을 경험적으로 알 수 있다.
• 그 후 <h1> 태그의 정의를 보면 'HTML headings'라고 되어있고, heading은 제목이라는 뜻이다.
• 따라서 <h1>부터 <h6>은 제목을 나타내는 태그라는 것을 알수 있다. 참고로 <h7>은 없다.

 

• 방금 배운 것을 이용하면 아래와 같이 제목을 넣을 수 있다.

<h1>HTML</h1>
Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=QoQsaUWx3EU

 

 

 

---

해당 글은 [생활코딩! HTML + CSS + 자바스크립트] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---