끈기의 힘 : 뉴비에서 풀스텍으로

[인프런/생활코딩_HTML 기초] 웹? iframe 태그? 이스케이핑? 본문

프로그래밍 언어/HTML 공부

[인프런/생활코딩_HTML 기초] 웹? iframe 태그? 이스케이핑?

쓰리별 2021. 2. 21. 17:08

※ 웹이 무엇인가?
: 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

 

htmlescape.net

 

Character Entity Reference Chart

 

dev.w3.org

★ htmlescape.net/사이트가 더 편리한 게, 특정 특수문자를 적으면 그에 맞는 코드를 알아서 바로 변환해줘서 편하다!

저작자표시 (새창열림)

'프로그래밍 언어 > HTML 공부' 카테고리의 다른 글

[생활코딩/2015 HTML 수업 : WEB1 아님! 혼동 주의!] Form 배우기. 입력 양식? 텍스트 입력?  (0) 2021.02.22
[인프런/생활코딩_HTML 기초] 표 만들기? 폼 만들기?  (0) 2021.02.21
[생활코딩/WEB1] 기록 ~ 1-17  (0) 2021.02.18
[생활코딩/WEB1] 기록 ~ 1-12  (0) 2021.02.17
[생활코딩/WEB1] 기록 ~ 1-9  (0) 2021.02.17
'프로그래밍 언어/HTML 공부' Related Articles more
Comments