TL;DR 업무상 필요에 의해 컨트리 뷰션했습니다. 외부 js라이브러리를 typescript에서 쓰기 위해 래핑하였습니다. chakra ui를 사용하며, 필요를 느낀 컴포넌트를 만들었습니다. 재미있었고, 공부가 많이 되었습니다. 계기 다음 두가지 상황에서 각각 definitly typed 프로젝트와 chakra ui 프로젝트에 PR을 올리게 되었습니다. 도입한 라이브러리에서 typescript 지원을 하지 않는다. 내가 필요한 기능이 닫힌 이슈로만 올라와 있다. 도입한 라이브러리에서 typescript 지원을 안한다. scroll restoration과 관련하여, 모바일에서 계속 오류가 나는 상황이 있었습니다. 이 버그는 사용환경인 모바일에서 신경이 안쓰이진 않을 정도로 ‘가끔’ 일어났기 때문에 수정이 어려웠습니다....
이번 문서의 목적 CSS Inheritance, Cascading의 정의를 설명할 수 있다. CSS Inheritance, Cascading의 적용 과정을 설명할 수 있다. CSS의 규칙 충돌을 설명할 수 있다. CSS 규칙 충돌? CSS의 역할은 한 Markup Element, HTML에서는 HTML Element에 대해 꾸며주는 역할을 합니다. CSS 규칙 충돌은 한 HTML Element에 대해 여러가지 규칙이 적용될 수 있는 상황을 이야기 합니다. 우리는 논의 중 충돌이 발생하면 합의된 기준을 두고 점수를 매겨 우선순위를 산출합니다. 기준을 합의할 때, 각 기준은 명확하고 측정이 가능해야 합니다....
이번 문서의 목적 CSS의 정의를 설명할 수 있다. CSS? CSS의 정의 CSS는 Cascading Style Sheet의 약자입니다. CSS의 기본 문법 구조 CSS는 Rule Set(혹은 Rule)이라고 부르는 기본 단위가 있습니다. 가장 단순한 구조는 아래와 같습니다. 1 2 3 4 /* RULE SET */ selector { property: value; } selector는 우리가 작성했던 HTML Element의 요소들을 가리킵니다. 말 그대로 selector 입니다. selector의 설정은 다음을 참조해 주세요. HTML에 style을 입히는 방법 1. <style>태그를 이용한다. HTML의 HEAD 태그에서 style 태그를 열고 그 안에 CSS문법으로 rule을 작성하면 적용할 수 있습니다....
이번 문서의 목적 HTML body태그를 설명할 수 있다. Webpage의 기본 구조를 설명할 수 있다. Semantic HTML은 Markup language로서 semantic(의미론적인) 특징을 가집니다. 하지만 우리는 가끔 이것을 명확히 인지하지 못하고 div태그 지옥과 같은 실수를 범하곤 합니다. 따라서 semantic한 HTML문서의 작성을 위해 HTML의 body에 들어가는 기본 구조를 알아보겠습니다. HTML Body HTML Living Standard에 따르면 HTML body 태그는 Sectioning Root로, HTML문서의 내용을 담고 있습니다. body태그 안에 들어가는 내용들을 Sectioning Content라고 부르며, 일반적인 웹페이지는 아래와 같이 section 및 구성요소들을 가지고 있습니다....
이번 문서의 목적 HTML의 html태그에 들어가는 내용을 설명할 수 있다. HTML의 head 태그에 들어가는 내용을 설명할 수 있다. <html> 바로 직전 글에서 이 html태그는 HTML문서의 시작과 끝을 나타내는 태그이자 HTML 내용을 담고있는 문서에 단 하나만 존재하는 태그라고 말씀드렸습니다. 하지만 분명 우리는 문서의 DOCTYPE을 통해 현재 문서가 HTML 문서임을 밝혔습니다. 왜 필요할까요? DOCTYPE은 엄밀히 말해 이 문서는 HTML이라고 브라우저에 알려준 것입니다. 따라서 아래 HTML이 어떻게 생겼는지, 시작점은 어디인지, 논리적 구조는 어떻게 되는지는 문서의 내용에 달렸습니다....