css 단위 중 가장 많이 사용되는 것은 px(픽셀)일 것이다. 폰트 크기 단위로는 px보다는 rem을 사용하라는 의견이 많아, rem을 사용할 때의 이점을 바탕으로 가장 인기 있는 단위 3가지 px, rem, em을 비교해 보려 한다. px px은 고정된 절댓값으로 1px은 화면의 점 하나에 해당한다.

background 속성과 background-image 속성의 차이

스크롤바를 원하는 대로 커스텀하고 기능은 유지하되, 화면에서 보이지 않게 만들어보자. scrollbar 커스텀 스크롤바는 크게 전체, 스크롤 막대, 배경으로 나눌 수 있다. 아래 속성으로 원하는 색이나 모양으로 커스터마이징할 수 있다. - ::-webkit-scrollbar: 스크롤바 전체 - ::-webkit-scrollbar-thumb: 스크롤 막대 - ::-webkit-scrollbar-track: 스크롤바 배경

Flex(Flexible Box) flex는 컨테이너에 들어있는 아이템을 정렬해 공간을 효율적으로 채우는 방법이다. display 속성에 flex나 inline-flex를 갖는 HTML 요소를 flex container라고 하며, flex container 안에 있는 자식 요소들을 flex items라고 부른다. flex container는 flex-flow, flex-direction을 기준으로 배치된다. 주축(main axis)과 교차 축(cross axis)

브라우저의 렌더링 엔진은 HTML 요소를 나타낼 때 CSS Box Model에 맞춰 그려낸다. 박스 모델은 4가지 영역인 margin, border, padding, content로 구분된다. content 내용을 표시하는 영역으로, `width`과 `height`로 크기를 조정할 수 있다. padding content 주위의 공백을 뜻하며, `padding` 속성으로 지정할 수 있다.

요소를 숨기고 싶을 때 display 속성과 visibility 속성의 차이

FontAwesome을 이용하면 아이콘을 i 태그에 간단하게 삽입할 수 있다.

자식 컴포넌트의 height 속성은 inherit VS 100%? `height: inherit`은 부모로부터 값을 상속 받는다. 예를 들어 부모 height 값이 50%이면, 자식도 50%이라는 값을 상속 받게 되어 전체에 대한 50%가 아닌 부모로부터의 50%이라는 값을 가지게 된다. 부모와 동일한 height를 가지지 않는다.