HTML & Internet

1. 코딩과 HTML

어떤 쪽이 사람이 하는 일이고, 어떤 쪽이 기계가 하는 일인가를 생각해보는 것.

어떤 것이 원인이고 어떤 것이 결과인지를 추론해 보는 것.

-> 수업 전체를 통틀어 가장 중요한 부분

사람이 하는 일, 즉 원인을 부르는 표현은 다음과 같다

부호 또는 신호라는 의미의 코드(code)
원천이라는 뜻의 소스(sourse)
약속이라는 의미에서 언어(language)

기계가 하는 일, 다시 말해서 '결과'를 부르는 여러 표현은 다음과 같다

애플리케이션
(줄여서)웹
응용 프로그램
프로그램

-> 웹에서는 결과를 웹페이지, 웹 페이지가 모여있으면 웹 사이트라고 한다. 기능이 많으면 웹 애플리케이션이라고 한다. 코딩 = 워인인 코드를 통해 결과를 만든 것

1.1. HTML

웹 페이를 만드는 언어는 HTML 언어이다. HTML은 배우기 쉽다.

한글, 영어와 같이 Web은 Public Domain이다.

2. HTML 코딩 실습 환경 준비

웹 브라우저(naver, google)와 코드 편집기(메모장, 텍스트 편집기, visual studio code)를 준비하자.

2.1. 실습 환경 구성

바탕화면에 폴더를 하나 만든다. 나는 LifeCoding_WEB이라는 이름의 폴더를 만들었다
(Window 기준)Vscode를 연 다음, ctrl + O 또는 폴더 열기를 클릭해 위에서 만든 폴더를 연다.
이제 이 폴더 안에 코드를 작성할 것이다.

2.2. 코드 작성하기

[파일명.확장자명]을 통해 파일을 만든다. 나는 1.html로 만들었다.

일단 그냥 Hello world를 출력하자.

+파일 옆에 동그라미가 있으면 저장이 되지 않은 것이다. ctrl + S로 저장하면 엑스 모양으로 바뀐다.

작성한 코드를 웹 페이지에 실행시키는 방법은 여러가지가 있다.

파일을 드래그해서 브라우저의 URL을 적는 부분에 넣고 enter
go live 활성화. ~~거의 이거 사용함~~
(window 기준)ctrl + O를 누른다. ~~근데 나는 이 방법 거의 안씀~~

3. 기본 문법 - 태그(tag)

옷을 사면 뒤에 tag가 달려있다. 이 tag는 산 옷을 설명한다.

마찬가지로 예를 들어, 태그는 "안의 내용이 중요하니 진하게 표시해야한다"는 것을 설명한다.

4. 혁명적인 변화

난이도와 중요도는 반비례한다.

5. 통계에 기반한 학습

현재 html에는 150개 이상의 태그가 정의되어있다.

검색 엔진이 잘 구현되어있기 때문에, 우리는 태그들을 모두 외우워야 할 필요는 없다. 검색을 하면 다 나오기 때문이다.

하지만 자주 사용되는 태그들은 알고 있으면 편한기는 하다.

그러면, 이제 자주 사용되는 태그는 무엇일지 알아보도록 하자. 아래의 사이트를 참고하면 된다.

https://advancedwebranking.com/html/

6. 줄바꿈 태그

태그는, 단지 "줄바꿈"이라는 시각적 의미만 가지기 때문에, 태그로 감쌀 필요가 없다.

으로 쓰지 않는다는 의미이다.

단락(문단)을 표현할 때는 줄바꿈 태그 보다는, 단락을 표현하는 태그인 태그를 사용하는 것이 더 좋은 선택이다.

단락에 단락 태그를 사용하는 것이 웹 페이지를 정보로서 보다 가치있게 해 주기 때문이다. br은 단순 줄바꿈을 의미 할 뿐이다.

그런데 태그는 단점이 존재한다. 단락과 단락의 간격이 고정되어 있기 때문에 시각적으로 자유도가 떨어진다.

반면에 태그는 쓰는 만큼 줄바꿈이 되기 때문에 원하는만큼 간격을 줄 수 있는 장점이 있다.

하지만 웹에는 CSS라는 기술이 있어, 태그의 한계는 극복 가능하긴 하다.

7. HTML이 중요한 이유

지식인이 작성한 코드가 가독성이 훨씬 좋다.

또한, 어떤 사용자가 "coding"을 검색할 때도 제목으로서의 coding을 나타내는 지식인의 글이, 제목 흉내를 내며 작성된 coding보다 더 잘 검색된다.

<h3>는 제목을 의미하지만, <span...>은 시각적 장식이기 때문이다.

