본문 바로가기
Doc/컴퓨터

컴퓨터과학 CS50 2020 Lecture 8 : HTML, CSS, JavaScript

페르디낭 2022. 6. 27. 09:58

 

 

 

 

<강의 필기>

 
 

Internet

컴퓨터끼리 의사소통하는 네트워크의 네트워크이다.

 

 

Router

케이블 혹은 무선으로 데이터 패킷을 전송하는 네트워크 장치이다.

 

 

Protocol

데이터를 전송할 때 0과 이루어진 일정한 패턴으로 라우터에 입력하는 통신 규약 체계이다.

손을 흔들어 인사하는 것과 같은 사회적 약속이다.

 

 

TCP/IP

우체국 시스템과 비슷하다. TCP/IP는 우편 주소이며 봉투(메시지)는 packet이다. 

 

 

IP

Internet Protocol

인터넷에 연결되는 컴퓨터의 고유한 주소이다.

 

 

DNS

IP address를 모르는 경우 Domain Name System을 사용한다.

인터넷 소프트웨어에서 제공되는 English-like. Human-readible한 표현 방식이다.

일반적으로 ISP(nearest internet service provider)에 따른다.

 

 

TCP

서버마다 Port Number를 가지는 전송 규약이 있다.

80 HTTP

443 HTTPS

8801 ZOOM

데이터 packet을 특정한 유형으로 규정짓고 동등하게 취급하여 공정하게 전송 작업을 처리하는 Net neutrality를 따른다.

 

 

 

 

 

 

Web development

 

 

HTTP

Hyper Text Transfer Protocol

웹 브라우저가 TCP/IP packets 내에서 작동하는 방식을 보여준다.

GET은 웹 페이지와 파일을 요청하는 것을 허락하고

POST는 웹 브라우저가 데이터를 전송하는 것을 허용한다.

 

 

URL

https://www.example.com/index.html

HTTPS + Host Name + Domain Name + Request + Default File

s는 https의 보안 버전을 가리킨다.

com은 TLD(Top-Level-Domain)이다. org처럼 조직을 가리킬 때도 있다.

 

 

 

HTTP Header

클라이언트와 서버가 요청 또는 응답으로 부가적인 정보를 전송할 수 있도록 한다.

Google Chrome Developer Tools의 Incognito Mode에서 확인한다.

 

 

HTTP Request Message

GET / HTTP/1.1          
Host: www.ktword.co.kr  
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding: gzip, deflate, sdch
Accept-Language: ko-KR,ko;q=0.8,en-US;q=0.6,en;q=0.4
User-Agent: Mozilla/5.0 (...)

 

 

HTTP Response Message

HTTP/1.1 200 OK        
Connection: Keep-Alive
Content-Length: 6330
Content-Type: text/html
Date: Fri, 03 Apr 2015 07:27:57 GMT
Keep-Alive: timeout=5, max=100
Server: Apache/2.2.16 (Win32) PHP/5.3.13
X-Powered-By: PHP/5.3.13

 

 

 

Status Code

 

200 Ok

301 Moved Permanently

302 Found

304 Not Modified

307 Temporary Redirect

401 Unauthorized

403 Forbidden

404 Not Found

418 I’m a Teapot

500 Internal Sever Error

503 Service Unavailable

...

 

HTTP/1.1 301 Move Permanetly
Location : http://www.havard.edu
...

 

HTTP/1.1 404 Not Found
Content-Type : text/html
...

 

 

 

cUrl

다양한 프로토콜을 지원하는 데이터 전송용 Command Line Tool이다.
HTTP, HTTPS, FTP, SFTP, SMTP 등을 지원한다.

curl -I http://safetyschool.org
HTTP/1.1 301 Moved Permanently
Server: Sun-ONE-Web-Server/6.1
Date: Wed, 26 Oct 2020 18:17:05 GMT
Content-length: 122
Content-type: text/html
Location: http://www.yale.edu
Connection: close

 

 

 

 

 


HTML

Hypertext Markup Language

프로그래밍 언어가 아니다.

URL Parameters인 tags와 attributes를 이용하여 웹 페이지를 어떻게 display할지 나타내는 포맷이다.

 

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>
            hello, title
        </title>
    </head>
    <body>
        hello, body
    </body>
</html>

 

