3주차. 네트워크, HTML/CSS/JS

한샛코드·2025년 4월 1일

@Xpert

목록 보기

3/4

OSI 7계층

ℹ️ 일부는 이전에 학습하였던 것이 더 도움될 것으로 판단하여, 이전 게시물로 대체함

SSL : 암호화 기반 인터넷 보안 프로토콜

ℹ️ 현재는 소유권이 변경되어 TLS가 정식명칭이지만, 여전히 SSL이라고도 불리고 있음

SSL/TLS - 데이터를 암호화하고, 헤더에 담아서 서버와 통신하는 프로토콜
- 해당 보안 기술을 사용하는 웹사이트는 HTTPS를 사용함
- 핸드셰이크(서버 통신 인증 프로세스)를 통해 두 장치의 ID를 확인함
암호화 프로토콜이 중요/필요한 이유
- 웹 데이터는 메시지를 가로채면 누구나 읽을 수 있기에, 탈취되면 위험
- (SSL 같은) 보안인증서를 사용하여 데이터를 누군가가 탈취해도 암호화가 되어 있어 안전하게 만듦
- 일부 사이버 공격을 차단하고, 웹사이트 자체를 인증해주기도 함
  - 안전하지 않고, 수상한 웹사이트는 인증서 자체를 안 내어주기 떄문
SSL 인증서의 유형
1. 단일 도메인 - 단 하나의 도메인에만 SSL 인증서가 적용됨
2. 와일드카드 - 하나의 도메인의 하위 도메인에도 SSL 인증서가 적용됨
3. 멀티 도메인 - 여러 도메인에 SSL 인증서가 적용됨

SSL/TLS 핸드셰이크

SSL/TLS 핸드셰이크 - 클라이언트와 서버간 안전한 통신을 주고 받는 프로세스
- 서로 메시지를 교환하여 인식 및 검증을 통해, 암호화 알고리즘을 구성하고, 세션키에 합의함
핸드셰이크 발생 시기 - API 호출, DNS 쿼리를 포함하는 HTTPS를 사용할 때 발생
핸드셰이크 과정에서 발생 되는 일
1. 사용할 TLS 버전 (TLS 1.0, 1.2, 1.3 등)을 지정함
2. 사용할 암호 제품군을 결정함
3. 서버의 공개 키와 SSL 인증서 기관의 디지털 서명을 통해 서버 ID를 인증함
4. (대칭 암호화 사용을 위한) 세션 키를 생성함
핸드셰이크 발생 단계
1. 'ClientHello' 메시지 - 클라이언트가 서버로 "Hello" 메시지를 보냄으로서 핸드셰이크를 시도함
  - 해당 메시지에는 지원하는 TLS 버전, 암호 제품군, 클라이언트 무작위 바이트 문자열이 포함됨
2. 'ServerHello' 메시지 - 서버가 클라이언트로부터 응답함
  - 서버의 SSL 인증서, 서버에서 선택한 암호 제품군, 서버 무작위를 포함하는 메시지를 전송함
3. 인증 - SSL 인증서를 인증서 발행 기관을 통해 검증함 (항상)
4. 예비 마스터 암호 - 클라이언트가 '예비 마스터 암호'라는 무작위 바이트 문자열을 전송함
  - 이는 공개 키로 암호화 되어 있고, 서버의 개인 키로만 해독할 수 있음
    - 공개 키는 서버의 SSL 인증서를 통해 받았음
5. 개인 키 사용 - 서버가 예비 마스터 암호를 해독함
6. 세션 키 생성 - 클라이언트 무작위, 서버 무작위, 예비 마스터 암호를 이용하여 세션 키를 생성함
7. 클라이언트 준비 완료 -> 8. 서버 준비 완료 -> 9. 대칭 암호화 준비 완료

웹 소켓

HTTP vs 웹 소켓
1. HTTP - 클라이언트-서버간 통신이 단방향이고, 요청으로 연결 후 응답을 받으면 연결이 종료됨
  - 즉, HTTP 요청을 보내면 사이에 TCP 연결이 열리고, 응답을 받으면 TCP 연결이 닫힘
2. WebSocket - 양방향 통신으로, 계속 연결을 유지함
  - 도메인 앞에 ws:// 또는 wss:// 로 시작됨
  - 연결이 설정되면, 종료될 때까지 동일한 연결 채널을 사용하여 통신이 이루어짐
  - HTTP 연결보다 상대적으로 빠름 (재통신을 위해 끊을 필요가 없음)
웹 소켓 사용 시기 - 실시간 업데이트를 주로하는 어플리케이션

ℹ️ 다만, 계속 연결할 필요가 없는 경우에는 HTTP를 사용하면 됨
1. 실시간 웹 어플리케이션 (ex. 카카오톡, 인스타그램; 실시간 채팅/댓글)
2. 게임 애플리케이션 - 정보를 실시간으로 빠르게 갱신할 필요가 있음

