CSS 블루프린트란 무엇입니까?

Blueprint는 레이아웃, 타이포그래피, 위젯, 재설정 및 인쇄를 다른 CSS 파일로 나누는 CSS 프레임워크입니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, Dell G3 컴퓨터.

추천: css 비디오 튜토리얼

Blueprint(CSS 프레임워크)

Blueprint는 CSS 개발 시간을 줄이는 것이 목적인 CSS 프레임워크입니다. 상위 항목의 기반이 되는 사용하기 쉬운 그리드, 합리적인 타이포그래피, 인쇄 스타일 시트 등을 통해 CSS의 탄탄한 기반을 제공합니다.

웹 페이지를 디자인할 때 Blueprint를 가이드로 사용한 다음 HTML을 디자인하거나 생성하여 HTML 요소에 Blueprint CSS 스타일을 적용하세요. 실제로 Blueprint는 강력한 CSS를 제공하므로 최종 페이지를 시뮬레이션하기 위해 Photoshop과 같은 그래픽 디자인 프로그램을 사용하지 않고도 HTML로 웹 페이지를 디자인하는 것이 가능합니다. 어떤 의미에서 Blueprint는 프로토타입이 최종 사이트와 동일한 코드를 사용하기 때문에 진정한 WYSIWYG(What You See Is What You Get) 웹 디자인을 제공합니다.

또한 Blueprint의 주요 역할은 인쇄된 페이지의 모양을 시뮬레이션하는 것이므로 인터랙티브 디자인에 Blueprint를 사용하는 것은 QuarkXPress 또는 Adobe InDesign을 사용하는 것과 더 비슷합니다. 청사진 스타일은 픽셀과 18픽셀의 기준 그리드를 기반으로 합니다. 디자인 재능과 노력으로 전문적인 페이지를 만드는 것이 가능합니다.

스타일 예

Blueprint의 기본 그리드는 너비가 950픽셀이며, 10개의 픽셀 구분 기호로 구분된 24개의 30픽셀 너비 열로 나뉩니다. [(24개 열 * 30픽셀/열) + (23개 구분선 선 * 10픽셀/구분자) = 950픽셀]. 더 넓거나 더 좁은 그리드 또는 다른 열 너비를 선호하거나 필요한 경우 Blueprint는 필요한 사양에 맞게 Blueprint를 재생성하기 위한 Ruby 도구를 제공합니다. Ruby 도구는 또한 Photoshop에서 참조할 수 있는 그리드 이미지를 생성하고 최종 CSS를 압축하여 파일 크기를 줄여 전송 시간과 대역폭을 줄입니다.

일반적으로 Blueprint CSS 파일은 편집하면 안 됩니다. 대신, 별도의 파일에 자신만의 스타일을 정의하고 필요에 따라 블루프린트 코드를 덮어써야 합니다. 코드의 일부로 생성되고 유지되는 마지막 파일인 css/custom.css의 역할입니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 코스를 방문하세요! !

위 내용은 CSS 블루프린트란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!