정보사회에서 HTML을 의미에 맞게 사용하는 것은 비즈니스적 측면에서 매우 중요한다.

또한 웹의 핵심적인 철학은 "접근성"이다. 웹은 모든 운영체제 위에서 동작하고, 웹은 저작권이 없는 순수한 공공재이다.

누구나 차별없이 정보에 접근할 수 있어야 한다는 철학을 접근성이라고 하고, 신체적인 장애가 있는 사람들도 웹을 통해서 정보에 접근할 수 있어야 한다. 예를 들어 태그로 둘러싸여져 있는 문장은, 소리로 출력할 때도 강조된 억양으로 출력되지만, strong인 척 하도록 작성한 태그는 강조된 억양으로 출력되지 않는다.

8. 최후의 문법 속성과 <img>

속성=태그의 심화된 내용

태그로만은 정보가 부족할 때 문제가 되는것을 해결해준다.

이미지를 웹페이지에 포함시킬 <img>태그를 사용한다.

<img>만을 사용하면 웹 페이지에 아무 이미지도 나타나지 않는다.

<img src="[원하는 이미지의 주소]"> 이렇게 속성과 함께 사용해야 비로소 이미지가 나타난다.

이처럼 굵은 부분을 속성(Attribute)라고 한다. 속성의 위치는 상관 없다. src와 width의 위치가 바뀌어도 된다.

태그가 태그의 이름만으로 정보가 부족할 때는 속성을 통해 의미를 더 부과할 수 있게 된다.

9. 부모 자식과 목록

태그들이 포함관계에 있을 때, 포함하고 있는 태그를 부모태그, 포함되어있는 태그를 자식태그라고 한다.

<parent>
    <child></child>
</parent>

<ol> = orderd list

<ul> = unordered list

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<ol>
  <li>socnotri</li>
  <li>egoing</li>
</ol>

10. 문서의 구조와 슈퍼스타들

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

최고위층 태그 = <html>태그

11. HTML 태그의 제왕 <a>

anchor -> <a>태그는 링크 태그이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a
      href="https://sonowhstudy.tistory.com/"
      target="_blank"
      title="sonotri tistory"
      >sonotri</a
    >
  </body>
</html>

href = http + reference: 문서내의 이동을 위해 사용된다.
target = "_blank": 문서를 새로운 탭에서 오픈함 <->_self: 현재 프레임에서 문서를 오픈함 ... _top: 현재 윈도우 전체에서 오픈함
title = "sonotri": 부가 정보를 제공하는데 사용된다.

12. 웹사이트 완성

링크(link)는, 서로 연관된 웹페이지들을 묶어서 하나의 웹사이트를 만드는 것이라고 생각할 수도 있다.

이제 웹페이지들을 만들어 웹사이트를 만들어보자.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WEB</title>
  </head>
  <body>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    <h2><a href="https://sonowhstudy.tistory.com/">sonotri tistory</a></h2>
    <img src="cat.jpg" width="20%" />
  </body>
</html>

13. 원시웹

Internet과 Web은 어떻게 다를까?

인터넷의 아래에 웹이 있다. Internet > Web

1960년대에는 핵이 화제였다. 인류가 핵 전쟁을 치룬 직후였기 때문이다.

미국은 핵 전쟁이 일어났을 때를 시뮬레이션 하는 과정에서, 통신쪽에서 심각한 약점을 발견했다.

당시 통신은 중앙집중적이었기 때문에, 핵 공격이 일어나면 통신이 한번에 마비된다.

그래서 핵 공격에도 버틸 수 있는 강력한 통신 시스템의 필요성이 대두되었고, 그 결과로 Internet이 탄생했다.

Internet은 중앙이 없다.

Internet은 거대 기관에서 사용하던 통신 시스템이었기 때문에, 사람들은 인터넷을 잘 알지 못했다.

하지만 Web이 등장하고난 뒤에는 상황이 반전되기 시작했다.

스위스에서 Web이 가장 시작되었다. 어떻게 스위스에서 시작되었을까?

스위스의 제네바에는 물리학 연구소가 있다. 연구소의 프로그래머 팀버너스리는 Enquire라는 앱을 만들었고, 해당 앱은 Internet의 전신이 되었다. 1990년에 연구소에 Internet이 들어왔고, 팀버너스리는 인터넷과 앱을 합성하려고 했다.

그리고 1990년 12월 24일, http://info.cern.ch

웹의 메소포타미아가 탄생했다.

Web이 Internet의 잠재력을 깨운 촉진제 역할을 한 것이다.

14. 인터넷을 여는 열쇠: Server and Client

