http://www.favicon.cc/
파비콘 만드는 싸이트
직접 만들어서 사용해도 된다. 35*35 사이즈로 제작후 업로드
예제 -><link rel="shortcut icon" href="http://www.007.com/wp-content/themes/bond/images/favicon.ico?84cd58" />헤드안에 넣어준다 .
그누보드에 적용시 head 에 소스를 넣어도 적용이 안된다.
head.sub 중간에 dtd 선언후<html>다음<head>바로 밑에 
<link rel="shortcut icon" href="http://도메인.co.kr/favicon.ico">또는 png 로 올려도 되지만 ie 낮은버젼에서는 지원이 안됨...
절대경로 또는 상대경로도 적용된다.


저작자표시 비영리 변경금지

'웹 퍼블리싱 > Html' 카테고리의 다른 글

이미지맵 마우스 오버시 이미지 변경 태그  (0) 2018.08.14
ul,li, ol 가운데 정렬하는 방법  (0) 2018.08.14
유튜브 동영상 z-index 값 조정하기  (0) 2015.07.23
[HTML 기초] ＆nbsp; ＆amp; ＆lt; ＆gt; ＆quot; 의 의미와 사용법은?  (0) 2015.07.17
유튜브 동영상 자동 재생하기  (0) 2015.07.17
이미지맵은 하나의 이미지를 불러들인 후 그 이미지에 영역을 지정해서 각각의 하이퍼링크를 할수있도록 도와주는 역할을 하는 기능입니다.
그런데 이 이미지 맵으로도 '롤오버 이미지 효과'를 구현할 수가 있다는거 아시나요?
아래의 내용을 참고하시길 바랍니다.

<img src=top_1.gif name=leewidth=87 height=87 border=0 useMap=#button>
<map name=button>
 <area onmouseover="if(document.images) lee.src='top_2.gif'" onmouseout="if(document.images) lee.src='top_1.gif'" shape=CIRCLE coords=43,43,43 href="http://www.naver.com/">
</map>

드림위버의 이미지맵 기능을 이용하신 후 약간의 내용만 수정하심 됩니다.
그럼 내용설명입니다.

㉠ name=lee  : 이미지이름명
㉡ useMap=#button   : 맵기능이름명
㉢ onmouseover="if(document.images) lee.src='top_2.gif'"   : 마우스오버="if(document.images) 이미지이름명.src='나타날이미지경로'"
㉣ onmouseout="if(document.images) lee.src='top_1.gif'"   : 마우스아웃="if(document.images) 이미지이름명.src='원래이미지경로'function hrefMark(){ } 





----------------------------------------------------



이미지맵 태그에서의 script활용법


마우스오버(onMouseOver)를 삽입한 소스
<area shape="rect" coords="364,12,500,28" href="#" onMouseOver="링크경로명">

온클릭으로 팝업창 스크립트를(onClick)를 삽입한 소스
<area shape="rect" coords="364,12,500,28" href="#" onClick="javascript:window.open('링크경로명','','width=510,height=220,top=100,left=100,statusbar=no,scrollbars=yes,toolbar=no');">

자바스크립트 재알창을 삽입한소스
<area shape="rect" coords="364,12,500,28" href="#" onClick="javascript:alert('테스트입니다.');"> 


* 이미지맵 점선 테두리 없애는 소스*

onFocus="this.blur()"


저작자표시 비영리 변경금지

'웹 퍼블리싱 > Html' 카테고리의 다른 글

파비콘만들기 (홈페이지 상단 타이틀이미지)  (0) 2018.10.12
ul,li, ol 가운데 정렬하는 방법  (0) 2018.08.14
유튜브 동영상 z-index 값 조정하기  (0) 2015.07.23
[HTML 기초] ＆nbsp; ＆amp; ＆lt; ＆gt; ＆quot; 의 의미와 사용법은?  (0) 2015.07.17
유튜브 동영상 자동 재생하기  (0) 2015.07.17
메뉴에 주로 ul li를 많이 사용하는데 가운데 리스트 전체를 가운데 정렬하고싶을때 사용합니다.

문단만 가운데 정렬하기

목록 안에 있는 문단만 가운데 정렬할 때는 text-align 속성을 사용합니다.

ul {
  text-align: center;
}

이때, 목록 요소의 가로 크기는 변하지 않습니다.

목록 요소 자체를 가운데 정렬하기

목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. ul, ol의 기본 가로 크기는 100%이므로, 가로 크기를 지정해줘야 가운데로 정렬됩니다.

