- html은 웹페이지를 구성하는 기반 언어이다.
- web 검색 엔진은 태그를 통해 정보(페이지)를 찾는다.
- html 태그를 의미에 맞게 정확하게 사용해야 검색엔진의 선택을 받을 수 있다.
- 부정확하 태그의 사용은 검색엔진으로부터 외면받는, 존재하지 않는 정보로 취급받을 수도 있다.
- accessibility, 접근성. 스크린리더 등 프로그램으로 읽히는 페이지는 html 태그의 정확한 사용이 중요하다.
- 검색엔진은 <title>태그를 책 제목과 같은 의미로 파악한다.
- * 우리가 작성한 html 파일은 UTF-8 문자집합에 따라 인코딩되어 저장된다. * 따라서 웹브라우저에서 해당 문서를 정확하기 읽기 위해서는 같은 형식에 문자집합으로 읽을것(디코딩할것)을 미리 알려야한다.
-
: headings(제목)를 나타낸다. 기본적으로 bold체, 글씨가 크고 차지하는 범위가 넓다. h1, h2, h3...., h6까지 존재하며, 숫자가 작을 수록 크다.
-
: new line을 삽입한다. 닫는 태그가 존재하지 않는다. - : paragraph를 정의한다. 문단을 만들어 안에 내용이 시각적으로 분리되도록, 문단 위 아래 빈 공간을 자동으로 삽입한다.
-
: src(source)의 링크에서 이미지를 가져와 페이지에 삽입한다. 닫는태그가 없다.
- : (list)항목을 정의. 어디부터 어디까지가 연관된 항목인지 경계를 짓기위해(grouping 하기위한) 부모태그가 반드시 필요하다.
-
- 태그의 부모태그. unordered list, 자식태그
- 가 부모태그를 반드시 필요로 하는것과 마찬가지로 부모태그인
- 도 반드시 자식태그를 갖고있다.
-
- 태그의 부모태그. ordered list, 리스트 항목에 앞에 **순번을 붙여준다.**
- <title></title> : 페이지의 제목을 정의한다.
-
<!doctype html> : 태그 위에 이 문서가 html 문서임을 알리기 위해 관용적으로 쓴다.
- : 태그와 태그를 감싸는 단 하나의 최고위층 태그.
- : 본문을 설명하는, 다시 말해 body를 설명하는 태그는 태그로 묶어야 한다.
- : 본문에 해당하는 내용은 모두 태그로 묶기로 약속됨. * 따라서 html에 있는 모든 태그는 또는 태그 밑에 놓이게 된다.
-
: anchor(닷), 정보의 바다에 정박한다. 링크를 삽입하는 태그이다.
- 링크이름문자 : 형식으로 사용하고 열린 태그와 닫힌 태그 사이 웹에 표시할 문자를 넣을수있다.
- : target="_blank"는 링크 클릭 시 새 탭으로 창을 열고,
- title은 링크위에 마우스를 올려두면 설명을 보여준다. target 안 쓰면 디폴트는 현재창에서 이동
- href는 Hyper Text Reference를 의미. 즉, 참조할 Hyper Text(주소)를 받는 attribute이다.
-
-
인터넷과 웹은 다르다!
- 인터넷이 도시라고 한다면, 웹은 도시의 건물 하나 정도의 역할이다.
- 인터넷에는 웹, FTP, email 등 많은 서비스가 존재한다.
- 1960년 핵공격에도 버틸 수 있는 통신장치로써 인터넷이 발명됐다.
- 중앙 집중적인 통신 시스템에서 중앙이 없는, 분산적인 통신 시스템으로 변화. 각각의 통신장치는 전화국과 같다.
- 현재에도 구글, 아마존 등 많은 기업들이 존재할 수 있는 가장 중요한, 거대한 인프라로써 역할한다.
- 웹은 이로부터 30년 뒤인 1990년 12월 24일, 스위스에서 팀 버너스리에 의해 태어난다.
- 정보혁명의 시작이다. info.cern.ch
-
인터넷의 기초 동작원리
- 웹은 Browser와 Server 간의 요청(request), 응답(response)로 작동한다.
- 요청하는 컴퓨터를 Client(Browser), 응답하는 컴퓨터를 Server라는 이름으로 불리게된다.
-
웹 호스팅
- 인터넷에 연결된 컴퓨터(호스트)를 빌려주는 비즈니스 ~= 클라우드
- 호스팅 중, 웹서버 운영에 필요한 소프트웨어까지 깔아서 빌려주는 것을 웹 호스팅
- 따라서 웹서버 동작원리를 몰라도 누구나 간단하게 자기만의 웹페이지를 만들 수 있다.
- GitHub reopsitory -> setting -> pages를 통해 GitHub pages 서비스를 이용해서 내 웹사이트를 올릴 수 있다.
- 내가 index.html을 작성하여 웹서버(GitHub Pages)에 올린다.
- visitor(client)는 웹서버에 jang-namu/index.html 페이지를 요청(request)한다.
- 웹서버는 해당 경로의 index.html 파일을 찾아 client에게 전송, 응답(response)한다.
-
웹서버 운영하기
- 대표적인 웹서버 제품에는 Apache, IIS, Nginx등이 있다.
- VSCode에서도 확장기능으로 Live server를 제공한다.
- Live server의 멋진 점은, 새로고침하지 않아도 자동으로 업데이트 된 내용을 반영한다!
- Live server를 키면 내 웹페이지가 나온다.
- https://127.0.0.1:5500/index.html 중 https는 HyperText Transfer protocol의 's', 안전한 검증받은 통신규약을 의미한다.
- 127.0.0.1은 Internet Protocol Address(IP주소)로 약 43억개의 IP주소 중 해당 주소는 내 컴퓨터, 즉 컴퓨터가 자기 자신을 가르키는 특별한 주소다.
- ':' 뒤에오는 5500은 포트번호이다. 하나의 컴퓨터에서 다수의 서버가 실행되고 있을 때, 컴퓨터는 포트번호를 통해 이를 구분한다.
- 로컬에서 이루어지는 것이 아닌, 원격 통신을 가능하게 하는 실습을 위해서 컴퓨터와 핸드폰(휴대용컴퓨터)를 사용하는 방법을 소개한다.
- 컴퓨터와 핸드폰이 같은 네트워크 아래 있어야 하므로 같은 wifi에 접속해준다. 이로써 2개의 호스트가 같은 네트워크 안에 존재하게 된다.
- 컴퓨터(서버)의 IP주소를 알아내, 핸드폰(웹브라우저)에서 접속하면 성공이다. (포트번호까지 작성해야한다.)
- 댓글창 기능 삽입하기(disqus 이용), 채팅기능 추가(tawk 이용, 방법은 동일하다.)
- disqus에 가입해서, 댓글창을 직접 만들지않고, 내 웹사이트에 무료로 포함시킬 수 있다.
- 댓글창, 이미지 삽입 기능 등을 제공한다.
- 우리가 해야할건, 그저 disqus 홈페이지에서 우리의 웹을 추가하고, html에 파일에 태그를 붙여넣기하는 것이 전부다.
-