본문 바로가기
[HTML5] Video 태그에 대해 알아보자. Video 태그에 대해 알아보자. HTML5 가 주목받는 대표적인 이유 중 하나는 바로 이 Video 태그의 등장. 이 Video 태그가 등장하므로서 추가적인 plug-in 설치 없이도 규정된 format으로 된 video 들을 쉽게 돌릴 수 있다. 참고로 Audio 파일도 돌릴 수 있다. 우선 요 녀석 태그 속성들부터 알아보자. Video 태그 속성들 속성 값 설명 muted muted 소리재생에 대한 값. 현재는 muted 만 지원 autoplay autoplay 페이지 로딩 완료 후 동영상 자동재생여부 controls controls play, pause 등의 control 을 표시할지 결정 height (pixel 단위) player 의 높이 loop loop 동영상 반복 재생여부 poster u.. 2013. 6. 21.
[CSS] display:block 과 display:inline 의 차이점에 대해 알아보자. CSS, display:block 과 display:inline의 차이점. 자동 줄바꿈! block으로 설정된 컴퍼넌트는 자동줄바꿈 O.inline으로 설정된 컴퍼넌트는 자동줄바꿈 X. width, height, margin, padding 속성들! block으로 설정된 녀석은 width, height, margin, padding 속성 사용이 가능한 반면 inline으로 설정된 녀석은 해당 속성들을 사용하지 못한다. 대표 component 는? display:block 이 설정되는 대표적 component 는 div.display:inline 이 설정되는 대표적 component 는 span. Block, component, css, CSS3, display, display:block, display:.. 2013. 6. 20.
jQuery, CSS Selector 모음 ( Reference ) jQuery, CSS Selector 모음 ( Reference ) 출처 : w3 스쿨 Selector Example Selects * $("*") All elements #id $("#lastname") The element with id="lastname" .class $(".intro") All elements with class="intro" .class,.class $(".intro,.demo") All elements with the class "intro" or "demo" element $("p") All elements el1,el2,el3 $("h1,div,p") All , and elements :first $("p:first") The first element :last $("p:l.. 2013. 6. 16.
[CSS] position 속성에 대해 알아보자. CSS, position 속성에 대해 알아보자. CSS property 중에 position 값에 relative 라는 녀석을 만나게 되었다.이 녀석은 뭐하는 녀석일까? 궁금해하다 position 속성 자체에 대해 공부하게 되었다. position 값에 들어갈 수 있는 값은 static, absolute, relative, fixed, inherit 이다. position:static static 값은 기본값이기 때문에 position 값을 써주지 않으면, 자동으로 static position이 된다.이 static position은, 화면의 왼쪽상단부터 element 들을 배치한다.최초 element는 최좌상단에, 그리고 그 다음 element 는 그 오른쪽에 붙는데 만약 공간이 부족하다거나, bloc.. 2013. 6. 15.
[HTML] 여러해상도의 단말 모두 지원하기. HTML, 여러 해상도의 단말 모두 지원하기. 스마트폰이 나오면서 & mobile page 들이 등장하면서많은 내용을 적은 화면에 display 해야 하는 문제들이 생겨났다. mobile page 전용으로 layout 을 다시 하고, 표시하는 정보의 내용들을 depth 를 두어 나타내는 방법으로 해결하곤 했지만, 모바일 device 의 종류가 다양해지면서 이제는 여러 해상도의 단말들에서 최적화된 look 을 보여주는 issue 가 또 다시 제기되었다. 하여, 이전부터 W3C 가 권고하였듯 HTML, CSS, JavaScript 를 다른 파일로 구성하는 것이 좋고,이 방법을 따르면, HTML 이 불려지는 시점에 해상도에 따른 CSS 파일을 지정하여 불러올 수 있어 여러 해상도를 지원할 수 있다. 위와 같은.. 2013. 6. 13.
[CSS] 주석 쓸 때 주의사항 ( CSS Syntax Checker ) CSS, 주석 사용할 때 주의사항( CSS Syntax Checker ) 오늘 CSS 관련 실습을 하던 중에.. 엄청나게 많은 시간을 쓸 데 없는 데 사용하고 말았다.CSS 에서도 주석이 된다는 것을 알고 있어서 필자는 // 가 single line 주석으로 사용될 수 있는 줄 알았다.하지만, CSS 에서 제공하는 주석은 오직 /* */ 형태라는 것. 그래서 // 를 쓰기 되면 간혹가다 다음 라인에 있는 CSS 정의가 제대로 반영이 안 되는 경우가 생긴다. 이 single line comment 에 대한 오해때문에 약 30분이나 낑낑댔다는...CSS 도 빨리 eclipse 처럼 syntax checker 가 있으면 좋겠다는 생각을 했는데..이런게 없을 리 없다. 그래서 검색해보았다. W3C 에서 제공하는.. 2013. 6. 9.
[servlet] 한글이 깨지는 현상 해결 방법. Servlet 에서 한글이 깨지는 현상 해결 방법 오랜만에 Servlet 관련 프로그래밍을 했더니, 한글이 깨지는 현상을 겪었다.구글링을 해본 결과, 그리고 내가 troubleshooting 을 위해 이것저것 해본 결과Servlet 을 통해서 무언가 Data 를 주고, 받을 때, 예외없이 항상 인코딩에 신경을 써야 한다. 모든 문서를 UTF-8 인코딩으로 다루자. JSP 의 경우 상단에 다음과 같이 인코딩 코드를 추가한다. Response 를 보낼 때 아래와 같이 encoding 해서 보내준다. res.setContentType( "text/html;charset=UTF-8" ); GET 방식으로 URL 에 파라미터를 넘길 때 아래와 같이 인코딩 해서 보내준다. encodeURIComponent( "파라.. 2013. 5. 28.
[JavaScript/Tutorial] Closure 와 Function.bind 의 사용. Closure와 Function.bind 의 사용 [이전강좌] Scope. var 없이 변수 정의하면? Global variable 접근방법은? Closure Closure 는 Scope 의 확장판으로 이해할 수 있다. Function 에 Parameter 형태로 Variable 을 전달하여, 해당 변수를 Local 화 시키는 것도 Closure이고, Outer scope 접속을 위해 임의의 variable 에 this 를 저장한 후, sub procedure 를 실행하는 형태도 Closure 하고 한다. // 변수 로컬화 closure var localizeFunction = function( localizedIndex ){ return function(){ alert( localizedIndex );.. 2013. 5. 26.
[JavaScript/Tutorial] Scope. var 없이 변수 정의하면? Global variable 접근방법은? Scope. var 없이 변수 정의하면? Global variable 접근방법 [이전강좌] this 란 무엇인가? this 가 가르키는 건 무엇인가? 주의사항은? Global Variable 접근방법 global scope 는 window object 를 통해서 접근가능. window.variable var 없이 변수정의 하면? 변수선언시 var 를 잊어버리고 쓰지 않으면, 자동으로 global 로 정의된다.이는 코드의 가독성을 떨어뜨리는 나쁜 코드의 지름길이므로 피해야 한다. [다음강좌] Closure 와 Function.bind 의 사용. global scope, Global Variable, javascript, javascript tutorial, js, js tutorial, Scope, Var.. 2013. 5. 24.
반응형

티스토리툴바