달력

112020  이전 다음

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  •  
  •  
  •  
  •  
  •  


<link href="style.css?v=<?=filemtime('./style.css')?>" rel="stylesheet" type="text/css" />


위같이 파일 수정시간을 변수로 넣어주면 웹브라우져가 css파일을 새로운 파일로 인식하고 웹브라우져가 서버에서 파일을 다시 가져온다.


랜덤한값을 변수로 넣는 경우에는, 매번 css파일을 새로 불러오기 때문에 웹페이지 로딩에 영향을 미친다.


특히 스타일에서 백그라운드 이미지등으로 이미지를 보여주는 부분이 있을경우, 


해당 이미지는 매번 새로 다운을 받기 때문에, 로딩속도에 영향을 적게미친다 할수 없을것이다.


그러므로 css파일이 수정되었을때만 새로 받아오게 하기 위해 filemtime 사용을 추천한다.



Posted by 낭군

댓글을 달아 주세요

date_txt1.text = this.loaderInfo.parameters.inVar1;
Posted by 낭군

댓글을 달아 주세요

js를 이용한 스크롤 따라다니는 레이어는 부드럽기는 하지만 스크롤에 딱 달라붙어있는 느낌을 주진 못한다.

하지만 css를 이용하면 스크롤에 딱 달라붙는 느낌의 레이어를 띄울수 있다.
<div style="position: fixed;z-index:1;LEFT:expression((document.body.clientWidth-1034)/2+1035);top:230px;width:60px;left:1226px;border:solid 1px #CCC;"></div>

위 소스를 사용하기 위해서는 해당 페이지에
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">

선언을 해주어야 한다.
Posted by 낭군

댓글을 달아 주세요

  1. ㅎㅎ  댓글주소 수정/삭제 댓글쓰기 2010.08.21 11:48

    <!DOCTYPE > 만해줘도됨.. ㅋㅋ

        <div style="float:left;">
         글쓴이 :
        <span class='member'>관리자</span>        </div>
        <div style="float:right;">
        <img src="../skin/board/basic/img/icon_view.gif" border='0' align=absmiddle> 조회 : 5                         
        </div>

'HTML' 카테고리의 다른 글

플래시에서 외부변수 받기  (0) 2010.08.13
스크롤 따라다니는 레이어  (1) 2010.01.13
한줄 안에서 서로 정렬을 다르게 지정  (0) 2009.05.20
이미지와 텍스트 정렬시  (0) 2009.05.20
동영상 컨트롤러 샘플  (0) 2009.05.20
동영상 재생 태그2  (0) 2009.05.20
Posted by 낭군

댓글을 달아 주세요


align=absmiddle

'HTML' 카테고리의 다른 글

스크롤 따라다니는 레이어  (1) 2010.01.13
한줄 안에서 서로 정렬을 다르게 지정  (0) 2009.05.20
이미지와 텍스트 정렬시  (0) 2009.05.20
동영상 컨트롤러 샘플  (0) 2009.05.20
동영상 재생 태그2  (0) 2009.05.20
동영상 재생 태그1  (0) 2009.05.20
Posted by 낭군

댓글을 달아 주세요

동영상 컨트롤러 샘플

HTML 2009. 5. 20. 09:56
진행바 볼륨바 일시정지 앞뒤2배속 등.

'HTML' 카테고리의 다른 글

한줄 안에서 서로 정렬을 다르게 지정  (0) 2009.05.20
이미지와 텍스트 정렬시  (0) 2009.05.20
동영상 컨트롤러 샘플  (0) 2009.05.20
동영상 재생 태그2  (0) 2009.05.20
동영상 재생 태그1  (0) 2009.05.20
div 스크롤  (0) 2009.05.20
Posted by 낭군

댓글을 달아 주세요

동영상 재생 태그2

HTML 2009. 5. 20. 09:56
오늘은 웹상에서 음악을 재생하고자 할때 쓰이는 코드 중에 OBJECT 를 이용한 방법에 대해서 알아보기로 하겠습니다.
우선, 미디어 플레이어를 새창으로 띄우지 않고, 컨트롤러만 보이게하는 방법은 저번 시간에 알아 보았습니다. 여기에 OBJECT 와 PARAM을 이용해서 좀 더 다양한 기능을 컨트롤 할 수 있습니다.
가령 예를 들어, 뒤로 가기, 앞으로 가기 버튼을 없앤다던가, 링크 방지를 위해서 마우스 클릭 시 반응이 안되게 한다던가 말이죠. 또한 저번 시간에 배웠던 autostart라던지 loop 등의 기능은 모두 이 태그 안에 포함되어 있습니다.

우선 기존 EMBED 태그가 들어가는 자리에 아래의 코드를 삽입합니다.


