illust by 천년의겨울
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
안녕하세요~! 방금 글을 써놓고 또 찾아뵙게 됐네요(^^)

커뮤니티에서 이용될 수 있는 간단한 것들(스타일시트 등..)에 대해 기입하려고 왔어요!
BGM관련 자료들은 잠시 후 시간이 나면 작성하려고해요.


1. 클릭시 생기는 점선을 없애봅시다.

일반적으로 객체를 없앨 때 쓰는 시트는

<a href="경로.html"><img src="이미지.png" width="250" height="120" border="0" onfocus="blur()">

의 태그를 많이들 사용하시지요!
그런데 객체가 다수일 경우(특히 커뮤니티나, 개인 홈페이지의 메뉴일경우.) 하나하나 넣어주기엔 번거롭고 귀찮은 감이 있어요.

그걸 한방에 해결해 드리는게 하단의 스타일 시트에요.

<style type="text/css">
<!--

img, a{border:0;selector-dummy:expression(this.hideFocus=true);}

-->
</style>

위 소스를 <head></head> 사이에 넣어주세요!

( 예시문 )

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>황제의 기사</title>
<style type="text/css">
<!--

img, a{border:0;selector-dummy:expression(this.hideFocus=true);}

-->
</style>
</head>

이렇게 해주시면 클릭시 생기는 번거로운 점선이 말끔하게 사라진 것을 확인하실 수 있으실거에요~




2. 이미지 링크, 텍스트 링크에 마우스를 올리면 버튼처럼 눌리는 효과를 줘봅시다.

가끔 커뮤니티에 들어가면 롤오버(마우스 오버시 그림이 바뀌는 것)는 아닌 것 같은데,
마우스를 올리면 링크가 살짝 움직이는 경우를 보셨을거에요. 

<style type="text/css">

<!--

a:hover {position:relative; top:2; left:2}

-->

</style>


위의 소스를  <head>와 </head> 사이에 넣어주세요. 상기의 클릭시 점선을 없애는 소스와 유사한 형식이에요. 

그러면 링크가 걸린 이미지에 버튼처럼 눌리는 효과를 보실수 있을거에요~


top:2 는 위에서 2px 만큼 떨어지게, left:2 는 왼쪽에서 2px 만큼 떨어지게 하라는 명령이니까,

좀 많이 눌리거나 좀 덜 눌리게 하려면 수치를 변경해 주시면 된답니다.



( 예시문 )

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>황제의 기사</title>
<style type="text/css">

<!--

a:hover {position:relative; top:2; left:2}

-->

</style>
</head>

굳이 왼쪽이나 위가 아니어도 top과 left를 bottom이나 right로 변경해주시면

아래나 오른쪽으로 움직이게끔 하실수 있으니 참고하세요! (^^)



3. 홈페이지 아이콘, 파비콘을 달아봅시다.




커뮤모아나 다른 사이트(네이버, 다음 등의 대형 포털사이트) 뿐만 아니라 어떤 커뮤니티중에는


data1.jpg


이런식으로 커뮤니티 타이틀 앞에 아이콘을 달고 있는 경우가 있어요.

어떻게 다는건지 궁금하셨을 분들을 위한 간단한 팁입니다. (단, 이번것은 포토샵이 필요합니다.)


click!


위 파일링크를 클릭해서 다운로드 받으신 후에, [ 포토샵이 설치된 경로/plug-ins ] 에 넣어주세요.

(일반적으로 설치하실 때 경로를 변경하지 않으셨다면, 기본적으로

C:\Program Files\Adobe\Photoshop CS5\Plug-Ins 의 경로일거예요)


그리고 포토샵을 켜고 계신 상태일 경우, 포토샵을 껐다가 다시 켜주세요.


그러면 저장 확장자(.jpg, .gif, .png, .psd 등등…)중에


data2.png


이렇게 .ico 확장자가 생성되어 있는걸 확인하실 수 있을거에요!


일반적인 웹에서 나타나는 사이즈인 16px * 16px로 예쁘게 아이콘을 작업하시고(투명화도 가능해요^^)

