인터넷과 웹

이건회·2023년 2월 15일

우테코

목록 보기

6/19

개요

우테코 공통강의 인터넷과 웹 강의에서 들은 내용과 생각을 정리해봤다

웹의 기능

URL(Uniform Resource Locator) :
HTTP(HyperText Transfer Protocol) :
HTML(HyperText Markup Language) :

URI와 URL

URI

통합 자원 식별자
인터넷에 있는 자원을 나타내는 유일한 주소

URL

URI의 하위 개념
웹 사이트 주소로 흔히 알고 있지만 웹 사이트 주소뿐만 아니라 컴퓨터 네트워크상의 자원을 모두 나타낼 수 있다.

http://www.naver.com
http://www.naver.com/index.html

위 둘의 차이는 무엇일까
위는 네이버 서버의 주소 자체, 아래는 네이버 서버의 index.html을 불러온다는 뜻이다. 보통 초기 서버 주소를 인덱스를 디폴트로 설정해놓기에 둘은 같이 뜨는 것이다.

HTTP

웹 상에서 정보를 주고받을 수 있는 프로토콜(프로토콜은 "약속"과 같다. 웹상에서 정보를 주고받을 때 쓰는 약속 및 규칙이라 생각하자)
주로 html 문서를 주고받는 데에 쓰인다
HTTP는 요청과 응답으로 구성되어 있고, 클라이언트가 요청을 하면 서버가 응답을 하는 구조로 되어 있다
http:// 는 이 프로토콜을 사용해서 정보를 교환하겠다는 표시다

HTML

웹 페이지의 모습 -> html -> 집 뼈대골조
웹페이지와 상호작용 -> javascript -> 난방, 수도, 전기시설
마크업 언어가 표시되는 방법 -> css -> 인테리어

html은 웹 페이지의 모습을 기술하기 위한 규약이며, 프로그래밍 언어가 아닌 마크업 언어다

html 태그

html을 기술하기 위하여 사용하는 명령어의 집합
태그는 기본적으로 여는 태그와 닫는 태그로 구성되며, 닫는 태그 없이 단독으로 사용하는 태그도 있다. 태그로 사용하는 모든 요소들은 element가 부른다

<!DOCTYPE html> -> 웹 브라우저가 html을 올바로 표시할 수 있도록 버전을 표시
<html> -> 웹 페이지의 시작과 끝 표현
  <head> -> 눈에 보이지 않지만 웹 페이지의 정보를 표현
      <meta charset="utf-8>
      <title> Hello world </title>
  </head>
  <body> -> 눈에 보이는 웹 페이지 내용
  	<p>hello world</p>
  </body>
</html>

p태그

p태그는 문단을 뜻한다. p는 paragraph의 약자다. 따라서 p태그 두개가 이어지면 문단처럼 띄어진다

<p>hello</p>
<p>world</p>

hello

world

Br태그

br 태그는 강제로 개행을 한다. 따라서 웹 화면, 모바일 화면 어디서든 화면 크기 상관없이 개행을 하므로 지양한다

<p>hello<br>world</p>

hello
world

H1태그

제목을 쓸 수 있는 태그다

<h1>벚꽃 엔딩</h1>
<p>봄바람 휘날리며</p>
<p>흩날리는 벚꽃잎이</p>

벚꽃 엔딩

봄바람 휘날리며

흩날리는 벚꽃잎이

a태그

Anchor(닻)의 약자
하이퍼링크를 거는 태그다

<a href="https://www.naver.com" target="_blank">네이버 바로가기</a>

->
네이버 바로가기

리스트 태그(ul,ol)

둘다 리스트를 나타내는데 ul는 번호가 없고 ol은 번호가 있다

<ul>
<p>벚꽃 엔딩</p>
<p>봄바람 휘날리며</p>
<p>흩날리는 벚꽃잎이</p>
</ul>
<ol>
<p>벚꽃 엔딩</p>
<p>봄바람 휘날리며</p>
<p>흩날리는 벚꽃잎이</p>
</pl>

벚꽃 엔딩
봄바람 휘날리며
흩날리는 벚꽃잎이

벚꽃 엔딩
봄바람 휘날리며
흩날리는 벚꽃잎이

절대경로, 상대경로

절대경로는 최상위 디렉터리를 기준으로 경로를 인식한다
상대경로는 현재 위치를 기준으로 하는 경로다.
상대경로를 더 많이 사용하는데 그 이유는 내 컴퓨터 환경의 절대경로와 상대방 컴퓨터 환경의 절대경로가 다르므로 상대 경로를 사용하는것이 오류가 날 확률이 적다

input 태그

값을 입력할 수 있는 태그
텍스트 입력, 전송 버튼, 라디오 버튼, 체크 박스 등
주로 form 태그 내부에 존재

이름 : <input type="text" name="name" value="" />
//radio 버튼은 name 항목이 같은 라디오 버튼임을 인식하게 한다
// 또 이 항목이 서버로 넘어갈 때 어떤 값으로 넘어가는지 알려준다(ex."gander" : "male")
남자 : <input type="radio" name="gender" value="male" />
여자 : <input type="radio" name="gender" value="female" />

남자 : <input type="checkbox" name="gender" value="male" />
여자 : <input type="checkbox" name="gender" value="female" />

->
이름 :
//radio 버튼은 name 항목이 같은 라디오 버튼임을 인식하게 한다
// 또 이 항목이 서버로 넘어갈 때 어떤 값으로 넘어가는지 알려준다(ex."gander" : "male")
남자 :
여자 :

남자 :
여자 :

div 태그

division의 약자(나누기)
가상의 레이아웃을 설계한다

JavaScript

태그를 구분하는 속성

id : 유일한 값

<p id="paragraph"></p> -> 이제 p태그는 "paragraph"라는 고유 값을 갖는다

const paragraph = document.getElementById("paragraph")
paragraph.innerHTML = "Hello, world!"

Hello, world!

결과물 보는 법

innerHTML 사용해 html 요소 작성
document.getElementById() 통해 요소를 찾는다

변수

변수를 선언하여 값을 담아 넣는다

let
const
var

자료형

숫자, 문자열, 객체 등 다양한 데이터 타입을 보유한다. 변수를 조작하려면 데이터 타입을 알고 있어야 한다

let x = 20 + 18 -> 38 //int
let y = 20 +"18" -> "2018" //string
let z = 2+0 + "18" -> "218" //string

const checkbox1 = document.getElementById("checkbox1")
if(checkbox1.checked){
	alert("체크1")
}

메소드

function 뒤에 함수 이름이 오고 소괄호가 따라온다
호출한뒤 실행될 부분이 중괄호가 돈다

이벤트

어떤 사건을 의미
클릭, 스크롤, 필드내용 변경 다 이벤트다
이벤트를 등록하고, 브라우저가 이벤트 발생시 이를 실행한다

const image = document.getElementById("image")
const button = document.getElementById("button")

function changeImage(){
	image.src = "https://다른이미지주소"
    
}

button.addEventListener("click"//이벤트,changeImage//실행시킬 함수)