웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
[HTML 초보자]iframe대신 사용할수있는 오브젝트-1 [8] | ZipShin | 2002.12.06 |
허접강의 -_-; 소스보기 금지 푸는방법들 [21] | 허진규 | 2002.12.05 |
흐르는 폼 내용 출력 ㅡ,.ㅡγ [9] | ☆밥동자γ | 2002.11.30 |
[HTML 초보자] 글자움직이는 마퀴태그의 응용(Last) [3] | ZipShin | 2002.11.26 |
[HTML 초보자] 움직이는 글자반복횟수를 정하자... | ZipShin | 2002.11.22 |
[HTML 초보자] 글자가 움직이는 스크롤 지연값 -_- | ZipShin | 2002.11.22 |
〔Tale〕테일이랑 같이 글상자 이쁘게 만들어요 [1] | TaleB˚ | 2002.11.17 |
[HTML 초보자] 글자가 좌우 왕복하게 만들기. | ZipShin | 2002.11.14 |
[HTML 초보자] 마퀴태그가 한번 반복 후 화면 끝에서 정지 | ZipShin | 2002.11.08 |
[HTML 초보자] 일정한 방향으로 스크롤하기(마퀴태그) [5] | ZipShin | 2002.11.08 |
링크부분에 밑줄을 없애는 방법 [5] | Kinds | 2002.11.04 |
입력폼 스타일변경... [2] | 디아릭스 | 2002.11.04 |
[HTML 초보자] 글자 움직이는 높이 설정 | ZipShin | 2002.11.02 |
희안한 css [투명한 프레임과 투명한 이미지] [10] | ☜*핑♡크*☞ | 2002.10.30 |
[HTML 초보자] 글자 움직이는 폭(넓이) 설정 | ZipShin | 2002.10.28 |
뽀유의 스타일시트 특별강좌 [28] | 뽀유♡ | 2002.10.25 |
오른쪽마우스, 드래그 금지하는 태그.. [4] | xtersh | 2002.10.24 |
[HTML 초보자]- 글자가 움직이는 배경색깔 [1] | ZipShin | 2002.10.22 |
[HTML 초보자]-marquee 마퀴태그의 움직이는 속도 [5] | ZipShin | 2002.10.20 |
[HTML 초보자] 마퀴태그로 움직이되, 마우를 가져다 되면 멈추고, 시작되고.. [6] | ZipShin | 2002.10.17 |
a:link {} (보통방법)
menu a:link {} (메뉴영역안에서만 쓰이는 링크스타일)
notice a:link {} (공지영역안에서만 쓰이는 링크스타일)
li a:link {} (LI 리스트 안에서만 쓰이는 링크스타일)
이걸로 바꾸니 클래스를 안써도 되더군요. 전 편했어요. 근데 무지 많이 만들어야 되더라는;;;