물먹는산세베리아

Web, HTML 복습 정리 본문

Web

Web, HTML 복습 정리

suntall 2020. 9. 17. 17:36

인터넷 개요

[프로토콜]

 1) 송진자가 수신자에게 데이터를 보낼 때 양식에 맞춰 보내는 것을 의미한다. 구조를 어떻게 할 것인지, 이것의 의미는 무엇인지, 속도는 어느 정도로 할 것인지 네트워크 상에서 미리 정해놓는 것이다. 따라서 수신자 입장에서 이게 뭘 의미하고 어떤 역할을 하는 것인지 쉽게 파악할 수 있다.

 2) 종류: HTTP, SMTP, POP, IMAP, FTP, TELNET, DNS, NNTP 등

 

[구동 요소]

 1) 웹 브라우저(클라이언트) , 웹 서버(서버)

 2) 클라이언트는 우리가 웹에 들어갔을 때 보이는 베이지이고 '프론트엔드'라고 말할 수 있다. 반면 서버는 웹의 요청을 받아 응답 하는 곳으로 '백 엔드'라고 부를 수 있다.

 3) 웹 브라우저에서 주소를 입력하면 웹 브라우저(클라이언트)에서 운영체제, 하드웨어를 거쳐 웹 서버에 전달되고, 서버는 이 용청을 받아들여 주소에 해당하는 파일을 찾아 클라이언트에게 응답해준다.

 

[그림 1] 클라이언트, 서버 환경

 

 

Web

- www (World wide Web)

- HTML 이라는 마크업 언어를 통해 콘텐츠를 제공한다.

- HTTP 프로토콜 사용하여 TCP/IP 네트워크에서 사용하기 시작하였다.

 

[HTTP]

1) Hyper Text Transfer Protocol, 인터넷에서 데이터를 주고받을 수 있는 응용프로토콜(규칙)

2) 비연결성 프로토콜이기 때문에 요청/응답 방식으로 동작

3) 클라이언트가 명시해주는 형태에 따라 HTML 또는 JSON 형태, XML 형태로 데이터를 받음

 

HTML

- Hype Text Markup Language

- 웹 페이지를 기술하기 위한 언어

- 마크업 언어: 화면에 어떻게 보일지, 어디에 대항하지는  태그를 붙여 기술

 

[태그 규칙]

1) 대소문자 구분X

2) <시작태그> </종료태그>

3) <head> 태그는 환경 설정 및 기능, <body> 태그는 콘텐츠(실제 내용) 

 

[링크 걸기]

1) 글자에 링크 걸기

<a href = "#"></a>

* #는 빈 링크

[그림 2] 목차 클릭시 각각에 해당하는 페이지로 이동

2) 버튼에 링크 걸기

<input type = "button onclick="location.href = '#' value='버튼'>

[그림 3] 버튼 클릭스 해당 페이지로 이동

 

[폼(form)]

 웹 브라우저에서 입력한 데이터를 서버로 전송하는 양식

 종류: form, input, select, textarea

 1) form: 다양한 정보를 입력하는 양식이 들어있는 최상위 태그

 - action(url 설정), method(http 방식 설정), name(폼 식별 이름 설정)

2) select: 목록 상자에서 항목 선택

[그림 4] select 코드

- selected(초깃값)

3) textarea

 rows, cols로 크기 조절 가능

[그림 5] textrea 제목, 내용
[그림 6] textarea 코드

* placeholder: 해당 텍스트 박스를 클릭하면 내용이 사라지고 빈칸에서 입력하게 된다.

* resize: none; 해당 텍스트 박스의 크기를 조절할 수 없다.

* 제목 칸은 크기를 조절 할 수 없고, 해당 칸 클릭 시 '제목을 입력하세요'가 남아 있다.

* 내용 칸은 크기를 조절 할 수 있고, 해당 칸 클릿 시 '내용을 입력하세요.'는 사라진다.

 

'Web' 카테고리의 다른 글

JSP, JS 차이  (0) 2021.11.04
Server-side  (0) 2021.01.13
6주차 과제_웹 해킹  (0) 2020.12.02
php - session  (0) 2020.09.23
POST, GET 방식의 차이  (0) 2020.09.23
'Web' Related Articles more