본문 바로가기
기초공부/WEB

[HTML5]생활코딩 WEB1 정리

dndkdkdk 2019. 3. 19. 16:10

WEB1 HTML & INTERNET

커버 페이지

나에게 중요한 내 문제를 해결해보자! 그렇게 하다보면 우리는 자연스럽게 공부하게 될 것이다!

3

목표 설정 : 우리가 배운 내용들을 정리할 웹페이지 만들기

4

  • 사람이 하는 일(원인) : CODE, SOURCE, LANGUAGE
  • 기계가 하는 일(결과) : Application, App, Program, Webpage, Website(Webpage가 모인 것)

웹페이지를 만드는 코드 : HTML → 목표에 맞게 HTML을 배우자!

HTML의 장점

  1. 쉽다
  2. 중요하다
  3. public domain : 어떠한 저작권도 존재하지 않는다 → 웹브라우저를 만들고, 그걸로 웹페이지를 볼 수 있는 이유

5

HTML으로 코딩을 하기 위한 준비물

  1. 웹브라우저
  2. 에디터 : 코드를 작성할 프로그램 ex)메모장, gedit (코드를 작성할 전문 에디터)
    → HTML 에디터 / best HTML Editor 2018 검색하면 찾을 수 있음

웹 페이지의 확장자 : .html → 맘대로 바꾸면 안 됨

다른 컴퓨터에 있는 웹페이지를 읽고 싶으면 주소창에 주소를 입력하지만 내 컴퓨터에 있는 웹페이지를 읽고 싶으면 ctrl+o를 이용하여 파일을 열면 된다

6

웹을 지배하는 가장 중요한 문법 : tag
ex)<strong></strong>, <u></u>

태그 정리

  1. 내용물을 감싸는 것을 tag라고 함
  2. 앞의 태그를 열린 태그, 뒤의 태그를 닫힌 태그라고 함
  3. 뒤의 태그는 앞의 태그와 달리 /가 붙음

7

처음 배우는 것들은 매우 쉽지만 매우 중요한 것이다. 우리는 이제 배운 것을 가지고 더 많은 것을 볼 수 있다. 한 번 웹페이지를 보자.
웹페이지의 소스를 보고 싶다면 : 웹페이지 우클릭 → 페이지 소스 보기

태그라는 존재를 배웠다는 것은 "이제는 내가 태그를 검색을 통하여 공부할 수 있다!"라는 뜻이다. 다음과 같이 공부하자.
태그 검색 예시 : HTML tag
→ 정의, 예제 등의 정보를 얻을 수 있다. 하지만 예제부터 보는 게 이해가 쉬울 수 있으므로 추론을 통하여 역할을 짐작한 다음 정의를 보자

8

우리는 검색을 통하여 정보를 쉽게 얻을 수 있기 때문에 모든 태그를 암기할 필요는 없다
그러나 모든 태그를 공부하지 않을 수는 없다
그러기에 통계에 기반하여 어떤 태그를 공부할 지를 결정하자
https://www.advancedwebranking.com/html/ : 태그의 랭킹을 보여주는 사이트

9

정보를 깔끔하게 보기 위한 2가지 태그

  1. HTML new line tag : br 태그 → 어디서부터 어디까지인지 표시하지 않아도 되기 때문에 단독태그이다
  2. HTML paragraph tag : p 태그 → 단락의 범위를 나타내기 때문에 단독태그가 아니다

p태그가 더 좋은 선택이다. 웹페이지를 좀 더 정보로서 가치 있게 만들기 때문이다. (= 한 단락이라는 것을 의미론적으로 표현)
그러나 p태그는 시각적으로 자유도가 떨어진다 → CSS로 커버가 가능하기 때문에 의미에 맞는 태그를 사용하는 것이 더 좋은 방법이다

10

태그를 올바르게 사용해야하는 이유 2가지

  1. 태그를 사용한다는 것은 정보로서의 의미를 가진다
    ex) 검색엔진을 사용하였을때, 시각적으로 정보로서의 가치를 나타내는 것 << 태그로 가치를 나타내는 것
    → 컴퓨터가 문서의 구조와 내용을 파악할 필요성이 많아졌다
    → 따라서 HTML으로는 문서의 구조와 내용을 나타내는 것이 중요해졌다
  2. html이 중요한 또 한 가지 이유 : 접근성accessibility
    • 신체적인 장애가 있는 분들도 정보에 소외되지 않도록 노력해야한다
    • 만약 문자까지 이미지로 만든다면 시각장애인에게는 없는 정보가 된다

