본 내용은 아래의 강의를 토대로 하여 작성하였습니다.
링크:https://opentutorials.org/course/3084
WEB1 - HTML & Internet - 생활코딩
--- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여
opentutorials.org
1. 강의 내용
HTML
오늘날 컴퓨터가 등장함에 따라 어떤 것을 만들어낼 때, 사람이 하는 일과 기계가 하는 일을 분리할 필요가 있다.
사람이 하는 일(원인) -부호, 신호(code), 원천(Source), 언어(Language)
기계가 하는 일(결과)- Application, App, Program, Webpage, Website
여기서 오늘 HTML(HyperText Markup Language)라는 것을 배우고 Webpage를 만들어볼 것이다.
HTML의 장점은 세 가지로 꼽을 수 있다.
-
쉽다.
-
중요하다. 웹페이지를 만드는 기초적이면서 필수 불가결한 컴퓨터 언어이기 때문이다.
-
Public domain. 저작권이 없다!
HTML은 아주 기초적인 언어이기 때문에. html확장자로 각 os의 기본적인 에디터로도 작성할 수 있다. 그러나, 기본 에디터는 사용자에게 그리 편하지는 않으므로 우리는 좋은 에디터를 찾을 필요가 있다. 이 수업에서는 Atom이라는 에디터를 사용한다.
태그 문법
프로그래밍 언어들은 각각의 고유한 문법들을 가지고 있다. HTML은 태그 문법이라는 간단한 방식의 문법을 사용한다.
태그 문법의 큰 틀은 아래와 같다.
< > 적용할 텍스트 </ >
HTML의 태그들은 아주 많다. 그리고 다른 언어들 또한 수많은 명령어가 있다. 이 모든 걸 외울 필요는 없다.
The average web page from top twenty Google results
Apparently, an average web page uses thirty-two different element types: The thirty-two elements used on most pages, ordered by appearance frequency:
www.advancedwebranking.com
위 사이트에서 전 세계의 웹 페이지들이 몇 가지의 태그로 이루어져 있고 어떤 태그를 쓰는지 랭킹이 나와있다. 대표적인 태그들을 익히고 나머지는 필요할 때 검색엔진으로 알아보고 사용하면 된다.
몇몇 태그들은 속성이라는 것을 가진다. 속성 문법은 아래와 같다.
<img src=“1. jpg” width=“100%”>
위 문법의 의미는 1.jpg라는 그림파일을 너비 100%로 출력한다는 뜻이다. 속성 위치는 상관없으며 속성을 통해서 태그에 더 많은 의미를 더할 수 있다.
태그의 포함관계
몇몇 태그는 부모 자식의 관계를 가진다. 대표적으로, 순서 없는 리스트 태그 <ul>은 자식 태그 <li>를 가진다.
필수 태그
초등학교 때, 편지 쓰는 법을 배운 적이 있을 것이다. 이는 사람들이 편지를 주고받을 때 원활하게 상호작용할 수 있게 한다. HTML 또한 그렇다.
모든 웹페이지는 아래와 같은 기본 틀, 필수 태그들을 가진다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
여기서, <!DOCTYPE html>은 이 문서가 HTML이라는 언어를 사용한다는 선언 같은 것이다.
<html>은 말 그대로 html태그들을 사용한다는 형식적인 내용의 태그이다.
<head>는 웹페이지에 표시되지 않는 곳이다. 아래에 나올 <body>의 내용들을 설명한다. 여기에는 주로 웹페이지 전체적으로 적용되는 명령어들이 들어가는 경우가 많다.
<meta charset="utf-8">은 html에서 저장되는 방식을 말한다. 이 태그를 사용해야지 웹페이지에 한글을 사용할 수 있다.
<body>는 본격적으로 웹페이지에 보여줄 텍스트들과 콘텐츠들이 들어가는 곳이다.
강력한 태그 <a>
웹 서핑을 하면서 궁금한 정보들을 타고 그것들을 보면서 가장 많이 접하는 것이 있다. 바로, 하이퍼링크다. 검색을 하고 어떤 것을 누르면 해당 페이지로 넘어가거나 새창이 뜨는 그런 것이다. 하이퍼링크 <a>의 사용법은 아래와 같다.
<a href="주소" target="_blank" title="이름"> 내용 </a>
여기서, href는 이동할 주소이고 target은 _blank속성을 주면 새창으로 넘어가게 한다. tilte은 이 링크 위에 마우스 커서를 올렸을 때 표시되는 이름이다.
웹의 역사
근본적인 질문을 하나 하겠다. 인터넷과 웹은 같을까? 다를까? 답을 찾기 위해 아래를 보자.
| 도시 | 건물 |
| 도로 | 자동차 |
| 운영체제 | 프로그램 |
인터넷과 웹의 관계도 위와 같다. 즉, 인터넷에 웹이라는 부분이 존재한다. 인터넷에는 웹 말고도 FTP, Email 같은 동급의 서비스들이 있다.
인터넷은 1960년대 핵전쟁의 우려가 컸을 때 등장했다. 당시 기존의 통신시스템은 핵전쟁에 견딜 수 없었다. 왜냐하면, 중앙이 있는 통신 시스템이기 때문에 중앙이 타격을 받을 경우 전체 시스템이 무너지기 때문이었다. 그에 대한 대안으로 등장한 인터넷은 기존의 시스템과는 달리 중앙이 없는 수많은 통신 장치들이 분산되어서 전화국과 같은 역할을 할 수 있다. 그렇기 때문에, 하나가 사라져도 나머지가 역할을 수행할 수 있었다. 이러한 이점으로, 인터넷은 초기에는 기업, 연구소, 대학, 군대와 같은 거대 기관에서 사용하던 통신 시스템이었다.
그렇게 극히 일부만 사용하고 그들만 알아왔던 인터넷은 대중에게도 알려지기 시작했다. 1980년대에 스위스 제네바의 유렵 입자 물리 연구소(CERN)에서 팀 버너스 리가 Enquire라는 프로그램을 만들었다. 이것은 웹의 전신이라고 할 수 있는 프로그램이었다. 이후, 1990년에 연구소에 인터넷이 들어오게 되었고 그 해 팀 버너스 리는 10월에는 웹페이지를 만드는 편집기를, 11월에는 최초의 웹 브라우저인 World Wide Web(WWW)를 만들었다.
그리고 마침내 최초의 웹사이트인 info.cern.ch가 태어났고 인터넷은 대중화의 길을 걷게 되었다.
인터넷이 대단한 이유
"익숙함에 속아 소중함을 잃지 말자"라는 말이 있다. 우리는 매우 당연하게도 인터넷을 사용한다. 그리고 인터넷이 얼마나 대단하고 획기적인 시스템인지 간과한다.
위 그림처럼 인터넷은 본래 만날 수 없었던 두 컴퓨터를 이어주는 연결고리가 되어준다. 사용자(클라이언트)는 인터넷이라는 다리를 통해서 서버에게 필요한 정보를 요청하고 받아올 수 있다. 본래 만날 리가 없던 두 컴퓨터가 만나게 되고 언제 어디서든 빠르게 소통을 하게 된다는 것은 아주 대단한 일이다. 인터넷으로 인해 우리는 수많은 자원과 시간들을 아낄 수 있게 된 것이고 정보의 바다에서 많은 혜택을 받게 되었다.
2. 느낀 점
사실 나는 예전에 정보통신 계열 고등학교 출신이라서 HTML을 배운 적이 있다. 매우 상투적인 말이지만, 거의 십 년(...)이 지난 지금 다시 공부를 해보니 감회가 새로웠다.
당시에는 그저 선생님의 화면이 나오는 큰 스크린을 보며 깨알같이 많은 태그들을 마치 복사기처럼 옮겨 적는 데에 급급했다. 옮겨 적는 태그들이 어떤 의미를 가지고 얼마나 대단한 것인지, HTML이라는 언어가 나옴으로 우리가 얼마나 윤택 해졌는지에 대한 근본적인 깨달음과 경외 감 없이 지속되었던 그 지루한 수업은 졸업하고 나서 내 기억 저편으로 영영 사라졌다.
무엇인가를 배울 때 나는 A to Z에 집착하는 경향이 있다. 학문에는 기초가 중요한 법이야!라고 하면서 아주 사소한 요소에 집착해왔다. 그러다 보면, 정작 중요한 큰 것들을 놓쳐버렸다. 현시점에서 이것은 매우 잘못된 것이라고 나는 깨달았다.
생활코딩 강사님의 말씀 중에서 제일 인상 깊었던 것이 있다.
"우리는 한국말을 할 때 말 하나하나의 문법을 따지지 않는다"
영어 화자들도 대화를 하면서 그 하나하나의 문법을 따지지 않는다. 즉, A to Z에 집착할 필요는 없다는 것이다.
우리가 언어를 배우는 궁극적인 이유를 생각해보자. 문장 성분이 어떻고 품사가 어떻고 가 중요한 것이 아니다. 우리는 언어학자가 되려는 것이 아니다. 바로, 외국어 화자와 대화하기 위해서이다. 프로그래밍 언어도 말 그대로 언어이다. 화자가 사람과 컴퓨터인. 프로그래밍 언어를 배움으로써, 우리는 컴퓨터와 소통해서 명령을 내리고 원하는 결과를 얻으려는 것이다. 그러니까 프로그래밍 언어가 어떻게 작동하게 만들지는 천상계의 천재들의 몫이다. 이걸 몰랐다면 나는 지금 두꺼운 C언어 전공서적을 사서 밑줄이나 긋고 있었을 것이다. (물론 C언어는 꼭 배울 것이다. 방향성이 달라졌을 뿐)
그러므로, 앞으로 나는 A to Z에 집착하지 않고 배우고 있는 것의 근본적인 의의와 내가 무엇이 필요한지를 확실하게 인지하고 프로그래밍 언어들을 배워나갈 것이다. 이것이 내 성공적인 첫 발걸음이라 믿어 의심치 않는다. 그럼 바로 CSS도 정리해야 하기에 여기서 마무리!
3. 명령어
<strong> </strong>
텍스트를 진하게 표시한다.
<u> </u>
텍스트에 밑줄을 표시한다.
<br>
줄 바꾸기. 특이하게 닫는 태그가 필요하지 않다. 종종 이러한 태그들이 있다.
<p> </p>
단락.
<img src=“1. jpg” width=“100%”>
이미지 삽입
<ul> </ul>
unordered list 순서 없는 리스트, 리스트가 필요한 줄에는 각각 <lil> </li>을 써준다.
<ol> </ol>
ordered list 순서 리스트, 역시 <li>를 써준다.
<title></title>
웹 페이지의 제목
필수 태그(설명은 위 참고)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<a> </a> 하이퍼링크
'programming study > HTML, CSS' 카테고리의 다른 글
| [코드잇] HTML/CSS 핵심개념 (2)(2021.2.17) (0) | 2021.02.17 |
|---|---|
| [코드잇] HTML/CSS 핵심개념 (1)(2021.2.17) (0) | 2021.02.17 |
| [코드잇] HTML/CSS 시작하기 (2)(2021.2.11) (0) | 2021.02.11 |
| [코드잇] HTML/CSS 시작하기 (1)(2021.2.11) (0) | 2021.02.11 |
| [생활코딩]WEB2-CSS (2020.11.30~12.1) (0) | 2020.12.05 |
