CSS는? (CSS와 SEO와의 관계)

CSS는?

CSS는 cascading style sheets의 약자로 HTML과 함께 사용하는 언어입니다. HTML에서 각 요소의 의미와 정보구조를 정의하고 CSS로 그것들을 장식합니다. 더 알기 쉽게 설명하면 사이트의 콘텐츠 부분과 디자인을 별도로 정의하자는 생각입니다.

CSS의 구조

 

HTML에서 아래와 같이 사용합니다.

<h1>Hello World!</h1> 

 

h1에 기술한 "Hello World!"에 빨간색 문자로 표현하고 싶은 경우 아래와 같이 표기합니다.

• 선택자는 선언에 쓴 스타일을 적용하려는 위치를 가리킵니다.
• 속성은 변경할 내용을 말합니다.
• 값은 변경하려는 정도를 말합니다. (px, % 등)

선택자에 대해

선택자는 대략적으로 태그, ID, class 3가지로 분류할 수 있습니다.

태그는 HTML태그입니다. 해당 태그가 있는 모든 곳에 적용됩니다. id와 class는 스스로 이름을 정할 수 있습니다. ID는 이름 앞에 「#」, class는 이름 앞에 「.(마침표)」를 넣습니다. 위와 같이 HTML의 태그에 ID와 class를 넣는 것도 가능합니다.

ID와 class의 차이에 대해

ID는 하나의 HTML내에서 같은 이름을 1번 밖에 사용할 수 없습니다. 그에 반해 class는 하나의 HTML내에서 여러 차례 이름을 사용할 수 있습니다. 같은 스타일을 여러 번 사용하려는 경우 class를 지정하면 같은 선언을 쓰지 않아도 되므로 편리합니다.

하나의 HTML에 1번 밖에 사용할 수 없는 이름을 여러 개 사용해 버렸을 경우, 일부 액세스 해석 등에서 오류를 일으킵니다. 브라우저에서 사이트를 보는데 ID 이름이 중복되어도 사이트는 문제 없이 표시되지만, 리스크를 생각하고 신중하게 사용하도록 합시다.

 

CSS의 장점과 단점

CSS 장점

• HTML의 구조를 쉽게 파악할 수 있다.
• 디자인에 관한 데이터를 HTML로 기술할 필요가 없다.
• 디자인을 통일할 수 있다.
• 디자인만 변경할 경우, CSS를 다시 쓰는 것만으로 미리 지정되어 있는 부분만 변경 내용을 적용시킬 수 있다.

CSS 단점

CSS를 사용할 때, 하나의 단점이 있습니다. 현재 일반적 브라우저에서 CSS를 완벽하게 지원하고 있는 것이 존재하지 않고, 브라우저에 따라 레이아웃이 무너질 수 있습니다.

그러나 HTML에 의한 각 요소의 의미·정보 구조와 CSS에 의한 스타일의 제어는 분리되므로 콘텐츠 부분이 표시되지 않는 것은 아닙니다.

 

CSS와 SEO와의 관계

center, font, table 등의 태그를 사용하면 HTML만으로 웹페이지의 모양새를 정돈할 수도 있습니다.

<table width="500" height="100" border="2"
cellpadding="0" cellspacing="0"
bordercolor="#000000">
<tr>
<td valign="top">
<P><font color="#FF0000">
CSS와 SEO와의 관계
</font></P>
</td>
</tr>
</table>

그러나 HTML만으로 모양을 갖추려고 하면 위와 같이 복잡하고 긴 소스 코드가 되어 버립니다. 그래서 사용하는 것이 CSS입니다. CSS를 이용하면 아래와 같이 HTML 소스코드가 간결해집니다.

<div class="box"> 
<P> 
CSS와 SEO와의 관계 
</P> 
</div> 

HTML 소스 코드를 간결하게 하면, 쓸데없는 HTML 소스코드를 생략하여 검색엔진이 중요한 문장이나 단어를 인식하기 더 쉬워집니다. 인식하기 쉬워진다는 것은 검색결과에 반영되기 쉬워지는 것입니다.

물론, CSS를 사용한다고 하여, 검색순위 반영에 크게 영향을 미치는 것은 아니지만, 검색엔진이 정보를 제대로 처리하는 것을 돕는다는 의미에서 CSS를 사용하는 것을 권장합니다.