따라서 의미에 맞게 HTML 태그를 사용하자

11

태그만으로는 정보가 부족할 때가 있어서 속성property으로 더 많은 의미를 부여할 수 있다
ex) img 태그는 자체로는 정보가 부족하여 src라는 속성을 추가해야 한다

12

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

  • 부모 태그 : 태그가 포함관계로 연관되어 있을 때 포함하고 있는 태그
  • 자식 태그 : 포함된 태그를 자식 태그라고 함

어떤 태그들은 항상 부모-자식 태그가 함께 나타난다
ex1)li 태그는 그 항목이 어디까지가 연관된 항목인지를 그룹핑을 하기 위한 부모 태그를 반드시 가진다.
또한 부모 태그 또한 li 태그를 반드시 포함한다
ex2)table 태그

13

정보가 많아짐에 따라 그 정보를 잘 정리 정돈하기 위한 체계, 구조가 필요하다

  1. <title>
    웹페이지의 제목을 사용자에게 명시적으로 알려줄 수 있는 태그. 뿐만 아니라 검색 엔진과 같은 기계들에게 상당히 중요한 정보를 제공한다
  2. <meta charset>
    웹브라우저가 읽는 방식을 우리가 한글을 저장한 방식로 지정하는 태그
  3. <body>
    본문을 묶는 태그
  4. <head>
    본문을 설명하는 태그를 묶는 태그
  5. <html>
    <body>, <head>를 묶는 태그
  6. <DOCTYPE html>
    이 문서는 html이다라는 관용적 표현

이 태그들은 빈도수가 높고 상당히 중요한 태그

13

<a> : 정보를 연결하는 매우 중요한 태그 like 실, 본드
- 속성 : href, target, title

15

웹사이트 완성!

16

WEB1의 목표

  1. 웹페이지 만들기 : 코딩이 무엇인가 이해하기
  2. 웹페이지 공유하기 : 인터넷이 무엇인가 이해하기

웹의 역사 이해하기

  1. Internet 안에 FTP, WEB, email이 있다
  2. 1960 : 핵에 대비해 분산된 통신시스템인 인터넷 등장
  3. 1980 : 웹의 전신인 Enquire 개발
  4. 1990 : CERN에 인터넷 보급
  5. 1990.10 : 웹페이지를 만드는 편집기 개발
  6. 1990.11 : 세계 최초의 웹 브라우저인 world wide web이라는 프로그램 개발
  7. 1990.12 : 웹서버라는 프로그램을 만들고 그 프로그램이 설치된 컴퓨터에 info.cern.ch라는 주소 부여

17

인터넷이 동작하기 위한 기본적인 원리 예시

  • 기본 설정
    1. a 컴퓨터 : 웹브라우저 프로그램 깔려있음
    2. b 컴퓨터 : 웹서버 프로그램 깔려있음
      주소 : http://info.cern.ch
      하드디스크에 index.html 파일 존재
    3. a와 b는 인터넷으로 연결되어 있음
  • a의 주소창에 http://info.cern.ch/index.html 라고 입력하였을 때:
    a가 index.html을 원한다고 정보 송신 → b의 웹서버가 index.html을 a로 송신
    → 수신한 코드를 a의 웹브라우저가 읽어서 화면에 출력 = 웹이 동작하는 과정

  • 정보를 요청하는 a : 클라이언트client
    응답하는 b : 서버server

목표 2를 달성하는 방법 2가지

  1. web hosting : 대행 업체에 맡기기, 쉽지만 자세하게 배우기는 어렵다
  2. web server : 자신의 컴퓨터에 직접 설치, 많은 것을 배울 수는 있지만 어렵다
    → 웹 호스팅으로 일단 해보고, 웹서버를 통해서 원리 파악하는 방법 추천

18

