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를 사용하는 것을 권장합니다.
'SEO > SEO기초용어사전' 카테고리의 다른 글
PV (Page View: 페이지 뷰)는? (0) | 2015.04.02 |
---|---|
UV (순 방문자)에 대해 설명합니다. (0) | 2015.04.02 |
noindex에 대한 설명 (disallow와 차이) (0) | 2015.04.02 |
nofollow 속성: 검색엔진최적화(SEO) 용어 (0) | 2015.04.01 |
URL 정규화 (0) | 2015.03.30 |
XML 사이트 맵은? 사이트맵 작성방법 (0) | 2015.03.30 |
SEO에서 URL 매개변수는? (0) | 2015.03.30 |
Breadcrumb list, Breadcrumbs, Breadcrumb navigation (0) | 2015.03.29 |
페이지랭크(Pagerank)에 대한 설명 (0) | 2015.03.29 |
워드 샐러드(Word Salad)에 대해 설명합니다. (0) | 2015.03.28 |