tag를 open이나 close할 때 name인 <html>과 </html>을 언급한다.

각 속성은 tree 형태로 부여되어 계층적으로 구성된다.

<head>는 tag의 <title> 역할을 하며
<body>는 content를 포함한다.

 

 

paragraphs.html

<p>는 paragraph의 약자로 텍스트의 각 섹션을 단락으로 구분한다.

 

list.html

<ol>은 ordered list의 약자로 순서가 있는 목록을 만든다.

<ul>은 unordered list의 약자로 순서가 필요없는 목록을 만든다.

<dl>은 definition list의 약자로 용어를 설명하는 목록을 만든다.

 

table.html

<th>는 table head의 약자로 표의 제목을 작성한다.

<tr>은 table row의 약자로 가로줄을 만든다.

<td>은 table data의 약자로 셀을 만든다.

 

image.html 

<img alt="text">는 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시한다.

<img src=" .Abbreviation"> 는 이미지 소스의 URL을 명시한다.

 

link.html

<a>의 href 속성은 링크된 페이지의 URL을 명시한다.

 

search.html

<form>은 GET의 방식으로 Google’s search URL에 대한 행동을 취한다.
<form>에서 이름 q로 submit이라는 데이터 유형의 값을 입력한다.
POST의 방식으로 다른 URL에 포함된 데이터를 찾아서 Search URL에서 데이터를 요청한다.

 

 

 

 

 

 

CSS

Cascading Style Sheets

tag에서 key-value의 쌍을 이루어 속성을 정의한다.

HTML에서 CSS를 포함시키기 위해서 일부 option을 추가한다.

<head>에 <style>을 작성하여 직접 HTML에서 입력한다. (include CSS directly. type selector. class selector)

<head>에 <link>을 추가하여 style.css를 연결한다.

 

 

include CSS directly 

<html lang="en">
    <head>
        <title>css</title>
    </head>
    <body style="text-align: center;">
        <header style="font-size: large;">
            John Harvard
        </header>
        
        ...
        
    </body>
</html>

<header>, <main>, <footer> 태그는 <p>와 같이 페이지 내에 작성된 텍스트에서 각 섹션을 구별하여 나타낸다.

style 속성은 semicolon으로 구별되며 key-value 쌍으로 추가한다.

 

 

Type Selector

<html lang="en">
    <head>
        <style>

            header
            {
                font-size: large;
                text-align: center;
            }
            
            ...
            
        </style>
        <title>css</title>
    </head>
    
    ...

 

 

Class Selector

<html lang="en">
    <head>
        <style>

            .centered
            {
                text-align: center;
            }
            
            ...

        </style>
        <title>css</title>
    </head>
    
    ...

 .large, .medium, .small은 . 뒤에 keyword를 써서 font size에 대한 속성을 부여한다.

 

 

link tag

<html lang="en">
    <head>
        <link href="styles.css" rel="stylesheet">
        <title>css</title>
    </head>
    
    ...

CSS 파일을 <link> tag로 연결한다.

 

 

Pseudo-Class Selector

<html lang="en">
    <head>
        <style>

		...
        
        	a:hover
            {
                text-decoration: underline;
            }

		...

 

 

ID Selector

<html lang="en">
    <head>
        <style>

            #harvard
            {
                color: #ff0000;
            }
            
            ...

 

 

 

 

 

 

JavaScript

브라우저의 HTML를 실시간으로 바꿀 수 있다.

확장자 js를 사용한다.

 <body>
        <form onsubmit="greet(); return false;">
        ...

onsubmit은 JavaScript에서 정의하는 함수를 호출한다.

 

 

<script>

    function greet()
    {
        let name = document.querySelector('#name').value;
        alert('hello, ' + name);
    }

    function listen() {
        document.querySelector('form').addEventListener('submit', greet);
    }

    document.addEventListener('DOMContentLoaded', listen);

</script>

 

document는 global variable를 할당한다.
document의 querySelector는 DOM(Document Object Model)에서 node를 선택한다.

그리고 name이라는 ID는 value를 불러온다.

DOMContentLoaded에서 listen 함수를 호출하여 파일의 모든 내용을 불러오고 난 후 form은 종료된다.

 

 

<form>
    <input autocomplete=...>
    
    ...
    
</form>

