'Programming/javascript & HTML'에 해당되는 글 143건

  1. 2016.01.11 ul li 메뉴 .. 2?
  2. 2016.01.08 div 쪼금 이해 될락말락...
  3. 2016.01.07 setTimeout()와 setInterval()
  4. 2015.11.23 html5 live video streaming...
  5. 2015.09.23 div span 블럭구조 및 원형테두리
  6. 2015.09.16 ul / li로 메뉴 꾸미기
  7. 2015.09.14 <link> 관련 약어 정리
  8. 2015.09.11 node.js / angular.js ...
  9. 2015.09.10 html5
  10. 2015.09.10 html event
Programming/javascript & HTML2016. 1. 11. 09:12

ul li 메뉴 .. 2?

포인트는.. li의 display : inline


끄면 이렇게 처참하게! 듀둥!


2015/09/16 - [Programming/Javascript / HTML] - ul / li로 메뉴 꾸미기


'Programming > javascript & HTML' 카테고리의 다른 글

HTML5용 슬라이더 바  (0) 2016.01.13
반응형 웹... w3cshool 링크  (0) 2016.01.11
div 쪼금 이해 될락말락...  (0) 2016.01.08
setTimeout()와 setInterval()  (0) 2016.01.07
html5 live video streaming...  (0) 2015.11.23
Posted by 구차니
Programming/javascript & HTML2016. 1. 8. 11:40

div 쪼금 이해 될락말락...

내가 원하는 레이아웃이 있는데

그걸 만들려고 지금까지 몇달 걸렸던가 ㄷㄷㄷ


얘는 쉬운데..

top;

menu; float

content; float

라면...

얘는 답이 안나온다.. -_-?!?!?


위와 같은 방법으로 하면

이런식으로 깨어지기만 하니까?


결론은.. div로 싸고 싸고 또 싸고 ㅋ

absolute를 하는 것도 방법이지만 고정 위치이고 여러가지 이유로 웬지 끌리지 않으니


menu ; float

container ; float

    top

    content

식으로 하면 깔끔하게 해결!



