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가 나오게 됩니다. 원하는 이미지를 사용할 수 있는 동시에 검색에도 도움이 되는 방법이 됩니다.

cfile25.uf.136749384F0CE2CC1D41B6.txt

Related posts:

  1. CSS – 알아두면 유용한 CSS 팁   웹디자인시 반드시 사용하게 되는 스타일시트 작업에서 알아두면 편리한 팁을 소개합니다. 1. CSS 폰트 스타일 정의 단축형(Shorthand) 폰트에 대하여 정의할때...
  2. CSS3 – border-radius 속성 사용하기 CSS3의 border-radius는 CSS기초부분에서 많이 다루었는데 그만큼 웹페이지에서 많이 사용하는 속성입니다. 인터넷 익스프로러 8버전이하에서는 지원을 하지 않기 때문에 이미지 파일을 이용하여...
  3. HTML/CSS 기초 – 미니 웹사이트 만들기 6 – 상대위치(Relative Position)과 Border 속성을 이용한 글제목 스타일링하기 이번 글에서 만들 글제목 부분의 스타일입니다. 예전 글에서 CSS3에서 가능한 그림자효과를 주는 방법을 알아보았습니다 . 또한 글제목에 해당하는 <h1>태그에 대해서...
  4. 티스토리 블로그 스킨 만들기 5 – 헤더와 사이드바 수정 1 이전 글에서 큰 레이아웃 박스의 배경이미지를 완성했으니 이제 너저분해진 헤더를 정리하고 사이드바의 위젯박스를 정리해야겠죠.    현재까지 작업한 화면입니다. 헤더부분의 배경이미지가...
  5. CSS3 – border-radius를 이용하여 말풍선 만들기 이번 글에서 만들게 될 말풍선입니다. 이전 글에서 알아본 border-radius를 이용하면 타원형을 만들 수 있습니다. 여기에 border-color, border-style, border-width를 별도로 사용하여 삼각형을 만들고 transform:rotate(deg); 를...

댓글 남기기