TOAST UI

브라우저 개발자 도구의 기능 중 CSS 디버깅에 특히 유용한 기능을 알아본다.

CSS 선택자 구문에 생긴 작은 추가 사항이 앞으로 큰 영향을 끼칠 것이다.

많은 프런트엔드 개발자들이 CSS가 얼마나 강력한지 간과할 때가 있다. 필자 역시 CSS만으로도 특정 작업을 처리할 수 있다는 것을 떠올리기 전에 항상 다른 것을 먼저 고려하던 사람들 중 한 명이었다.

현대의 웹 애플리케이션은 많은 이미지가 사용되며 다운로드되는 용량의 대부분을 차지한다. 이를 최적화하면 웹페이지의 성능을 효과적으로 향상시킬 수 있다. 기하학적 모양의 배경 이미지를 사용하는 경우, CSS Paint API를 사용하여 프로그래밍 방식으로 이를 대체할 경우 효과적으로 웹페이지의 성능을 향상시킬 수 있다.

여러가지 테스트를 통해 5가지 중앙 정렬 방법 중 어떤 것이 가장 변화에 탄력적으로 대응하는지 확인해보자.

콘퍼런스 일정표의 UI를 구현하기 위해 CSS 그리드를 사용하였다. 일정표에 각각의 세션을 표현하려면 유연한 레이아웃이 필요했다. 이 프로젝트에서 핵심 요구사항은 가로, 세로로 이루어진 2차원 평면에 다른 크기이거나 서로 다른 배치를 가지는 복잡한 자식 요소를 완벽하게 표현하는 것이다. 개념 증명(PoC-Proof of Concept) 과정에서 코드를 읽기 쉽고 재미있게 작업할 수 있는 몇 가지 기술을 발견했다. 결과로 나온 예제에는 CSS 그리드 기능의 흥미로운 사용법이 포함되어 있으며, 예제를 작성하면서 평소에 잘 알지 못했던 그리드 세부사항에 대해 알게 되었다.

새해가 되면서 새로 배워야 할 것들이 많이 늘었다. 올해 CSS에 채택된 새로운 기능들이 많지만, 필자는 다음 3가지 기능이 가장 흥미롭다. 1. 기능질의 얼마 전, 필자는 실제로 필자가 원했던 CSS 기능 중 하나인 기능 질의에 대해 썼다. 하지만 지금은 기본적으로 지원된다!