Velog Velog

요즘 styled-component로 컴포넌트의 스타일을 작성하고 있는데 종종 헷갈리던 단위를 확실히 이해하고자 작성합니다! px 우리가 흔히 사용하는 픽셀 값이다. 출력장치인 모니터에 따라 상대적인 값을 가진다. em 부모의 font-size를 기준(1)로 하는 상대적인 사이즈를 의미한다. 예를 들어, 부모의 font-size가 10px이라 했을 때 자식 태그에서 font-size를 1.5em이라고 한다면, 그 태그의 font-size는 15px이다. rem em은 상위 부모 태그의 font-size를 기준으로 삼기 때문에 태그의 깊이가 커질 수록 사이즈 변동이 있다는 문제점이 있다. 그래서 rem을 사용하는데, rem의 r은 root를 의미한다. 즉 해당 문서의 최상위 태그의 font-size를 기준..

MIME Type (Multipurpose Internet Mail Extensions) MIME type이란 클라이언트에게 전송된 문서에 대해 알려주기 위한 메커니즘이다.브라우저는 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지를 MIME 타입을 기반으로 결정한다. 현재 IANA 기관에서 MIME type을 표준화하여 관리한다. 구조 가장 단순한 MIME type의 구조는 type과 subtype으로 이루어져 있다. 각각은 string이며 이 둘은 슬래시(/)로 구분되고 공백문자는 존재하지 않는다. type/subtype type : 일반적인 카테고리 의미 subtype : 구체적인 카테고리 식별 parameter : 추가적인 디테일 정보를 더하고자 사용 (optional) 특징 charset 값..

클라이언트 - 서버 구조에서 클라이언트가 서버에게 request를 보내면 서버는 이에 대해 response를 보낸다. 모든 HTTP 응답 코드는 5개로 분류할 수 있다. => Status code의 첫 번째 숫자에 따라 response class가 달라진다. 1️⃣ 1로 시작하는 경우 = Informational responses : 요청을 받았으며 프로세스를 계속함 100 Continue 요청의 시작 부분이 받아들여졌으며 클라이언트는 계속 이어서 보내야 함 이미 요청을 완료한 경우에는 무시해도 됨 101 Switching Protocol 요청 헤더의 Update 필드 중 하나로 서버가 프로토콜을 변경함 102 Processing 서버가 요청을 수신하고 이를 처리하고 있으나 제대로 된 응답을 알려줄 수 ..

최근 웹 공부를 시작하면서 간단하게 사이트를 만들고 있는데 모바일 기기로 보니 사진은 찌부되고 보기에 좋지 않았다. 그래서 다들 반응형 웹을 강조하는구나 싶었다. 이번 기회에 반응형 웹에 대해 공부해보고 만들고 있는 사이트에 적용해보려고 한다. 태블릿의 열풍, 스마트폰의 각기 다른 해상도, 다양한 모바일 기기의 등장으로 웹의 콘텐츠들이 각기 다르게 배치되어야 할 필요성이 증가되었다. 가끔 스마트폰으로 웹 서핑을 하다보면 보기 불편하게 배치되어 있는 경우를 볼 수 있다. (내 웹사이트 처럼) 이러한 문제점 때문에 여러 버전으로 웹을 제작해야 하는 불편함이 생겼다. 그러나 반응형 웹은 여러 버전 제작의 불편함을 해소한다. 반응형 웹은 UI를 의도대로 보여주면서 동시에 디스플레이되는 기기의 요구사항에 유연하게..