<OBJECT classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="300">
<PARAM NAME="Filename" VALUE="음악 파일 경로(예: http://rhythmer.net/media/268/268092.asf)">
<param name="ClickToPlay" value="true">
<param name="AutoSize" value="true">
<param name="AutoStart" value="true">
<param name="ShowControls" value="true">
<param name="ShowAudioControls" value="true">
<param name="ShowDisplay" value="false">
<param name="ShowTracker" value="true">
<param name="ShowStatusBar" value="false">
<param name="EnableContextMenu" value="false">
<param name="ShowPositionControls" value="false">
<param name="ShowCaptioning" value="false">
<param name="AutoRewind" value="true">
<param name="Enabled" value="true">
<param name="EnablePositionControls" value="true">
<param name="EnableTracker" value="true">
<param name="PlayCount" value="1">
<param name="SendWarningEvents" value="true">
<param name="SendErrorEvents" value="true">
<param name="SendKeyboardEvents" value="false">
<param name="SendMouseClickEvents" value="false">
<param name="SendMouseMoveEvents" value="false">
<param name="ShowGotoBar" value="false">
<param name="TransparentAtStart" value="false">
<param name="Volume" value="0">
</OBJECT>


여기서 눈치빠른 분들이시라면 대략적인 응용 방법은 눈치 채셨을꺼라 믿습니다.

<PARAM NAME="Filename" VALUE="음악 파일 경로(예: http://rhythmer.net/media/268/268092.asf)">

이 부분에서 음악 파일 경로를 삽입하고,
밑부분의 <param name> 부분은 기능을 제어하는 태그입니다.

만약 링크 못가져가게 마우스 우측 클릭 후 나타나는 정보창을 막고자 한다면,

<param name="EnableContextMenu" value="false">

이 부분에서 value 값을 true 혹은 false 로 지정하면서 제어할 수 있습니다.
보기와 같이 false로 지정하면 우측 클릭을 해도 반응을 하지 않습니다.
유용하게 쓰이겠죠? ^^


이제 하나하나의 기능을 살펴보기로 할까요?


<param name="ClickToPlay" value="true">
: 동영상 등을 재생할때 화면을 클릭하면 일시 정지되거나 다시 재생하는 기능을 제어하는 기능입니다. true / false로 제어합니다.

<param name="AutoSize" value="true">
: 화면의 비율을 자동으로 제어할 것인지, 말 것인지를 제어하는 기능입니다.
true로 해 놓으면 원래 정해진 화면 비율로 자동으로 재생됩니다.

<param name="AutoStart" value="true">
: 저번 시간에 알아보았던 autostart와 같은 기능입니다.
false로 해놓으면 재생 버튼을 클릭해야 플레이 됩니다.

<param name="ShowControls" value="true">
: 이것 역시 저번 시간에 알아보았던 hidden 태그와 같은 기능으로 false로 지정시 미디어 콘트롤러가 보이지 않게 됩니다.

<param name="ShowAudioControls" value="true">
: 이 기능은 미디어 플레이어 우측의 볼륨 조절기능과 음소거 기능을 제어하는 기능입니다.
false로 지정하시면 볼륨 조정과 음소거 기능이 사라집니다.

<param name="ShowDisplay" value="false">
: 이 부분은 콘트롤러 아래에 음악이나 동영상 파일의 정보를 출력할 것인가 말것인가를 제어하는 부분입니다.
true로 해 놓을 경우 아래에 쇼, 클립, 만든이, 저작권 등의 기능이 출력됩니다.

<param name="ShowTracker" value="true">
: 재생 구간을 보여주는, 재생이 되면서 옆으로 움직이는 부분, 트랙커를 제어하는 기능입니다.
이 부분을 움직여서 원하는 부분만을 들을 수도 있지요.
false로 지정시 트랙커가 사라집니다.

<param name="ShowStatusBar" value="true">
: 컨트롤러 아래에 버퍼링과 남은시간/총시간 을 보여주는 한줄의 정보창을 제어하는 부분입니다.
false로 해놓으면 보이지 않습니다.

<param name="EnableContextMenu" value="true">
: 앞서도 언급했던 마우스 클릭시 나타나는 메뉴를 제어하는 기능입니다.
false로 해놓으면 우측 클릭을 해도 등록정보 등이 있는 메뉴가 나타나지 않습니다.

<param name="ShowPositionControls" value="true">
: 이 부분은 컨트롤러의 뒤로 가기(▶▶), 앞으로 가기(◀◀) 등의 버튼을 제어하는 부분입니다.
false로 해놓으면 재생 버튼과 정지 버튼만 출력됩니다.

<param name="ShowCaptioning" value="false">
: 동영상 등의 자막이 있을때 이를 제어하는 기능입니다.
음악 파일 재생시는 false로 해놓으시면 됩니다.

<param name="AutoRewind" value="true">
: 재생이 끝났을 경우 이 부분을 true로 해놓으면 자동으로 처음으로 돌아갑니다.
false로 해놓으면 끝부분에 그대로 머물러 있습니다.

<param name="PlayCount" value="1">
: 저번 시간에 배웠던 loop와 같은 기능으로 플레이 반복 횟수를 결정합니다.
'-1'로 해놓으면 무한 반복 됩니다.

<param name="Volume" value="0">
: 재생시 자동으로 설정할 볼륨 량을 지정해주는 부분입니다.
보기와 같이 0으로 해놓으면 최대 볼륨으로 재생됩니다.



