본문 바로가기
블록체인 및 경제/웹프로그래밍

[HTML] 1. HTML에 대한 이해

by kimsfamily 2020. 10. 7.

1) HTML과 인터넷의 이해

1. HTML에 대한 이해

2. HTML 코딩 실습환경 준비(ATOM에디터 다운 및 설치)
3. HTML 기본문법(태그) 이해하기 및 검색을 통한 태그공부

4. HTML 무슨 태그를 먼저 공부해야 할까?

5. 줄바꿈 <br>태그와 <p> 태그 차이점

6. html 태그 속성 그리고 이미지태그<img> 사용법

7. 부모자식태그 <li><ul><table><tr><td>등
8. HTML 문서의 구조 및 다른 웹페이지 연결하기(a href)

9. 나만의 홈페이지(웹사이트) 만들어보기

10. 서버와 클라이언트 이해하기



HTML에 대한 이해에 앞서서 짧은 영상을 하나 보면 좋겠습니다.

두개의 창으로 나뉘어져 있는데요.

질문을 생각해보면서 답을 해봅시다!

 

1. 사람이 하는일, 컴퓨터가 하는 일은 어느쪽?

2. 원인을 제공하는 쪽, 원인에 대한 결과는 어느쪽?

youtu.be/rRneN-WXm8g

 

오른쪽이 사람이 하는일, 원인을 제공했고.

왼쪽이 컴퓨터가 하는일, 결과를 줬습니다.

 

[이미지출처:유튜브생활코딩]

사람이 하는일(원인을 제공한 일)을 표현하는 의미는

코드(code), 소스(source), 컴퓨터언어(프로그래밍랭귀지)

 

라고 이야기 하죠.

 

컴퓨터가 하는일(결과를 보여주는것)은

애플리케이션(앱), 응용 프로그램, 프로그램, 웹페이지, 웹사이트(홈페이지), 웹애플리케이션

이라고 이야기합니다.

 

원인을 제공하는 언어(코드,소스)와 결과를 보여주는 것(앱, 응용프로그램, 홈페이지 등)은 모두 다양합니다.

이중에서 원인을 제공하는 언어(코드,소스)도 종류가 많이 있죠.

[이미지출처:https://opentutorials.org/]

 

C, C++. JAVA, HTML, Javascript, Python, PHP, 델파이, C#, 솔리디티, SQL, Go 등 엄청나게 많습니다.

이 언어들은 모두 종류가 다르고 역할도 다르며, 적용되는 영역도 모두 다릅니다.

 

위 화면에서 보여진 것은 HTML입니다.

하이퍼텍스트 마크업 언어(HyperText Markup Language)의 줄임말입니다.

 

우리가 매일 접하는 인터넷뉴스, 네이버, 다음, 구글, 그리고 각종인터넷 검색의 결과물들 이 모든것들이 이 HTML로 작성되었습니다.

 

구글 검색창에서 마우스오른쪽버튼을 클릭후 페이지소스보기를 클릭해보면

아주 심플해보이고 간단해보이는 구글 홈페이지 화면이 오른쪽과 같이 아주 복잡한 코드로 작성되어 있는걸 볼 수 있습니다. 이게 HTML코드라고 하는겁니다. 

저렇게 복잡해보이지만, 실제로 간단한 페이지를 만드는건 크게 어렵지 않습니다.

중요한건 HTML 코드를 통해서 우리는 웹페이지를 볼 수 있게 된다는겁니다.

우리 일상에서 인터넷은 이제 완전히 필수불가결한 상황이 되었는데요.

이런 변화의 가장 큰 핵심이 바로 HTML입니다.

 

그리고 의외로 이 HTML은 가장 배우기 쉬운 코딩입니다. 사실 뒤에 배우게 될 다양한 프로그래밍 언어에 비해서 가장 빠르고 쉽게 배우고 적용할 수 있습니다. 그럼 한번 시작해볼까요?

 

 

* 아래 생활코딩의 강의안을 바탕으로 작성하였고, 일부 필요에 맞게 수정하였습니다.

opentutorials.org/course/3084/18445

 

반응형

댓글0