본문 바로가기
생활코딩/html

공부정리_HTML(10~16강)

by Sharon kim 2021. 9. 12.

 

 

 

WEB1 - 10. html이 중요한 이유
일반인이 제목을 작성하는 방식
(시각적인 제목만 코딩)
지식인이 제목을 작성하는 방식
(제목이 코딩)
<span style="font-size:24px">coding</span> <h3>coding</h3>

검색엔진에 coding을 검색하면

검색엔진은 태그를 근거로 해서 정리하기 때문에

일반인 웹페이지 1억개와 지식인 웹페이지 1억개 중 제목이 코딩인 사이트와 그냥 시각적으로만 제목처럼 보이는 ‘coding’이라는

정보를 가지고 있는 사이트 중에 지식인의 사이트를 우위에 놓을 것이다.

검색엔진에 노출되지 않는다는 것은 실질적으로 존재하지 않는다는 것.

웹페이지를 만들 때 화려하고 편리한것보다 정보를 탄탄히 하는 것이 훨씬 더 중요하다.

예쁘게 하기위해 이미지로 글을 쓰게 되면 검색엔진에서는 존재하지 않는 페이지가 됨

html을 의미에 맞게 정확하게 사용하는 것은 비즈니스에서 중요한 문제

웹이 중요하게 생각하는 "접근성"

어느 누구나 읽을 수 있어야 한다. 휴머니즘적인 측면에서도 중요한 기술

(for 시각장애인들 alt="이미지 안의 텍스트나 이미지에 대한 설명 글 필요")

 

WEB1 – 11. 최후의 문법 속성 & img

이미지를 웹페이지에 추가시키는 태그

src = 'source' 줄인말

언플래쉬닷컴 이미지활용

<img src="coding.jpg" width="100%" alt="">

ㄴ속성(Attribute)

 

WEB1 - 12. 부모자식과 목록

<parent>

<child></child>

</parent>

 

목록(list) = <li>

li의 부모 태그 = <ul></ul>

(unordered list)

숫자 넘버링 목록 태그= <ol></ol>

(ordered list)

※ol태그는 자주 사용되지않음

 

WEB1 - 13. 문서의 구조와 슈퍼스타들

정보가 많아졌을 때 정리할 수 있는 구조를 작성하는 법


출처 입력

정말로 중요한 순서

컴퓨터는 0과1로 저장되기 때문에

utf-8로 열길 명령해야함

<meta charset="utf-8">

character는 문자

set은 규칙

<!DOCTYPE html>
<html> 
  <head> 
    <title>본문</title> 
    <meta charset="utf-8"> //utf-8로 저장되어 있다 
  </head> 
  <body> 
  </body> 
</html>

 

WEB1 - 14. HTML 태그의 제왕

태그가 웹의 왕국이라면 이 태그는 이 왕국의 제왕.

150개의 태그를 아래에 둔 이 태그의 이름은?

검색엔진들은 이 태그 덕분에 전세계 웹을 항해하면서 웹페이지를 발견할 수 있었음.

이 태그 덕분에 최고의 검색결과를 만들 수있음.

이태그는 도시의 기과 인체의 혈관 같음.

우리가 백번도 넘게 사용하는 태그.

Hyper Text = a(anchor(닻)의 첫글자)

출처 입력

html specification

html을 만드는 w3c라는 국제기구에서 만든 공식사용설명서

w3c 멤버들이 모여 미래의 웹의 기술을 결정하고 발표한 것= w3c recommendation

링크를 통해서 정보를 탐험하고 문제를 해결하고 있다면,

또 그 과정이 즐겁다면 나는 이미 공부를 잘하고 좋아하고 있는 것이다.

<!DOCTYPE html>
<html> 
  <head> 
    <title>본문</title> 
    <meta charset="utf-8"> 
  </head> 
  <body>
    <a href="#" target="_blank" //새탭 title="">//툴팁 : 마우스 오버됐을 때 설명박스생기는것
    // href = h(hyper text) ref(reference) 
  </body> 
</html>
WEB1 - 15. 웹사이트 완성

링크는 본드 또는 실

웹 책 대신 웹사이트라 표현

<!DOCTYPE html>
<html> 
  <head> 
    <title>본문</title>
    <meta charset="utf-8"> 
  </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>html</h2>
  </body> 
</html>
WEB1 - 16. 원시웹

수업의 목표

1. 웹페이지를 만드는 것

: 코딩이 무엇인가를 파악하는 것이 목표

 

2. 내가 만든 웹페이지를 인터넷을 통해서 누구나

가져갈 수 있게 하는 것

: 인터넷이 무엇인지 이해 하는 것

 

Internet Web
인터넷이 도시 웹은 건물하나
도로 자동차 한 대
운영체제 그 위에 있는 프로그램 하나

 

웹의 역사

1960 인터넷 등장

미국 핵 공격에 견딜 수 있는 통신시스템 개발,

중앙 집권형에서 정보 분산형

기업, 연구소, 대학, 군대에서만 사용

1990 웹 등장

웹의 고향은 스위스 swiss

스위스에 무엇이 있느냐 제네바 유럽 입자 물리 연구소

강입자 가속기(LHC)-> 아주 작은 입자를 보는 장치

인류의 현미경, 둘레가 27km

쇠로 된 튜브 안으로 아주 작은 입자를 고속 회전시켜서

입자와 입자를 충돌 시킬 때 어마어마한 에너지가 방출되면서

어떠한 작은 입자(힉스보선)를 발견할 수 있을 것이다라는 가설

-피터 힉스(노벨 물리학자 수상자)

127개국에서 모인 12000명의 엔지니어와 물리학자가 있는 곳

1980년에 비정규직 프로그래머로

팀 버너스 리가 취직

Enquire Within Upon Everything(무엇이든 물어보세요)라는 책에서 나온 첫 글자

enquire 웹의 전신을 10년동안 만듦

1990년대 연구소에 인터넷이 들어오고

1990.10 최초의 웹편집기 개발

1990.11 최초의 웹브라우저 world wide web 프로그램 개발

1990.12.24. 웹서버라는 프로그램을 만듦

info.cern.ch 웹의 메소포타미아(웹의 성지)

 

 

'생활코딩 > html' 카테고리의 다른 글

공부정리_HTML(17~20강,부록)  (0) 2021.09.12
공부정리_HTML(1~9강)  (0) 2021.09.12