CSS 레이아웃이 좋은 10 개의 사이트 - 인형

CSS를 사용하여 다양한 작업을 수행하는 방법을 배우는 가장 좋은 방법 중 하나는 다른 사람들이 사이트를 구성하는 방법을 확인하는 것입니다. 다음 목록에는 자신 만의 사이트를 만드는 데 사용할 수있는 다양한 레이아웃이 나와 있습니다. 또한 각 사이트에 대한 레이아웃 유형 및 특수 기능에 대해 설명합니다.

• 오늘의 천문학 사진 : 천문학의 오늘의 그림 (APOD)은 유체 설계의 뛰어난 예입니다. 페이지의 크기를 조정하면 페이지 내용이 어떻게 반응하는지 놀랄 것입니다. (중앙의 그래픽은 핸드폰에서는 잘 작동하지 않지만 텍스트는 분명히 그렇습니다.) 폰트 스타일을 잘 조합하고 링크를 사용하여 내용을 향상시키는 방법을 보여줍니다.

• USA Today : 이것은 2 또는 3 열 적응 형 설계의 좋은 예입니다. 페이지 크기를 조정할 때 페이지의 너비가 너무 작아지면 오른쪽의 세 번째 열이 사라지는 경향이 있습니다. 프레젠테이션의 각면에있는 화살표를 확인하십시오. 이 특수 효과를 사용하면 신문 섹션간에 이동할 수 있습니다.

• 야후! 지도 : 지도 사이트는 복잡한 인터페이스를 사용하거나 사용자가 쉽게 입력 할 수있는 형태가 아니기 때문에 사용하기가 어렵다고 알려져 있습니다. 야후! 지도는 세 가지 간단한 필드를 제공하여이 문제를 해결합니다. 대부분의 인터페이스는 실제로지도를 표시하는 데만 사용됩니다. 지도의 제어 시스템은 쉽게 이해할 수 있으며 어떤 말씨도 필요하지 않습니다. 이것은 그래픽 지향 응용 프로그램의 좋은 예입니다. 이것은 또한 올바르게 구현 된 반응 형 디자인의 몇 가지 예 중 하나입니다.

• 동의어 / 반의어 사전. co.kr : 이 레이아웃 사이트는 독특한 방식으로 탭을 사용하는 좋은 예를 제공합니다. 실제로이 단일 사이트와 관련된 여러 사이트가 있습니다. 상단의 탭 중 하나를 클릭하면 사전과 같은 다른 사이트로 이동합니다. com 및 사전. com 번역기. 이 사이트에 대한 복잡한 레이아웃 사용에 유의하십시오. 3 열 레이아웃은 추가 정보를 전달하는 데 필요한만큼 하위 섹션으로 나뉩니다.

• 이동 변환 : 이것은 3 열의 탄성 설계의 좋은 예입니다. 구현이 완벽하지는 않지만 콘텐츠를 얼마나 크게 만들지도 콘텐츠가 전체 페이지를 소비하는 방식에 유의하십시오. 콘텐츠가 사용 가능한 공간에 맞게 축소되기 때문에 스크롤 막대의 표시가 나타나기 전에 페이지를 상대적으로 작게 만들 수도 있습니다. 이 페이지에는 두 개의 메뉴 시스템이 있습니다 (하나는 변환 기능에 액세스하는 데 사용되고 왼쪽에 하나는 사이트 기능에 액세스하는 오른쪽에 있음).

• JC Penney : 많은 판매 사이트가 콘텐츠 계층을 제공합니다. 이 경우 맨 위에있는 공급 업체 제목, 멋진 대화 형 메뉴, 다음 판매량, 현재 사이트 경로 및 마지막으로 두 열 판매 정보가 표시됩니다. 고정 너비 프리젠 테이션이므로 브라우저 크기가 변경 될 때 확장되지 않습니다. 초점은 가능한 최상의 방법으로 페이지에 이미지를 표시하는 것입니다.

• 페터 헤셀 베르크. com : 오늘날 대부분의 사이트와 달리 절대 위치 지정을 효과적으로 사용합니다 (CSS를 독점적으로 사용하는 경우 사이트가 더 좋을 것입니다). 표 형식의 데이터 표현은 어려울 수 있습니다. 이 사이트는 너무 바쁘거나보기가 힘들지 않은 표 형식의 데이터를 표시하는 효과적인 방법 중 하나를 보여줍니다. 표 형식의 데이터를 표시 할 때 항상 경계선을 사용할 필요는 없습니다. 때로는 미묘한 색칠이 필요합니다.

• Sourceforge : 어떤 경우에는와 같은 다른 형식으로 정보를 배포하기위한 설정을 만들어야합니다. ZIP 파일. 이것은 메뉴에 대해 정렬되지 않은 목록과 같은 HTML5 기술과 기능을 사용하는 정보 배포 전략의 예입니다. 고정 폭 레이아웃은 크기가 잘 조정되지 않지만 사이트 자체는 매우 유연합니다. 이 사이트가 머리글과 바닥 글이있는 두 열 레이아웃을 효과적으로 사용하는 방법에 유의하십시오.

• GetHuman : 데이터베이스는 변경된 것보다 더 자주 검색됩니다. 데이터베이스가 크면 특정 정보를 찾는 것이 매우 어렵고 좌절하게됩니다. 이 고정 너비 사이트는 정보 범위를 표시하기 위해 단 하나 또는 두 개의 키에만 의존하는 다른 종류의 사이트에 적용될 수있는 전화 번호부 검색 기술을 보여줍니다. 어떤 라인이 선택되었는지 보여주는 특수 효과의 사용에 주목하십시오. 이 사이트는 또한 테이블을 실제로 사용하지 않고 표 형식으로 표시합니다 (직접 볼 수있는 소스 코드보기).

• John 's Random Thoughts and Discussions : 이 사이트는 블로그 환경에서 사용되는 두 열 레이아웃의 완벽한 예를 보여줍니다. 왼쪽의 세로 막대 열에있는 항목을 통해 오른쪽 창의 내용 항목에 쉽게 액세스 할 수있는 방법을 알 수 있습니다. 또한이 사이트는 고전적인 고정 너비 레이아웃의 장단점을 이해하는 데 도움이됩니다.