자! 여기까지 자주 사용하는 param 기능에 대해서 살펴보았습니다.
위의 예시를 메모장에 붙여놓고 HTML 파일로 만들어 놓고, 하나씩 고쳐가며 기능을 살펴보시면 더욱 이해가 빠를 것이라 생각됩니다.

그럼 여기까지! 분위기 다운되면 다시 돌아온다! -_-; 후다닥~

'HTML' 카테고리의 다른 글

이미지와 텍스트 정렬시  (0) 2009.05.20
동영상 컨트롤러 샘플  (0) 2009.05.20
동영상 재생 태그2  (0) 2009.05.20
동영상 재생 태그1  (0) 2009.05.20
div 스크롤  (0) 2009.05.20
form 테그 줄안바뀌게.  (0) 2009.05.20
Posted by 낭군

댓글을 달아 주세요

동영상 재생 태그1

HTML 2009. 5. 20. 09:55
안녕하세요. 봉구입니다.
오늘은 웹페이지에서 음악을 재생할 시에 많이 사용하시는 Embed 태그에 대해서 자세히 알아보고, 다음 시간에는 Object 코드와 함께 사용하면 어떠한 변화가 있는지에 대해서 살펴보기로 하겠습니다.

● Embed 태그 파헤치기!
웹상에서 음악을 재생할 수 있는 코드는 다들 알고 계시 듯이 <embed src="음악파일의 경로명"> 입니다. 여기에 몇가지 코드로 기능을 제어할 수 있습니다.

※ 크기 조절하기

뒤에 width 와 height 라는 태그를 넣어서 플레이어 창을 조절할 수 있습니다.
이때는 콘트롤 바도 같이 줄어들게 됩니다.

ex) <embed src="음악파일의 경로명" width="200" heigt="500"> :  플레이어 크기를 가로 200 세로 500으로 나오게 한다.

※ autostart="true 또는 false"

: 해당 페이지를 열었을때 음악을 자동으로 재생하게 하느냐(true), 아니면 플레이 버튼을 눌러야 재생되게 하느냐(false)를 결정하는 태그입니다. 이 태그를 넣지 않으면 자동으로 재생됩니다.
ex) <embed src="음악파일의 경로명" autostart="true">    :  자동으로 재생
     <embed src="음악파일의 경로명" autostart="false">  :  수동으로 재생

※ hidden="true 또는 false"

: 음악을 재생하는 미디어 플레이어가 보이게 하느냐 안보이게 하느냐를 결정하는 태그입니다. 마찬가지로 "false"를 입력하면 음악만 들리게 되며, 태그를 넣지 않으면 기본적으로 보이게 설정되어 있습니다.
ex) <embed src="음악파일의 경로명" hidden="true">    :  미디어 플레이어가 안보임
     <embed src="음악파일의 경로명" hidden="false">  :  미디어 플레이어가 보임

※ loop

: loop는 말 그대로 곡의 반복 재생 횟수를 결정해주는 태그입니다.
무한 반복을 원하시면 "-1"을 넣어주시면 됩니다.
ex) <embed src="음악파일의 경로명" loop="-1">


자. 오늘은 기본적인 음악 재생 태그를 알아보았습니다. 다음 시간에는 약간 수준을 높여서 콘트롤 바의 형식과 기타 여러 가지 기능을 태그로 제어할 수 있는 object와 param 태그에 관해서 알아보기로 하겠습니다.
감사합니다. :)

'HTML' 카테고리의 다른 글

동영상 컨트롤러 샘플  (0) 2009.05.20
동영상 재생 태그2  (0) 2009.05.20
동영상 재생 태그1  (0) 2009.05.20
div 스크롤  (0) 2009.05.20
form 테그 줄안바뀌게.  (0) 2009.05.20
메뉴, 드래그 차단  (0) 2009.05.20
Posted by 낭군

댓글을 달아 주세요

div 스크롤

HTML 2009. 5. 20. 09:54
overflow: auto;

'HTML' 카테고리의 다른 글

동영상 재생 태그2  (0) 2009.05.20
동영상 재생 태그1  (0) 2009.05.20
div 스크롤  (0) 2009.05.20
form 테그 줄안바뀌게.  (0) 2009.05.20
메뉴, 드래그 차단  (0) 2009.05.20
은은하게 페이지 넘어가는 효과 ie 전용  (0) 2009.05.20
Posted by 낭군

댓글을 달아 주세요

form 테그 줄안바뀌게.

HTML 2009. 5. 20. 09:50
<form style='display:inline'>
</form>

.

'HTML' 카테고리의 다른 글

동영상 재생 태그1  (0) 2009.05.20
div 스크롤  (0) 2009.05.20
form 테그 줄안바뀌게.  (0) 2009.05.20
메뉴, 드래그 차단  (0) 2009.05.20
은은하게 페이지 넘어가는 효과 ie 전용  (0) 2009.05.20
아이프레임 배경 투명.  (0) 2009.05.20
Posted by 낭군

댓글을 달아 주세요