문제

CSS '디자인 패턴'에 대한 좋은 온라인 리소스를 추천해 줄 수 있는 사람이 있나요?

나는 소프트웨어 맥락에서 디자인 패턴이 일반적으로 OO 기반 디자인 패턴을 지칭한다는 것을 알고 있지만, 용어의 더 넓은 의미에서 디자인 패턴을 의미합니다.즉.일반적인 문제/작업에 대한 공통적이고 명확한 솔루션.

그러한 자원의 예는 다음과 같습니다. 이 테이블 디자인 목록, 이는 일련의 CSS 기술을 사용하여 테이블을 보기 좋게 만드는 방법에 대해 실제로 알아야 할 모든 것을 제공합니다.

좋은 솔루션을 설정할 수 있는 일반적인 문제의 다른 예로는 div의 둥근 모서리, 매우 유용한 양식 레이아웃 등이 있습니다.

도움이 되었습니까?

해결책

나는 참조한다 A 리스트 별도 그런 종류의 기사를 항상.그들은 일반적인 CSS 문제를 가능한 가장 깔끔하고 이식 가능한 방법으로 처리할 수 있는 정말 창의적인 방법을 찾기 위해 많은 시행착오 연구를 수행합니다.

다른 팁

웹 디자인 패턴을 다루는 일부 웹 사이트는 다음과 같습니다..원하는 결과를 얻기 위해 HTML 및/또는 CSS를 구체적으로 제공하지는 않지만, 가능한 라이브 사이트의 예는 제공합니다. 소스보기 on (또는 더 나은 방법은 다음을 사용하는 것입니다. 개똥 벌레).

UI 패턴

이것은 아마도 무리 중 최고일 것입니다.광범위한 웹 페이지 디자인 작업을 다루는 범주로 분류됩니다.태그 클라우드, 실시간 미리보기, 사용자 등록 등의 카테고리를 찾을 수 있습니다.이것은 잘 정리된 정말 포괄적인 자료입니다.각 패턴을 설명하고 많은 예제를 제공합니다.

패턴 탭

현재는 포괄적이지는 않지만 UI 패턴과 유사합니다.사용자가 자신의 카테고리("사용자 세트")를 만들고 자신이 선택한 사이트로 채울 수 있도록 함으로써 디자인 패턴을 조합하는 데 보다 사회적 접근 방식이 필요합니다.

야후 디자인 패턴 라이브러리

다른 두 사이트와 달리 이 사이트는 실제 사이트의 예를 많이 제공하지 않습니다.잘 정리되어 있고 상당히 포괄적입니다.

디자인 요소

웹디자인의 다양한 요소를 소개하는 블로그입니다.패턴에 대해 논의하지는 않지만 빠른 영감의 원천이나 자신만의 분석을 시작하는 수단으로 좋습니다.

그만큼 플로토토리얼 중요한 CSS 속성인 "float"와 이를 사용하여 2열 및 3열 유동 레이아웃을 포함한 몇 가지 일반적인 패턴을 사용하여 콘텐츠를 레이아웃하는 방법을 배우기 위한 훌륭한 출발점입니다.

FloatUtorial은 이미지, 드롭 캡, 다음 및 백 버튼, 이미지 갤러리, 인라인 목록 및 멀티 컬럼 레이아웃과 같은 부유 요소의 기본 사항을 안내합니다.

이미 언급한 A 리스트 별도 정말 좋습니다.웹 개발을 시작한 이후로 제가 사용해 온 또 다른 사이트는 SitePoint.com입니다.여기 그들의 CSS 참조.좋은 CSS 책을 원한다면 그 책이 제가 가장 좋아하는 책 중 하나입니다.

CSS의 "디자인 패턴"에 가장 가까운 것은 일반적인 레이아웃입니다.공통 레이아웃, 열 너비 등을 활용하기 위한 최고의 도구입니다.~이다 960 그리드 시스템, 에 960.gs

간단한 소개를 보려면 이 스크린캐스트를 시청하세요.이는 많은 시간을 절약하고 최소한의 코드로 모든 일반적인 레이아웃 패턴을 적용하는 데 도움이 됩니다.

http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/

당신이 해야 할 일은 적절한 클래스를 적용하고 약간의 산술을 수행하여 모든 열 너비의 합이 맞는지 확인하는 것입니다.

CSS에 관해 제가 가장 추천하는 책은 다음과 같습니다. CSS 숙달 작성자: 앤디 버드(cssmastery.com).다소 작은 내용이지만 다른 CSS 책보다 나에게 큰 도움이 되었습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top