–
레이아웃은 화면 내 각 구성요소를 효과적으로 배열하는데 많은 도움을 줍니다. 어떤 레이아웃을 활용하느냐에 따라 분위기나 주목도가 많이 달라지기도 합니다. 오늘 소개할 서비스는 우리가 자주 사용하는 레이아웃 패턴을 자세한 소개와 함께 HTML, CSS 등으로 확인할 수 있도록 도와주는 곳입니다.
등록되어 있는 레이아웃은 총 11개로, 원하는 내용을 직접 펼쳐 확인할 수 있도록 구성되어 있습니다.
가장 먼저 이미지가 포함된 카드 레이아웃을 확인해봤는데요. 타이틀, 이미지, 설명 등으로 구성된 내용과 함께 오른쪽으로 HMML, CSS 등의 코드를 함께 확인할 수 있습니다.
데모는 이렇게 별도 화면(새창)에서 실제 사이즈로 확인할 수 있습니다.
레이아웃 자세히 보기 버튼을 클릭하면, 실제 적용 시 지켜야할 비율이나 간단한 팁을 함께 확인할 수 있어요.
11개라는 레이아웃 자체가 적게 느껴질 수 있지만, 하나씩 확인해보면 기본적으로 우리가 자주 활용하거나 볼 수 있는 내용이라 많은 도움을 받을 수 있습니다.
어떻게 구성되는지, 샘플과 함께 실제 적용하거나 테스트할 수 있는 코드가 함께 제공되어 활용도가 더 높게 느껴지는 곳이기도 합니다. 아래 내용과 함께 살펴보시면 레이아웃, 화면 구성에 더 많은 도움을 받으실 수 있으리라 생각합니다! (서비스 자세히 보기)
- 반응형 그리드 레이아웃을 확인할 수 있는 오픈소스 라이브러리 ‘Muuri’
- 41개의 기본 디자인 패턴 확인이 가능한 : Basic Pattern Repository
- 다양한 종류의 인터랙션 디자인 패턴을 큐레이션 해주는 : Patttterns
–