저장시 확장자를 *.ico로 해주시면, 본인이 만드신 아이콘이 생성될 거에요.


FTP를 이용하여 파비콘(만드신 아이콘)을 업로드해주세요. 어느 위치든 상관 없어요.

그리고 필수는 아니지만 만든 주소를 웹에서 한 번 불러오기를 해 보시는걸 권장해요.

바로 적용이 안되는 경우가 있기 때문에 필수에 가까운 권장이에요 *__)


허나 만들고, 한 번 불러왔다고 끝이 아니죠~ 그럼 이제 웹에 적용해 볼까요?


붉게 처리된 아래 소스를 <head>와 </head> 사이에 삽입해 줍시다!


<html>


<head>

<meta http-equiv="content-type" content="text/html; charset=euc-kr">

<title>황제의 기사</title>

<link rel="shortcut icon" href="파비콘의 주소(.ico까지 꼭 붙이셔야해요^^">

</head>


그럼 예쁘게 본인의 커뮤니티나 홈페이지에 파비콘이 적용됐음을 확인하실 수 있을거에요!



---


별 것 아닌 자료인데 쓰다보니 하염없이 길어졌네요~

모두들 좋은 참고가 되셨길 바라며 다음은 앞서 말씀드렸다시피 bgm에 관련된 자료를 들고 올게요!

읽어주셔서 감사합니다(^^)

  • ?
    에엣 2012.01.17 12:58

    으아 진짜 궁금했던 건데ㅠㅠㅠㅠㅠㅜㅜㅜ올려주셔서 너무너무 감사드립니다 스릉흡느드ㅠㅠ

  • ?
    title: 턱시도냥 (등록자:네이시)DuRaVi 2012.01.25 04:34

    ㅇ헙!!! 감사합니다 ㅠㅠㅠ커모보면서 저 앞에 아이콘은 어떻게 하나 싶었는데 S2

    많이 알구 가네요- ㅎㅎ 감사합니다

  • ?
    헿헿 2012.02.12 16:12

    추천버튼이 필요합니다...!

  • ?
    팔님 2012.03.28 22:46

    헤헤헤 추천버튼이 필요합니다. 정말 감사해여~!

  • ?
    pezwell 2012.04.07 22:46

    감사합니다 마니 알구가요~ㅠㅠ


List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
14 기타 [수정]Java8 이상 사용시 치비페인트 로드 불가 문제 3 file 네이시 2014.11.30 3951
13 기타 MnM 스킨 주사위/접기오류 패치 file 욉인2 2014.04.22 13874
12 기타 엔시티계정 비공개설정 오류문제 ff 2014.03.22 6192
11 기타 아이프레임으로 불러오는 도큐먼트의 길이에 따라 아이프레임 높이 조절하기 검정치마 2014.01.20 12115
10 기타 프레임에서 불렀을 때와 새창에서 불렀을 때 배경 이미지(색상) 다르게 하기 검정치마 2014.01.20 6510
9 기타 비툴 커뮤니티 만들기 1- 프레임, 노프레임, 아이프레임 href 2013.01.14 15865
8 기타 [Tip] 개인 홈페이지 링크란 롤오버 배너 2 Hui 2013.01.03 15914
7 기타 제로보드4 프로필 게시판 52 노드 2012.10.28 34944
6 기타 제로보드4 업로드 게시판 18 노드 2012.09.12 27349
» 기타 몰라도 상관 없지만, 알아두면 커뮤니티나 홈페이지 디자인에 좋을것들. 5 file 황제의 기사 2012.01.15 35260
4 기타 음악파일을 swf(플래시 재생바)로 바꿔주는 프로그램과 플래시 투명화 방법. 3 file 황제의 기사 2012.01.15 29173
3 기타 하이퍼나비가 엑스박스로 뜨시는 경우 1 알보칠 2009.12.25 24983
2 기타 에스카르고 강좌 (링크) 1 네이브런 2009.11.22 21916
1 기타 비툴에 대한 블로그 (링크) 2 네이브런 2009.10.17 26357
목록
Board Pagination Prev 1 Next
/ 1
커뮤모아 안드로이드 앱