안녕하세요, @stunstunstun 입니다. 지난 강의에서는 프로그래밍 언어에 대해 살펴보았습니다.

지금부터는 이론적인 내용보다는 실습위주의 내용으로 진행할까 합니다. 그 시작으로 HTML이라는 간단한 마크업 언어를 통해 아주 간단한 프로그램을 직접 만들어 컴퓨터와 대화해봅니다.

이번 강의 목적은 HTML의 문법을 익히는 것이 아니라 처음 코딩을 경험해보는 것에 있습니다. 그리고 우리가 보는 웹 페이지는 어떻게 보여지는 걸까?라는 호기심을 갖고 계신 분이라면 그 답을 찾는데에 있습니다.

HTML

HTML은 우리에게 아주 익숙한 단어이지요? 여러분이 보시고 계시는 스팀잇이나 네이버 같은 웹 서비스의 화면은 실제로는 HTML이라는 문서로 이루어져 있습니다.

어떤 브라우저를 사용하고 계시냐에 따라 다르지만 지금 바로 브라우저에서 오른쪽 마우스 버튼을 클릭하고 View Page Source, 소스 보기와 같은 메뉴를 선택해보세요. 우리가 보는 화면과는 낮선 아래와 같이 <html>로 시작하는 문서가 보이게 됩니다. 이것이 HTML이라는 마크업 문서입니다. 웹 페이지의 기본적인 구조를 담당하게 되죠.

이렇게 우리에게 익숙한 웹 페이지 화면은 누군가 HTML을 통해 화면을 구성한 뒤 서버에 저장합니다. 그리고 인터넷을 통해 너무나 당연한듯이 모든 사람이 볼 수 있게 되는거죠 😃

직접 HTML 작성해 볼까요?

실습을 위해서 별도의 프로그램을 설치할 필요는 없습니다. 시대에 뒤떨어진 방식이죠, 아래의 주소로 접속합니다. 회원 가입은 생략하셔도 됩니다.

https://repl.it/languages/web_project

이전 강의에서 프로그래밍 언어는 인간과 컴퓨터가 대화하기 위한 언어라고 하였습니다. 접속하시면 왼쪽의 화면은 우리 인간이 HTML이라는 마크업 언어를 사용하게 되는 공간이구요, 오른쪽의 화면은 인간이 전달한 HTML을 컴퓨터가 해석해 화면에 출력해주는 공간입니다.

프로그래밍 언어는 우리의 상상을 컴퓨터를 통해 실현시켜 준다고 했으니, 먼저 이미지 하나가 화면에 출력되는 장면을 상상해 봅니다. 이미지는 아래의 주소의 이미지를 사용해보죠.

https://kendsnyder.com/wp-content/uploads/2016/08/post-44892276.png

네, 이 강의를 접속하셨을 때 보신 푸른색의 HTML 로고 이미지 입니다. 브라우저에서 접속하면 잘 보이시죠? HTML 문법으로는 컴퓨터에게 아래와 같이 전달할 수 있습니다.

<img src='https://kendsnyder.com/wp-content/uploads/2016/08/post-44892276.png' />

다시 아래의 주소로 돌아가 왼쪽의 화면의 <body></body> 사이에 복사/붙혀넣기 해보세요.

https://repl.it/languages/web_project

<body>
  <img src='https://kendsnyder.com/wp-content/uploads/2016/08/post-44892276.png' />
  <script src="index.js"></script>
</body>

그리고 RUN ▶️ 버튼을 누르시면 컴퓨터에게 전달됩니다. 어때요? 오른쪽 화면에 이미지가 잘 보이시나요?

우리가 스팀잇을 통해 작성하는 마크다운 문서는 화면에 어떻게 보이게 될까요?

우리는 스팀잇에서 Markdown 문법을 통해 문서를 작성하고 있습니다. Markdown은 HTML보다 더욱 쉽게 문서를 작성할 수 있게 해주지만 만들지만 우리에게 보일 때는 HTML로 변환되어 화면에 보이게 됩니다.

Markdown

# 제목
## 소제목
본문입니다.
![이미지](https://kendsnyder.com/wp-content/uploads/2016/08/post-44892276.png)

HTML

<h1>제목</h1>
<h2>소제목</h2>
<p>본문입니다.</p>
<p><img src='https://kendsnyder.com/wp-content/uploads/2016/08/post-44892276.png'></p>

최종적으로 HTML 문서는 우리에게 아래와 같이 보이게 되는 것이죠!

제목

소제목

본문입니다.

`어때요, 이해 되셨나요?`

프로그램을 만드는 것은 복잡해보이지만 이렇게 이미지가 출력되는 것을 상상하고 프로그래밍 언어를 통해 컴퓨터와 대화하는 것에서 크게 벗어나지 않습니다. 다만 우리가 사용하는 프로그램들은 더욱 많은 기능을 제공하고 있을 뿐이예요.

지금까지 HTML을 통해 첫 프로그램을 만들어 보았습니다. HTML의 다양한 문법은 아래의 참고자료에서 충분히 얻으실 수 있습니다.

우리의 목적은 파이썬을 익히는 것이기 때문에 다음 강의에서는 파이썬을 통해 본격적으로 프로그래밍을 해보는 시간을 가지게 됩니다. 읽어 주셔서 감사합니다 🤩

참고자료

https://www.w3schools.com/html/

[안녕 프로그래밍 #2] HTML을 통해 첫 프로그램 만나기

HTML

직접 HTML 작성해 볼까요?

우리가 스팀잇을 통해 작성하는 마크다운 문서는 화면에 어떻게 보이게 될까요?

제목

소제목

어때요, 이해 되셨나요?

참고자료

`어때요, 이해 되셨나요?`