코딩과 HTML
|
[사람이 하는 일]
Code Source Language |
[기계가 하는 일, 사람이 한 일에 대한 결과]
Application (App) Program Webpage Website (웹페이지가 모여 있는 것) Web application (Web app/기능이 복잡한 것) |
- 코딩 - 코드를 통해 결과물을 만드는 것
- 코드의 종류 - C, C++, Java, JavaScript, Python 등
- HTML - 웹페이지를 만드는 코드. 웹페이지는 인류가 생산하는 거의 모든 디지털 정보가 담기는 그릇이다. 그래서 HTML은 쉽지만 중요하다.
- 웹은 Public Domain이고 저작권이 없다
HTML 코딩 실습 환경
- 코딩에는 Editor 프로그램이 필요하다
- 구글에서 HTML Editor를 검색하여 본인에게 잘 맞는 것을 찾으면 된다
- 파일을 생성할 땐 확장자를 ‘.html’로 한다
- 인터넷 브라우저에서 Ctrl+O를 누르면 파일을 불러올 수 있다
기본 문법 - 태그
|
[HTML 에디터] HTML이라는 언어의 문법에 맞게 작성된 소스 또는 코드 |
[웹페이지] 결과물 |
- <tag>TEXT</tag> - 여는 태그와 닫는 태그로 텍스트를 감싸준다
- <strong>TEXT</strong> - 볼드
- <u>TEXT</u> - 밑줄(underline)
- <h1>TEXT</h1> - 제목(heading). 제목 태그는 h6까지 있다.
통계에 기반한 학습
- 150개 이상의 태그가 있는데 잘 쓰이는 태그부터 학습하고 나머지는 검색하면 된다
- advancedwebranking.com/html - 전 세계에 있는 웹페이지들이 몇 종류의 태그로 이루어져 있는지 보여주는 웹사이트
- 쉽고 단순하고 자주 쓰이는 것들이 더 중요하다
줄바꿈 태그 <br> vs. <p>
- <br> 태그 - 닫지 않는다(어디서부터 어디까지 한정할 필요가 없기 때문에)
- <p> 태그 - 단락을 구분하는 태그(Paragraph). 하나의 단락을 그룹화해야 하기 때문에 닫는 태그가 필요하다(</p>).
- 단락을 표현할 땐 <br>보다 <p> 태그가 좋다
- 단락에 ‘단락 태그’를 사용하는 것이 웹페이지를 정보로서 보다 가치있게 해준다
- 단락의 경계를 분명히 한다
- <p> 태그에 CSS를 사용하면 간격을 자유롭게 조정할 수 있다
HTML이 중요한 이유
|
제목 TEXT |
|
|
<h3>TEXT</h3> |
<strong><span style=”font-size:22px;”>TEXT</span> |
|
> 결과는 같으나 완전히 다른 코드 > 검색 엔진은 제목이라는 속성을 가진 코드(h3)를 인지하고 그 페이지를 먼저 보여준다 |
|
- 의미에 맞는 태그로 웹페이지를 만드는 것이 중요하다
- 정보 사회에서 HTML을 의미에 맞게 잘 사용하는 것은 비즈니스 측면뿐만 아니라 접근성(accessibility) 측면에서도 중요하다
- 웹의 핵심 철학은 접근성. 누구나 사용 가능해야 한다.
- HTML을 사용하지 않고 웹페이지 전체를 이미지로 만든다면 장애가 있는 사람들에게 정보를 제공할 수 없다
최후의 문법 - 속성과 img
- 속성(attribute) - 태그의 이름만으로 정보가 부족할 때 사용한다
- <img> 태그에는 이미지 웹 주소나 로컬 파일 이름을 속성으로 부여할 수 있다
- <img src = “파일 이름.확장자”>
- 이미지 크기 조정에는 width 속성을 사용한다
- <img src = “파일 이름.확장자” width = 100%>
부모 자식과 목록
- 태그 간의 관계는 부모 태그(Parent tag)와 자식 태그(child tag)로 나뉜다
|
<tag A> <tag B></tag B> </tag A> |
|
> 태그 A는 태그 B의 부모 태그이고, 태그 B는 태그 A의 자식 태그이다 |
- 태그의 부모-자식 관계는 필요에 따라 달라지나 그 관계가 고정되어 있는 태그도 있다 (ex: 목차 태그)
|
<ul> <li>TEXT</li> </ul> |
<ol> <li>TEXT</li> </ol> |
|
> li 태그에는 부모 태그로 ul/ol 태그가 꼭 필요하다 > 목차 태그 <ul> - 목차의 숫자를 매기지 않는 태그 (unordered list) > 목차 태그 <ol> - 목차의 숫자를 매겨주는 태그 (ordered list) |
|
문서의 구조와 슈퍼스타 태그
|
HTML 웹페이지의 공통 구조 |
|
<!doctype html> <html> <head> <title>TEXT</title> <meta charset = “utf-8”> </head> <body> content </html> |
- 정보를 잘 처리하기 위해 필요한 것이 구조
- <!doctype html>: 이 웹페이지가 HTML로 만들어진 것을 표현하기 위해 문서의 시작에 추가하는 코드
- <html></html>: <body> 태그와 <head> 태그를 감싸는 것으로 약속된 태그
- <title>TEXT</title>: 웹페이지의 제목을 지정한다. <title> 태그는 검색 엔진이 웹페이지를 분석할 때 가장 중요하게 생각하는 태그이다.
- <head> 태그: 본문을 설명하는 정보
- <body> 태그: 본문을 시작하는 태그
- <meta charset = “utf-8”>
- 문자 표현 방식을 지정하는 태그
- 웹페이지에 설정된 문자 표현 방식과 웹브라우저가 웹페이지를 해석하는 방법이 일치하지 않을 경우 문자가 깨진다
- 이 웹페이지는 UTF-8이라는 인코딩 형식으로 제작되었기 때문에 UTF-8로 열어야 한다는 의미다
- 인코딩 형식은 HTML 에디터 하단에 표시된다
HTML 태그의 제왕 - <a> 태그
- 현대의 150여 개 태그는 모두 <a> 태그 아래에 있다
- <a> 태그는 웹을 웹답게 하는 가장 중요한 요소이다
- HyperText Markup Language(HTML)의 “HyperText”는 링크, 즉 <a> 태그를 의미한다
- <a> 태그는 anchor tag. 정보 페이지에 정박한다는 의미이다.
| <a href = “링크 주소” target = “_blank” title = “툴팁 텍스트”>TEXT</a> |
|
> href는 HyperText Reference를 의미한다 > target = “_blank”는 새 창에서 링크가 열리게 하는 속성이다 > title = “TEXT”는 링크가 어떤 내용을 담고 있는지 툴팁으로 보여주는 속성이다 |
원시 웹
|
[인터넷] 도시 도로 운영체제 |
[웹] 건물 자동차 앱 |
- 웹은 인터넷의 부분 집합이다 - 인터넷 안에 FTP, Web, Email 등이 있다
- 인터넷은 1960년대, 웹은 1990년대에 탄생했다
- 인터넷은 핵 공격에 대비하기 위한 분산된 형태의 통신 시스템으로 개발, 수많은 통신 장치가 모두 전화국 역할을 했다(중앙 장치가 없음). 웹이 등장하기 전까지 인터넷은 정부, 군대, 기업 등이 사용하는 시스템이었다.
- 웹은 팀 버너스리에 의해 개발되었다. 세계 최초의 웹브라우저 “World Wide Web”. 웹 개발 이후 인터넷이 본격 대중화되었다.
인터넷을 여는 열쇠 - 서버와 클라이언트
- 인터넷이 동작하기 위해서는 최소 2대의 컴퓨터가 필요하다
- 2대의 컴퓨터가 서버와 클라이언트로서 정보를 주고받는다
- 웹 브라우저가 html 파일을 요청하면 웹 서버가 해당 파일을 찾아서 응답한다
- 요청하는 쪽을 클라이언트(‘갑’), 요청 받는 쪽을 서버(‘을’)라 한다
|
[웹 브라우저] index.html |
[웹 서버] index.html |
|
클라이언트 컴퓨터 웹 클라이언트 (= 웹 브라우저) 게임 클라이언트 |
서버 컴퓨터 웹 서버 게임 서버 |
- 웹 서버
- 컴퓨터에 설치하여 실행하면 되는 프로그램. 항상 켜져 있어야 한다.
- 웹 서버는 직접 설치하는 방법과 웹 서버를 제공하는 업체(웹 호스팅 업체)를 이용하는 방법이 있다
'학습 노트' 카테고리의 다른 글
| Xcode에서 Constraints 값이 입력되지 않는 문제 (0) | 2020.02.22 |
|---|---|
| #100DaysofCode 챌린지 진행 기록 (3) | 2020.02.17 |
| git을 이용한 파일 버전 관리 (0) | 2020.01.31 |
| 생활코딩 WEB2 - CSS 강의 요약 (0) | 2019.12.23 |
| 프로그래밍 용어 정의 (0) | 2019.12.08 |
