웹사이트 구축시 CSS를 사용하면 HTML에 들어있는 반복되는 형식 코드를 CSS 스타일 시트에 통합함으로써 HTML 자체에서 제거할 수 있기 때문에 시간과 노력을 줄일 수 있다. 또한 스타일을 사용함으로써 다중 텍스트 블록의 형식을 만들고 레이아웃을 제어함으로써 여러 페이지의 형식을 만들어낼 수 있다.
여기에 재사용할 수 있는 형식을 한 곳에 보관할 수 있기 때문에 개발 시간도 단축할 수 있다. 특히 웹사이트를 편집하거나 계속 업데이트해야 할 경우 더욱 효과가 크다.
반면 CSS는 스타일 시트에 스타일을 추가하면서 파일이 금방 엉망이 될 수 있다는 것이 단점이다. CSS에는 HTML 태그 속성을 재정의하는 스타일과 다양한 텍스트 블록의 형식을 정의하는 클래스와 id 셀렉터, 페이지 레이아웃을 위한 스타일 등이 포함되며 몇몇 스타일들은 전체 웹사이트에 적용되기도 하며 다른 것들은 개별 페이지에 적용되기도 한다.
또한 브라우저간 호환성 문제를 해결하기 위해 임시 변통책을 사용해야 하는 경우도 있다. 스타일 시트에 포함되는 모든 것들을 고려해볼 때 CSS 스타일 시트를 관리하는 일관된 계획이 없다면 통제권이 순식간에 사라져 버릴 것이라는 사실은 명약관화하다.
CSS 스타일의 조직화
CSS 개발을 해본 적이 없는 많은 웹 개발자들이 흔히 하는 실수는 단일 CSS 파일에 웹사이트 전체 스타일을 구겨 넣는 것이다. 이러한 방식은 몇 개 페이지로 구성돼 있으며 특정 스타일을 가진 아주 작은 웹사이트라면 괜찮게 적용될지도 모른다. 그러나 일반적인 다른 웹사이트들은 여러 개의 CSS 파일을 쓰는 게 낫다.
예를 들면 사이트 전체에 적용되는 단일 CSS 파일을 먼저 개발하고 서로 구분지을 수 있는 웹페이지들의 집합 각각에 대해 별도의 CSS 파일을 두는 방법이 있을 수 있다. 즉 특정 부서를 위한 스타일이나 다른 레이아웃 스타일을 지닌 페이지가 있을 수 있다는 것이다.
그리고 고유한 스타일을 필요로 하는 특정 페이지에 대해서는 각 페이지마다 별도의 CSS 파일을 둔다. HTML 헤더에 넣기에 스타일이 너무 많을 경우다. 또한 적당한 CSS 파일을 각 페이지에 연결하거나 가져오게 할 수 있다. 그렇게 되면 페이지를 표시하는데 필요한 스타일을 모두 적재할 수 있으며 다른 페이지에서만 나타나는 불필요한 것들은 적재되지 않는다.
CSS 스타일 시트를 조직화하는 데 있어 본인이 애용하는 기법은 스타일 시트 파일을 섹션으로 분리하는 것이다.
예를 들어 메인 스타일 시트에서 첫번째 섹션에는 사이트의 전체 애플리케이션에 폭넓게 적용되는 스타일을 둔다. 즉 HTML 태그의 속성을 재정의하는, 가장 빈번한 스타일이 위치하게 된다. 다른 섹션에는 네비게이션 바나 각주와 같은 보편적인 페이지 요소의 형식을 정의하는 데 필요한 스타일을 담는다.
또 다른 섹션에는 사이트 전체에 걸친 페이지 레이아웃을 통제하는 스타일을 담는다. 나머지 섹션들은 점점 더 범위를 좁혀 스타일을 집합시킨 것들을 담는다.
특정 사이트에서 모든 사이트 전반에 적용되는 스타일은 단일 CSS 파일로 만들 수 있으며 각 섹션은 코멘트로 구분된다. 그러나 보다 복잡한 사이트의 경우라면 각 섹션을 별도 파일로 만드는 게 좋다. 많은 웹 개발자들은 페이지 레이아웃을 위한 스타일을 별도로 두고 텍스트나 다른 요소를 정의하기 위한 스타일을 다른 CSS 파일에 두기를 좋아한다.
‘클래스 남용’은 피해라
웹 개발자들을 괴롭히는 또다른 문제 중 흔해빠진 것으로는 클래스와 ID의 남용을 들 수 있다. 클래스와 ID를 마크업에 추가하고 CSS 스타일을 정의해 요소들의 형식을 만드는 것은 CSS의 사용방식에 있어서 기초가 된다.
그러나 형식을 정의하고 싶은 모든 것에 대해 자동으로 클래스를 정의하려고 마음먹기는 상당히 쉽다. 하지만 실질적으로 HTML 태그의 속성을 재정의하는 것이 대상 요소의 속성을 나타내는 새로운 클래스를 정의해 계속 적용하는 것보다 훨씬 효율적이다.
스타일 시트에서 필요한 클래스 스타일의 갯수를 줄이는 또 다른 방식은 이미 존재하는 두개의 스타일을 단순히 결합하는 것보다 동일 페이지 요소에 여러 개 스타일을 적용하는 것이다.
최선을 다해 코드를 작성하고 나머지는 테스트에 맡겨라
믿거나 말거나’일지도 모르지만 사실 개발 기간 중에 웹페이지를 보는 데 사용하는 브라우저가 CSS 스타일 시트 개발에 큰 영향을 준다.
엄청난 시장 점유율 때문일지 몰라도 많은 웹 개발자들이 인터넷 익스플로러를 주요 웹브라우저로 사용하고 잇다. 이들은 대다수 방문객들이 사용하는 브라우저에서 보기 좋도록 사이트를 먼저 개발하고 다른 브라우저가 해당 사이트를 표시하는 방식에 따라 적당히 조절해나간다. 분명 논리적인 접근법으로 보인다.
하지만 문제는 인터넷 익스플로러가 웹브라우저 중 가장 표준을 따르지 않는다는 것이다. 따라서 IE를 사용하는 웹 개발자가 작성하고 있는 코드에는 인터넷 익스플로러의 수많은 특이점들이 불가피하게 탑재되는 경우가 발생한다. 따라서 보다 표준에 부합하는 브라우저에서 코드를 동작시키려면 상당부분을 다시 써야 한다.
다행히도 인터넷 익스플로러가 가진 문제는 웹사이트들이 전반적으로 표준에 부합하는 추세로 나아감에 따라 결국 없어질 것이다. 미래를 염두에 둔다면 표준에 맞춰 코드를 개발하는 것이 나으며 현재 최적화되지 않은 브라우저에서도 사이트가 동작하도록 필요한 임시조치를 취하는 것이 좋다.
표준에 부합하는 코드를 구형 웹브라우저에서 동작시키는 브라우저 해킹 방법은 여러 곳에 잘 기록돼 있다. 이 해킹 방법을 추가하고 나중에 지우는 것이 특정 브라우저의 특이점들을 제거하기 위해 코드를 재작성하는 것보다는 낫다.
목적이 표준에 부합하는 코드 개발이라면 가장 표준에 부합하는 웹브라우저를 사용해 HTML 페이지를 보는 게 낫다. 현재 가장 적합한 웹브라우저는 모질라의 파이어폭스다. 파이어폭스에서 원하는 효과를 얻은 후 다른 웹브라우저에서 그 페이지를 테스트하고 웹브라우저 호환성 문제를 해결하기 위해 해킹을 추가하거나 코드를 변경하는 절차를 시작하라.
파이어폭스 웹브라우저의 또 다른 장점은 웹 개발자를 위한 툴바 확장이 제공된다는 것이다.
위의 권고를 따른다 해도 인터넷 익스플로러로 웹사이트를 보면서 많은 시간을 보낼 수 있다. 하지만 다른 웹브라우저에서 개발 결과물을 먼저 본다면 결과적으로 코드가 더 깨끗해질 것이라는 점은 확실한 사실이다.
♣ 자료출처 : http://www.zdnet.co.kr
WRITTEN BY
- 손가락귀신
정신 못차리면, 벌 받는다.
