[글로벌청년취업사관학교][TIL] 240627

 

네트워크 계층 모델과 프로토콜

 
- 통신이 이뤄지는 구조와 기능을 계층화하고 계층마다 동작하는 프로토콜(protocol)을 구분한 것
- OSI  7계층과 TCP/IP 4계층은 대표적인 네트워크 계층 모델 
 

 

1. OSI 7계층 

 
 

물리 계층 (Physical Layer)

- 전기적 신호를 통해 데이터를 전송

데이터 링크 계층 (Data Link Layer)

-물리적 네트워크의 에러 검출 및 수정, 데이터 프레임 전송을 담당

네트워크 계층 (Network Layer)

 - 데이터 패킷의 경로 설정 및 전달을 담당

전송 계층 (Transport Layer)

-데이터의 전달을 보장하고 오류를 수정

세션 계층 (Session Layer)

- 통신 세션을 관리

표현 계층 (Presentation Layer)

- 데이터 형식을 변환하고 암호화를 담당

응용 계층 (Application Layer)

- 사용자와 직접 상호작용하는 응용 프로그램이 동작
 
 

2. TCP/IP 4 계층

 

네트워크 접근 계층(Network Access Layer)

- 물리적 네트워크 연결과 관련된 기능 수행
 

인터넷 계층(Internet Layer)

- 데이터 패킷의 경로 설정 및 전달
 

전송 계층(Transport Layer)

- 데이터의 전달을 보장하고 오류를 수정

 
응용 계층(Application Layer) 

- 사용자와 직접 상호작용하는 응용 프로그램이 동작 
 
 

3. 주요 프로토콜

 
- 각 계층에서 담당하는 역할은 프로토콜(protocol)을 통해 수행됨
- 프로토콜은 네트워크 장치 간의 데이터 전송 형식, 의미 등을 정의한 규칙
 

이더넷(Ethernet)
 

- 네트워크 접근 계층에서 사용하는 프로토콜
- 로컬 네트워크에서 데이터를 전송하는 표준화된 방식 
- 네트워크에 연결된 모든 기기는 고유한 MAC 주소를 가지고 있으며, 이 주소를 사용해 데이터를 주고받음 
 

IP(Internet Protocol)
 

- 인터넷 계층에서 사용하는 프로토콜
- 데이터 전송 경로 설정과 주소 지정을 담당 
- 데이터는 패킷(packet)이라는 작은 단위로 분할되어 전송됨 

 
TCP(Transmission Control Protocol)
 

- 전송 계층에서 사용하는 프로토콜
- 신뢰성 있는 데이터 전송을  보장
- 연결 설정을 위해 3-way handshake 방식을 사용
- 연결 해제를 위해 4-way handshake 방식을 사용 
 

3-way handshake
 

- TCP가 통신하기 위해 두 장치를 연결할 때 3단계를 거쳐 설정하는 것
- 연결 요청(SYN) -> 연결 응답(SYN ACK) -> 응답 확인(ACK) 순서로 연결을 설정
 

4-way handshake

 
- TCP가 통신이 끝난 두 장치의 연결을 끊을 때 4단계를 거쳐 종료하는 것
- 종료 요청(FIN) -> 요청 확인(ACK) -> 종료 준비 완료 (FIN) -> 종료(ACK) 순서로 연결을 해제 
 
 

 
 
 

UDP(User Datagram Protocol)

 
- 전송 계층에서 사용하는 프로토콜
- 데이터를 빠르고 간결하게 전송
- 비연결형 프로토콜로, 연결 설정 없이 데이터를 전송하며, 신뢰성을 보장하지 않음 
 

QUIC(Quick UDP Internet Connections)

 
- TCP의 신뢰성과 UDP의 속도를 겸비한 프로토콜
- 신뢰성 있는 데이터 전송과 빠른 속도로 동시에 제공
- 구글이 개발한 프로토콜로, TCP와 UDP의 단점을 보완 
 
 

