OCEAN-WARD BOUND

tailwindcss의 사용법을 어느정도 익힌 후, 새로운 스타일링 라이브러리를 찾아보던 중 Vanilla Extract라는 것을 알게 되었어요.Vanilla Extract: Zero Runtime Stylesheets-in-TypeScriptVanilla Extract는 공식 Github에서 "Zero Runtime Stylesheet-in-typescript" 라고 소개합니다. 기본적으로 TypeScript 파일에서 스타일을 지정할 수 있는 CSS-in-JS 방식이지만, styled-components나 Emotion과는 다르게 런타임에 스타일을 생성하지 않고, Sass나 Less처럼 빌드 시에 스타일을 생성한다고 합니다.CSS-in-JS의 장점과 단점styled-components와 emotion은..

CSS로 스타일링을 진행할 때 어떤 요소의 크기 값을 지정하는 일이 매우 자주 일어납니다. 저는 주로 px로 크기를 지정했는데, 다른 사람의 코드를 보다 보면 크기 지정을 px이 아닌 rem과 em을 사용하는 분들이 많더라구요. 저는 계속 px로 사용하면서 불편한 부분을 못느꼈지만, CSS를 만든 사람들이 rem과 em을 도입했다면 분명히 합당한 이유가 있겠죠? 오늘 확실히 정리해서 그 이유를 알아보겠습니다. rem, em이란? 우선 rem과 em은 상대적 단위라는 공통 분모가 있습니다. 상대적 단위를 이해하기 위해서 반의적인 절대적 단위를 먼저 보겠습니다. px은 절대적 단위입니다. 만약 어떤 엘리먼트의 font-size를 16px로 지정했다면, 그 엘리먼트는 어떠한 일이 있어도 16px로 고정되는 것..

HTML 문서에서 태그는 태그와는 다르게 웹페이지에 보이지 않는 내용을 담고 있습니다. 웹페이지의 주된 Content(내용)가 아닌, 해당 웹페이지를 설명해주는 메타데이터가 기록되는 곳이 바로 태그입니다. 메타데이터란? 메타데이터의 가장 단순한 정의는 데이터들을 위한 데이터라고 하며, 문서의 직접적인 내용이 아닌 문서의 작성자, 문서의 설명, 문서의 대표 이름과 같은 데이터를 설명해주는 데이터의 모음을 뜻한다. 그럼 태그에서 사용되는 대표적인 기능들을 알아보겠습니다. 1. 문서 전체의 제목을 표현하기 위한 메타데이터, 웹브라우저 탭에 표현되며 다양한 검색 엔진(구글, 야후)에서 검색 결과 요소로 사용된다. 2. html에서 메타데이터를 저장하기 위해 기본적으로 제공하는 키워드이다. 여러 가지 속성을 이용..