웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
뽀유의 스타일시트 특별강좌
2002.10.25 09:29
[수정내용]
내용을 약간 수정하였습니다.
HTML 사용 체크를 하시지 않은 경우에는 HTML 태그가 그대로 노출(?)되니 "<", ">" 부호를 "[","]" 로 바꿔주실 필요는 없습니다 ^^
"<",">" 이 부호로 해주면 강좌 보시는 분이 복사해서 바로 사용하실 수 있고 좋잖아요 ^^
오늘 아침에 다음 (http://daum.net) 의 소스를 분석하던 도중
제가 한참 궁금해하던 부분에 대해 알아냈습니다 -_-;
바로바로! 노프레임사이트를 만들 때의
링크 스타일을 하나로밖에 지정 못한다는 그 아픔..;;
해결되었습니다 -_-;;
무슨소린지 모르시겠다구요? 예를들면..
링크 글씨색과.. 뭐 여러가지를 이쁘게 해놨는데
제로보드 로그인을 삽입했더니
로그인의 스타일대로 따라가더라... 이런분들 있죠?
금방 쉽게 해결됩니다.. 그럼 지금부터 강좌 시작-!
-----------------------------------------------------
★ 스타일시트 강좌 ★
style.css 파일을 만드셔야합니닷.
메모장을 여세요. 그리고 아래와같이 입력하세요.
a.menu:link {text-decoration:none;color:#666666;}
a.menu:hover {text-decoration:underline;color:#cccccc;}
a.notice:link {text-decoration:underline;color:#ffff00;}
a.notice:hover {text-decoration:underline;color:#ff0000;}
이런식으로 스타일시트 파일을 만드신다음에
스타일을 적용시킬 html문서의 head부분에 다음과같이
입력하셔서 스타일시트를 포함시켜주세요
<link rel="stylesheet" type="text/css" href="style.css">
그리고는 링크를 하실때 [a] 태그를 쓰죠?
[a] 태그 안에 클래스를 삽입해주는겁니다.
메뉴에 링크를 거실때에는 위에 a.menu:link 라고 속성을
지정해주었었으니까
<a href="http://foryouweb.com" class="menu" target="_blank">
이런식으로 해주시면 되고
공지사항의 링크는
<a href="http://주소.com" class="notice">
이런식으로 해주시면
각각의 스타일시트가 적용되서 나오게 된답니다^^
이해가 안되시면 제 홈에 오셔서 질문해주세요 - *
내용을 약간 수정하였습니다.
HTML 사용 체크를 하시지 않은 경우에는 HTML 태그가 그대로 노출(?)되니 "<", ">" 부호를 "[","]" 로 바꿔주실 필요는 없습니다 ^^
"<",">" 이 부호로 해주면 강좌 보시는 분이 복사해서 바로 사용하실 수 있고 좋잖아요 ^^
오늘 아침에 다음 (http://daum.net) 의 소스를 분석하던 도중
제가 한참 궁금해하던 부분에 대해 알아냈습니다 -_-;
바로바로! 노프레임사이트를 만들 때의
링크 스타일을 하나로밖에 지정 못한다는 그 아픔..;;
해결되었습니다 -_-;;
무슨소린지 모르시겠다구요? 예를들면..
링크 글씨색과.. 뭐 여러가지를 이쁘게 해놨는데
제로보드 로그인을 삽입했더니
로그인의 스타일대로 따라가더라... 이런분들 있죠?
금방 쉽게 해결됩니다.. 그럼 지금부터 강좌 시작-!
-----------------------------------------------------
★ 스타일시트 강좌 ★
style.css 파일을 만드셔야합니닷.
메모장을 여세요. 그리고 아래와같이 입력하세요.
a.menu:link {text-decoration:none;color:#666666;}
a.menu:hover {text-decoration:underline;color:#cccccc;}
a.notice:link {text-decoration:underline;color:#ffff00;}
a.notice:hover {text-decoration:underline;color:#ff0000;}
이런식으로 스타일시트 파일을 만드신다음에
스타일을 적용시킬 html문서의 head부분에 다음과같이
입력하셔서 스타일시트를 포함시켜주세요
<link rel="stylesheet" type="text/css" href="style.css">
그리고는 링크를 하실때 [a] 태그를 쓰죠?
[a] 태그 안에 클래스를 삽입해주는겁니다.
메뉴에 링크를 거실때에는 위에 a.menu:link 라고 속성을
지정해주었었으니까
<a href="http://foryouweb.com" class="menu" target="_blank">
이런식으로 해주시면 되고
공지사항의 링크는
<a href="http://주소.com" class="notice">
이런식으로 해주시면
각각의 스타일시트가 적용되서 나오게 된답니다^^
이해가 안되시면 제 홈에 오셔서 질문해주세요 - *
댓글 28
-
햇살
2002.10.25 11:00
-
뽀유♡
2002.10.25 11:10
클래스를 안써두 되요?? 어떻게 가능해요? 무지 궁금함;;
menu a:link {} 일케만 해노면
메뉴에 알아서 적용이 된다구용?? -
햇살
2002.10.25 11:17
예를 들면..
style:
a:link { color: blue } // 보통링크
menu a:link { color: red } // menu라는 클래스 안에서만 적용먹는 링크
li a:link { color: green } // li에서만 써먹는 링크
본문에서는..
<a href=어쩌구> // 파랑색으로 나오겠죵.
<div class=menu> // menu라는 영역을 잡아주죠.
<a href=저쩌구> // 빨강색으로 나오겠죠. 본문안에서 영역잡는게 많아져면 나중엔 헷갈리더라는;;
</div>
<li><a href=흐음> // 녹색으로 나올겁니다.
일장일단이 있는것 같으니 잘 선택해서 쓰시면 되겠네요. ^^; -
리쯔:)
2002.10.25 11:30
멋지군요![열자아아아아] -
햇살
2002.10.25 11:50
에.. 수정 하나 들어갑니다. 메뉴 클래스 정의할때 앞에 쩜(.)을 빼먹었습니다. 긁어서 확인해보실때 쩜 넣어주셔요. 죄송~
네. 이건 제가 CSS를 찾아보면서 가장 감동의 눈물을 흘렸던 기억이라서요.. ^^; -
ROBIN
2002.10.25 14:29
하핫;; 뽀유 여기두 올렸넹 +_+ -
@.@
2002.10.25 14:45
우와...요새 CSS공부중이였는데...^^;;
너무 감사드립니다~~
좀더 구체적 강의 하실마음 생기시면(?) 해주세여~~^^;; -
뽀유★
2002.10.25 17:14
헐!! 제 아이디도 뽀유인데.. 키득;; 어디서 많이 본 아이디인가 했더니 ㅡㅡ;; -
뽀유♡
2002.10.25 22:52
헉..뽀유님 -_-;;;;;; ㅋㅋㅋ
이..이런 -ㅇ -; 반가워용// ㅋㅋ -
ROBIN
2002.10.26 09:58
푸하핫 +_+ 두 뽀유의 만남~~ 누가 진짜야 +_+)/? -
靑色糖™
2002.10.28 10:10
앗 그럼 제 자료실의 자료에 의견을 달아주신 분은 누구신지.. -
靑色糖™
2002.10.28 10:11
혹시 지금 바꾸신건 아니신지;; -
뽀유♡
2002.10.28 16:16
제 닉넴은 정확히 2002년 5월 3일부터 만들었습니다 -_-^ -
토토로
2002.11.19 11:40
T^T 그렇게 찾아헤메던.... 드뎌 찾아따아~~ -
조은하루
2002.11.18 12:09
이 외에 두개 class를 쓰실때 class="notice bcolor" 이런식으루 사용해두
두가지 css가 먹습니다.
우선순위는 모르겠구..
.notice a:link 는 해당 클래스 안에 링크를 말하는거니깐
해당 클래스 안에 링크일때만 쓰이는 거구여
둘다 사용일땐 콤마(,) 같은 단계일땐 스페이스 임돠! -
바보토끼
2003.01.29 11:11
으아앙 ㅜ_ㅠ 글케 찾아헤메던거 저두 여기서 찾았네요.
상세한 설명/ 방법두 두가지 ^^ 아고 진짜 고맙습니다 (__) -
이플립
2003.02.02 21:51
CSS도 여느 언어처럼 (말이 않되나여?)
덩말 넒다 -_-;; -
신태하
2003.02.23 20:38
아기베베 ㅡ,.ㅡ -
。I징:)
2003.02.25 14:37
우와...좋닷......활용하기 좋은걸요 -
아찌물개
2003.04.22 17:43
와우 감사....정말 이것땜에 무지고민했는뎅...드뎌 찾았당! -
백승우
2003.05.14 12:13
a.menu:link {text-decoration:none;color:#666666;}
menu a:link {text-decoration:none;color:#666666;}
이렇게 하지않고
.menu:link {text-decoration:none;color:#666666;}
이렇게만 적어도 됩니다.*^^* -
김병민
2003.06.17 01:24
쩜더 자세하게 설명해주심 안될까염? -
ⓝZLE
2003.06.20 00:17
열자즐 -
마법구술
2003.09.21 13:04
헉!! nZLE 님.. 어떻게 열자를 안쓰시고 올릴수있어요?? -
마법구술
2003.09.21 13:05
열자X -
최청운
2003.11.10 10:50
저도 드디어 해결했습니다..
정말 감사합니다. ^-^ -
ⓢun™
2004.04.13 22:28
정말 좋은 팁이예요! 감사합니다 *^^* 잘 되네요~ 추천! -
死神나츠
2004.06.04 16:40
열자KIN
제목 | 글쓴이 | 날짜 |
---|---|---|
Mysql에서 큐브리드로 데이터이전 [3] | 카르마 | 2010.10.23 |
비밀번호 찾기 기능 조심하세요 [4] | 老姜君 | 2010.10.28 |
XE 속도 0.0001초라도 올리는 소소한 팁들 (추가) [5] | 소렌트. | 2010.11.16 |
게시물 하단에 예쁜 추천,비추천 아이콘 버튼 추가하기~ [12] | xemall | 2010.11.28 |
[1차패치] 내 msn 현재상태를 보여주자! + 캡처없앰 -ㅂ- [18] | 티르 | 2002.01.04 |
사용자의 윈도 화면배색을 쓰자.. [4] | 엔카일 | 2002.08.13 |
뽀유의 스타일시트 특별강좌 [28] | 뽀유♡ | 2002.10.25 |
〔Tale〕테일이랑 같이 글상자 이쁘게 만들어요 [1] | TaleB˚ | 2002.11.17 |
웹페이지 대화상자 띄우기. [4] | 세죠위그이 | 2003.02.05 |
label태그 아십니까? [6] | ZipShin | 2003.04.27 |
노프레임 홈만들기 (1) - 표로 레이아웃 만들고 그림 삽입하기 [45] | @kihwa | 2003.07.11 |
노프레임 홈만들기 (2) - 로그인, 최근게시물 설치 [31] | @kihwa | 2003.07.26 |
노프레임 홈만들기 (3) - 서브 페이지 만들고 제로보드에 적용하기 [27] | @kihwa | 2003.07.26 |
TabIndex를 이용하여 탭키 컨트롤하기 [5] | 손상모 | 2004.10.08 |
로그인창에서.... [1] | 이진수 | 2006.07.02 |
자바스크립트로 메타태그 리프레쉬 효과를 보여주자. [5] | ZipShin | 2002.06.26 |
간단한 쿠키 &세션 확인용 | M2Vis | 2002.07.01 |
[로그인] 자바스크립트로 여러개 로그인하기 [10] | ZipShin | 2002.08.13 |
자바스크립트로 여러개 아이디 로그인 하기 [5] | ZipShin | 2002.09.17 |
[자작] select 폼 태그 html로 허접하게나마 꾸며보기 [18] | zero | 2002.11.05 |
a:link {} (보통방법)
menu a:link {} (메뉴영역안에서만 쓰이는 링크스타일)
notice a:link {} (공지영역안에서만 쓰이는 링크스타일)
li a:link {} (LI 리스트 안에서만 쓰이는 링크스타일)
이걸로 바꾸니 클래스를 안써도 되더군요. 전 편했어요. 근데 무지 많이 만들어야 되더라는;;;