HTTP(Hyper Transfer Protocol)

 
- HTML 문서를 전송하기 위한 프로토콜
- TCP/IP 4 계층 중 최상위 계층인 응용 게층에서 사용 
- 응용 계층은 웹 브라우저와 같은 응용 프로그램이 네트워크에 접근할 수 있도록 지원 
 
- HTTP의 특징
 
1) 클라이언트 - 서버 구조 
 
- 클라이언트가 서버에 데이터를 요청하고(request), 해당 요청에 대해 서버가 응답하는(response) 구조로 동작
- 클라이언트 = 서버에 작업을 요청하는 컴퓨터 또는 응용 프로그램
- 서버 = 클라이언트의 요청을 받아 처리하는 컴퓨터 또는 응용 프로그램 
 
 

 
2) 비연결성
 
- HTTP는 요청과 응답을 주고받을 때마다 연결을 설정하고, 응답을 받은 후에는 연결을 끊음
- 즉, 매 요청마다 새로운 연결을 설정하는 방식
 
3) 무상태(Stateless)
 
- HTTP는 무상태 프로토콜
- 즉, 각 요청은 독립적이며, 서버는 이전 요청의 상태를 기억하지 않음 
 
 

 
- HTTP 메서드와 상태 코드 
 

메서드	설명
GET	데이터 조회를 요청
POST	데이터를 전송해 등록을 요청
PUT	데이터 전체의 수정을 요청
PATCH	데이터 일부의 수정을 요청
DELETE	데이터 삭제를 요청
OPTIONS	서버가 어떤 메서드를 지원하는지 알아볼 때 사용
TRACE	클라이언트와 서버 간의 루프백 테스트(loopback test)를 할 때 사용
CONNECT	프록시 서버 같은 중간 서버 경유를 요청할 때 사용

 
 
- HTTP 상태 코드 
 

그룹	상태 코드	설명
1XX	정보 응답	요청에 대한 처리가 진행중
2XX	성공 응답	요청에 대한 응답을 성공적으로 완료
3XX	리다이렉션 메시지	요청을 완료하기 위해 리다이렉션(새 URL로 재요청)이 필요하다는 의미
3XX	클라이언트 오류 응답	요청을 처리하던 중 클라이언트 오류가 발생했다는 의미
5XX	서버 오류 응답	클라이언트의 요청을 받았으나 적절히 처리하지 못해 응답할 수 없다는 의미

 
 

HTTPS 보안 프로토콜

 
- HTTPS(HyperText Transfer Protocol over SSL)는 HTTP를 보다 안전하게 주고받을 수 있도록 개발된 프로토콜
- HTTP에 암호화를 추가했으며, 기본으로 443 포트를 사용 
 

 
 
 

웹 브라우저 동작원리 

 

웹 페이지 탐색 과정

 

1. 탐색(Navigation)

 
- 웹 페이지를 로딩하는 첫 단계
- 사용자가 주소창에 URL을 입력하거나, 링크를 클릭하고, 폼(form)을 제출하는 등의 동작을 통해 요청을 보낼 때 발생
 

2. DNS 조회(DNS Lookup)

- 웹 페이지의 자원이 어디에 있는지 찾는 과정
- DNS 서버를 통해 도메인 이름을 IP 주소로 변환
- 최초 요청 후 IP 주소는 일정 기간 캐시 됨 
 

3. TCP 핸드셰이크(TCP Handshake)

 
- 브라우저와 서버가 TCP 연결을 설정
- 데이터 전송 전에 통신 매개변수를 주고받는 과정
- 3방향 핸드셰이크 : SYN, SYN_ACK, ACK 메시지를 주고받음 

 

4. TLS 협상(TLS Negotiation)

 
- HTTPS를 통한 보안 연결을 설정
- 암호를 결정하고, 서버를 확인하며, 안전한 연결을 만듬
- 데이터 전송 전에 클라이언트와 서버 간에 3번 더 왕복해야 함 
 

 

웹 페이지 로딩 과정

 

