우테코, 웹 기초

우테코, 웹 기초

2023. 3. 12. 23:45ㆍ우아한 테크코스/레벨 1

728x90

인터넷과 웹

(1) 인터넷

'전세계적으로 연결된 컴퓨터 네트워크'로 미국 국방부에서 군사 목적으로 만든 알파넷이 시초이다.

(2) 웹

인터넷 상의 정보를 하이퍼텍스트 방식으로 검색할 수 있게 해주는 검색 시스템이다.

하이퍼테스트란, 하이퍼링크를 통해 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트를 의미한다.

웹의 기능

(1) URI vs URL

URI: 인터넷에 있는 자원을 나타내는 유일한 주소로, 하위 개념으로 URL, URN이 있다.

URL: 컴퓨터 네트워크 상의 자원의 주소를 의미한다.

https://www.naver.com/index.html 와 https://www.naver.com/를 클릭했을 때 나타나는 페이지의 차이는 없다.

naver.com은 네이버 서버의 주소를 의미하고, 네이버 서버에서의 index.html 파일을 찾는다는 의미를 가진다.

(2) HTTP

웹 상에서 정보를 주고받을 수 있는 프로토콜을 의미한다. 다시 말해 정보를 주고받기 위해 사용하는 규칙을 의미한다.

일반적으로 클라이언트가 요청을 하면 서버가 응답을 하는 구조로 이뤄져있다.

http://는 이 프로토콜을 사용해서 정보를 교환하겠다는 표시를 의미한다.

HTML

웹페이지를 기술하기 위한 마크업 언어로, 웹페이지의 뼈대를 만드는 작업을 의미한다.

프로그래밍 언어가 아닌 마크업 언어를 의미한다.

(1) html 태그

html을 기술하기 위해 사용하는 명령어의 집합을 의미한다.

일반적으로는 여는 태그와 닫는 태그로 구성되지만 닫는 태그가 없이 단독으로 사용되는 태그도 있다.

<!DOCTYPE html>은 웹 브라우저가 HTML을 올바로 표시할 수 있도록 버전을 표시하는 역할이 된다. 즉, html을 해석해서 화면에 보여주는 것은 브라우저가 해야하는 역할이다.

- <html></html>: html의 시작과 끝을 의미한다.

- <head></head>: html 문서에서 눈에 보이지 않는 정보들을 나타낸다. 파일 이름이나, 서치엔진 최적화, 인코딩 방법들을 의미한다.

- <body></body>: 눈에 보이는 웹 페이지를 의미한다.

- <p> 태그: 문단을 의미하는 태그

- <br> 태그: 강제 개행을 의미한다. 이는 자제하는 것이 좋다.

- <h1~6> 태그: 각 섹션의 제목을 나타내는 태그

- <a> 태그: 하이퍼링크를 걸어주는 태그, href(Hypertext reference)의 약자, target = "_black" 어트리뷰트로 설정하면 다른 창에서 열 수 있도록 할 수 있다.

- <li> 태그: 목록을 만드는 태그

- <img> 태그: 이미지를 삽입하는 태그, src는 이미지의 경로를 입력한다.

- <input> 태그: 사용자의 입력을 받는 태그로 텍스트, 전송버튼, 라디오 버튼, 체크 박스 등이 있다.

cf) 라디오 버튼은 name이 같은 것들 간에는 하나만 입력이 가능하게끔 할 수 있다.

- <div> 태그: 나누기, 가상의 레이아웃을 설계하는데 쓰인다.

(2) 절대 경로와 상대경로

다른 사람과 파일을 주고받아서 사용하고자 한다면 절대경로보단 상대경로를 사용하는 경우가 더 많다.