웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
몇 가지 팁..( 좀 깁니다.. 어느 정도 안다고 생각하시는 분들, 추천 )
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 그럼 이만
댓글 3
-
naughtykidd
2004.02.26 19:59
-
토끼군
2004.02.26 21:01
1.
.blah a:link, a:active, a:visited { -- omitted -- }
이거 틀렸습니다. 이렇게 하면, .blah는 첫째인 a:link에만 적용됩니다. 다음과 같이 하셔야 합니다:
.blah a:link, .blah a:active, .blah a:visited { -- omitted -- }
2.
댓글에 지적하신 그 문제는 !important를 사용해서 우선 순위를 지정하는 것으로 해결할 수 있습니다.
지적하신 문제의 경우 .xxx a:link에 !important를 주면 해결되지요. -
naughtykidd
2004.02.27 11:17
핫, 모르던 걸 알았군요.
고맙습니다 (__)
제목 | 글쓴이 | 날짜 |
---|---|---|
동영상과 함께 자막 재생하기. [4] | 세강:D | 2004.08.16 |
도메인 포워딩 하기 [4] | 나준혁 | 2004.07.27 |
이미지에 필터만으로 그림자주기.. [15] | Simsim | 2004.07.07 |
어쩌다 나온 깔끔한 그레이 스크롤바.. 흠흠.. [11] | ☺심심 | 2004.06.06 |
relative 속성 레이어를 이용한 메뉴를 자리차지하지 않게... [1] | PHASE | 2004.06.03 |
처음올립니다;ㅂ; 너무 신기한 거 발견;; [19] | 올리못™ | 2004.05.30 |
아이프레임 가로스크롤바 없애기 [3] | 백승창 | 2004.05.28 |
아기창 뜨고 부모창 닫기 [6] | 임소식 | 2004.05.19 |
플래시 swf파일 배경 투명하게 하기 ~~~ [8] | kim's | 2004.05.09 |
자동 스크롤 메뉴 (끄기 기능, 무한 스크롤 X) [6] | ☺심심 | 2004.05.02 |
홈페이지 빠르게하는 [로딩속도를 높히는 10가지방법] [20] | kim's | 2004.04.29 |
[tip]간단한 반투명 필터 적용법 [2] | 드래군 | 2004.04.21 |
제로보드에서 손쉽게 복사하는 소스 (아래보다 더 편함..) [2] | Danggn™ | 2004.04.17 |
(For 초보)폼안에 내용을 자동선택+자동복사해줍니다. [6] | 쉬드 | 2004.04.10 |
모든 스킨에서 중국어 간체 볼 수 있도록 해주는 법... [6] | 학몽 | 2004.03.09 |
스타일 시트파일을 만들기 .. [4] | 박종익 | 2004.03.07 |
간단하게, 색깔있는 밑줄 긋기. [4] | naughtykidd | 2004.02.27 |
몇 가지 팁..( 좀 깁니다.. 어느 정도 안다고 생각하시는 분들, 추천 ) [3] | naughtykidd | 2004.02.26 |
스타일시트를 이용한 텍스트박스 스타일 제어(밑줄,점선) [8] | 01CODE.com | 2004.02.26 |
전송버튼의 테두리를 없애 BoA요 >_< [7] | 플로렐라 | 2004.02.14 |
.xxx a:link....
이런 식으로 쓸 경우는 기본클래스를 '절대' 지정하지 마세요.
즉
a:link {... }
이것과 .xxx a:link {..} 를 병용하지 마시란 겁니다.
개판됩니다. :Q