1. 응답(Response)

 
- 서버와 연결이 성립되면, 브라우저는 HTTP GET 요청을 보낸다. 
- 서버는 HTML 파일을 응답한다. 
 

2. 혼잡 제어(Congestion Control) / TCP 슬로우 스타트(TCP Slow Start)

 
- 서버는 일정 개수의 데이터 세그먼트를 전송하고 클라이언트로부터 ACK 패킷을 받는다. 
- 전송되는 세그먼트 수를 점차적으로 늘리며 네트워크 대역폭을 최적화한다. 
 
 

구문 분석 및 렌더링

 

1. 구문 분석(Parshing)

 
- 수신된 데이터를 DOM(Document Object Model) 트리로 변환
- 브라우저는 HTML, CSS, JavaScript를 구문 분석하여 화면에 렌더링 
 
 

2. DOM 트리 구측(Building the DOM Tree)

 
- HTML을 파싱하여 DOM 트리를 만듬
- DOM 트리는 HTML 문서의 구조를 트리 형태로 표현 
 

3. 프리로드 스캐너(Preload Scanner)

 
- 브라우저가 필요한 자원을 미리 요청하여 구문 분석을 가속화 
- CSS, JavaScript, 이미지 등의 자원을 미리 다운로드 

 

4.CSSOM 구축(Building the CSSOM)

 
- CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 만든다. 
- CSSOM 트리는 CSS 규칙을 트리 구조로 표현 

 

5. 렌더 트리 생성(Creating Render Tree)

 
- DOM 트리와 CCSOM 트리를 결합하여 렌더 트리를 만듬
- 렌더 트리는 화면에 표시될 요소와 스타일을 포함 

 

6. 레이아웃(Layout)

 
- 렌더 트리의 각 노드가 화면의 정확한 위치에 배치
- 요소의 크기와 위치를 계산 
 

7. 페인트(Paint)

 
- 각 노드를 화면에 그리는 단계 
- 텍스트, 색상, 이미지 등을 화면에 렌더링 
 
 
 

Position

 
- HTML 태그의 위치를 지정해주는 속성 
 

1. position : static

 
- html에 쓴 태그 순으로 정상적인 흐름에 따라 위치가 지정 
 

<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>static</title>
 <style>
 .box1{
 position:static;
 background-color: green;
 color:white;
 width: 100px;
 height: 100px;
 }
 .box2{
 position:static;
 background-color: red;
 color:white;
 width: 100px;
 height: 100px;
 }
 .box3{
 position:static;
 background-color: blue;
 color:white;
 width: 100px;
 height: 100px;
 }
 </style>
</head>
<body>
 <div class="box1">box1</div>
 <div class="box2">box2</div>
 <div class="box3">box3</div>
</body>
</html>

 

 

 

2. position : relative

 
- 원래 자신이 있어야 하는  위치에 상대적
- position:relative; 라는 값을 주고 left:50px;이라고 추가적으로 적어주면 , 본인의 static 자리에서 왼쪽으로 50px만큼 떨어진 자리에 위치하게 됨

...
<style>
 .box1{
  position:static;
  background-color: green;
  color:white;
  width: 100px;
  height: 100px;
 }
 .box2{
  position:relative;
  left:40px;
  background-color: red;
  color:white;
  width: 100px;
  height: 100px;
 }

 </style>
 ...

 
 
 

 

 

3. position : absolute

 
- static을 제외한 position 속성값을 가진 가장 가까운 부모의 박스 내를 기준으로 위치하게 됨
- 다른 박스 위치에 상관없이 자신이 가고 싶은 위치에 감 
 

...
<style>
 .box1{
  position:relative;
  top:40px;
  background-color: green;
  color:white;
  width: 100px;
  height: 100px;
 }
 .box2{
  position:absolute;
  left:40px;
  background-color: red;
  color:white;
  width: 100px;
  height: 100px;
 }

 .box3{
  position: absolute;
  top: 30px;
  left: 30px;
  background-color: blue;
  color:white;
  width: 100px;
  height: 100px;
 }

 </style>
 ...

 
 

 
 