인터넷이 동작하기 위해서는 컴퓨터가 최소 2대 필요하다.

Web Browser(info.cern.ch/index.htm으로 신호를 보냄) --- Web Server(info.cern.ch, index.html)

예를 들어, 나는 게임 클라이언트, 데브시스터즈의 컴퓨터는 게임 서버

15. 웹호스팅 github pages

직접 웹서버를 운영하는 일은 쉽지 않다.

컴퓨터가 있어야 하고, 컴퓨터가 냉장고처럼 항상 켜져있어한다.

그래서 이런 일을 대행해 주는 회사들이 있다.

인터넷에 연결된 컴퓨터 하나하나를 Host라고 하고, 이런 컴퓨터를 빌려주는 사업을 Hosting이라고 한다. Cloud라고도 부른다.

호스팅 중에서, 웹을 동작하기 위한 소프트웨어를 설치해서 빌려주는 호팅을 Web Hosting이라고 한다. 대표적으로 Github가 있다.

Gitbub는 웹호스팅을 목적으로 구현된 사이트는 아니다. 이 사이트가 웹 호스팅 기능을 가지고 있을 뿐이다.

개발자들이 자신의 소스코드를 안전하게 백업하고, 공동 작업을 쉽게 하기 위해 고안된 사이트이다.

github 연동 방법 (tistory.com)

github 연동 방법

Github에 코드를 올리는 과정1. 로컬 저장소 & 원격 저장소 로컬 저장소(local repositary): 내 PC에 파일이 저장되는 개인 전용 저장소이며, 이 저장소로 작업할 때에는 네트워크가 필요하지 않다원격

sonowhstudy.tistory.com

레퍼지토리에 업로드한 코드로 웹페이지를 서비스 해보자.

Setting 버튼은 누르고, 사이드 바에서 Pages를 누른다.
Branch를 main 또는 master로 선택하고 Save버튼을 누른다.
잠시 기다리면 어떤 주소가 표시되는데, 이 주소를 누르면 된다.

간단히 정리해보자.

나의 컴퓨터는 현재로서는 컨텐츠를 서비스 할 수 없다.

그래서 우리는 github의 pages 기능을 사용한다. github에 파일들을 업로드하고, pages 기능을 활성화하면 github의 서버 컴퓨터에 웹서버가 켜진다. 그리고 우리에게 웹 서버의 주소를 알려준다.

이제 웹서버의 주소를 방문자에게 알려주면 방문자는 나의 컴퓨턱 아닌 github의 컴퓨터에 설치된 웹서버에 접속하게 된다.

16. 웹서버 운영하기

아래 사진에서

빨간 주소는 웹브라우저가 파일을 직접 열었을때

초록 주소는 웹서버를 통해서 접근했을 때 이다.

따라서 웹서버를 종료하면 초록 주소는 연결이 안된다.

<웹브라우저가 파일을 열 때>

프로토콜/ip주소/포트 번호/

127.0.0.1은 아주 특별한 주소이다. 이 주소는 "내 컴퓨터 자신"을 가리키자고 나타낸 것이다.

하나의 컴퓨터에 여러 서버가 운영중일 수 있고, 각각의 서버는 고유의 포트를 가지고 있다. 그래서 여러 서버가 운영되고 있어도 포트번호 덕분에 웹 브라우저는 자신이 원하는 서버로 꼬임없이 접속할 수 있다.

<현실의 웹(웹서버 사용)>

웹브라우저와 웹서버가 서로 다른 컴퓨터에 설치되어있다.

이로 인해, 지구 반대편에 있는 컴퓨터도 마치 내 컴퓨터에 있는 문서인 양 볼 수 있다.

17. 수업을 마치며

공부만 하고 공부한 것을 사용하지 않으면, 머릿속이 복잡해져 코딩을 할 때 무엇을 해야할 지 모를 수 있다.

좋은 코드가 무엇인지는 아는데, 좋은 코드를 짜지 못하면 내가 짠 코드가 실망스럽게 된다.

세상에는 눈에 보이는 복잡함이 있고, 눈에 보이지 않는 복잡함이 있다.

눈에 보이지 않는 복잡함은 공부한 것을 막상 사용하고자 할 때 막막하게 하는 주범이다.

'🐠 Public > web' 카테고리의 다른 글

DVWA 구축(Kail Linux) (0)	2024.10.06
Port & IP & Port Forwarding (0)	2024.09.12
[공부] MySQL 기초 (8)	2024.09.02
웹 사이트 개발_기초 문법 정리 (0)	2024.09.01
웹 사이트 개발_JavaScript 기초 문법 정리 (0)	2024.08.29