[인프런/생활코딩_HTML 기초] 웹? iframe 태그? 이스케이핑?
※ 웹이 무엇인가?
: html이 이루고자 하는 목적.
- 웹과 인터넷은 다르다.
웹이 있으면 이 웹을 포괄하는 게 인터넷. 웹은 인터넷의 서비스 중 하나이다. (이메일, ftp 등의 서비스)
★ 1960년 인터넷의 탄생
★ 1990년 웹의 탄생 ('CERN' 팀 버너스 리)
Server와 Client
클라이언트 = 고객 or 갑(현장의 언어)
: 데스크탑, 핸드폰 등
서버 = 공급자 or 을
: 지금 우리가 보고 있는 정보들을 보내주는 곳
--
클라이언트 -> 서버에게 '요청' / 서버 -> 클라이언트에 '응답'하는 관계
클라이언트 컴퓨터에 기본적으로 하드웨어가 설치되어있고, 그 위엔 운영체제(OS : MS 등), 그 위엔
웹 브라우저(크롬 등)가 설치 되어있다.
ex) 웹 브라우저로 특정 주소 or 데이터를 들어가려고 한다면, 클라이언트 내에 있는 웹 브라우저 -> 운영체제 -> 하드웨어에 있는 램카드 순으로 정보처리가 이루어지고, 이런 '요청'이 웹 서버가 설치된 서버 컴퓨터의 하드웨어(램)에서 -> 마찬가지로 OS, 웹서버를 거치게 된다.
(당연히, 서버 컴퓨터도 마찬가지로 하드웨어, 운영체제가 설치되어 있어야 한다. 다만, 웹 서버(IIS or apache 등)가 설치되어 있다는 것이 다른 점이다.)
즉, 어떤 특정 주소로 들어가겠다는 그 '요청'이 웹 서버가 깔린 컴퓨터에게 들어가게 되면, 그에 맞는 정보를 서버 컴퓨터가 찾아서 다시 웹 서버 -> OS -> 하드웨어(램)의 과정을 거쳐 웹 브라우저 컴퓨터로 정보를 전해주는 과정을 거친다! 웹 브라우저 즉, 우리가 그 정보를 위의 과정을 통해 웹 브라우저로 볼 수 있게 된다는 것을 말한다.
DTD(Doctype)
: 문서의 형식 지정.
ex) <!DOCTYPE html> 에디터 맨 위에 쓰이는 약속(= 마법)
--
※ 아이프레임, 프레임 태그
(프레임은 'HTML5'에선 지원하지 않는 태그)
<iframe> ___ </iframe> : 웹페이지 안에 또 다른 웹페이지를 삽입하는 태그.
( 딸려오는 속성 : src="웹페이지 URL" // scrolling=""인데! ★ 스크롤링 속성은 더는 사용되지 않음.)
ex) 내가 연습용으로 만든 웹사이트 안에 유튜브 영상을 올리고 싶다! 고 하면 <iframe> 태그 사용하면 돼.
어떻게 하냐고? 유튜브 -> 내가 올리고 싶은 영상 들어가서 -> 공유 -> 퍼가기(< >) 누르면 영상 오른편에
<iframe> 코드 뜰텐데 그거 복사해서 에디터에 복사하면 올라간다!!
그래서 '유튜브에 있는 걸 올리고 싶다면 <video> 태그는 의미가 없는 거 같다.
※ 이스케이핑
예를 들어, <br> 이란 태그를 온전히 웹 브라우저에 나오도록 표시하고 싶다면 사용하는 방법이다. 왜냐하면? 에디터에 꺽쇠를 그대로 사용하면 태그로 인식하기 때문에 웹 브라우저에는 반영이 되질 않기 때문이지 않느냐!! 그러니까,
< > 꺽쇠는 각각의 특수문자이므로, 이 특수문자에 관련한 코드가 따로 있다! 밑의 2가지 사이트를 참조하자.
★ dev.w3.org/html5/html-author/charref
HTMLEscape.net
htmlescape.net
Character Entity Reference Chart
dev.w3.org
★ htmlescape.net/사이트가 더 편리한 게, 특정 특수문자를 적으면 그에 맞는 코드를 알아서 바로 변환해줘서 편하다!