4. position : fixed

 
- 스크롤을 올리거나, 내릴 때, 특정 박스가 고정되어 움직이지 않았으면 한다면, 이 fixed 속성을 이용
- fixed는 현재 사용자가 보고 있는 브라우저 화면(뷰포트)를 기준으로 마치 화면에 붙은 것처럼 그 자리에 계속 위치할 것임
 

<!DOCTYPE html>
<html lang="ko">
<head>
 <link rel="preconnect" href="https://fonts.googleapis.c
om">
 <link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Pa
cifico&display=swap" rel="stylesheet">
 <style>
  body {
    margin: 0;
  }
  .nav {
    font-family: 'Pacifico', cursive;
    position: fixed;
    padding: 10px;
    background-color: brown;
    color: white;
    font-size: 28px;
    width: 100%;
    height: 45px;
  }
  .container {
    margin-top: 0;
    padding-top: 120px;
    margin-left: 20px;
  }
  .dark-mode {
    font-family: 'Pacifico', cursive;
    font-size: 23px;
    position: fixed;
    width: 200px;
    height: 40px;
    background-color: brown;
    border-radius: 7px;
    color: white;
    bottom: 50px;
    right: 50px;
    text-align:center
  }
 </style>
</head>
<body>
 <div class="nav">hello</div>
 <div class="container">
 (lorem+br)*100
</div>
<div class="dark-mode">dark</div>
</body>
</html>

 
 

 
 
 

5. position : sticky

 
- 조상에 스크롤이 있다면 가장 가까운 부모 요소의 컨텐츠 영역에 달라붙음
 

<!DOCTYPE html>
<html lang="ko">
<head>
  <style>
    section {
      height:1000px;
      border:3px solid  black;
    }

    h2 {
      position: -webkit-sticky;
      positon : sticky;
      top: 0px;
      background: greenyellow;
      margin:0;
    }
  </style>
 
</head>
<body>
  <h1>sticky test</h1>
  (section>h2{오늘의 메뉴$}+ul>(li>lorem)*3)*3
</body>
</html>

 
 
 

6. z-index

 
- position을 통해 요소의 위치를 변경하다보면 요소와 요소가 겹쳐보이는 일이 발생
- 이때 어떤 요소가 더 위로 나타나게 할 지 결정할 때 사용하는게 바로 z-index 속성
- 오직 static을 제외한 position 속성값이 적용된 요소의 Z축 순서를 결정할 수 있으며, z-index 값이 더 큰 요소가 값이 작은요소의 위를 덮어버리게 됨
- 또한 부모가 z-index를 높여 자식 앞으로 나올 수 없다.자식은 z-index를 낮춰 부모 뒤로 가는 것은 가능 
 
 

<!DOCTYPE html>
<html lang="ko">
<head>
  <style>
    div {
      width:800px;
      height:800px;
      position:relative;
      background-color: blanchedalmond;
      border: 1px solid black;
    }

    img {
      padding:10px;
      position:absolute;
    }

    img:nth-child(1) {
      top:100px;
      left:100px;
      background-color: red;
      /* 자식에게 값을 주면 부모 뒤로 감 */
      z-index: 0;
    }

    img:nth-child(2) {
        top:150px;
        left:150px;
        background-color:green;
        z-index:0;
    }

    img:nth-child(3) {
      top: 200px;
      left: 200px;
      background-color: blue;
      z-index: 0;
    }

  </style>
 
</head>
<body>
 <div>
  <img src="https://via.placeholder.com/300" alt="">
  <img src="https://via.placeholder.com/400" alt="">
  <img src="https://via.placeholder.com/500" alt="">
 </div>
</body>
</html>

 
 

 
 

