참고 - 생활코딩 WEB 11 ~ 18
https://opentutorials.org/course/3084/18407
최후의 문법 속성과 img - 생활코딩
--- 지금까지 가장 중요한 문법인 태그를 배웠습니다. 이번 시간에는 태그의 심화된 문법인 속성(attribute)을 배우게 될 것입니다. 이것까지 배우면 HTML의 기본 문법을 완전히 마스터한 것이 됩니
opentutorials.org
1. img 태그에 속성(소스, source, src)추가해 이미지 표시하기
1) 인터넷에 있는 이미지 추가하기
<img src="이미지 주소">
2) 컴퓨터에 있는 이미지 추가하기
(public domain image 검색 또는 https://unsplash.com/ko 에서 저작권 무료 이미지 다운 가능)
<img src="이미지이름.확장자">
3) 이미지 크기 조정
# 숫자나 %로 크기 조정 가능
<img src="snow.jpeg" width="90%">
<img src="snow.jpeg" width=400>
2. 부모, 자식 태그
# 부모, 자식 태그는 아래와 같은 형식
<부모태그>
<자식태그></자식태그>
</부모태그>- 필요에 따라 관계가 달라질 수 있음
- But, 몇몇 태그는 고정된 관계(ol - li 등)
3. 목차만들기 - li, ul, ol
`<li>` list `</li>`
`<ul>` unordered list `</ul>`
`<ol>` ordered list `<ol>`
4. 제목 지정 - title
`<title>` WEB1 - html `</title>`
5. UTF-8로 웹브라우저 열기
글자 깨질 때 사용
<meta charset="utf-8">
6. head 와 body
`<head>` : 본문을 설명하는 태그
`<body>` : 본문에 해당하는 태그
`<!doctype html>` `<html>` : 이 웹페이지가 HTML로 만들어졌다는 것을 표현. 문서의 시작에 작성.
7. 링크 태그
HTML의 약자, HyperText Markup Language에서 HyperText를 담당하는 태그.
`a` : anchor의 약자
`href` : HyperText Reference의 약자
`target="_blank"` : 링크를 클릭했을 때 새창에서 페이지가 열리게 하는 속성
8. 웹사이트 만들기
`웹사이트 web site` : 링크를 통해 서로 결합되어 있는 웹페이지들의 그룹
9. 웹의 역사
인터넷과 웹은 같을까? 다를까?
인터넷을 도시로 비유하자면, 웹은 도시 위에 있는 건물 하나임. 인터넷을 도로라고 비유하면, 웹은 도로 위를 달리는 자동차 한 대라고 할 수 있음. 인터넷이 운영체제라면, 웹은 운영체제 위에서 동작하는 하나의 앱이라고 할 수 있음.
즉, `웹은 인터넷의 부분집합`
1960년 - 인터넷이 탄생
1990년 - 웹이 시작
이처럼 30년의 차이를 두고 세상에 나옴.
1960년 전쟁이 막 끝났을 당시. 통신시스템이 핵공격에 취약하다는 것을 발견하고 이런 문제를 극복하기 위해 분산된 형태의 통신시스템을 구상하게 되었는데, 그게 바로 인터넷의 시작.
1990년, 스위스에서 웹이 탄생함. 스위스에는 유럽입자물리 연구소(CERN)가 존재하는데, 127개국에서 모인 약 12000명의 과학자와 엔지니어가 모인 곳임. 여기에 1980년, 팀 버너스가 오게 됨.
팀 버너스는 소프트웨어 엔지니어로 물리학 연구소에서 일을 하게 되면서 웹의 전신이 될 프로그램을 만들게 됨. 1990년, 인터넷이 연구소에 도입되면서 팀 버너스는 지금까지의 경험에 인터넷을 합성하는 작업을 하게 되고, 1990년 10월 웹페이지를 편집하는 프로그램을 만듦.
이후 11월 세계 최초의 웹브라우저가 탄생했고 이게 바로 world wide web.
12월 24일 마침내 웹서버를 완성하며 info.cern.ch 라는 도메인 네임을 부여함.
세계 최초의 웹페이지.
10. 서버와 클라이언트
웹서버가 설치된 컴퓨터 - info.cern.ch 라는 주소를 부여하고 어떤 디렉토리에 index.html이라는 파일을 저장.
웹브라우저가 설치된 컴퓨터 - 주소창에 http://info.cern.ch/index.html 입력
웹브라우저가 설치된 컴퓨터는 인터넷을 통해 전기신호를 info.cern.ch라는 주소의 컴퓨터에 보냄.
전기신호를 통해 index.html이라는 파일 코드를 원한다는 요청을 보냄
--> 웹서버라는 프로그램이 파일을 찾음
--> 그 내용을 읽어 전기 신호로 바꿈
--> 웹브라우저가 설치된 컴퓨터에 신호를 보냄.
--> index.html 파일의 내용, 즉 코드가 도착함.
--> 웹브라우저는 코드를 읽어 웹페이지를 화면에 출력
웹브라우저가 설치된 컴퓨터 - 정보를 요청함 `클라이언트 컴퓨터`
웹서버가 깔린 컴퓨터 - 정보를 응답함 `서버 컴퓨터`
11. 웹호스팅 github pages
호스트 : 인터넷에 연결된 컴퓨터 하나 하나를 칭함.
호스팅 : 이런 컴퓨터를 빌려주는 사업.
웹호스팅 업체 : 웹서버를 전문적으로 빌려주는 비지니스
깃허브 이용해 웹호스팅하기
위에서 만든 파일 업로드
setting > pages > Branch를 main 혹은 master로 선택.