웹서버 운영은 어려운일이다. 컴퓨터가 24시간 켜져 있어야 하고 웹서버라는 프로그램을 배워서 깔아야하고 집밖에서도 연결할 수 있게 여러가지 조치를 취해야 한다. → 이런 일을 대행하는 web hosting 업체들이 있다(html 파일만을 서비스하는 웹 호스팅을 static web hosting이라고 함)
host : 인터넷이 연결되어 있는 컴퓨터 한 대
= 웹서버를 운영하기 위한 컴퓨터

github라는 홈페이지가 우리가 운영할 수 있는 웹서버를 제공한다
github, new repositories(저장소)를 생성하여 파일을 저장하자
github, settings → pages, source : master branches 변경 → 웹페이지를 다른 이들과 공유할 수 있다

현 시점에서 추천할만한 서비스(나에게 맞는 건 검색이 제일 좋다)

  1. http://www.bitballoon.com/
  2. http://neocities.org/
  3. Amazon S3
  4. Google Cloud Storage
  5. Azure Blob

19

웹서버는 웹브라우저와 마찬가지로 제품군이다.
Apache, lls, Nginx 등 다양한 서비스가 존재한다
how to install apache http server (os) 라고 검색하면 apache 설치 가능

19.1.1

윈도우에서 Apache를 설치하는 것은 어렵다
→ how to easy install apache on window 검색
→ apache 공식 홈페이지에서 bitnami WAMP stack 찾기
→ bitnami 사이트에서 WAMP 발견
→ Window(OS), Apache(웹서버), MySQL(데이터베이스), PHP(미들웨어), local install에서 최신버전 설치
→ 깔린 bitnami manager를 이용하면 설치한 여러 프로그램들을 관리하는 데 도움을 준다
- 이 프로그램은 웹서버를 켜고 끌수 있다

19.1.2

웹서버 살펴보기
주소창에 http://127.0.0.1/index.html 검색하면 어떤 페이지가 나온다

  1. 이 파일은 bitnami 디렉토리 안에 wampstack안에 apache가 설치되어 있는데 그 안에 htdocs(hypertext documents) 디렉토리(웹페이지가 저장된 곳)에 있는 index.html 파일이다
  2. 127.0.0.1 = Internet Protocol Address의 약자, IP주소
    = 웹 브라우저가 설치되어 있는 각자의 컴퓨터의 웹서버를 가리키는 아주 특수한 주소
  3. index.html = 웹서버는 htdocs라는 디렉토리에서 파일을 찾도록 기본적으로 설정되어서 여기서 index.html 찾음

주소를 입력해서 살펴보는 것과 파일을 열어서 웹 페이지를 보는 것의 차이점

  • 주소창에 http://127.0.0.1/index.html 라고 입력할 경우
    이 컴퓨터에 웹 브라우저와 웹 서버가 있을 때 웹 브라우저가 웹 서버에게 요청하는 것으로 웹서버가 index.html 파일을 열어서 웹 브라우저로 전송한다
  • 파일 열기
    웹 서버는 과정에서 개입하지 않는다. 웹 브라우저가 직접 index.html 파일을 읽어서 화면에 연다
  • http://
    웹 브라우저와 웹 서버가 서로 통신할 때 사용하는 통신 규약인 HyperText Transfer Protocol을 이용하여 데이터를 가져오는 것
  • file://
    파일에 있는 것을 직접 여는 것

19.1.3

IP 주소 확인 : 네트워크에서 확인 가능
같은 공유기로 접속한다면 다른 컴퓨터의 IP주소를 가지고 접속 가능

22

이후에 공부할 수 있는 내용들
CSS - 디자인 : web publisher, web designer
javascript - 사용자와 상호작용 : web front end engineer, web interactive designer
back end : 생산성의 한계를 극복하기 위한 기술
- php, jsp, Node.js, 익스프레스, 파이썬의 장고, 루비의 루비 온 레일즈, asp의 닷넷


'기초공부 > WEB' 카테고리의 다른 글

[HTML5]목록 태그  (0) 2019.03.20
[HTML5]기초 설명, 구조 태그  (0) 2019.03.20
[HTML5]form 태그  (0) 2019.03.19
[HTML5]프레임 태그  (0) 2019.03.19
[HTML5]링크 태그  (0) 2019.03.18

'기초공부/WEB' Related Articles

티스토리툴바