-
CS50x 2023 - Lecture 8 - HTML, CSS, JavaScriptIT/CS50x 2023 2024. 3. 2. 12:45
TCP/IP
TCP/IP는 인터넷상 한 지점에서 다른 지점으로 데이터가 어떻게 전송되어야 하는지, 어떻게 전송되고 있는지/전송되었는지 알려주는 표준 프로토콜이다.
TCP(Transmission Control Protocol)는 전송 제어 프로토콜이고, IP(Internet Protocol)은 인터넷 프로토콜이며, 둘을 같이 써서 TCP/IP라고 한다.
- TCP: 데이터를 순서가 매겨진 패킷들로 분해하여 전송될 수 있게 하며, 분해된 패킷들은 수신 컴퓨터에서 순서대로 재조립된다. 보내지는 데이터가 어떤 유형의 인터넷 서비스에 사용되는지에 따라, 해당 데이터에 포트번호를 할당하는 역할도 한다.(e.g. SMTP(email): 25번포트, HTTP(웹검색): 80번포트...) 이러한 역할들로 데이터 손실이나 손상을 최소화 하고, 전송중에 발생하는 오류를 감지하고 복구할 수도 있다.
- IP: TCP로 인해 순서가 매겨진 패킷들에 출발지, 목적지 IP주소를 포함시켜 전송될 데이터를 타겟 지점으로 '라우팅' 해주는 역할이다. 패킷단위로 라우터(네트워크에서 데이터를 전송하는 장비)로 보내서, 라우터가 목적지 IP주소를 보고 해당 패킷이 알맞은곳에 전송되게 하는 것이다. IP주소체계는 원래 4개의 8비트 블록(총 32비트 길이)의 IPv4(e.g. 192.0.2.1)가 널리 사용되고 있었으나, 주소고갈 문제때문에 16비트씩 8개의 블록(총 128비트 길이)으로 표기되는 IPv6가 나왔다. (예시: 2001:0db8:85a3:0000:0000:8a2e:0370:7334)
DNS
Domain Name System의 약자로, 네크워크에서 도메인 이름을 IP주소로 변환하거나, 역으로 IP주소를 도메인 이름으로 변환하는 시스템이다. Domain은 IP주소의 Alias같은 것이고, 사용자가 웹브라우저에서 도메인 이름을 입력하면 DNS가 그것을 해당 서버의 IP주소로 해석하여 사용자가 요청한 웹 사이트로 연결해주는 전화번호부 같은 역할을 해주는 것이다.
도메인의 종류중 하나인 TLD(Top Level Domain)은 최상위 도메인으로, 인터넷 주소에서 가장 오른쪽에 위치하며, 도메인의 종류나 카테고리를 식별한다.(e.g. ".net", ".com", ".org", ".gov"...)
HTTP/HTTPS
Hypertext Transfer Protocal의 약자로, 웹 서버와 웹 브라우저(클라이언트) 사이에서 데이터를 주고받는 데 사용되는 프로토콜이다. 사용자가 웹 브라우저에서 웹 페이지에 접속하면, 웹 브라우저가 해당 웹 페이지의 주소인 URL을 서버에 전송하고, 서버는 해당 페이지를 찾아서 응답으로 전송하는데 이처럼 웹 페이지의 요청과 응답을 관리하여 웹 페이지를 불러오고 표시하는데 사용되는 서버간의 통신규약이다.
HTTP 프로토콜에서 사용되는 주요한 요청방법으로 GET과 POST가 있는데, GET은 서버로부터 데이터를 요청할때 사용되고(데이터 검색 및 조회), POST는 서버로 데이터를 제출하거나 업로드할 때 사용된다.
curl
curl은 client url의 줄임말로, 터미널에서 웹 서버와 상호작용하는데 쓰이는 명령어이다.
curl -I 옵션을 주면 서버의 응답 헤더를 출력하게 되는데, 개발자도구 > Network > Header의 내용이다.
아래의 예시에서는 http://~로 시작하는 URL에 대한 응답 헤더를 볼수 있다. 출력결과에서 301 에러와 함께 해당 URL이 어느 서버로 옮겨갔는지를 Location에서 확인할수 있는데, https://~로 시작하는 URL로 바뀌었다.
Error codes
네트워크, 서버분야에서 자주 쓰이는 에러코드들은 아래와 같다. 403, 404 에러 코드가 특히 흔히 쓰인다.
hellp.html
html 파일로 웹페이지를 만드는 과정은 아래와 같다.
1. 사용자가 아래와 같은 html 파일로 웹 페이지의 기본적인 내용과 구조를 정의한다.
2. 정의한 html파일을 웹 브라우저(chrome, firefox 등)를 통해 웹 서버에 요청을 보낸다.
3. 서버(리퀘스트에 응답하는 프로그램)가 웹 페이지를 클라이언트에게 반환하여 사용자에게 보여준다.
위의 예시에서는 맨윗줄에서 html이라고 documentation type을 정의하고 있고,
그 아래로 각괄호와 슬래시(/)를 활용하여 태그(<html>), 헤더, 바디의 처음과 끝을 나타내고 그 사이에 title, body등 내용을 넣었다.
이렇게 만들어진 html파일을 실행하면 아래와 같이 title은 탭에서, body는 본문에서 확인이 가능하다.
Paragraphs
html파일의 바디에 여러줄의 텍스트를 넣고 싶을 수 있을것이다. 그런데 html은 indentation을 인식하지 않아서 아무리 파일 안에서 엔터키로 줄을 바꿔도, 줄바꿈 관련 태그 없이는 아래처럼 스트링이 한줄로 이어져서 나온다.
줄을 구분하고 싶을때는 문단이 될 텍스트 사이사이에 아래처럼 <br> (for break) 를 넣어 문단을 구분할 수 있다. 이 <br> 태그는 종료태그가 필요가 없다. 아래 예시에선 두개씩 넣었지만 하나만 넣어도 된다.
그럼 이렇게 구분이 된다.
그런데 여러줄로 이어진 문단단위로 보고싶을때는, <br>보다는 paragraph의 처음과 끝을 구분해주는 <p></p> (for paragraph) 태그를 사용하는것이 문법적으로 더 바람직하다. <p>는 종료태그가 필요해서 어디가 첨이고 어디가 끝인지 html파일을 보는 analyzer program이나, programmer들이 보다 더 쉽게 구분할 수 있기 때문이다.
Headings
헤더를 넣고 싶을때 쓰는 태그이다. <h1></h1> ~ <h6></h6> 까지 총 6개가 있으며, 1에서 6으로 가면서 점점 크기가 작아진다. 아래 예시에서는 h1~h3까지 써보고 있다.
h1~h3 각각 태그에 넣은 One, Two, Three 가 가면서 점점 작아지는것을 볼 수 있다.
List
텍스트를 불렛 포인트나 순번을 매겨 정렬하고 싶을때는 <ul>/<ol> (for unordered/ordered list), 안에 해당 텍스트를 <li> (for list)로 감싸서 표현할 수 있다.
가령 아래 예시처럼 foo, bar, baz를 unordered list로 표현하면..
웹페이지에서는 아래처럼 보인다.
- foo
- bar
- baz
위의 예시에서 ul을 ol로 바꾸면 ordered list가 되며,
- foo
- bar
- baz
처럼 나타내게 된다.
Table
<tr></tr> (for table row), <td></td> (for table data)를 사용하여 table 형태로 데이터를 나타낼 수도 있다.
Image
아래와 같은 문법으로 <img>(For image) 태그 안에 alt (for alternative, 사진의 제목정도를 넣을때 사용), src (For source) 등을 사용하여 image file을 불러올 수도 있다. alt, src말고도 description등 사용할 수 있는 phrase들은 많다.
Video
아래와 같은 문법으로 비디오 파일을 웹페이지에 넣을수도 있다.
10번째 줄에서는 <video> tag를 열고 있고, autoplay, loop, muted, width 등의 옵션을 주고 있다.
11번째 줄에서는 halloween.mp4라는 비디오 파일을 mp4파일로 인식시켜 source로 가져오고 있다.
시작태그, 종료태그가 있고 source태그를 따로 만들어 가져오는등 Image파일을 불러올때랑은 다른 문법적 차이가 있다.
Link
아래와 같은 문법으로 웹 페이지에 URL을 넣을 수 있다.
9번~11번째 줄의 body절에 <a></a> (for anchor)태그로 href(for hyper reference) 변수에 실제 링크가 들어가 있으며, <a></a> 태그 사이에 Harvard라는 string에 해당 링크가 아래와 같이 걸리게 된다.
Meta tag
메타 태그는 html 문서의 <head> 섹션에 포함되는 태그로, 해당 문서의 메타데이터(문서에 대한 설명이나 추가 정보)를 정의하는데 사용된다. (데이터 분석에서도 어떤 데이터의 메타데이터라 하면 해당 데이터에 대한 설명을 얘기하는데, 같은 맥락이다)
아래 예시의 5번쨰 줄에서는, 웹 페이지를 모바일로 열었을때 페이지 내용을 보기 좋게 표시해주는 메타 태그를 볼수 있다.
실제로는 저 예시보다 메타 태그의 활용성이 더 여러가지가 있는데, 가령 <meta name="description" content="문서 설명"> 의 신택스를 활용하여 해당 웹 페이지가 검색 결과에서 어떻게 표시될지 지정하는 방법이 SEO(Search Engine Optimization)에서 많이 쓰인다.
Search.html
아래 예시에서는 <body>태그에서 인풋값을 받고(11번쨰 줄), 그것을 submit할수 있게 하여(12번째 줄) google search를 하게 해주는(10번째 줄) search action의 구현을 볼 수 있다.
CSS
CSS(Casacading Style Sheets)는 HTML, XML 기반 문서의 스타일, 색상, 레이아웃 등을 정의하는데 사용되는 마크업 언어이다. 반응형 웹 디자인(다양한 모바일 기기 및 데스크톱 환경에서 모두 적절하게 보이도록 레이아웃, 스타일을 구현하는것), 크로스 브라우징 (여러 웹 브라우저에서 일관된 스타일로 보여주는 것) 등도 가능하다. 이처럼 웹 페이지의 시각적인 표현을 제어하는 언어로, 웹 디자인 및 개발에서 필수적인 기술이다.
home.html
아래 예시의 body tag에서 보다시피 웹 페이지를 division으로 나누는 div tag이란 것이 있고, 그 안에 style 값을 줄 수 있다. 위에서부터 아래로 font size를 점점 작게 주는것을 확인할 수 있다.
그리고 8번째줄에서 열고 18번째줄에서 닫은 div tag은 그 하위의 3개 div tags들을 감싸고 있는 형태이며, 8번째줄의 상위 div tag에서 정의한 text-align: center(가운데 정렬) 스타일은 그 아래의 자식 div tag들에게도 모두 영향을 미친다.
그러면 웹페이지가 이렇게 나온다.
div tag을 쓰는대신 body태그에 직접 가운데 정렬 따위의 스타일 attribute를 넣어 body절의 모든 내용에 해당 attribute를 적용할 수도 있으며, 하위 tag들도 div tag대신 header, main, footer 태그를 이용하여 해당 부분들이 문서에서 어떤 역할을 하는지 더 명시적으로 나타낼 수 있다. 그래서 가령 google search result에서 header를 인식하여 더 중요하고 크게 나타낸다던지, 그런 consensus의 활용이 가능하다.
아래처럼 style attribute를 별도의 tag로 만들어서 head절에 포함시킬수도 있다. 그러면 위의 7, 11, 14번째 줄처럼 style들을 해당 태그에서 명시하지 않아도 된다.
스타일 attribute를 아래처럼 class화 시킬수도 있다. 파이썬에서 클래스 만들듯이 이렇게 헤더태그에서 아래처럼 클래스를 정의해놓고,
body절에서 해당 클래스를 불러와 아래처럼 쓰는것이다.
아래처럼 style에서 정의한 클래스들을 별도의 파일로 만들어서 head절에 link로 불러와서 쓰는것도 좋은 방법이다.
이것도 마찬가지로 헤더에서 불러온 클래스 파일을 바디절에서 class ="class name"으로 불러오는 방식으로 똑같이 쓰면 된다.
favorites.html
html파일로 아래처럼 <table> <thead> (for table head) <tr> (for table row)..등의 태그를 활용하여 테이블을 추가할 수 있다. 아래 예시에서 유의할 점은 head의 5번줄에서 테이블 디자인에 쓰이는 css 라이브러리 링크를 가져와서, 9번줄에서 이를 클래스로 불러오고 있다는것이다.
이 클래스는 테이블을 디자인하는데 쓰이며, 9번줄에서 table-striped 옵션을 준것을 확인할 수 있다.
그러면 원래 아래와 같은 모습이던 테이블이..
아래처럼 striped된 디자인으로 훨씬 더 보기좋게 바뀐다.
Javascript
자바스크립트는 웹 개발에서 사용되는 프로그래밍 언어로, HTML, CSS와 함께 웹 페이지를 만들 때 사용되어 웹 페이지의 동적인 기능(사용자와 상호작용, 데이터 처리, 웹 페이지 내용 변경 등)을 구현하는데 사용된다. 클라이언트 측 언어서 웹 브라우저에서 실행되며, 웹 애플리케이션, 웹 사이트, 모바일 앱등 다양한 플랫폼에서 활용된다. 서버측에서 사용될 때는 Node.js와 같은 환경이 사용된다.
Greet
아래 예시에서는 html 파일 안에 자바스크립트로 짠 코드를 추가하여, 웹페이지가 사용자의 액션에 반응하게끔 만들고 있다. 10~13번째 줄의 form tag를 통해 input값을 받고, 14~22절의 script tag안에 자바스크립트 코드라인이 삽입된 형태이다.
name값이 입력되면 alert로 'hello, #name'을 띄우도록 하는 내용이다.
그러면 아래처럼 David란 이름을 입력하고 submit하여 hello, David라는 팝업을 볼 수 있다.
이 외에도 쓰임새가 엄청 다양한데, DOM(Document Object Model)을 조작하여 웹페이지의 동적인 기능을 구현하는게 일반적이다.
그 외에도 여러 라이브러리 써서 테이블 정렬, 배경 색깔 바꾸기, 텍스트 깜빡이기, 사용자 위치 찾기 등 여러 예시 보여줌.
'IT > CS50x 2023' 카테고리의 다른 글
CS50x 2023 - Lecture 7 - SQL (0) 2024.03.01 CS50x 2023 - Lecture 6 - Python (0) 2023.12.26 CS50x 2023 - Lecture 5 - Data Structures (0) 2023.12.25 CS50x 2023 - Lecture 4 - Memory (1) 2023.12.24 CS50x 2023 - Lecture 3 - Algorithms (1) 2023.12.23