HTML/CSS/JS로 웹페이지 만들기

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>여기에 웹페이지 제목을 적을 수 있어요.</title>
    <!-- 스타일이 들어있는 파일로 적용하기 위해, style.css를 넣는 방법-->
    <link rel="stylesheet" href="style.css">
    <style>
        a {
            color : green;
		    text-decoration: none;
        }
    </style>
</head>
<body>
    <!-- 자바스크립트를 이용하여 동적인 웹페이지를 구성할 수도 있음 -->
    <input type="button" value="dark" onclick = "
    document.querySelector('body').style.backgroundColor='black';
    document.querySelector('body').style.color='white';
    ">
    <input type="button" value="white" onclick = "
    document.querySelector('body').style.backgroundColor='white';
    document.querySelector('body').style.color='black';
    ">
    <!-- 제목 태그 -->
    <h1> 제목으로서 구획된 글자를 적을 수 있어요. 이건 h1 이에요.</h1>
    <h2> 제목으로서 구획된 글자를 적을 수 있어요. 이건 h2 이에요.</h2>
    <h3> 제목으로서 구획된 글자를 적을 수 있어요. 이건 h3 이에요.</h3>
    <h4> 제목으로서 구획된 글자를 적을 수 있어요. 이건 h4 이에요.</h4>
    <h5> 제목으로서 구획된 글자를 적을 수 있어요. 이건 h5 이에요.</h5>
    <h6> 제목으로서 구획된 글자를 적을 수 있어요. 이건 h6 이에요.</h6>

    <!-- 글자 속성 태그-->
    <strong> 이 글자는 굵어져요. </strong>
    <br><br>
    <u> 글자 밑에 밑줄이 생겨요. </u>
    <br><br><br> br 태그로 줄 바꿈을 할 수 있어요. <br><br><br>

    <!-- 단락 태그 -->
    <p> 구획된 단락을 표현할 수 있어요. 첫 번째 단락이에요. (국가는 모성의 보호를 위하여 노력하여야 한다. 모든 국민은 건강하고 쾌적한 환경에서 생활할 권리를 가지며, 국가와 국민은 환경보전을 위하여 노력하여야 한다. 국가는 평생교육을 진흥하여야 한다. 의원을 제명하려면 국회재적의원 3분의 2 이상의 찬성이 있어야 한다. 대통령은 국무총리·국무위원·행정각부의 장 기타 법률이 정하는 공사의 직을 겸할 수 없다.)</p>
    <p> 구획된 단락을 표현할 수 있어요. 두 번째 단락이에요. (연소자의 근로는 특별한 보호를 받는다. 국회의원은 국가이익을 우선하여 양심에 따라 직무를 행한다. 국회는 법률에 저촉되지 아니하는 범위안에서 의사와 내부규율에 관한 규칙을 제정할 수 있다. 감사원의 조직·직무범위·감사위원의 자격·감사대상공무원의 범위 기타 필요한 사항은 법률로 정한다.)
    </p>

    <!-- 이미지 태그 -->
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQn4_cfe_ZM15Cs0umK3rwc2S-Ema9moqKvqg&s" width="400">
    <br><br>
    <a href="https://www.google.co.kr/?hl=ko">img 태그로 이미지를 넣을 수도 있어요. a 태그로 하이퍼링크를 만들 수도 있어요.</a>

    <!-- 순서 태그 -->
    <ol> 
        <li> 순서가 있는 목록이에요. 앞에 숫자가 붙어요. </li>
        <li> 순서가 있는 목록이에요. 앞에 숫자가 붙어요. </li>
        <li> 순서가 있는 목록이에요. 앞에 숫자가 붙어요. </li>
    </ol>
    <ul> 
        <li> 순서가 없는 목록이에요. 앞에 불릿이 붙어요. </li>
        <li> 순서가 없는 목록이에요. 앞에 불릿이 붙어요. </li>
        <li> 순서가 없는 목록이에요. 앞에 불릿이 붙어요. </li>
    </ul>
</body>

회고

이번주에는 간단한 네트워크 지식과 웹을 만드는 기술인 HTML, CSS, JS를 배우고, 실습하였다. 기본적인 네트워크 지식과 HTML,CSS,JS는 이미 내가 배웠던 것이지만, 이번 기회를 통해 배웠던 것을 다시 상기시키게 되었다. 그렇지만, 새로 배우게 된 것도 있다. 바로 '웹 소켓'이다. 이것을 배우기 전에는 HTTP 프로토콜에 대해서만 알았는지라 "분명 연결을 하고나서 응답을 받으면 연결이 끊어질 것인데, 게임은 이 과정을 수백번, 수만번 하는건가?"라고 궁금증이 들기도 했다. 그러한 궁금증을 해결해준 '웹 소켓'에 대해 배워서 좋은 시간이었다.

참고자료

한샛코드

개발도 하고 요리도 하는 노근본 개발자

이전 포스트

2주차. CryptoHack, 그리고 Protocol 5.0

다음 포스트