JSeo

시체놀이닷컴

Rss feed Tistory
분류없음 2011/05/13 14:07

960gs를 이용하여 웹 사이트 구축하는 방법

정규화된 웹사이트를 구축을 하고자 한다면, 그리드 시스템(Grid System)이 참 좋은것 같습니다.
특히 여기저기 마구 바꿔되는 업무가 많을 수록 효율이 좋은 것 같습니다.
물론 하기 나름이지만..

960gs에 대한 한글화된  문서가 없어서 간단한 Howto를 적어봅니다.

1. 그리드 기반의 레이아웃을 설계 합니다.
아래와 같은 툴들을 이용하면 편하게 됩니다.
- 960gs layout system : http://960ls.atomidata.com/
- 960gs custom css generator : http://grids.heroku.com/

2. 기본 레이아웃을 만듭니다.
이때, 초행자일 수록 많은 시행착오가 있기 마련인데요, http://960.gs/ 에 있는 960gs가 적용된 사이트 중에서 내가 하고자 하는 사이트를 보고, 해당 css를 따라하면 쉽게 됩니다. 다양한 패턴에서 다양한 기술을 볼 수 있습니다.
container에 배경 등 css가 필요한 경우 container 안 마지막에 clear 클래스가 적용된 div가 필요할 것입니다.
이때 중요하게 생각할 부분이 반드시 css generator 가 정해준 기반으로 작업할 필요는 없다는 것입니다.
해당 영역을 grid로만 잡으면 되는 것이지 무조건 첫번째 객체가 상위객체일 필요는 없습니다.
디자인에 따라 여러개의 container div가 존재해도 된다는 것이지요.

3. 각 영역에 요소들을 마크업 합니다.
이 부분은 정해진 그리드 컬럼안에서 (width안에서) 마크업을 해야합니다.
만약 좌우 margin이 없어야 되는 경우가 생긴다면, alpha, omega을 사용할지 판단해야 합니다.

크리에이티브 커먼즈 라이선스
Creative Commons License
1 2 3 4 5 ... 32
TOTAL 77,400 TODAY 28