표 레이아웃 을 완전히 포기 하고 xhtml+CSS 로 역 을 만 든 지 1 년 이 넘 었 습 니 다.1 년 여의 실천 도 어느 정도 경험 을 쌓 았 으 니 지금 이 글 을 써 서 총 결 해 보 자.xhtml+CSS 를 사용 하여 역 을 만 드 는 과정 에서 비교적 관건 적 인 문제 가 있 습 니 다.사이트 의 CSS 스타일 시트 계획 과 관리 입 니 다.제 CSS 관리 진화 사 는 처음에 CSS 를 사용 하여 사이트 스타일 을 제 어 했 을 때 CSS 관리 계획 과 같은 것 을 잘 몰 랐 습 니 다.작성 한 CSS 는 기본적으로 필요 에 따라 수시로 추 가 했 습 니 다.처음에는 별로 좋 지 않 았 지만 나중에 점점 더 많아 지고 어 지 러 워 졌 습 니 다.주석 이 있 지만 결국은 제 가 보기 만 해도 골 치 아 팠 습 니 다.그 때 는 한 사이트 의 모든 CSS 가 한 파일 에 있 었 고 계획 이 없 었 으 며 정렬 도 규칙 적 이지 않 았 기 때문에 html 페이지 에서 class 의 이름 을 찾 은 다음 에 수천 줄 의 css 코드 에서 자신 이 원 하 는 것 을 검색 할 수 밖 에 없 었 다.시간 이 지나 서 생각 하고 정리 한 후에 저 는 사이트 의 CSS 스타일 시트 에 대해 초급 계획 을 세 웠 습 니 다.스타일 시트 에서 세 개의 영역 을 초보 적 으로 나 누 었 습 니 다. Example Source Code [www.52css.com] base 스타일 시트 레이아웃 스타일 시트 클래스 스타일 시트 스타일 시트'는 전체적인 body,a 스타일 등 공공 적 인 것 을 묘사 하 는 데 사용 된다.'layout 스타일 시트'는 유일한 id 레이아웃 을 설명 하 는 데 사용 되 며 전체 페이지 의 프레임 레이아웃 에 속 합 니 다.'class 스타일 시트'는 남 은 class 류 의 스타일 을 설명 하 는 데 사 용 됩 니 다.이 스타일 은 재 활용 가능 한 스타일 과 보통 특수 페이지 에 한 번 또는 몇 번 만 나타 나 는 스타일 로 나 뉜 다.이런 방법 에 따라 구 조 는 확실히 많은 효율 을 향상 시 켰 지만 이런 방식 은 중 소형 사이트 에 만 적합 하고 대형 사이트 에서 응용 하 는 것 이 약간 얇 아서 적어도 여러 사람 이 합작 할 때 가장 효율 적 이지 못 하 다.그래서 다음 에 정리 한 비교적 완선 한 CSS 관리 계획 모델 이 생 겼 다.비교적 완벽 한 CSS 스타일 시트 관리 모델 step 1:개인 또는 팀 은 주요 페이지 의 레이아웃 을 DIV 그림 의 모델 로 차원 별로 그 려 야 합 니 다.이 DIV 그림 은 디자인 원형 을 바탕 으로 페이지 의 주요 모듈 에 사용 되 는 ID 이름,class 이름 을 표시 하여 나중에 수정 하고 업그레이드 할 수 있 도록 유지 문 서 를 만 들 수 있 습 니 다.step 2:CSS 구 조 를 구분 하여 전역 css 및 각 모듈 css 를 구축한다.html 페이지 에서 전역 css 를 참조 하고 전역 css 에서 각 모듈 css 를 참조 합 니 다. Example Source Code [www.52css.com]글로벌 css 를 전역 css 로 만 들 고 전역 css 에서 정의 합 니 다."* { … } body { … }”이런 전체적인 스타일.전역 스타일 에서"@import"를 통 해 url(”xxx.css”);”모듈 css 도입.모듈 CSS 의 구분 에 대해 저 는 wordpress 와 유사 한 css 구분 방식 을 좋아 합 니 다.일반적인 상황 에서 다음 과 같은 구 조 를 통 해 구분 합 니 다. Example Source Code [www.52css.com] layout.css /* 정역 배치 */ public.css /* 공통 조합 스타일 */ header.css /* 페이지 헤드 영역 스타일 */ sidebar.css /* 사 이 드 바 영역 스타일 */ main.css /* 주 영역 스타일 */ footer.css /* 아래쪽 영역 스타일 */ index.css /* 홈 페이지 특유 의 스타일 */ form.css /* 폼 스타일 */ layot.css 는 전체 사이트 의 레이아웃 을 책임 집 니 다.예 를 들 어\#header, #footer 등 레이아웃 의 기본 위치 와 스타일 디자인;public.css 는 하나의 class 에서 class="navbar"를 사용 할 수 있 기 때문에 공용 스타일 정 의 를 책임 집 니 다. font 12px'는 중간 빈 칸 으로 구 분 된 방법 으로 여러 개의 class 스타일 을 사용 하기 때문에 비교적 자주 사용 되 거나 특수 한 상황 에서 수정 해 야 할 공용 class 를 정의 하여 부분 적 으로 미세 조정 하 는 데 편리 합 니 다.header.css,sidebar.css,footer.css 등 모듈 은 머리,사 이 드 바,밑부분 모듈 에 대응 하 는 css 스타일 시트 로 사이트 의 구체 적 인 수요 에 따라 모듈 을 증감 할 수 있 습 니 다.index.css 는 홈 페이지 특유 의 요소 인 css 입 니 다.홈 페이지 의 특수성 때문에 저 희 는 css 를 디자인 할 때 보통 홈 페이지 를 특수 처리 합 니 다.일반적인 상황 에서 홈 페이지 는 css 의 가장 복잡 한 페이지 입 니 다.홈 페이지 의 독특한 css 요 소 를 분류 하여 배치 할 필요 가 있 습 니 다.@import 를 사용 하지 않 고 index.css 를 도입 하여 홈 페이지 에 단독으로 참조 할 수도 있 습 니 다.form.css 는 폼 요소 의 스타일 시트 입 니 다.폼 은 어렵 지 않 지만 제어 하기 가 귀 찮 습 니 다.css 파일 에 따로 넣 으 면 제어 하기 쉽 습 니 다.물론 비슷 한 다른 요소 도 이렇게 처리 할 수 있 습 니 다.step 3:각 스타일 시트 파일 에 스타일 을 기록 합 니 다.