...
img:nth-child(1) {
      top:100px;
      left:100px;
      background-color: red;
      /* 자식에게 값을 주면 부모 뒤로 감 */
      z-index: 3;
    }

    img:nth-child(2) {
        top:150px;
        left:150px;
        background-color:green;
        z-index:2;
    }

    img:nth-child(3) {
      top: 200px;
      left: 200px;
      background-color: blue;
      z-index: 1;
    }
...

 
 

 
 
 
 

실습 - 로그인 화면

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <style>
    p {
    color: #666;
    margin-bottom: 20px;
    text-align: center;
    display: block;
}
.input-group {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
label.login {
    font-size: 14px;
    width: 70px;
}
input[type="text"], input[type="password"] {
    width: calc(100% - 80px);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    display: inline-block;
}
.checkbox-group {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
.checkbox-group input[type="checkbox"] {
    display: inline-block;
    margin-right: 5px;
}
.checkbox-group label {
    display: inline-block;
}
button {
    width: 100%;
    padding: 10px;
    background-color: #4285f4;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    display: block;
}
button:hover {
    background-color: #357ae8;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
    text-align: center;
}
article {
    background-color: #fff;
    padding: 40px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    width: 300px;
    display: inline-block;
    margin: 100px auto;
    text-align: left;
}
h1 {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
    display: block;
}

  </style>
 
</head>
<body>
  <article>
    <h1>로그인</h1>
    <div>
        <p>아이디와 비밀번호를 입력하고 로그인하세요</p>
        <form>
            <div class="input-group">
                <label class="login" for="id">아이디</label>
                <input type="text" id="id">
            </div>
            <div class="input-group">
                <label class="login" for="password">비밀번호</label>
                <input type="password" id="password">
            </div>
            <div class="checkbox-group">
                <input type="checkbox" id="remember-id">
                <label for="remember-id">아이디 저장</label>
            </div>
            <button type="submit">로그인</button>
        </form>
    </div>
</article>
</body>
</html>

 

 

flex

 

flex-container에 사용하는 속성 

 
- display:flex
- 자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법을 설정
- 부모 요소를 flex-container 자식 요소를 flex-item 이라고 부름
- 1차원적 레이아웃(x축, 혹은 y축)을 위해 주로 사용 
 

 
 

flex-direction

- 컨테이너 내 아이템을 배치할 때 주축 및 방향을 지정
- row : 기본값, 왼쪽에서 오른쪽 (주축이 행 방향)
- column : 위에서 아래 방향(주축이 열 방향) 
- row-reverse : 오른쪽에서 왼쪽
- column-reverse: 아래에서 위방향 
 

 

justify-content

 
- 주축을 기준으로 배열의 위치를 조절하거나 아이템 간의 간격을 설정
- flex-start, flex-end, center, space-between, space-around, space-evenly
 
 

<!DOCTYPE html>
<html lang="ko">
<head>
  <style>
    .wrap {
      background-color: gainsboro;
      width:700px;
      height:500px;
    }

    .wrap, 
    .wrap > div {
      display:flex;
      justify-content:space-between; 
    }
    
    .left-side,.center {
        flex-direction: column;
    }

    .right-side{
      flex-direction:column-reverse;
    }


    .wrap>div>div {
      color:white;
      line-height:100px;
      text-align:center;
      font-size:40px;
      width:100px;
      height:100px;
    }

    .blue {
      background-color: #4967d8;
    }

    .pink {
      background-color: #ea8676;
    }

    .yellow {
      background-color: #fad84b;
    }

  </style>
 
</head>
<body>
  <div class="wrap">
    <div class="left-side">
      <div class="blue">A</div>
      <div class="pink">B</div>
      <div class="yellow">C</div>
    </div>
    <div class="center">
      <div class="blue">D</div>
      <div class="yellow">E</div>
    </div>
    <div class="right-side">
      <div class="blue">F</div>
      <div class="pink">G</div>
      <div class="yellow">H</div>
      </div>
  </div>
</body>
</html>

 
 
 
 
 
 
https://www.w3schools.com/css/css_grid_container.asp

W3Schools.com