TIL - 3일차

박스 모델(Box Model)

HTML 문서상의 요소들을 하나의 직사각형 박스로 정의하는 모델

• 콘텐츠(Content): 글, 이미지, 비디오 등 콘텐츠의 실제 영역
• 내부 여백(Padding): 콘텐츠와 경계선 사이의 영역
• 경계선(Border): 콘텐츠를 감싸는 내부 여백과 외부 여백을 구분하는 선
• 외부 여백(Margin): 경계선 외부의 빈 공간을 포함하는 영역

Box-Sizing

width와 weight의 값이 콘텐츠 기준인지, 경계선 기준인지 정의

• box-sizing: content-box;: 기본값. 콘텐츠 기준(내부 여백 포함 X)
• box-sizing: border-box;: 경계선 기준(외부 여백 포함 X)

마진 상쇄(Margin Collapse)

두개 이상의 블록 요소의 상하 마진이 겹칠 때, 더 큰 마진이 적용되고 작은 마진은 무시되는 현상

마진 상쇄가 일어나는 3가지 경우

• 인접 형제 박스 간 상하 마진이 겹칠 때
• 빈 요소의 상하 마진이 겹칠 때
• 부모 박스와 첫 번째(마지막) 자식 박스의 상단(하단) 마진이 겹칠 때

마진 상쇄 적용 규칙

• 인접한 두 박스가 온전한 Block-Level 요소일 경우에만 적용한다.(inline, table 등의 요소에는 적용하지 않는다.)
• 마진이 0이더라도 상쇄 규칙은 적용된다.
• 좌우 마진은 겹치더라도 상쇄되지 않는다.

마진 상쇄 규칙 예외

• position: absolute; 된 상태
• float: left/right; 된 상태 (clear 되지 않은 상태)
• display: flex; 일 때 내부 flexbox item
• display: grid; 일 때 내부 grid item

Cookie && Session

Cookie

클라이언트의 웹 브라우저에 저장되는 데이터 조각으로 클라이언트의 요청을 식별하는데 사용된다. 쿠키는 요청마다 함께 전송되며, 탈취될 수 있어 보안에 취약하기 때문에 민감한 정보들을 제외한 정보들을 저장하는데 사용한다.

• 세션 ID 관리
• 개인화 정보
• 트래킹

Session

브라우저가 서버에 연결되어 있는 동안에 유지되는 데이터 집합으로 사용자의 정보를 서버에 저장하고 그 정보를 식별할 수 있는 "세션 ID"를 Set-Cookie 헤더로 클라이언트에게 전송한다.

속성	Cookie	Session
저장 위치	클라이언트	서버
저장 형식	Text	Object
만료	저장 시 설정(없으면 브라우저 종료 시)	서버에서 관리
리소스	클라이언트 리소스	서버 리소스
용량	도메인당 20개 쿠키 당 4KB	제한 없음

JWT (Json Web Token)

JWT는 웹표준(RFC 7519)으로서 두 개체에서 JSON 객체를 사용하여 가볍고 자가수용적인 방식으로 정보를 안전성 있게 전달할 수 있다.

구성요소

JWT는 마침표(.)를 구분자로 3개의 문자열로 구성된다.

aaaaa.bbbbb.ccccc

순서대로 헤더(Header), 내용(Payload), 서명(Signature)라 한다.

• Header: 헤더는 토큰의 타입(typ)과 해싱 알고리즘(alg)를 가진다. 토큰의 타입은 "JWT"가 들어가며, 해싱 알고리즘은 서명을 생성할 때 사용한다.

  {
    "typ": "JWT",
    "alg": "HS256"
  }

• Payload: 내용에는 토큰에 저장될 정보들을 클레임(claim)이란 단위로 key-value 쌍으로 저장한다. 클레임의 종류는 크게 세가지로 구분된다.
  • 등록된(Registered) 클레임: 서비스에 필요한 정보가 아닌 토큰에 대한 정보를 저장하기 위해 이름이 이미 정해진 클레임으로 모두 선택적으로 사용된다.
    • iss, sub, aud, exp, nbf, iat, jti
  • 공개된(Public) 클레임: 충돌이 방지된(Collision-resistant) 이름을 가져야하는 클레임으로 주로 URI 형식으로 정의한다.
  • 비공개(Private) 클레임: 클라이언트와 서버 간의 협의 하에 사용되는 클레임이다.
• Signature: 헤더와 내용의 암호화된 값을 합친 뒤, 주어진 비밀키로 해쉬값을 생성한다. 이렇게 해서 만들어진 해쉬값을 Base64로 인코딩한 값이다.

출처

• 취준생이 반드시 알아야 할 프론트엔드 지식들
• CSS 마진 상쇄