작성일자
카테고리 CSS/CSS2.1



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

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


저작자 표시 비영리 변경 금지
신고
BlogIcon 이츠하크

쌩유~. 베누시안님...몇개만 퍼 가서 메모장에 남겨두려구요.^^
괜찮을지 모르겠습니다. 지우라고 하시면 바로 지울께여...^^

BlogIcon 이츠하크

헐! 복사가 안되네요. ㅠㅠ

BlogIcon 베누시안

안녕하세요. 이츠하크님 .. 글 내용을 메모로 첨부했으니 다운 받으세요.

BlogIcon 이츠하크

고맙습니다. 저는 이런게 바로 공부와 직결되므로...소중한 자료죠. 감사히 활용 잘 하겠습니다.

BlogIcon 베누시안

이츠하크님은 CSS에 관심이 많으시군요. 앞으로는 CSS에 대해서 글을 많이 올릴 예정입니다. 기초부분부터 올리려는데 어떤 방식으로 해야 좋을지 고민이랍니다.ㅋ

BlogIcon 이츠하크

개인적으로 티스토리 스킨을 자유롭게 다룰 수 있는 필수 CSS강의를 조금씩 해 주셨으면 합니다. 몰라서 무슨 말인지 몰라서 스킨을 수정하지 못하는 경우가 많아요. 그리고 다른 분들도 이러한 시도를 했는데 결국은 중도에 포기하더군요. 그래서 개인적으로 황당한 경우가 많았지요. 먼저 티스토리 스킨을 인수분해 부터 해주시면 고맙겠습니다. 어디까지나 제 개인적인 의견입니다.

BlogIcon 베누시안

이츠하크님의 의견이 많이 참고가 되겠습니다. 아무래도 이부분에 관심이 많으시니 많은 의견을 주시면 좋겠습니다. 앞으로 사용인구가 늘어나게될 워드프레스도 스킨을 마음대로 바꿀 수 있고 티스토리도 원하는대로 스킨을 수정할 수 있는 글을 준비하려고 합니다. 그래서 가장 우선시되는 것이 CSS기초부분입니다. 이 카테고리에서 기본적인 것을 올리고 각 부분에 대해서는 간단한 스킨을 정해서 이를 수정하는 방법으로 글을 올리려고요. 사실 CSS에 대해서 많이 알지 않아도 대부분의 수정은 가능하니 그리 어렵지는 않을겁니다.

BlogIcon 이츠하크

제가 간절히 원하는 부분이기도 하고 들어보니까 주위에서도 베누시안님이 말씀하신 것에 관심들이 많더라구요. 꾸준히 간단간단하게 설명해 주시면 정말 감사하죠. 정말 유용하게 쓰일겁니다. ^^

BlogIcon 베누시안

잘 알겠습니다. 글이 올라가는대로 의견을 달아주시면 감사하겠습니다.

BlogIcon OCer

배우진 않았지만 몇년 째 티스토리 스킨 뜯어 고치다 보니.. 대충은 알게 됐는데 그래도 좀 더 자세히 배우고 가네요.^^

BlogIcon 베누시안

안녕하세요. 반갑습니다. 도움이 되신다니 다행입니다. 댓글 감사드려요.

jk

h1 { height: image height }는 무슨 뜻인가요?
이미지 높이만큼 준다는건가요? 마지막에 ; 해야 되죠?
완전 초보라 이런것도 오타구분 못한답니다 ㅠ.ㅠ

BlogIcon 베누시안

안녕하세요. 오타는 아니구 말씀대로 이미지 높이를 입력하라는 의미입니다. 맨끝에 ; 도 넣구요.

티스토리 툴바