[링크 : http://yongja.tistory.com/48]

[링크 : http://mkyoon.com/56]

'Programming > javascript & HTML' 카테고리의 다른 글

반응형 웹... w3cshool 링크  (0) 2016.01.11
ul li 메뉴 .. 2?  (0) 2016.01.11
setTimeout()와 setInterval()  (0) 2016.01.07
html5 live video streaming...  (0) 2015.11.23
div span 블럭구조 및 원형테두리  (0) 2015.09.23
Posted by 구차니
Programming/javascript & HTML2016. 1. 7. 11:39

setTimeout()와 setInterval()

서버에서 시간을 받아와서 웹 브라우저 상에서 

setTimeout()으로 구현된 예제를 보고 있노라니..

pc의 시간과 다르게 가서 고민..


생각해보니까

setTimeout은 1회성으로

내부 루틴에서 처리할거 처리하고 지정을 지정하면

조금씩 조금씩 시간이 밀려 날 걸로 예상이 된다.


그런 이유로 setInterval이 조금은 더 정확한 시간간격으로 수행이 가능하지 않을까? 라고 예상


[링크 : http://www.w3schools.com/js/js_timing.asp]



[링크 : http://honjoo.tistory.com/32]

[링크 : http://charlie0301.blogspot.com/2014/11/javascript-timer.html]


<body onload="setInterval(function(){ function1(); function2();}, 500);">

[링크 : http://stackoverflow.com/questions/6660755/can-a-body-tag-hold-multiply-onload-setinterval]



----

setInterval 버전

<body onload="setInterval(function(){realtimeClock();},1000);">


<script type="text/javascript">

var systime = 20;


function realtimeClock()

{

var cTime = new Date((systime++)*1000); // EN672 System Time

svrTime.innerHTML = getTimeStamp(cTime);

}


function getTimeStamp(d)

{

var s = leadingZeros(d.getFullYear(), 4) + '-' +

leadingZeros(d.getMonth() + 1, 2) + '-' +

leadingZeros(d.getDate(), 2) + ' ' +

leadingZeros(d.getHours(), 2) + ':' +

leadingZeros(d.getMinutes(), 2) + ':' +

leadingZeros(d.getSeconds(), 2);

return s;

}


function leadingZeros(n, digits)

{

var zero = '';

n = n.toString();

if (n.length < digits)

{

for (i = 0; i < digits - n.length; i++)

zero += '0';

}

return zero + n;

}

</script>


<div id="svrTime"></div>


</body> 


setTimeout 버전

<body onload="realtimeClock();">


<script type="text/javascript">

var systime = 20;


function realtimeClock()

{

var cTime = new Date((systime++)*1000); // EN672 System Time

svrTime.innerHTML = getTimeStamp(cTime);

setTimeout("realtimeClock()", 1000);

}


function getTimeStamp(d)

{

var s = leadingZeros(d.getFullYear(), 4) + '-' +

leadingZeros(d.getMonth() + 1, 2) + '-' +

leadingZeros(d.getDate(), 2) + ' ' +

leadingZeros(d.getHours(), 2) + ':' +

leadingZeros(d.getMinutes(), 2) + ':' +

leadingZeros(d.getSeconds(), 2);

return s;

}


function leadingZeros(n, digits)

{

var zero = '';

n = n.toString();

if (n.length < digits)

{

for (i = 0; i < digits - n.length; i++)

zero += '0';

}

return zero + n;

}

</script>


<div id="svrTime"></div>


</body> 


완전하진 않지만 대충.. refresh 해서

setInterval은 2초 늦고 setTimeout은 1초 정도 늦게 시작 했으나


setTimeout은 30분이 지난 시점에서 상당히 벗어나 있음

'Programming > javascript & HTML' 카테고리의 다른 글

ul li 메뉴 .. 2?  (0) 2016.01.11
div 쪼금 이해 될락말락...  (0) 2016.01.08
html5 live video streaming...  (0) 2015.11.23
div span 블럭구조 및 원형테두리  (0) 2015.09.23
ul / li로 메뉴 꾸미기  (0) 2015.09.16
Posted by 구차니
Programming/javascript & HTML2015. 11. 23. 09:21

html5 live video streaming...

canvas에 직접 그리는 느낌이긴한데..

차이점은 모르겠지만...


html5의 video 태그가 live video는 안되는데 반해

웹소켓을 통해서 전송해주고

office-ambient.mpg 파일로 해서 스트리밍을 하는 것 같긴한데 ... 흐음...


[링크 : http://phoboslab.org/log/2013/09/html5-live-video-streaming-via-websockets]

'Programming > javascript & HTML' 카테고리의 다른 글

div 쪼금 이해 될락말락...  (0) 2016.01.08
setTimeout()와 setInterval()  (0) 2016.01.07
div span 블럭구조 및 원형테두리  (0) 2015.09.23
ul / li로 메뉴 꾸미기  (0) 2015.09.16
<link> 관련 약어 정리  (0) 2015.09.14
Posted by 구차니
Programming/javascript & HTML2015. 9. 23. 18:49

div span 블럭구조 및 원형테두리

와. 알수록 신기하네.. ㄷㄷ


[링크 : http://www.w3schools.com/css/css3_borders.asp]

[링크 : http://www.w3schools.com/html/html_blocks.asp]

'Programming > javascript & HTML' 카테고리의 다른 글

setTimeout()와 setInterval()  (0) 2016.01.07
html5 live video streaming...  (0) 2015.11.23
ul / li로 메뉴 꾸미기  (0) 2015.09.16
<link> 관련 약어 정리  (0) 2015.09.14
node.js / angular.js ...  (0) 2015.09.11
Posted by 구차니
Programming/javascript & HTML2015. 9. 16. 11:35

ul / li로 메뉴 꾸미기

으흐흐 이걸로 티스토리 스킨을 꾸며봐야지 ㅋㅋㅋ

(이제와서 이런거 공부하면서 뿌듯해 하는 노인 1인 ㅋㅋㅋ)


[링크 : http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu]

[링크 : http://www.w3schools.com/html/html_lists.asp]

'Programming > javascript & HTML' 카테고리의 다른 글

html5 live video streaming...  (0) 2015.11.23
div span 블럭구조 및 원형테두리  (0) 2015.09.23
<link> 관련 약어 정리  (0) 2015.09.14
node.js / angular.js ...  (0) 2015.09.11
html5  (0) 2015.09.10
Posted by 구차니
Programming/javascript & HTML2015. 9. 14. 11:12

<link> 관련 약어 정리

href = Hypertext REFerence

rel = RELation

type


<head>

    <link rel="stylesheet" type="text/css" href="./style.css" />

</head>


[링크 : http://www.w3schools.com/tags/tag_link.asp]

'Programming > javascript & HTML' 카테고리의 다른 글

div span 블럭구조 및 원형테두리  (0) 2015.09.23
ul / li로 메뉴 꾸미기  (0) 2015.09.16
node.js / angular.js ...  (0) 2015.09.11
html5  (0) 2015.09.10
html event  (0) 2015.09.10
Posted by 구차니
Programming/javascript & HTML2015. 9. 11. 11:10

node.js / angular.js ...

공부할게 드럽게 많네..

일단은 머하는 녀석인지만! 조사

node.js는 서버 미들웨어

angular.js는 MVC 구현체.. 라고 하면되려나?



node.JS에 대해서.

Node.js는 구글의 크롬 V8 자바스크립트 엔진을 기반으로 한, 고성능 네트워크 서버이다.

Single Thread 기반의 Event Loop를 기반으로 하고 있으며, File, Network 등에 대해서 비동기 IO 처리를 하는 서버 미들웨어

[링크 : http://bcho.tistory.com/876]


Angular.js는 구글이 만든 MV*(Model - View - Whatever) 자바스크립트 프레임워크로 원페이지 어플리케이션에서 뛰어나면서 전통적인 웹 어플리케이션에 약간의 "마법"을 부린 것처럼 동작하는 것도 가능하다.

[링크 : http://blog.outsider.ne.kr/975]

'Programming > javascript & HTML' 카테고리의 다른 글

ul / li로 메뉴 꾸미기  (0) 2015.09.16
<link> 관련 약어 정리  (0) 2015.09.14
html5  (0) 2015.09.10
html event  (0) 2015.09.10
jquery  (0) 2015.09.08
Posted by 구차니
Programming/javascript & HTML2015. 9. 10. 13:10

html5

이렇게만 보면 먼가 할게 없어 보이는데... (어?)

[링크 : https://namu.wiki/w/HTML5]


이걸 읽으려니 쥐날거 같네? ㅠㅠ

[링크 : http://www.w3.org/TR/html5/]



결론(?)은 표준 맞추면 읽기 도구라던가 이런걸로 더 편하게 할 수 있다,.

nav 태그가 시맨텍 웹 관련 추가됨

font / applet / frame 이 사용불가!


frame이 불가능해졌기에 ajax 열풍이 분걸려나?

'Programming > javascript & HTML' 카테고리의 다른 글

<link> 관련 약어 정리  (0) 2015.09.14
node.js / angular.js ...  (0) 2015.09.11
html event  (0) 2015.09.10
jquery  (0) 2015.09.08
div 태그  (0) 2015.09.08
Posted by 구차니
Programming/javascript & HTML2015. 9. 10. 09:04

html event

뜬금없는 깨달음

아.. 이래서 HTML5를 쓰는구나(onresize 이벤트... 요녀석.. 반응형 웹의 핵심?)


[링크 : http://www.w3schools.com/tags/ref_eventattributes.asp]

'Programming > javascript & HTML' 카테고리의 다른 글

node.js / angular.js ...  (0) 2015.09.11
html5  (0) 2015.09.10
jquery  (0) 2015.09.08
div 태그  (0) 2015.09.08
javascript closure  (0) 2013.01.07
Posted by 구차니

티스토리툴바