CSS를 이용한 웹 디자인의 미래는 현재 우리가 알고 있는 것을 어떻게 해야 하는지가 아니라, 미래에 무엇을 배우게 될 것인지를 알고, 현재 CSS로 가능한 기술들을 이 책 전반에 걸쳐 폭넓게 담으려 했습니다. 즉, ‘CSS 최적의 방법’으로 폭넓게 받아들여지고 있는 많은 테스트를 거친 검증된 기법들입니다. 이러한 최적의 방법들은 멋진 디자인 기법들보다 매체나 브라우저의 한계를 가지고 있지만, 그것들을 알고 있다면 개발 프로세스를 빠르게 진행시킬 수 있고, 보다 멋진 디자인 결과물을 안겨줄 것입니다.
일반적인 사항
외부 스타일시트를 사용하십시오.
CSS를 이용하는 최대 장점은 한번의 변경으로 전체 사이트에 영향을 미칠 수 있는 것입니다. 하지만 진정한 힘을 발휘하려면, 스타일이 외부 스타일시트 파일로 분리되어 있어야 합니다.
속도를 위해서 <link>, 유연성을 위해서 @import를 사용하십시오.
@import는 HTML 문서와 외부 CSS파일 둘다 동등하게 사용될 수 있는 장점을 가지고 있습니다. 하지만, IE에서는 @import를 사용하여 임포트된 스타일이 콘텐츠가 로딩되기 전에 로딩되지 않아, 페이지 로딩이 지연될 수 있는 이슈를 가지고 있습니다. 이러한 페이지 로딩 문제를 알고 있다면, @import 대신 <link>를 사용하십시오.
모니터, 프린트, 소형기기를 위한 CSS를 링크하십시오.
CSS는 각각의 출력매체에 콘텐츠가 최적화 될 수 있도록 사용되어야 합니다. 디자이너는 웹 페이지를 프린트했을 때나, 휴대폰 같은 소형기기로 접근했을 때, 콘텐츠가 어떻게 보이는지 고려하여야 합니다.
인라인 스타일의 사용을 피하세요.
인라인 스타일의 사용은 지정해 놓은 스타일을 덮어쓸 수 없기 때문에, 스타일을 변경할 수 없어 디자인 유연성에 커다란 제약을 줍니다. 또한 인라인 스타일의 사용은 코드의 양을 증가시켜, 검색 엔진 최적화 (Search Engine Optimization, SEO)를 감소시켜, 많은 검색엔진에서 낮은 검색 결과율을 가져다 줄 것입니다.
body 안에 사용되는 임베디드 스타일의 사용을 피하세요.
body 테그 안쪽에 위차한 임베디드 스타일은 페이지 콘텐츠가 로딩된 후에 랜더링 되는 경우가 많아 스타일이 적용되지 않는 페이지가 보여지는 경우가 종종 있습니다. 또한 지정된 스타일을 덮어 쓰기가 어렵고, 수정도 용이하지 않아, 코드의 양이 늘어나는 결과를 가져와, SEO도 감소시킵니다.
그래도 임베디드 스타일을 사용해야 한다면, <head> 안에서 간략하게 사용하십시오.
문서의 <head> 안에 삽입되어 콘텐츠가 로딩되기 전에 랜더링된다고 하더라도, 디자인의 유연성을 떨어뜨리고, 코드의 양은 증가하여, SEO를 감소시킬 것입니다.
!important의 사용을 피하십시오.
비록 개발이나 프로토타이핑 하는 동안에는 유용할지 모르겠지만, 중요도의 선언은 디자인 유연성을 떨어뜨리고, 나중에 스타일을 수정하려고 하는 다른 개발자에게 혼란을 가져다 줄 수 있습니다.
간단명료하고, 의미 있는 class와 id를 사용하십시오.
적용되어 있는 스타일을 설명하는 이름의 사용을 피하십시오. 이는 스타일을 변경해야 할 때, 문제를 일으킬 수 있습니다. 대신, class나 id의 기능을 설명하는 이름을 사용하십시오. 예를 들면, redtext라는 class보다 hilight나 hilighterror같은 class 명이 더 좋습니다.
디자인
디자인을 위한 이미지가 아닌 이미지 콘텐츠(사진, 일러스트, 다이어그램 등)에만 <img /> 태그를 사용하십시오.
HTML안에 이미지를 삽입한다는 의미는 쉽게 스타일을 지정할 수 없거나 변경될 수 없다는 것입니다. 아이콘, 로고, 제어버튼 등을 포함하는 인터페이스 요소들은 CSS에서 배경이미지를 사용하여 추가될 수 있습니다. 이런 방법은 HTML 코드의 양을 줄여주어, 보다 좋은 SEO 결과를 가져오며, 디자인을 보다 자유롭게 변경할 수 있도록 해줍니다.
HTML은 스타일 표현을 위해 사용되는 것이 아니라, 구조를 위해 사용되어야 합니다.
HTML은 페이지의 구조를 위한 것입니다.
<b>나 <i>와 같이 구조보다는 특정 스타일을 지정하기 위한 태그는 사용하지 않습니다. 대신 <strong>이나<em>과 같이 브라우저 스타일로 사용 가능한 태그를 사용합니다.
고정된 영역 요소를 표현할 때 패딩과 테두리 선의 사용을 피합니다.
IE6에서는 박스 모델(box model) 적용 시, 패딩과 테두리 선이 지정된 너비와 높이 값이 포함이 되어 계산되는 버그가 있습니다. 대신에 안쪽에 있는 요소에 패딩과 마진을 조정하세요.
버튼과 아이콘 표현을 위해서 CSS 스프라이트(sprite) 기법을 사용하세요.
CSS 스프라이트 기법은 보다 적은 수의 이미지를 로딩하여, 링크가 이동하는 동안 이미지가 로딩되면서 깜빡거리는 현상을 피할 수 있게 해줍니다.
CSS 작업
가능하면 CSS 코드에 진행 사항을 주석으로 남기세요.
개발의 마지막 단계에 코멘트를 남길 수도 있겠지만, 가능하면 후임 디자이너와 개발자를 위해 코멘트를 남겨주세요
모든 선언의 마지막에는 항상 세미콜론을 붙여주세요.
CSS의 규칙 선언이 리스트의 마지막에 있다고 하더라도, 나중에 골치 아픈일이 생기지 않도록, 세미콜론을 붙여주세요.
0을 제외한 숫자에는 단위를 붙여주세요.
0은 단위가 상관없지만, 대부분의 경우에 단위는 필요합니다. 예외적으로 line-height와 opacity는 단위가 없는 값을 가질 수 있습니다.
색상지정을 위해 RGB값을 사용하세요.
CSS에서 색상의 지정은 다양한 방식으로 지정이 가능하지만, RGB값을 사용하여 지정하는 것이 널리 사용되는 방법이며, 자바스크립트를 이용하여 값을 변경하기도 용이합니다.
전체 사이즈나 폰트 사이즈 지정에는 em을 사용하고, 절대 사이즈에는 px을, 상대 사이즈에는 퍼센트를 사용하세요.
웹디자인에서 단위로 em을 사용하느냐 px을 사용하느냐 하는 문제는 아직까지도 많은 논쟁이 있습니다. 만약 em을 사용하기로 결정했다면, EM 계산기(riddle.pl/emcalc) 같은 px을 em으로 변경해주는 계산기에 친숙해질 필요가 있습니다.
규칙의 범위를 제한하세요.
ID와 class를 사용할 때는, 다른 영역에 스타일이 적용되지 않도록 하고, 서로 뒤섞이지 않고, 원하는 곳에만 적용될 수 있도록 해야 합니다.
최적화하기
CSS 속성은 가능하면 축약형을 사용합니다.
많은 CSS 속성들이 축약형을 사용하여 하나의 속성으로 조합 가능합니다.
예를 들면,
border-top:5px; border-right:5px; border-bottom:1px; border-left:2px은
border:5px 5px 1px 2px;
로 줄여서 표현할 수 있습니다.
과다하게 스타일을 추가하지 마세요.
하나의 요소에 스타일 속성이 한번 지정되면, 선택자 종류(HTML, class, id)에 따라 페이지의 모든 요소와 자식 요소에 상속이 됩니다.
가능하면 id의 사용은 최소화하고, 웹 페이지마다 id를 한번만 사용하세요.
id가 많아진다는 것은 여러분의 코드가 보다 복잡해진다는 의미입니다. 일반적으로 페이지의 주요 영역 구분을 위해 id를 사용합니다. 문맥 구분을 위한 영역에도 id를 사용하고자 한다면, 너무나 많은 id를 사용해야 할 겁니다.
가능하면 class의 사용을 최소화 하세요.
id와 마찬가지로, 페이지에 class가 많으면 코드가 복잡해집니다. class는 비슷한 유형의 요소에 스타일을 지정할 때 유용하지만, 요소의 모든 인스턴스가 각자의 class가 필요한 것은 아닙니다.
HTML 선택자를 이용한 규칙이 문맥의 마지막까지 적용될 수 있도록 해보세요.
문맥 영역에 지정되는 CSS 규칙까지 HTML 선택자를 이용하여 지정될 수 있도록 한다면, 여러분의 코드에서 id와 class의 갯수를 최소화 시킬 수 있을 것입니다.
- 위의 내용은 ‘스타일로 말해요‘의 Chapter 12.에 정리된 내용입니다.
Comments