기본html코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<html 코드 예시>
<!doctype html>
<html>
<head>
<title>WEB1 - HTML</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>
<img src="web.jpg" width="10%">
<p><a href ="https://www.w3.org/TR/2011/WD-html5-20110405/index.html"target="_blank"title="html5 specification"></a>html5 specification</a>
html5 specification html5 specification html5 specification html5 specification html5 specification
html5 specification html5 specification html5 specification html5 specification html5 specification</p>
</body>
</html>
[요약]
문제를 해결하기 위해 기획을 하고 구현을 한다.
<웹 만들기>
준비물 : 에디터 - 메모장, 텍스트 편집기, 비주얼 스튜디오 코드
편집기 실행
1. 비주얼 스튜디오 코드 폴더에서 바탕화면에 웹 폴더 만들어 열기.
2. 뉴 파일 > 1.html 생성
태그의 종류 (html에는 150개 정도의 태그가 존재)
<!doctype html> html 문서라는 의미
<html>head와 body를 감싸는 태그</html>
<head>본문을 설명</head>
<title>웹페이지의 제목 지정</title> title 태그는 검색엔진이 웹페이지를 분석할 때 가장 중요하게 생각하는 태그이기 때문에 title 태그를 쓰지 않으면 정말 큰 손해이다.
한글이 깨지지 않게 사용하는 코드 : <meta charset="utf-8">
<body>본문</body>
<strong>진하게</strong>
<u>밑줄</u>
줄바꿈<br>
<h1>heading1 제목1</h1>
<h2>heading2 제목2</h2>
<h3>heading3 제목3</h3>
<h4>heading4 제목4</h4>
<h5>heading5 제목5</h5>
<h6>heading6 제목6</h6>
<p>단락</p> <br>태그는 줄바꿈일 뿐이지만, <p>태그는 정보로서 더 가치있는 단락이라는 의미를 전달함.
<img src="이미지의 주소" width="크기 변경%"> src와 width는 속성이라고 함. 속성은 위치가 상관없음.
<ul> ul와 li 태그는 부모와 자식 관계로 고정되어 있음.
<li>목차</li>
</ul>
<ul>은 순서 없는 목록, <ol은 넘버링 목록>
<a href="링크">글자</a>
새탭으로 열기 <a href = "링크" target="_blank">글자</a>
툴팁으로 링크를 알려주기 <a href = "링크" target="_blank" title="링크이름">글자</a>
<참고>
검색엔진은 html코드를 판단한다. 제목과 내용을 태그를 근거로 정리한다.
웹을 만든다면 웹의 의미 정보전달 정확히.
페이지 우클릭 > 페이지 소스코드 보기
파일 추가 : 에디터 > 1.html 파일 우클릭 > duplicate >파일 복사 > 복사한 파일을 수정.(링크 제목에 맞게 내용 수정)
<서버와 클라이언트>
팀 버너스리 > 웹 브라우저, 웹 서버 프로그램을 만듬
웹 서버(server) : 정보 응답(response), http://info.cern.ch index.html(하드디스크)
웹 브라우저(client) : 정보 요청(request), 전기적 신호를 웹서버로 보냄> 웹서버에서 인덱스 파일을 전기적 신호로 보냄.
> 웹브라우저에 인덱스 코드가 도착. 웹브라우저가 읽고 해석하여 화면에 표시한다. (웹 동작)
웹 서버 : 자신의 컴퓨터에 웹 서버를 직접 깔아서 하는 방법.
웹 호스팅 : 이런일을 대행해주는 업체에게 맡기는 방법.
<참고 사이트>
https://advancedwebranking.com/html/
구글의 전세계의 수많은 웹페이지를 분석하고 결과를 보기좋게 정리한 사이트. 몇 가지 종류의 태그로 이루어졌는지 통계를 보여줌.
public domain image
unsplash.com
저작권에 구속받지 않고 자유롭게 사용할 수 있는 서비스
https://info.cern.ch/
유럽입자물리연구소 cern 소개 페이지
GitHub.com
개발자들이 자신의 소스코드를 안전하게 백업하고 백업된 소스코드를 매개로 개발자들끼리 협업하기 위해 고안된 중요한 사이트. 기능 중에 웹 호스팅 기능 있음.
생활코딩
어린시절 컴퓨터학원.(어도브 마이크로소프트) > 소프트웨어 만들기 어려웠음. 생산성낮음.
모바일을 기점으로 폭발적인 성장. >★소프트웨어의 극적인 생산성 향상.>자영업자가 생김.
API
EX) 자신의 앱 웹 서비스 지도서비스 장착
Cloud Computing
컴퓨팅 작업들을 로컬 컴퓨터가아닌 인터넷 너머의 거대한 컴퓨터로 함.
1주일만에 100만명의 방문자가 접속해도 클릭만하면 1분만에 1000대의 컴퓨터가 만들어져 서비스되기 시작함. 클릭만하면 해지도 가능.
App Store
홍보 결제 홈페이지 - 소프트웨어에 만드는것에만 집중하고 판매 결제 운영은 앱스토어로 아웃소싱한다 대신 30% 떼어감.
OPENSOURCE
SOURCE(코드)=설계도 작성, 건축설계도와 다른점은 코드는 설계도만으로 프로그램 생성 가능.
오픈소스 : 소스를 공개하자는 운동,공개하는 정책
초반에는 특이한 선각자들의 운동이었다면 오늘날엔 소프트웨어를 지배하는 가장 중요한 전략, 정책이되었음.
지금이 코딩하기 좋은 날이다 !
10년전에 해서 후회한다 왜그렇게 고생했을까.
쉬워진것은 프로그램밖에없다. 전통적인분야는 예나 지금이나 어렵다.
직원수
IBM 40 만명
MS 9.7만명
페이스북 4600명
인스타 13명
과거로선 상상할 수 없는일 = API 오픈소스 앱스토어 클라우드컴퓨팅으로 가능.
위에 있는 기업은 아래에있는 기업에게 인프라를 제공.
슈퍼 개인이 출현 마크주커버그 페이스북 창시자
하이패스 톨게이트 매표원 사라짐. 다수의 편리와 소수의 생존이 치환됨.
오늘날 가장 중요한 권력은 기술
기술을 지배하는 기술 코딩 = 프로그래밍
#오리엔테이션
예시)중국어 빈도수 10%에 6글자. 시험에 쉬운것은 나오지 않기때문에 어려운것만 집중한다.
교양의 영역은 조금만 노력해도 실력이 빠르게 향상된다.
직업의 영역은 노력해도 쉽지않다. 슬럼프
정보기술 분야는 매우 무한하다.
처음에 배우는것이 제일 중요한것이다, 재미있는 데까지 배워라. 너무 완주에 부담갖지마라.
지루하다는것은 멈추고 써먹으라는 신호가 아닐까? 그리고 나중에 다시 돌아와 가장 중요한 처음을 보아라.
#WEB
WEBn이란? 웹을 통해서 코딩을 배우는 수업이면서, 코딩으로 웹을 만드는 방법에 대한 수업입니다.
각 코스의 모듈들은 상위수업에 의존하고 있으므로 javascript를 공부하고 싶다면 web1의 html internet을 보아야한다.
html을 필두로 마인드맵처럼 뻗어나간다
web1을 공부했다면 web2 중 어떤것도 공부할 수 있다.
webn의 중심 목적은 프로젝트를 시작 할 수 있도록 돕는것이다.
웹을 만든 팀버너스리와 유럽입자물리연구소는 웹에 대한 일체의 저작권을 내려놓았다.
그덕에 웹은 누구의 주인도 아닌 모두가 주인이다. 생활코딩은 webn이 웹을 닮은 수업이 되기를 원했고 web1을 저작권이 없는 수업으로 만들었다.
누구나 비용없이 공부할 수 있고, 허락없이 수정할 수 있고, 계약없이 배포할 수 있다.
#WEB1 - HTML & Internet
1. 수업소개
나의 문제를 코딩으로 해결하려는 엔지니어라 상상하자.
30개의 동영상, 4시간정도의 재생시간. 책- 생활코딩!HTML + CSS + 자바스크립트 (인세가 비영리 단체 오픈튜토리얼스에 후원금으로 사용됩니다)
2. 프로젝트의 동기
개발자와 소통의 어려움을 겪는 동료들
강의를 시작하자 반응이 좋았고 판이 커짐.
오프라인의 한계가 있었고 유튜브가 뜸.
HD화질 지원- 얇은 글씨로 영샹으로 표현.
동영상으로 수업 공유.
과거에는 상상도 할 수 없었던일. 큰 행운.
아날로그 > 디지털, 오프라인 >온라인 으로 변환하는 시대.
정리와 순서의 한계. > 직접 만들자
3. 기획
무언가를 만들고 계획하는일 -기획
웹사이트의 형상을 그림으로 끄적임.
4. 코딩과 HTML
기획이 끝났으면 구현할 차례.
원인 : 코드=소스=컴퓨터 언어
결과 : 애플리케이션=앱=프로그램=웹페이지=웹페이지가 모이면 웹사이트
웹페이지를 만드는 언어 - HTML(쉽다,중요하다.)
웹은 저작권이 없는 퍼블릭 도메인이다. 구글 마이크로소프트 애플 네이버의 웹브라우저 등
5. HTML 코딩 실습 환경 준비
에디터가 필요하다.
각 운영체제에 준비된 에디터 메모장,텍스트 편집기.
더욱 전문적인 중장비 - 마이크로소프트에서 만든 비주얼스튜디오코드(무료)
2023년 최고의 웹 개발 에디터는 무엇인가요? 라고 검색한다.
웹이라는 폴더안에 웹페이지를 만들것이다.
비주얼스튜디오 다운로드 오픈 폴더 바탕화면에 웹폴더만들어 열기.
뉴 파일 1.html을 생성. (웹의 확장자 html)
파일 옆의 동그라미는 저장하지 않음을 의미.
여는 방법
1.파일을 드래그하여 웹브라우저에 올려놓고 엔터.
2. 브라우저에서 윈도우는 ctrl + O 를하면 파일 찾기 기능이 됨
6. 기본 문법 - 태그
똑같이 만들지말고 자신의 정보로 만들어보라.
한글로해도됨.
글을적고 저장> 웹에서 리로드 하면 출력된다.
우리는 이 글에서 중요한 단어를 진하게 하고싶다.
웹을 지배하는 문법=인터넷을 지배하는 문법 =제일 쉬운 문법 = 태그
앞 = 열리는 태그 , 뒤 = /닫히는 태그
<strong>진하게</strong>
<u>밑줄</u>
우리는 쉽게 사용하지만 누군가가 고생하여 만들었기 때문에 가능한 것.
옷에 붙은 택 =옷을 설명한다.
단어의 뜻을 모르겠다면 사전을 찾아보면 일상과 밀접한 용어이다.
컴퓨터공학은 하나의 거대한 시 이다.
※한글이 깨지면 어떻게 해야 하나요?
<meta charset="utf-8">를 추가해보세요. 여러분이 파일을 저장하면 UTF-8로 저장이 됩니다. 그럼 웹브라우저에게 UTF-8로 페이지를 열라고 해줘야 합니다.
그걸 브라우저에게 알려주는 코드가 <meta charset="utf-8"> 입니다.
7.혁명적인 변화
처음 배우는것이 가장 중요한 것이다.
W3C 국제민간기구 웹을 만드는 기구. 페이지 우클릭> 페이지소스코드 보기.
HTML태그를 알고 본것과 모르고 본것의 느낌차이는 어마어마하다
뭘 모르는지 모르는것과 뭘모르는지를 아는 상태.=혁명적
HTML h1 tag를 검색하라. 직접 추론하여보라.
<h1>heading 제목</h1>
1~6까지 있다.
정보기술의 발달.
웹이 없었다면 검색엔진이 존재하지 않는다.
검색엔진이 없었다면? 도서관에가서 찾아다녀야한다.
8.통계에 기반한 학습
html에는 150정도의 태그가 존재.
모두 다 외울 필요는 없다. 찾으면됨.
구글에서는
전 세계에 있는 수많은 웹페이지를 분석합니다.
그 분석 결과를 공개했었는데
그 결과를 보기 좋게 잘 정리 정돈한 사이트가 있습니다.
https://advancedwebranking.com/html/
몇가지 종류의 태그로 이루어져있는지 통계를 보여준다.
25~26개정도의 태그를 가지고있는 웹이 가장 많다.
1등 head
9. 줄바꿈
코드에서 줄바꿈을해도 웹페이지에서는 반영되지 않는다.
줄바꿈 태그를 사용한다.
<br>줄바꿈
<br>태그는 줄바꿈이라는 시각적인 의미만을 가지고 있기때문에 닫지 않는다.
<p> 단락 paragraph tag</p>
<br>태그는 그낭 줄바꿈일 뿐이지만 <p>태그는 정보로서 더 가치 있는 단락이라는 의미를 전달한다.
10. html이 중요한 이유
일반인이 쓴 제목 - 글자 크기 진하게
지식인이 쓴 제목 - h3태그
검색엔진은 html코드를 판단한다. 제목과 내용을 태그를 근거로 정리한다.
웹을 만든다면 웹의 의미 정보전달 정확히.
웹이 중요하게 생각하는 접근성 -시각장애인은 스크린리더라는 각종 보조장치를 이용한다.
html을 이용하여 의미를 정확히하면 배려할 수 있다.
11. 최후의 문법 속성과 img
웹에 이미지 추가하기
이미지를 뜻하는 태그 <img>
<img(image) src(source)= "이미지의 주소">
저작권에 구속받지 않고 자유롭게 사용할 수 있는
이미지를 구할 수 있는 여러 서비스가 있습니다.
public domain image
unsplash.com
이미지를 web폴더에 저장한다. 이름을 web.jpg로 바꾼다.
<img src="web.jpg">
<img src="web.jpg" width="10%"> 크기변경.
src="web.jpg" 와 width="10%"는 속성(attribute)이라고한다.
속성은 위치는 상관없다.
태그가 태그의 이름만으로 정보가 부족할 때 속성으로 의미를 부여할 수 있다.
12. 부모 자식과 목록
태그간의 관계
<parent>
<child></child>
</parent>
부모 자식의 관계는 필요에 따라서 바뀔 수있다.
그런데 몇몇 태그들은 부모 자식 관계처럼 고정된 관계인 태그들이 있다.
목차 태그 list
<li></li>
*alt +클릭을하면 커서가 여러개 생기고 한번에 여러줄의 코드를 쓸 수 있다.
두개의 리스트가 있을 경우.
<ul></ul> 추가
자식 태그를 드래그 + tab하여 들여쓰기.
li태그는 그 항목이 어디서부터 어디까지가 서로 연관된 항목인지를 경계를 짓기위한 부모태그를 반드시 필요로한다.
ul태그 또한 반드시 자식 태그를 가지고 있다.
코딩을 공부할 때는 극단적 사고가 필요하다.
<ul>을 <ol>로 바꾼다. 자동으로 넘버링 된다.
unordered list의 약자
ordered list의 약자
13. 문서의 구조와 슈퍼스타들
우리는 html의 문법을 마스터했다고 말씀드렸습니다.
이번 시간에는 가장 통계 순위가 높은 인기있는 태그들을 배운다.
문장이 모이면 페이지가되고, 페이지가 모이면 책이된다.
책에는 표지가 있고, 표지에는 제목과 저자가 표기된다.
이처럼 정보가 많아짐에 따라서 정보를 잘 정리정돈 하기 위한 체계, 구조라는 것이 필요하다.
구조 만드는법.
<title>WEB1 - HTML</title> 웹페이지의 제목 지정.
특히 title 태그는 검색엔진이 웹페이지를 분석할 때 가장 중요하게 생각하는 태그이기 때문에 title 태그를 쓰지 않으면 정말 큰 손해이다.
한국어 문자를 입력하면 이상한 문자가 출력된다.
컴퓨터는 0과 1로 저장하는데 여러가지 약속이 있다.
우리가 작성한 파일은 utf-8방식으로 저장된 상태이다.
웹에서도 utf-8로 열도록 해야한다.
<meta charset="utf-8">
character는 문자라는 뜻이고 set은 규칙이라는 뜻. 브라우저에게 명령하는것.
위에 있는 코드는 본문을 설명. <head></head>
밑에 있는 코드들은 본문. <body></body>
html의 모든 태그들은 head 또는 body 태그 안에 놓이게 되는것이다.
이 head와 body를 감싸는 최고위직 태그가 있는데 <html></html>이다.
그리고 이 문서는 html이라는 뜻에서 <!doctype html>이라고 써준다.
아무 웹페이지를 우클릭 > view page source를 해보면 구조를 확인할 수 있다.
14. HTML 태그의 제왕
<a> 링크
anchor 닻
html spcification(명세) 설명서
w3c 국제기구에서 운영하고있는 문서
w3c에서 recommandation이라는 문서를 발표하고 이 문서를 웹브라우저 제작업체들이 보고 그에따라 웹브라우저를 만든다.
hyper text 링크 reference 참조 href
<a href = "링크">글자</a>
새탭으로 열기 <a href = "링크" target="_blank">글자</a>
툴팁으로 링크를 알려주기 <a href = "링크" target="_blank" title="링크이름">글자</a>
15. 웹사이트 완성
link 본드, 실
Websiite 책
에디터> 1.html 파일 우클릭 > duplicate > (파일복사)
※비주얼스튜디오에 duplicate 없음.
>복사한 파일을 링크 제목에 맞게 내용을 수정해준다.
>웹 완성
16. 원시웹
목표 1. 웹페이지를 만드는 것 (완료)
목표 2. 내가 만든 웹페이지를 인터넷에서 누구든 가져갈 수 있게 하는 것
인터넷이란 무엇인가?
웹의 역사
인터넷과 웹이 어떻게 세상에 나오게 되었는가?
인터넷이 도로라면 웹은 자동차 한 대 이다.
인터넷 - 웹 ftp email ... etc
1960 인터넷 등장 -핵 전쟁,핵 공포,핵 공격당하면 통신마비, 강인한 통신시스템의 필요성 > 인터넷 등장
1990 웹 등장-스위스에서 탄생,물리학 연구소 강입자 가속기 , 최근 몇 년전 실험에서 힉스 존재 발표. 힉스 노벨물리학상
유럽입자물리연구소 > 팀 버너스 리 프로그래머 enquire 웹의 전신. >인터넷이 도입되자 웹페이지를 만드는 편집기를 만들고 > 첫번째 웹브라우저 world wide web
https://info.cern.ch/-웹의 메소포타미아
인터넷을 응용한 웹이 등장하면서 대중들에게도 쓸만해진 시스템이 됨.
인터넷과 웹은 폭발적으로 동반성장해서 지금에 이르게됨
17, 인터넷을 여는 열쇠 : 서버와 클라이언트
인터넷이 동작하기 위한 컴퓨터의 최소 개수는? 두 대
두 대의 컴퓨터가 서로 정보를 주고 받는다.
팀 버너스리 > 웹 브라우저, 웹 서버 프로그램을 만듬
웹 서버(server) : 정보 응답(response), http://info.cern.ch index.html(하드디스크)
웹 브라우저(client) : 정보 요청(request), 전기적 신호를 웹서버로 보냄> 웹서버에서 인덱스 파일을 전기적 신호로 보냄.
> 웹브라우저에 인덱스 코드가 도착. 웹브라우저가 읽고 해석하여 화면에 표시한다. (웹 동작)
웹 서버 : 자신의 컴퓨터에 웹 서버를 직접 깔아서 하는 방법. 어렵지만 배울 것이 많다.
웹 호스팅 : 이런일을 대행해주는 업체에게 맡기는 방법. 쉽지만 배울것이 적다.
웹 호스팅 먼저 해보고 웹 서버로 원리를 알아보기를 추천. 어려우면 호스팅만 보고 끝내도 됨.
18. 웹 호스팅
직접 웹 서버를 운영 하는 일 : 컴퓨터가 있어야하고, 냉장고처럼 항상 켜져 있어야함.
인터넷에 연결된 컴퓨터 하나를 호스트 라고함.
이런 컴퓨터를 빌려주는 사업을 호스팅 이라고 함. = 클라우드
웹서버를 전문적으로 빌려주는 비즈니스를 웹호스팅 업체라고 부름.
GitHub.com
원래 웹 호스팅을 위한 사이트는 아님. 개발자들이 자신의 소스코드를 안전하게 백업하고 백업된 소스코드를 매개로 개발자들끼리 협업하기 위해 고안된 중요한 사이트.
기능 중에 웹 호스팅 기능 있음.
깃허브 로그인 > 저장소(repsitory)(소스코드 보관하는 곳) 생성 > 이름 쓰고> 공개할지 비공개할지 정함(공개)> 생성> uploading an existing file. 링크 클릭>파일을 모두 드래그해서 업로드한다. >설명을 쓴다. >commit changes > 파일을 클릭하면 코드를 볼 수 있다. >주소를 공유하면 타인과 공유할 수 있다.
웹 호스팅 활성화
셋팅 > pages > none을 main으로 바꿈 > 시간이 오래걸림 > 깃헙 창을더 띄운다. >actions에서 작업이 돌아가는것 확인> actions리로드 > page build and deployment>실시간 진행과정확인
※page build and deployment 없음
웹 호스팅 완료 > 파일수정했을 경우>저장소 홈> add file> upload files >작업한 파일 다시 드래그해서 떨어뜨림.> 설명적음> commit >actions에서 진행확인.
나 컴퓨터 - 1. index.html 파일 업로드 > 2.호스팅 업체로 업로드됨
방문자 - 5. 방문자가 도메인주소로 접속. 8.웹브라우저에 표시됨.
hosting업체> 3.웹호스팅에 설치되어있는 웹서버 활성화 > 4.컴퓨터 도메인에 이름 6.웹서버가 index.html을 읽음, 7.방문자에게 index.html 소스코드를 전송함
웹서버가 동작하는 원리가 궁금하다면 수업들을것.
19. 웹서버 운영하기.
live server- 비주얼스튜디오코드의 확장 기능 2900만회 다운로드됨
비주얼스튜디오 사이드메뉴 extensions- 라이브서버 인스톨> 하단에 고 라이브 버튼 보이면 성공> 이버튼을 클릭하면 Port:5500 표시됨. 성공적으로 웹서버가 실행됨.> 동시에 http://127.0.0.1:5500/주소 웹페이지가 실행됨>지금 자신이 실행한 웹서버를 통해서 서비스되고 있는 웹페이지를 보고 있는것. >라이브서버의 진짜 유용함은 실시간 편집기능. >코드를 편집하면 실시간으로 내용이 변경됨 리로드할필요가 없음.>웹서버를 끄려면 port 버튼 클릭>웹사이트가 열리지 않는다.
컴퓨터에 index.html,웹서버,웹브라우저가 설치되어 있다.
여기 두개의 주소가 있다.
file://Desktop/web/index.html : 브라우저가 파일을 직접 열었을 때 주소이다.
http://127.0.0.1:5500/index.html : 웹서버를 통해서 접근했을때의 주소이다. 웹서버를 끄면 두번째 주소는 접속이 안된다.
http (Hyper Text Transfer Protocol) 하이퍼텍스트를 전송하는 프로토콜(통신규약)
127.0.0.1 ( Internet Protocol Address) 인터넷 프로토콜에서 사용하는 주소 (IP) 아이피는 43억개 있다 .127.0.0.1 은 내 컴퓨터 자신을 가리키자고 전세계적으로 약속한 주소이다.
하나의 컴퓨터에 여러개의 서버가 동작하고 있다면 웹 브라우저는 누구와 통신해야 할까요?
그래서 각각의 서버는 각자의 포트번호를 가지고 있다.
웹브라우저에 입력한 주소의 포트번호 5500니까 웹브라우저는 5500번 포트에 연결되어 있는 웹서버와 통신할 수 있는것이다.
현실의 웹은
웹브라우저와 웹서버가 서로 다른컴퓨터에 설치되어 있다.
지구반대편에있는 컴퓨터의 문서도 마치 내 컴퓨터에 있는 문서처럼 볼수 있다.
휴대폰에 설치된 웹브라우저와 데스크탑에 설치된 웹서버가 서로 통신을 할 수있다면 어떨까?
이작업은 여러가지 이유로 작업이 안될 수도있다.
1. 휴대폰과 컴퓨터를 같은 네트워크에 연결해야 한다.(같은 와이파이)
2. 내컴퓨터의 IP address를 알아낸다. 복잡하다. ip address라는 확장기능 설치한다.오른쪽 하단에 ip 주소가 뜬다. 클릭하면 컴퓨터가 가지고 있는 다른 ip주소가 보여진다 이주소를 사용하면 된다.
3. 우리가 알아낸 ip address를 웹브라우저에 입력하고 접속을 시도하면 마법처럼 웹페이지가 표시된다.
여러분은 웹과 인터넷의 가장 큰원리를 파악한것입니다.
20. 수업을 마치며1
기술 - 본질 혁신
혁신 - 교양 직업
21. 수업을 마치며2
지금은 공부한 것을 사용하기에 좋은 때이다.
눈에 보이는 복잡함
눈에 보이지 않는 복잡함 : 공부한 것을 활용하려고 할 때.
<input type="checkbox"> 체크 박스
우리가 체크박스가 잘 되는지 활용하려면 최소 두번의 확인이 필요.
체크박스가 2개이면 4번 확인필요.
체크박스가 3개이면 8번 확인 필요.
체크박스가 50개이면 2에 50승. = 1000조=1024의 5승
눈에는 체크박스가 50개이지만 1000조가 숨어있다. > 버그발생.
작은 기능도 나중엔 어렵게된다.
좌절감을 느끼게된다.
단순한것을 조금만 배워도 매우 복잡하고 많은 이득을 보게된다.
지금 충분히 실습해보고 절망을 느끼고나서 진도를 나가면 행복이 찾아온다.
22. 수업을 마치며3
공부를 최소한으로 배워서 최대한으로 써먹자
웹사이트를 아름답게 하고싶다면 CSS를 배우자
CSS는 HTML이 생긴지 4년뒤에 태어났다.-웹퍼블리셔,웹디자이너 발전
WEB2 CSS를 공부해라
사용자와 상호작용하는 웹페이지 > 자바스크립트를 공부
자바스크립트는 HTML이 생긴지 5년뒤에 태어남.
이언어가 나타난 후에 웹 프론트엔드 엔지니어 웹 인터랙티브 디자이너와 같튼 직업이 발전하기 시작함.
WEB2 자바스크립트를 공부해라
백 엔드 기술 - 하나의 파일을 변경하면 1억개의 웹페이지가 동시에 바뀐다.
PHP, JSP,NODE.JS에 익스프레스,파이선의 장고,루비의 루비온레일즈,ASP의 닷넷과 같은 이런 기술들은 바로 이런목적을 위해서 고안된 기술들입니다. 이 기술들은 서로 경쟁관계에 있기때문에 이중에 하나를 공부하면된다. 이 기술을 위해 종사하는 엔지니어들을 백엔드 엔지니어라고 부른다. 백엔드 기술을 배우고 싶다면 WEB-2 PHP 또는 WEB2 JSP와 같은 수업 중에 하나를 선택해서 공부하시면 됩니다.
웹사이트로 돈을 벌고 싶다면 웹페이지에 광고를 달아서 이 광고의 노출에 따라서 돈을 벌 수 있습니다. > WEB2 광고 수업
저는 앞으로 WEB1을 뿌리로하는 여러 주제의 WEB2,WEB3,WEB4를 만들려고 해요
WEB1을 기반으로해서 출판, 직접 수업만드는 등 허락받지 않고 계약을 체결하지 않아도된다.
알고있는것을 공고히 하는 방법 : 알고있는것으로 프로젝트를 함, 알고있는 지식을 콘텐츠로 만들어서 누군가에게 알려준다.
여러분의 컨텐츠를 만들었으면 좋겠어요.
23. 부록 : 코드의 힘
세상에는 수 많은 컴퓨터 언어들이 있습니다. C,C++,자바,파이썬,PHP,자바스크립트 등등등.이 모든 언어들은 시시가각 강력해지고있다. 이 언어들을 가지고 할 수 있는 일들이 기하급수적으로 늘어나고있다. 지금까지 우리가 배운 코드인 HTML을 이용해서 바로 이 코드의 힘을 느껴보는 시간입니다. 우리에게는 상상력이 있기때문에 C,C++,자바를 배우지 않았지만 이미 배운 HTML을 통해서 아직 배우지 않은 언어의 힘 또한 느낄 수 있다. 이를 위해서 만든 특별 부록이다.
24. 부록 : 코드의 힘- 동영상 삽입
동영상 서비스의 동영상을 웹사이트에 포함시키는 방법
유튜브 동영상 >공유> 퍼가기(EMBEDED> iframe코드 태그
코드를 카피해서 나의 사이트에 추가한다.
누군가는 동영상 서비스가 잘 동작하도록 하기 위해 엄청난 자본과 인생을 쏟아붙고 있다.
우리도 생산자가되어 이런 가치를 만들 수 있다.
25. 부록 : 코드의 힘 - 댓글 기능 추가
우리가 지금까지 만든 웹사이트는 상호작용 할 수 없다.
방문자와의 교류 수단. 댓글
직접 구현하는 것은 html로는 불가능하고 백엔드 기술을 알아야한다.
php,jsp,파이썬의 장고 이런 기술을 이용해서 데이터베이스까지 활용해서 구현하는것
그 기술만 있어선 안되고 상당한 기술력을 요구한다.
댓글은 스팸이 달린다. 댓글이 스팸인지 아닌지 기계가 판단할 수 있는 스팸차단기능
사용자들이 이미지를 업로드 할 수 있게 했으면 좋겠고 페이스북이나 구글 플러스같은 서비스랑 연동했으면 좋겠고 이런 여러가지 기능이 추가되면 이 댓글이라는게 별것 아닌 것 같지만 굉장히 많은 기능성이 필요한 것이다.
남들이 만든 댓글을 우리 웹사이트에 포함시키면 직접 구현하지 않고도 가능하다.
disqus라는 서비스를 사용해서우리 웹페이지 하단에 댓글 추가하겠다.
livere라고 하는 훌륭한 서비스가있다. 이 서비스도 추천한다.
diisqus> 로그인 > your sites >new >웹사이트 이름>카테고리정하고 >크리에이트
어떤 특정 사이트에 달 수 있는 댓글이 만들어진다. > let's get start it
>universal code>코드 카피>웹사이트 하단에 추가
내용 몰라도됨 html코드인것
로드할 수 없다고나옴.
웹서버를 통하지않고 disqus를 열려고하면 안열림. 보안상의 이유
localhost(127.0.0.1 자기컴퓨터)/index.html
댓글창 생김.이미지 업로드 가능.무료
26. 부록 : 코드의 힘 : 채팅 기능 추가
방문자와 채팅할 수 있는 기능 추가.
tawk.to라는 서비스를 이용하면 무료로 추가할 수 있다.
로그인>설정> 위젯코드 복사></body> 위에 추가.
웹페이지를 열면 작동 안함. 주소가 file로 되어있다(웹서버를 통하지않음)
127.0.0.1, 로컬호스트, 도메인 이용 해야함.
27. 부록 : 코드의 힘 : 웹사이트 방문자 분석기
구글 애널리틱스 월간 천만 조회수까지는 무료사용가능.
측정 시작 > 계정 설정 > 계정 이름 > 다음 > 속성설정 서비스 이름 > 시간대 대한민국 > 다음 > 비즈니스정보 입력안해도됨> 약관 >대한민국언어 > 동의 > 저장
구글 분석기의 구조
계정(account) - 개인, 단체 , 회사
속성(property)- 서비스
데이터 스트림(data)- 웹,안드로이드,ios
데이서 스트림>플랫폼 웹> 웹사이트 주소 슬래시,https 뺌,
>스트림 이름 >스트림 만들기
여러분들의 속성에 속하는 스트림을 추가함.
>웹스트림 세부정보에서 기다리면 설치 안내 페이지>직접설치에서 코드 복사
웹사이트의 각 페이지 소스코드에서 head 요소 바로 다음에 붙여 넣으세요.
1.html, 2.html, index.html 모든 페이지 헤드에 붙여넣어야함.
google analytics demo를 검색하면 구글이 제공하는 데모 서비스가 있음.
구글 애널리틱스 프로퍼티 :구글 머천다이즈 스토어 링크 클릭.>샘플분석기 나옴 >보고서 수명주기(라이프사이클)
사용자 메뉴 : 방문자 정보 연령 성별 국가 장치
수명주기 : 방문한 사용자들이 어떤 일을 하는가. 첫방문(획득),활동(참여),구매(수익창출),재방문(유지)
실시간 사용자 인구통계 : 기간지정 도시 성별 언어별 사용자
기술 : 어떤 기술로 엑세스하고있는가 > 웹 앱 ,어떤운영체제,어떤디바이스,,어떤브라우저,어떤해상도,앱 버전
수명주기 획득 : 신규 사용자를 어떻게 획득했는가. 새사용자의 접근방법
참여도 : 얼마나 열심히 우리사이트를 이용하고있는가 참여시간
페이지 및 화면 어떤페이지에 많이 접속했는가
수익창출 : 우리가 돈을 얼마나 버는가 .어떻게 많이 버는가
유지: 재방문자 현황
프로그래밍/생활코딩
생활코딩 WEB1-HTML 필기
반응형
반응형