CSS - 알아두면 유용한 CSS 팁

웹디자인시 반드시 사용하게 되는 스타일시트 작업에서 알아두면 편리한 팁을 소개합니다.

1. CSS 폰트 스타일 정의 단축형(Shorthand)

폰트에 대하여 정의할때 여러가지 속성과 값을 별도로 정의하게 됩니다.

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif;

위와 같이 여러개의 속성과 값을 정의할 수도 있지만 다음과 같이 한줄로 단축형을 사용할 수 있습니다.

font: bold italic small-caps 1em/1.5em verdana,sans-serif

즉 다음과 같은 Syntax로 적용을 해야합니다. 

font: font-style font-variant font-weight font-size/line-height font-family;

여기서 순서는 정해져있으며 두가지 속성인 font-size와 font-family는 항상 있어야합니다. 이 두가지 속성이 없이 앞의 세가지 속성만으로는 적용이 안되며   font-family 속성은 맨 마지막에 와야하고 바로 앞에  font-size 가 있어야 합니다. 앞의 세가지 속성이 없이 사용하면 이때는 이들 생략된 속성에 대해서 기본값(default)이 적용됩니다.

2. 두종류 이상의 클래스(Class) 정의

어떤 요소에 대하여 클래스를 정의할때 대부분 하나의 클래스만 적용해서 사용하지만 하나의 요소에 대하여 두개 이상의 클래스정의가 가능합니다.

<li class="category current">...</li>

위 li 요소에 대해서 category라는 클래스와 current라는 클래스가 적용되었고 별도의 속성과 값을 정의하면 됩니다.  두개의 클래스 사이는 빈 스페이스만 있으면 되고 콤마도 필요하지 않습니다. 위 두개의 클래스에 대해서 같은 속성과 값을 정의하게 되는 경우가 있을 수 있는데 이때는 CSS 고유의 특징인 캐스캐이딩(Cascading)에 의해서 나중에 정의된 속성과 값이 적용됩니다.

3. border 속성에도 기본값이라는게 있습니다.

border를 정의할때 보통 border: 1px solid #000 ; 의 형태로 border의 width와 스타일, 색상을 정의하는데 여기서 반드시 필요한 것은 스타일이고 나머지를 생략하면 width는 3에서 4픽셀의 기본값이 적용됩니다. 그리고 색상은 별도로 정의된 폰트의 색상이 적용됩니다. 

div { 

    width:500px;

    background:yellow; 

    margin:6px 0; 

    color:#f00; 

    border:solid;

    }

예를 들어 위와같이 border 에 대해 solid만 정의하면 border의 폭은 3픽셀, 색상은 #f00의 색상이 적용됩니다. 

4. 이미지 대체 텍스트 테크닉(Image Replacement Technic)

웹페이지에 이미지를 올리면 html 속성으로 다음과 같이 alt에 대체 텍스트를 사용합니다. 

<h1><img src="title-image.gif" alt="Web Design Photoshop" /></h1> 

이 대체텍스트라는 것은 검색에 필요하므로 반드시 넣어야하는 것으로 알고 있지만 반드시 그런 것도 아닙니다. 원래는 인터넷 속도가 느리던 시절 이미지가 포함된 웹페이지를 보려면 이미지가 다운로드 될때까지 한참을 기다려야하기 때문에 글자만 보고 싶을때는 이미지가 안보이게 설정하거나 또는 눈이 안보이는 분들을 위해 스크린리더(Screen Reader)를 사용하는 경우 이미지 대신에 나타나도록 하는 기능을 했습니다. 하지만 웹사이트 운용자들이 이 대체텍스트에 많은 키워드를 삽입해서 웹페이지에 검색이 많이 되도록 악용하므로 검색엔진들은 이를 무시합니다. 그러니 이 대체텍스트를 넣는다고 해서 검색에 도움이 되는 것은 아니죠. 다만 이미지가 안나타날 경우에만 대신해서 이 이미지가 뭐라는 의미의, 말 그대로 대체(Alternative) 텍스트로서의 역할을 할 뿐입니다. 

그런데 위의 예에서처럼 웹사이트에 타이틀 로고를 사용한 경우 이미지를 넣게 되는데 로고는 아주 중요하므로 대체텍스트만 넣어서는 안되죠. 그래서 사용하는 것이 text-indent라는 속성입니다. 검색엔진은 <h1> 태그를 아주 중요하게 생각하므로 가장 우선순위로 검색대상이 됩니다. 아무리 alt텍스트를 많이 넣어도 무시되니 이 <h1>태그는 반드시 사용해야 검색노출에 도움이 됩니다.
 

다음과 같은 방법으로 CSS에서 정의하면 됩니다.

<h1>Web Design Photoshop</h1>

h1 {
background: url(title-image.gif) no-repeat;
height: image height
text-indent: -9999px;
}

이렇게 타이틀 제목은 <h1>태그에 의해 검색에 상위를 차지하고 텍스트는 text-indent속성에 의해 9999픽셀만큼 화면의 좌측으로 이동하므로 화면상에 나타나지 않고 배경 이미지인 title-image가 나오게 됩니다. 원하는 이미지를 사용할 수 있는 동시에 검색에도 도움이 되는 방법이 됩니다.

memo.txt