무료 960.GS CSS 사진 템플릿 및 튜토리얼
그것을 좋아하거나 미워하는 960.gs는 엄청나게 빠른 프로토 타이핑을 만듭니다. 사전 설정 클래스를 사용하면 별다른 노력 없이도 상당히 복잡한 레이아웃을 얻을 수 있습니다.
오늘 우리는 960.gs를 사용하여 완전히 코딩 된 무료 단일 페이지 템플릿을 제공합니다. 이 템플릿에는 멋진 CSS3 효과가 있으며 @ font-face를 사용하여 아름다운 사용자 정의 타이포그래피를 구현합니다. 아래에는 다운로드 및 자체 빌드 방법에 대한 기본 단계별 자습서가 있습니다.
템플릿을 완전히 무료로 다운로드하여 무료로 사용할 수 있습니다.
템플릿 다운로드
- 브라우저에서 미리보기
- .ZIP 다운로드
템플릿의 모양에 대한 빠른 미리보기는 다음과 같습니다.
960.GS 자료 다운로드
가장 먼저 할 일은 960 Grid System 웹 사이트로 이동하여 페이지 왼쪽 상단에있는 다운로드 버튼을 클릭하는 것입니다.
다운로드에는 많은 것들이 있지만 실제로 필요한 것은 reset.css, text.css 및 960.css의 세 CSS 파일입니다. 이것들은 그리드 시스템이 구축되는 표준 구성 요소입니다. 재설정 및 텍스트 스타일 시트는 완전히 선택 사항이지만 다양한 브라우저에서 모든 것이 멋지고 일관되게 유지되도록하는 데 사용됩니다.
아래 튜토리얼에서는 CSS와 960.gs에 대해 잘 알고 있다고 가정합니다. 그리드 시스템에 대한 충돌 과정이 필요한 경우 Six Revisions에서 960 안내서를 확인하십시오.
1 단계 : HTML 및 CSS 파일 시작
960.gs와 함께 제공되는 CSS 파일 외에도 자체 파일이 필요합니다. 머신에 디렉토리를 작성하고 다운로드 한 파일을 버리고 index.html 파일과 style.css 파일을 작성하십시오.
시작하려면 다음 코드를 HTML에 붙여 넣으십시오.
우리는 기본적으로 다양한 CSS 파일 (단일 웹 페이지에는 너무 많지만 확장하기 위해 만들어 졌음)에 링크하고 본문 HTML을 시작했습니다.
이 디자인은 페이지 상단과 하단에 얇은 회색 막대가 특징입니다. 페이지 전체에 걸쳐서 960div 외부에 배치하기를 원합니다.
다음으로 머리글과 바닥 글 사이에는 "container_12"클래스의 div가 있습니다. 우리는 960 시스템의 12 열 버전을 사용하기 때문에 대부분의 페이지에 걸쳐 있고 가로로 자동 중앙에 div를 만듭니다.
2 단계 : 글꼴
이 프로젝트에는 Lobster 및 Caviar Dreams라는 두 가지 사용자 지정 웹 이외의 글꼴을 사용합니다. 둘 다 FontSquirrel @ Font-Face Kit Library에서 찾을 수 있습니다.
각 글꼴에 대한 키트를 다운로드하고 다양한 글꼴 파일을 프로젝트 파일에 배치하십시오. 각 키트와 함께 제공되는 CSS에는 해당 글꼴을 포함하기위한 @ font-face 코드가 있습니다. 각 글꼴의 스 니펫을 잡고 stye.css 파일에 붙여 넣습니다.
이 코드를 사용하여 'Lobster13Regular'또는 'CaviarDreamsRegular'를 입력하여 글꼴 스택에 이러한 글꼴을 포함시킬 수 있습니다.
3 단계 : 헤더
HTML에 헤더를 이미 추가 했으므로 기본 스타일을 추가하기 만하면됩니다.
기본적으로 우리가 한 모든 것은 헤더의 높이와 배경색입니다.
4 단계 : 탐색 HTML
헤더 다음에 가장 먼저 나타나는 것은 탐색입니다. 페이지 오른쪽에 떠 있기 때문에 약간 까다 롭습니다. 960 클래스를 설정 한 다음 push 명령을 사용할 수 있지만 div에 클래스를 적용하지 않고 CSS로 올바르게 플로팅하는 것이 훨씬 쉽습니다.
HTML의 경우 일부 링크가있는 표준 순서가없는 목록 만 있으면됩니다. 여기에 자리 표시 자 링크가 몇 개 있지만 귀하의 사이트에 맞게 맞춤 설정하고 싶을 것입니다.
5 단계 : 탐색 CSS
다음으로 탐색을위한 다양한 스타일을 설정해야합니다. 링크, 정렬되지 않은 목록, 목록 항목 및 호버 효과는 모두 해결해야합니다.
위에서 배운대로 글꼴을 Caviar Dreams로 설정하고 브라우저가 올바른 글꼴을로드하지 않는 경우 몇 가지 백업이 나열되었는지 확인하십시오.
가장 이상한 점은 우리가 float left와 float right를 모두 사용했다는 것입니다. 리스트 아이템이 쌓이지 않고 한 줄로 나타나게하려면“ul li”을 왼쪽으로 띄워야합니다. 컨테이너 div의 오른쪽을 전체적으로 준수하도록 #nav 오른쪽을 플로팅했습니다.
다른 모든 것은 색상, 글꼴 크기 등과 같은 기본 스타일의 모음 일뿐입니다. 호버 링크를 구별하기 위해 간단한 밑줄을 적용했습니다.
이 시점에서 페이지가 형태를 갖추기 시작해야합니다. 아래 미리보기에 가깝게 보이는지 확인하십시오.
6 단계 : 헤드 라인 HTML
탐색 후 ID가 "headline"이고 클래스가 "grid_12"인 div를 추가하십시오. grid_12 클래스는 div의 너비를 전체 컨테이너의 너비와 동일하게 만듭니다. 그 div 안에 h2 태그와 단락 태그를 일부 내용을 넣으십시오.
탐색 및 헤드 라인 div 뒤에 "clear"클래스가있는 div가 있습니다. 960 그리드 시스템이 이전에 구현 된 플로트를 지우는 방법입니다. 새로운 내용의 행을 시작할 때마다 이것을 버려야합니다.
7 단계 : 헤드 라인 CSS
다음으로 제목, 제목 h2 태그 및 제목 단락 태그의 스타일을 추가하십시오. h2를 50px Lobster로, 단락을 25px Caviar Dreams로 설정했습니다.
이를 통해 페이지에 상단 표시 줄, 탐색 영역 및 멋진 큰 헤드 라인이 생겼습니다.
8 단계 : 큰 사진 HTML
사진에 추가하기 위해 grid_12 클래스와 함께 빈 div를 사용하고 CSS를 사용하여 배경을 설정합니다.
9 단계 : 큰 사진 CSS
CSS의 경우 div의 배경 이미지를 설정하고 3px 테두리를 지정하고 CSS3 상자 그림자를 적용했습니다. 흰색 테두리는 흰색 배경에 표시되지 않으므로 그림자가 이미지에 깊이를줍니다.
10 단계 : 광고 항목 HTML
마지막으로 필요한 HTML은 페이지 하단의 상자와 텍스트입니다. 나중에 더 쉽게 추가 할 수 있도록 클래스로 스타일을 지정합니다.
이 섹션을 만들려면 그림과 텍스트 옆에 각각 하나씩 두 개의 열이 필요합니다. 이것은 960.gs가 우리를 쉽게 만들어주는 곳입니다. 우리는 12 열 버전을 사용하고 있기 때문에 컨테이너 전체에 걸쳐 총 12 개의 숫자가 필요합니다.
“grid_4”클래스 다음에“grid_8”클래스를 적용하면 두 개의 열을 얻게되는데, 첫 번째 열은 두 번째 너비의 절반입니다 (8 + 4 = 12).
코드를 두 배로 늘리고 다른 그림을 삽입했습니다. 이를 통해 두 가지“lineItem”영역이 제공됩니다. 다른 중복 청크를 추가하여 세 번째 또는 네 번째를 추가하십시오.
11 단계 : 광고 항목 CSS
다음으로이 영역에 스타일을 추가하여 멋지게 보이게합니다. 이미지에 그림자와 윤곽선을 제공하고 적절한 글꼴을 적용하십시오.
여기서는 "테두리"대신 "개요"를 사용했습니다. 이것은 본질적으로 레이아웃을 망치지 않는 이미지 테두리를 가질 수있는 깔끔한 CSS 트릭입니다.
완료되면 광고 항목이 멋져 보이고 명확하게 정의 된 열로 나뉩니다.
12 단계 : 바닥 글 CSS
마지막 단계는 머리글과 동일한 스타일을 바닥 글에 적용하는 것입니다. 이것은 사이트의 하단과 상단에 좋은 대비를 제공합니다.
최종 결과
그것은 당신에게 완제품을 줄 것입니다! 대부분의 작업은 실제로 페이지에 배치 한 객체의 스타일을 지정하는 것이 었습니다. 우리는 포지셔닝에 대해 거의 걱정하지 않았습니다. 이것은 960 및 Blueprint와 같은 그리드 시스템의 주요 추첨입니다.
우리는 하루 종일 시맨틱을 주장 할 수 있지만, 결국이 툴들은 디자인에 더 집중하고 레이아웃 문제에 덜 집중하도록 도와줍니다. CSS에 대한 경험이 많을수록 그리드 시스템을 사용하여 레이아웃을 수행 할 필요성이 줄어들지 만 그때까지는 문제가 발생하기 전에 해결하는 것이 좋습니다.
결론
이러한 유형의 게시물에서 피할 수없는 것처럼 여러 사람들이 그리드 시스템을 강타하는 의견을 남길 것입니다. 진실은 거의 사용하지 않는 것입니다. 그러나 나는 그들의 가치를보고, 내가 생각 해낼 수있는 것들을보기 위해 그들과 함께 모여 드는 것을 즐깁니다. 결론적으로 960.gs가 마음에 들지 않으면 템플릿을 다운로드하지 마십시오!
그러나 그리드 시스템에 익숙하고 무료 콘텐츠가 마음에 들면 파일을 다운로드하여 조정하십시오! 프로젝트에서 사용하는 경우 아래 링크 (선택 사항)를 던져 구현 방법을 확인하고 디자인을 확장 할 수 있습니다. 제안이 필요하면 큰 사진이 비명을 지르며 jQuery 슬라이더로 바뀝니다.