autocomplete, autofocus id, placeholder, type의 상태를 변경하기 위해 속성을 input한다.

 

 

 

anonymous functions

함수명 대신 변수명에 함수 코드를 저장하는 구현 방식이다.
lambda function에서는 listeneres를 직접 addEventListener로 보낸다.

 

 


submit
listen하는 events에는 여러 종류가 있다.


blur
change
click
drag
focus
keyup
load
mousedown
mouseover
mouseup
submit
touchmove
unload
...

 

 

style은 css 속성에 대한 값을 설정한다.

onclick의 listener는 <body>는 배경색깔을 바꾼다.
<script>는 HTML file의 끝에서 DOMContentLoaded의 event가 다 읽혔다는 것을 알려주는 표시이다.

 

 

size.html 

font size를 설정한다.

 

blink.html 

visible이나 hidden으로 시각적인 속성 blink를 설정한다.

 

geolocation.html 

사용자의 GPS를 호출한다.

 

autocomplete.html 

dictionary 형태로 단어를 입력한다.

 

 

 

 

 

 

API

Application Programming Interface

 

blink.py

전구 API는 PUT method에서 빛의 세기를 결정한다.
Python에서 네트워크에 속한 다른 전자기기를 연결한다.

 

 

 

 

 

 

강의 자료

 

Week 8 - CS50

Introduction to the intellectual enterprises of computer science and the art of programming. This course teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, r

cs50.harvard.edu

 

 

 

CS50 Sandbox

 

CS50 Sandbox

Temporary programming environments for students and teachers.

sandbox.cs50.io

 

 

 

HTTP 메세지 (정보통신기술용어해설)

 

HTTP 메세지

HTTP 요청 메세지, HTTP 응답 메세지, 요청 , 응답

www.ktword.co.kr

 

 

cURL 소개, HTTP GET, POST 호출 방법 (Naver Blog 기술)

 

cURL 소개, HTTP GET, POST 호출 방법

cURL이란? 다양한 프로토콜을 지원하는 데이터 전송용 Command Line Tool이다. (HTTP, HTTP...

blog.naver.com

 

 

 

[html/css] 목록을 만드는 <ul> <ol> <li> 태그 (Tistory Blog 지구별 안내서)

 

[html/css]목록을 만드는 <ul> <ol> <li>태그

[html/css]목록을 만드는 태그 목록을 만드려면 태그를 사용하는데요 오늘은 에 대해 다루고 다음 시간에 태그를 다룰게요. 목록을 만드는 방법은 아래 세 가지가 있습니다 내용 내용 내용 태그는

aboooks.tistory.com

 

 

 

table 태그, tr 태그, th 태그, td 태그와 table 속성 정리 (Tistory  Blog 지구별 안내서)

 

table 태그, tr 태그, th 태그, td 태그와 table 속성 정리

표를 만드는 table 태그, tr 태그, th 태그, td 태그와 table 속성 정리 오늘은 태그에 대해 알아 보겠습니다. 은 표를 만드는 태그인데요 아래 그림처럼 작은 표를 만드는 데 쓰일 수 있고, 밑에 처럼,

aboooks.tistory.com

 

 

<img> 태그의 alt 속성 (TCP School)

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

 

 

<img> 태그의 src 속성 (TCP School)

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 
 

 

<a> 태그의 href 속성 (TCP School)

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

 

 

자바스크립트 익명 함수의 구조와 간단한 예제 (Blog dasima)

 

자바스크립트 익명 함수의 구조와 간단한 예제 - dasima

자바스크립트 익명 함수는 함수명이 없는 대신 함수 소스 코드를 변수명에 저장해서 함수를 만드는 기능입니다. 함수 호출시 변수명이 함수명을 대신해서 작동됩니다. 변수처럼 다른 변수에 함

dasima.xyz

 

'Doc > 컴퓨터' 카테고리의 다른 글

컴퓨터과학 CS50 2020 Lecture 10 : Ethics  (0) 2022.07.03
컴퓨터과학 CS50 2020 Lecture 9 : Flask  (0) 2022.07.03
컴퓨터과학 CS50 2020 Lecture 7 : SQL  (0) 2022.06.10
컴퓨터과학 CS50 2020 Lecture 6 : Python  (0) 2022.06.10








티스토리툴바

>