ul {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.

ul {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

목록 요소 자체가 가운데에 위치하는 것으로, 문단 정렬은 변하지 않습니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        font-family: Consolas;
      }
      h1 {
        font-size: 16px;
      }
      ul {
        border: 1px solid #bcbcbc;
      }
      ul.a {
        text-align: center;
      }
      ul.b {
        width: 300px;
        margin-left: auto;
        margin-right: auto;
      }
      ul.c {
        display: table;
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    <h1><code>text-align: center</code></h1>
    <ul class="a">
      <li>Lorem Ipsum</li>
      <li>Dolor Amet</li>
    </ul>
    <h1><code>width: 300px; margin-left: auto; margin-right: auto;</code></h1>
    <ul class="b">
      <li>Lorem Ipsum</li>
      <li>Dolor Amet</li>
    </ul>
    <h1><code>display: table; margin-left: auto; margin-right: auto;</code></h1>
    <ul class="c">
      <li>Lorem Ipsum</li>
      <li>Dolor Amet</li>
    </ul>
  </body>
</html>


저작자표시 비영리 변경금지

'웹 퍼블리싱 > Html' 카테고리의 다른 글

파비콘만들기 (홈페이지 상단 타이틀이미지)  (0) 2018.10.12
이미지맵 마우스 오버시 이미지 변경 태그  (0) 2018.08.14
유튜브 동영상 z-index 값 조정하기  (0) 2015.07.23
[HTML 기초] ＆nbsp; ＆amp; ＆lt; ＆gt; ＆quot; 의 의미와 사용법은?  (0) 2015.07.17
유튜브 동영상 자동 재생하기  (0) 2015.07.17


유투브 동영상을 홈페이지에 삽입할때 메뉴나 다른 요소들 위로 동영상이 가려지는 경우가 발생한다.


유튜브 동영상에 대해 파이어폭스나 심지어는 IE에서도 발생하지 않는 z-index 문제이다.

중첩된 객체들에게 z-index를 부여해도 유튜브 동영상을 iFrame으로 포함한 경우 이상하게 표시된다.


이 문제는 유튜브 동영상을 삽입할 때 wmode=opaque 속성을  지정하면 해결할 수 있다.


즉, 아래와 같이 삽입된 경우


<iframe src="http://www.youtube.com/embed/N8zO5lP58i4" frameborder="0" allowfullscreen="" width="480" height="360"></iframe>


아래와 같이 수정하면 된다.

 

<iframe src="http://www.youtube.com/embed/N8zO5lP58i4?wmode=opaque" frameborder="0" allowfullscreen="" width="480" height="360"></iframe>


단, 이미 속성이 지정된 경우는 wmode 앞에 ?가 아니라 &를 붙여야 한다.

즉, 원래 삽입된 코드가 아래와 같은 경우는


<iframe src="http://www.youtube.com/embed/N8zO5lP58i4?rel=0" frameborder="0" allowfullscreen="" width="480" height="360"></iframe>


아래와 같이 수정하면 된다.

 

<iframe src="http://www.youtube.com/embed/N8zO5lP58i4?rel=0&wmode=opaque" frameborder="0" allowfullscreen="" width="480" height="360"></iframe>






<iframe width="960" height="600" src="https://www.youtube.com/embed/MkyFbcnIQV4?rel=0&wmode=opaque" frameborder="0" allowfullscreen></iframe>


&wmode=opaque 



Flash Movie는 기본적으로는 z-index와 관계없이 화면의 맨 앞에 보이게 된다. wmode 값을 설정하여 플래시 플레이어를 제어 하여 배경을 투명하게 하거나 위에 레이어를 올릴 수 있다. 



window : Flash Movie 를 맨 위에 놓게 된다. (기본값) 

opaque : Movie 아래의 모든 것을 가리게 된다. 위에 레이어를 올릴 수 있다. 

transparent : Movie를 투명하게 하여 뒤의 html 부분을 보여준다. 


transparent모드를 사용할 경우 animation performance를 떨어뜨리게 되기 때문에 반드시 필요한 경우에만 사용해야 한다. 면적이 넓으면 피하는 것이 좋다.




저작자표시 비영리 변경금지

'웹 퍼블리싱 > Html' 카테고리의 다른 글

이미지맵 마우스 오버시 이미지 변경 태그  (0) 2018.08.14
ul,li, ol 가운데 정렬하는 방법  (0) 2018.08.14
[HTML 기초] ＆nbsp; ＆amp; ＆lt; ＆gt; ＆quot; 의 의미와 사용법은?  (0) 2015.07.17
유튜브 동영상 자동 재생하기  (0) 2015.07.17
페이스북 현재페이지 보내기 버튼  (0) 2015.07.17

&nbsp;


" " : 공백(스페이스 한 칸)을 의미.
띄어쓰기를 할 때는 키보드의 스페이스키(가장 길쭉한 키)를 한 번 눌러 "공백 문자" 즉 빈 칸을 한 개 삽입합니다. 그런데 HTML 문법에서는, 일반 텍스트 편집에서와 달리, 공백 2개를 연속으로 사용해도 2칸을 띄어쓸 수 없습니다. 공백을 아무리 많이 삽입해도 공백 1개로 간주됩니다. 그래서 공백을 여러 개 사용해야 할 때는, 빈 칸을 &nbsp; 이렇게 표현해 줍니다. 그러면 브라우저가 &nbsp; 기호를 빈 칸으로 표시해 줍니다.

예제:

aaa    bbb


이렇게 aaa와 bbb 사이에 공백을 4칸 넣어줄 때에는

aaa&nbsp; &nbsp; bbb


이렇게 합니다. 진짜 공백과 &nbsp; 기호를 번갈아서 쓰면 됩니다.




& l t ;


부등호(<)
괄호로 사용되기도 하고, 수식에서 "무엇보다 적다(Less Than)"는 의미로 사용되기도 하는 기호입니다. 그런데 < 기호는 HTML 파일에 직접 사용할 수 없습니다. (물론 사용해도 브라우저가 알아서 자동으로 처리해 주지만 나중에 에러가 날 수 있습니다.) 왜냐하면 < 기호는 HTML태그를 둘러싸는 기호이기 때문입니다.

제목이 <여기에> 표시됩니다 라는 문자열을 <h1></h1> 태그 안에 넣을 때,

<h1>제목이 <여기에> 표시됩니다</h1>

라고 하면 <여기에> 라는 것도 하나의 HTML태그로 간주되어 버립니다. <여기에> 라는 태그는 없기에 이것은 오류입니다.

따라서 < 기호를, < 이렇게 표기하면 태그와 혼동되지 않고 부등호가 잘 표현됩니다.



& g t;


부등호(>)
위의 경우와 같습니다. 닫는 괄호 또는, "무엇에 비해 크다(Greater Than)"는 뜻.




&amp;


앰퍼샌드(&) 기호는, 위의 경우들에서 보는 것과 같이 이미 특수한 용도로 사용되고 있습니다. 그래서 & 기호 자체를 표현해 주기 위해서는 & 를,&amp; 이렇게 표기해 주어야 합니다.



&quot;


이것은 쌍따옴표(") 하나를 표현하는 것입니다.

<a href="http://www.google.co.kr/">구글 "검색" 홈페이지</a>

가량 이런 링크가 있다고 할 때, 링크를 표현하는 <a> 태그 안에 속성을 나타내기 위해 href="" 이 부분에서 쌍따옴표가 사용되었습니다. 그런데 <a> 태그 안에 자바스크립트를 집어넣을 때, 자바스크립트의 쌍따옴표들이 태그 속성의 쌍따옴표와 겹쳐져 서로 충돌할 수 있습니다. 이때는 아주 심각한 에러가 납니다. 그럴 경우에는 자바스크립트 안의 쌍따옴표들을 &quot; 이렇게 표현하면 해결됩니다.

그러나 링크 제목 안에서는 구글 "검색" 홈페이지 이렇게 따옴표를 사용해도 괜찮습니다. 자바스크립트가 아닌 평범한 문자열에서는 쌍따옴표든 홑따옴표든 따옴표를 따옴표 그대로 사용하면 되고 굳이 &quot; 이렇게 바꾸지 않아도 됩니다.

요약하자면, &quot; 는, 태그 내부의, 쌍따옴표로 둘러싸인 곳 안에서 다시 쌍따옴표를 사용할 때 필요한 것입니다.

즉 &quot; 는 따옴표 충돌의 문제가 있을 때에만 사용하고 보통의 경우에는 사용하지 않습니다.





저작자표시 비영리 변경금지

'웹 퍼블리싱 > Html' 카테고리의 다른 글

ul,li, ol 가운데 정렬하는 방법  (0) 2018.08.14
유튜브 동영상 z-index 값 조정하기  (0) 2015.07.23
유튜브 동영상 자동 재생하기  (0) 2015.07.17
페이스북 현재페이지 보내기 버튼  (0) 2015.07.17
게시글을 네이버 블로그로 보내기  (0) 2015.07.17
튜브 동영상을 게시판 같은 곳에 밀어넣으면,기본적으로는 플레이버튼을 눌러야만 플레이가 되도록 되어있는데요,이거를 그냥 페이지 로딩시 자동으로 재생되게끔 하고 싶으시다면 아래와 같은 방법을 이용해보세요유투브 동영상 공유탭에서 옛날소스 사용하기를 클릭하면 아이프레임이 아니라 엠베드 테그로 바뀝니다....유튜브 동영상의 다음과 같은 Embed 소스중에서<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/-d2aksz2HzI"><param name="wmode" value="transparent"><embed src="http://www.youtube.com/v/-d2aksz2HzI" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355">아래 그림의 노랗게 칠해진 부분처럼 &autoplay=1 를 추가해주시면"<"object width="425" height="355">아래와 같이 자동으로 실행되는 유튜브 동영상을 집어넣을 수 있ㅇㅓ요 




 



저작자표시 비영리 변경금지

'웹 퍼블리싱 > Html' 카테고리의 다른 글

유튜브 동영상 z-index 값 조정하기  (0) 2015.07.23
[HTML 기초] ＆nbsp; ＆amp; ＆lt; ＆gt; ＆quot; 의 의미와 사용법은?  (0) 2015.07.17
페이스북 현재페이지 보내기 버튼  (0) 2015.07.17
게시글을 네이버 블로그로 보내기  (0) 2015.07.17
이미지에 마우스 우클릭시 경고창 띄우기  (0) 2015.07.17

<?php 
$sns_url = googl_short_url('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); 
?> 

<a href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=<?php echo $sns_url ?>&p[title]=<?php echo $title ?>" target="_blank" />버튼위치</a> 

제목과 현재페이지 짧은주소 공유하기





저작자표시 비영리 변경금지

'웹 퍼블리싱 > Html' 카테고리의 다른 글

[HTML 기초] ＆nbsp; ＆amp; ＆lt; ＆gt; ＆quot; 의 의미와 사용법은?  (0) 2015.07.17
유튜브 동영상 자동 재생하기  (0) 2015.07.17
게시글을 네이버 블로그로 보내기  (0) 2015.07.17
이미지에 마우스 우클릭시 경고창 띄우기  (0) 2015.07.17
브라우져 스크롤바 색상변경하기  (0) 2015.07.17


http://blog.naver.com/OpenPostWriteForm.nhn?preContents={원글 내용}&preContentsTitle={원글 제목}&preContentsUrl={원글 주소} 

list.skin.php나 view.skin.php에서 위 형식에 맞게 수정하여 링크를 걸어서 사용하면 됨...




저작자표시 비영리 변경금지

'웹 퍼블리싱 > Html' 카테고리의 다른 글

유튜브 동영상 자동 재생하기  (0) 2015.07.17
페이스북 현재페이지 보내기 버튼  (0) 2015.07.17
이미지에 마우스 우클릭시 경고창 띄우기  (0) 2015.07.17
브라우져 스크롤바 색상변경하기  (0) 2015.07.17
텍스트 블록지정 (드래그) 색상 바꾸기  (0) 2015.07.17


mouse.html




<html> 

<head> 
<title>Untitled</title> 
</head> 
<body> 
<DIV ID=BODY_CONTENTS> 
<div style="width:580; padding: 0; overflow:hidden; word-break:break-all; font-size:16px"> 
<HTML><body> 
<P align=center><img onClick="javascript:BigImage_View(this);" style="cursor:hand" ondragstart="return false" oncontextmenu="alert('이 이미지는 저작권법에 의해 함부로 퍼가실수 없습니다. 만약에 함부로 퍼가시면 처벌받으실수 있습니다.');return false"  alt=positive hspace=0 src="http://www.etorrent.co.kr/data/mw.cheditor/131221/5ee51cad746b00d95f6b7da58a677253_1zG7dEJb73nl6Oq1SnV.gif" border=0><BR><BR> 
<FONT size=2><STRONG>이미지 오른쪽클릭시 경고글 띄우기<BR></STRONG></FONT></P> 
</body></HTML> 
</div> 
</DIV> 
</body> 
</html>





저작자표시 비영리 변경금지

'웹 퍼블리싱 > Html' 카테고리의 다른 글

페이스북 현재페이지 보내기 버튼  (0) 2015.07.17
게시글을 네이버 블로그로 보내기  (0) 2015.07.17
브라우져 스크롤바 색상변경하기  (0) 2015.07.17
텍스트 블록지정 (드래그) 색상 바꾸기  (0) 2015.07.17
div 나 span 등에 tag에서 수직 정렬하기  (0) 2015.07.17

html { 
scrollbar-base-color: #000;  
scrollbar-face-color: #aaa;  
scrollbar-track-color: #aaa;  
scrollbar-highlight-color: #eee;  
scrollbar-3dlight-color: #aaa;  
scrollbar-shadow-color: #888;  
scrollbar-darkshadow-color: #666;  
scrollbar-arrow-color: #333;  
} 

http://criticize.tistory.com/175 참고하시구요.





저작자표시 비영리 변경금지

'웹 퍼블리싱 > Html' 카테고리의 다른 글

게시글을 네이버 블로그로 보내기  (0) 2015.07.17
이미지에 마우스 우클릭시 경고창 띄우기  (0) 2015.07.17
텍스트 블록지정 (드래그) 색상 바꾸기  (0) 2015.07.17
div 나 span 등에 tag에서 수직 정렬하기  (0) 2015.07.17
a 링크 테두리 점선 한번에 없애기  (0) 2015.07.17

+ Recent posts

티스토리툴바