웹마스터 팁
몇 가지 팁..( 좀 깁니다.. 어느 정도 안다고 생각하시는 분들, 추천 )
2004.02.26 19:48
[수정]
헉; 미리보기가 있어야하는군요-_-;
사용된 예제들이 포함된 파일들의 링크입니다.
#
view-source:http://uerl.net/zboard/zboard.php?id=blog
view-source:http://uerl.net/zboard/outlogin_skin/rage/login.html
#
그럼( 휭- )
[/수정]
-얼마 전부터 css에 관해 알고 있는 것들 정리해보려 했으나..
-대략 귀차니즘으로, 생각순서대로 써나갑니다.
( 그냥 가벼운 마음인 관계로.. 예제파일까지 준비하진 않았습니다.
복사해서 확인해보시는 것도 괜찮겠지요 )
-그럼..
/****************************************
제로보드 스킨에서 <a> 클래스 지정하기
****************************************/
- 이놈에다가 여러가지 스타일을 적용시키려다가 실패하신 분들 있을지 모르겠습니다.
- 특히나 제로보드 스킨들을 보면 거의 기본스타일 하나만 있는 게 대부분이더군요.
- 거두절미하고, 예제부터 봅시다.
#
a:link.hand, a:acitve.hand, a:hover.hand, a:visited.hand {cursor:hand}
..
a:link.ct, a:active.ct, a:visited.ct {color:#333366;text-decoration:underline}
a:hover.ct {color:#9999CC;text-decoration:none}
#
- 이건 가장 안전한 ─ 다음에 설명할겠습니다 ─ 클래스 선언법입니다.
- 이렇게 할 수도 있지요.
#
.blah a:link, a:active, a:visited {..( 생략 )..}
..
#
- 두번째 방법의 경우 약간의 위험성을 가지고 있습니다.
- 이렇게 여러가지 클래스를 정해놨는데, 특히나 제로보드의 경우─ 정의해놓은 클래스를 어느 페이지에선가는 쓰지 않을 수 있겠지요.
- 더구나 노프레임이라면 스타일이 뒤죽박죽이 되어버릴 수 있습니다.
- '선언해놓은 클래스를 사용하지 않을 경우' 그럴 수 있다는 겁니다.
( 아마 전역스타일로 인식해버리는 듯 합니다 )
- 해결책은 첫번째 방법처럼 하는 겁니다. 두번째처럼 '어느 클래스 영역에서는.. 이렇게' 나오도록 하는 건 바람직하지 못합니다.
( 무조건 쓰지 말라는 이야기는 아닙니다. 푸터나 헤더에 링크가 있을 경우는 어느 페이지에서든지 보이겠죠 )
- 제로보드 스킨에서 $a_delete_all, $a_admin.. 등등의 변수들은 아예 <a ..>입니다.
- 이 경우는 str_replace를 써서 강제로 클래스를 지정해줄 수 있지요.
/****************************************
line-height, padding
****************************************/
- 이 속성들을 아시는 분들은 많을 겁니다.
- 다음은 제가 만들었던 스타일 중 하나입니다.
#
border:solid 1 #999999;background-color:#E0E0E0;color:gray;width:27;height:16;position:relative;top:0px;line-height:15px
#
- 이건 button에 쓰인 스타일입니다.
- 버튼을 만들었는데 글자가 정중앙에 오지 않는다거나, 혹은 위치가 좀 어긋나 보인다거나 할 때, css로 바로잡기를 한 겁니다. 위 스타일을 분석해봅니다.
- 버튼의 높이가 16픽셀이네요. 여긴 나오지 않았지만 폰트의 크기는 9pt입니다.
- 저기서 line-height는 무슨 역할을 할까요?
- 이 엔지오 게시판의 글쓰기 페이지를 보세요. '작성완료'와 '취소하기' 버튼의 경우, 글자가 천장에 딱 달라붙었죠?
- 보통 line-height의 기본값은 120% 정도입니다. 100%로 지정할 경우 글자의 위가 약간 짤립니다.
( 순전히, html/css를 만든 인간들이 영어를 쓰기 때문이지요. 알파벳.. )
- 그런데 이 line-height는 px( 픽셀 )로도 지정 가능하지요.
- 저기서 line-height를 지정해준 건, 글자의 위아래에 남는 여백이 전혀 없도록 해서
- 글자를 버튼의 정가운데로 ─ 수직, 수평 모두 ─ 오게 한 겁니다.
/****************************************
padding, <tr>, table-layout
****************************************/
- 테이블 레이아웃이란 스타일이, 대체 무슨 역할을 하는지는 모르겠습니다.
- 그러나 이놈 덕분에 우리는 테이블을 좀 더 자유자재로 다룰 수 있습니다. 예제를 봅시다.
#
<table ..( 중략 ).. style='table-layout:fixed'>
<tr height=25>
<td width=100 style='padding:25'>
냐냐냐
</td>
</tr>
</table>
#
- 테이블-레이아웃은 auto와 fixed, 두 가지의 속성값을 가집니다.
- 위의 예제는 글자를 <td>의 가장자리에 바싹 대거나 약간 가리는 겁니다.
( 반드시 <tr>의 height와 함께 지정해주셔야 합니다. )
( padding 값이 25이니, 글자는 보이지 않겠군요. 이걸 조정하면 border에 바싹 댈 수 있겠지요 )
- 비슷한 효과를 line-height로도 연출할 수 있습니다.
(* line-height를 실제 폰트의 크기보다 줄이면, 먼저 폰트의 윗부분이 잘려나갑니다.
이건 맨 앞에 <br />을 붙임으로써 해결할 수 있습니다.
더 줄이면 폰트의 아랫부분부터 깎여나가는데,
<td>의 valign을 bottom으로 지정해놓고 padding과 함께 사용하면
table-layout을 사용하지 않고도 같은 모습을 나타낼 수 있겠지요 *)
##########################################
헛소리만 한 건 아닌지 모르겠군요.. 훔
다른 거 생각나면 또 적죠.. :P 그럼 이만
헉; 미리보기가 있어야하는군요-_-;
사용된 예제들이 포함된 파일들의 링크입니다.
#
view-source:http://uerl.net/zboard/zboard.php?id=blog
view-source:http://uerl.net/zboard/outlogin_skin/rage/login.html
#
그럼( 휭- )
[/수정]
-얼마 전부터 css에 관해 알고 있는 것들 정리해보려 했으나..
-대략 귀차니즘으로, 생각순서대로 써나갑니다.
( 그냥 가벼운 마음인 관계로.. 예제파일까지 준비하진 않았습니다.
복사해서 확인해보시는 것도 괜찮겠지요 )
-그럼..
/****************************************
제로보드 스킨에서 <a> 클래스 지정하기
****************************************/
- 이놈에다가 여러가지 스타일을 적용시키려다가 실패하신 분들 있을지 모르겠습니다.
- 특히나 제로보드 스킨들을 보면 거의 기본스타일 하나만 있는 게 대부분이더군요.
- 거두절미하고, 예제부터 봅시다.
#
a:link.hand, a:acitve.hand, a:hover.hand, a:visited.hand {cursor:hand}
..
a:link.ct, a:active.ct, a:visited.ct {color:#333366;text-decoration:underline}
a:hover.ct {color:#9999CC;text-decoration:none}
#
- 이건 가장 안전한 ─ 다음에 설명할겠습니다 ─ 클래스 선언법입니다.
- 이렇게 할 수도 있지요.
#
.blah a:link, a:active, a:visited {..( 생략 )..}
..
#
- 두번째 방법의 경우 약간의 위험성을 가지고 있습니다.
- 이렇게 여러가지 클래스를 정해놨는데, 특히나 제로보드의 경우─ 정의해놓은 클래스를 어느 페이지에선가는 쓰지 않을 수 있겠지요.
- 더구나 노프레임이라면 스타일이 뒤죽박죽이 되어버릴 수 있습니다.
- '선언해놓은 클래스를 사용하지 않을 경우' 그럴 수 있다는 겁니다.
( 아마 전역스타일로 인식해버리는 듯 합니다 )
- 해결책은 첫번째 방법처럼 하는 겁니다. 두번째처럼 '어느 클래스 영역에서는.. 이렇게' 나오도록 하는 건 바람직하지 못합니다.
( 무조건 쓰지 말라는 이야기는 아닙니다. 푸터나 헤더에 링크가 있을 경우는 어느 페이지에서든지 보이겠죠 )
- 제로보드 스킨에서 $a_delete_all, $a_admin.. 등등의 변수들은 아예 <a ..>입니다.
- 이 경우는 str_replace를 써서 강제로 클래스를 지정해줄 수 있지요.
/****************************************
line-height, padding
****************************************/
- 이 속성들을 아시는 분들은 많을 겁니다.
- 다음은 제가 만들었던 스타일 중 하나입니다.
#
border:solid 1 #999999;background-color:#E0E0E0;color:gray;width:27;height:16;position:relative;top:0px;line-height:15px
#
- 이건 button에 쓰인 스타일입니다.
- 버튼을 만들었는데 글자가 정중앙에 오지 않는다거나, 혹은 위치가 좀 어긋나 보인다거나 할 때, css로 바로잡기를 한 겁니다. 위 스타일을 분석해봅니다.
- 버튼의 높이가 16픽셀이네요. 여긴 나오지 않았지만 폰트의 크기는 9pt입니다.
- 저기서 line-height는 무슨 역할을 할까요?
- 이 엔지오 게시판의 글쓰기 페이지를 보세요. '작성완료'와 '취소하기' 버튼의 경우, 글자가 천장에 딱 달라붙었죠?
- 보통 line-height의 기본값은 120% 정도입니다. 100%로 지정할 경우 글자의 위가 약간 짤립니다.
( 순전히, html/css를 만든 인간들이 영어를 쓰기 때문이지요. 알파벳.. )
- 그런데 이 line-height는 px( 픽셀 )로도 지정 가능하지요.
- 저기서 line-height를 지정해준 건, 글자의 위아래에 남는 여백이 전혀 없도록 해서
- 글자를 버튼의 정가운데로 ─ 수직, 수평 모두 ─ 오게 한 겁니다.
/****************************************
padding, <tr>, table-layout
****************************************/
- 테이블 레이아웃이란 스타일이, 대체 무슨 역할을 하는지는 모르겠습니다.
- 그러나 이놈 덕분에 우리는 테이블을 좀 더 자유자재로 다룰 수 있습니다. 예제를 봅시다.
#
<table ..( 중략 ).. style='table-layout:fixed'>
<tr height=25>
<td width=100 style='padding:25'>
냐냐냐
</td>
</tr>
</table>
#
- 테이블-레이아웃은 auto와 fixed, 두 가지의 속성값을 가집니다.
- 위의 예제는 글자를 <td>의 가장자리에 바싹 대거나 약간 가리는 겁니다.
( 반드시 <tr>의 height와 함께 지정해주셔야 합니다. )
( padding 값이 25이니, 글자는 보이지 않겠군요. 이걸 조정하면 border에 바싹 댈 수 있겠지요 )
- 비슷한 효과를 line-height로도 연출할 수 있습니다.
(* line-height를 실제 폰트의 크기보다 줄이면, 먼저 폰트의 윗부분이 잘려나갑니다.
이건 맨 앞에 <br />을 붙임으로써 해결할 수 있습니다.
더 줄이면 폰트의 아랫부분부터 깎여나가는데,
<td>의 valign을 bottom으로 지정해놓고 padding과 함께 사용하면
table-layout을 사용하지 않고도 같은 모습을 나타낼 수 있겠지요 *)
##########################################
헛소리만 한 건 아닌지 모르겠군요.. 훔
다른 거 생각나면 또 적죠.. :P 그럼 이만
