12 그리드 시스템.

Presentation on theme: "12 그리드 시스템."— Presentation transcript:

1 12 그리드 시스템

2 12.1 960 Grid System 플러그인 그리드 시스템 960 Grid System 플러그인
반응형 웹과 관련된 플러그인은 대부분 그리드 시스템을 사용한다. 960 Grid System 플러그인 960 Grid System 플러그인의 공식 홈페이지는

3 Grid System 플러그인 파일을 바로 내려 받지 말고 그림 12-1의 CUSTOM CSS GENERATOR 버튼을 누른다. 이어서 다음 페이지로 이동하면 적당한 설정을 맞추고 파일을 내려 받 는다.

4 12.1 960 Grid System 플러그인 다음과 같이 폴더를 구성한다.
다음과 같이 입력해서 grid.css 파일을 추가한다.

5 Grid System 플러그인 960 Grid System 플러그인은 다음과 같이 사용한다.

6 Grid System 플러그인 내부에 글자를 넣고 실행하면 다음과 같이 영역이 자동으로 분할된다.

7 12.2 정적 그리드 시스템 그리드 시스템 기본 정적 그리드 시스템
그리드 시스템은 공간을 Column 공간과 Gutter 공간으로 분리한다. Column 공간과 Gutter 공간은 다음 용어를 참고한다. 정적 그리드 시스템 정적 그리드 시스템에서 컨테이너 전체의 너비는 다음 공식을 따른다.

8 12.2 정적 그리드 시스템 이를 활용하면 다음과 같이 정적 그리드 시스템을 만들 수 있다.

9 12.2 정적 그리드 시스템 이렇게 생성한 정적 그리드 시스템은 960 Grid System 플러그인과 같 은 방법으로 사용한다.

10 12.3 동적 그리드 시스템 동적 그리드 시스템 정적 그리드 시스템은 퍼센트 단위를 사용해 너비를 분할한다.
다음과 같은 공식을 사용해 Column 공간의 너비를 구한다. 예로 Gutter 공간의 너비를 2%로 설정하면 다음과 같은 수식을 사용 해 Column 공간의 너비를 구한다. 다음과 같은 코드로 동적 그리스 시스템을 생성한다.

11 12.3 동적 그리드 시스템 이렇게 생성한 동적 그리드 시스템도 960 Grid System 플러그인과 같 은 방법으로 사용한다.

12 12.4 반응형 그리드 시스템 반응형 그리드 시스템 반응형 그리드 시스템은 어떠한 화면 크기에서도 잘 동작하는 그리드 시스템을 의미한다. 지금까지 만들었던 그리드 시스템을 모두 합쳐서 쉽게 만들 수 있다.

13 12.4 반응형 그리드 시스템 반응형 그리드 시스템은 다음과 같은 방법으로 생성한다.

14 12.4 반응형 그리드 시스템

15 12.4 반응형 그리드 시스템 이렇게 생성한 반응형 그리드 시스템도 960 Grid System 플러그인과 같은 방법으로 사용한다.

16