CSS 작성 TIP 10

1. CSS 폰트 설정 간략하게 하는 법

CSS에서 보통 폰트를 규정하는 방법은

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

훨씬 낫습니다. 폰트의 사이즈와 폰트명을 반드시 표기해야 하는데요. 이 때 주의할 점은 맨마지막에 폰트명을, 그리고 바로 앞에 폰트 사이즈를 명기해야 합니다. 나머지 속성은 표기하지 않으면 Default 속성이 적용되는 것입니다.

2. 두 가지 CLASS 통합하기

보통 Class는 한번에 하나를 지정해야 하는 것 같지만 사실은 원하는 만큼 지정할 수 있습니다. 예를 들면:

<p class="text side">...</p>

Space(콤마 아닙니다.)로 분리만 해주면 두 Class가 동시에 적용됩니다. 만약 속성이 중복되면 나중에 위치한 CSS가 이전 규정을 대신하게 됩니다. .

3. CSS 에서 테두리 기본값은?

테두리를 규정할 때는 보통 아래와 같이 색상, 폭, 스타일을 지정하게 됩니다.(순서는 상관없읍니다.)

border: 3px solid #000

이 때 검은색의 3px두께의 실선이 그려집니다. 하지만 만약 스타일만 지정하면 어떻게 될까요?

border: solid

이 때는 Default 속성이 적용되는데 Default는 어느 정도인가 하면 약 3~4px 두께이며 색상은 테두리 안에 쓰여질 텍스트와 동일한 색상이 적용되는 것입니다.

4. 인쇄용 CSS 별도 지정

많은 페이지가 인쇄를 지원하고자 하는 경우가 많습니다. 하지만 이럴 필요가 전혀 없습니다. 왜냐만 두번째 CSS를 인쇄용으로 지정할 수 있기 때문입니다. 따라서 하나는 화면용, 하나는 인쇄용으로 만들어 아래와 같이 지정하면 됩니다:

<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" />
<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

인쇄용 화면을 설계하기 위해서는 아래와 같이 설정해 놓고 원하는 인쇄모양이 나올 때까지

화면에서 고치게 될 것입니다.

<link type="text/css" rel="stylesheet" href="printstyle.css" media="screen" />.

물론 내비게이션 메뉴나 장식으로 쓰인 이미지 등은 display: none을 활용하여 적당히 숨기는 것도 요령일 것입니다.

5. 이미지 설정 변경으로 검색순위 높이기

실제적으로 이미지 보다는 텍스트(혹은 HTML)이 접근성이 높을 것입니다. 하지만 꼭 써야 하는 폰트나 효과적인 정보전달을 위해서는 이미지를 사용할 수 밖에 없는 경우가 생기게 됩니다.

예를 들어 위젯 판매를 위해 멋진 제목을 만들었고 폰트 때문에 어쩔 수 없이 이미지를 사용하게 되었다면 아래와 같이 CSS를 쓰게 될 것입니다:

<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

꽤 괜찮은 방법이긴 하지만 Alt는 본문 만큼 검색엔진이 우선 순위를 주지 않는 경우 가 많습니다.
따라서 아래와 같이 사용할 것을 추천합니다:

<h1>Buy widgets</h1>

하지만 서체가 문제입니다. 그래서 아래와 같이 CSS에서 규정하게 됩니다.:

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

"image height"는 실제로 이미지의 높이를 입력하세요(예를 들어 85px)! 이렇게 하면 원하는 폰트의 이미지를 보여주게 되고 실제 텍스트는 화면의 왼쪽 2000px에 위치하게 되어 보이지 않게 됩니다.
단점이라면 이미지 보지 않도록 설정한 화면에서는 텍스트가 보이지 않는 것이겠지요.^^;;;

6. CSS 로 정확한 DIV 폭 지정하기

"box" 레이어를 규정한 CSS가 아래와 같다고 예를 들면:

#box
{
width: 100px;
border: 5px;
padding: 20px
}

본문에서는 아래와 같이 적용될 것입니다:

<div id="box">...</div>

실제적으로는 "box"는 150px(100px width + 양쪽 5px borders + 양쪽 20px paddings)이 되어 버릴 것입니다(IE6이전 경우 예외). 이를 간단하게 CSS에서 수정하면:

#box
{
width: 150px
}

#box div
{
border: 5px;
padding: 20px
}

이제 새로운 HTML은 이렇게 되겠죠:

<div id="box"><div>...</div></div>

이제 항상 "box"는 브라우저에 상관없이 150px로 보여질 것입니다!

7. 화면에서 페이지 중간 정렬하기

폭이 정해진 디자인의 웹페이지가 화면에 중앙 정렬되어야 한다면:

#content
{
width: 700px;
margin: 0 auto
}
와 같이 지정하게 될 것입니다. 매번 <div id="content"> 를 써서 감싸준 내용들은 좌우 여백을 계산해서 화면 중앙에 위치시켜 줄 것입니다. 하지만 IE6 버전에서는 중앙정렬이 되지 않는 문제가 발생하기 때문에 아래와 같이 수정해야 합니다.:

body
{
text-align: center
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto
}

이 때 컨텐츠만이 아니라 텍스트도 같이 중앙정렬이 되기 때문에 text-align: left를 넣어준 것입니다.

8. CSS로 수직정렬하는 요령

셀 안에서 텍스트가 수직정렬이 안되서 고민한 적이 있으신지요? 아무리 애를 써도 박스안에서 상단정렬이 될 경우 셀의 높이와 동일하게 line-height를 지정해 보세요.

문제가 해결될 것입니다.

9. 외각으로부터 정확한 포지셔닝 방법

CSS를 사용하는 가장 좋은 점이 문서 어느 곳이든 정확한 위치에 오브젝트를 위치시킬 수 있다는 것입니다. 또한 아래와 같이 container안에도 얼마든지 위치시킬 수 있습니다.:

#container
{
position: relative
}

이제 어떠한 요소도 container안에서 상대적인 위치에 포지셔닝 될 수 있게 됩니다.:

<div id="container"><div id="navigation">...</div></div>

container box안에서 정확히 왼쪽에서 30px 위에서 5px 떨어진 곳에 navigation을 위치시키려면 CSS는 다음과 같습니다:

#navigation
{
position: absolute;
left: 30px;
top: 5px
}

완벽하죠?! 이 때 margin: 5px 0 0 30px와 같이 설정할 수도 있지만 위의 방법이 종종 더 효과적입니다.

10. 화면하단까지 배경색 연장하기

CSS가 테이블 구조보다 약한 부분이 바로 수직쪽 부분에 대한 디자인 컨트롤입니다. 사이트 내비게이션이 들어있는 좌측 메뉴가 있다고 할 때 전체 배경은 white이고 메뉴배경만 blue로 지정하고 싶다면 CSS는 아래와 같을 것입니다:

#navigation
{
background: blue;
width: 150px
}

하지만 내비게이션 아이템이 화면 아래까지 오지 않을 경우(충분히 갯수가 많이 않을 때) 배경색도 연장되지 않습니다. 따라서 파란 배경은 화면 중간에서 뚝 끊기게 될 것입니다.

이 때는 편법으로 왼쪽 메뉴와 동일한 색상과 폭을 가진 이미지를 배경으로 지정해 주게 됩니다.:

body
{
background: url(blue-image.gif) 0 0 repeat-y
}

하지만 이 방법은 정확히 배경과 좌측메뉴가 일치해야 한다는 단점이 있습니다..

물론 사이즈도 px로 통일해야 하구요..