« Previous : 1 : 2 : 3 : 4 : 5 : 6 : ... 7 : Next »

html5game - http://html5games.net/

http://html5games.net/ HTML5 만든 게임. jQuery 사용.

Google Pacman -  https://github.com/macek/google_pacman

Classic Bricks - http://billmill.org/static/canvastutorial/index.html


크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/22 18:26 2011/03/22 18:26
,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/5978

[CSS] CSS 의 선택자(Selector)

CSS에서 선택자(Selector)
: CSS 속성(Property) 1개 또는 그 이상의 속성들을 속성블럭(Property block: {} ) 속에 넣어 놓는 것

일반 선택자의 종류
 1. 공용선택자 :  *   (모든 태그를 지정)
  2.타입선택자:  A   (태그 A를 지정)
  3.클래스선택자: .A  (클래스가 A 인 태그를 지정)
  4.ID선택자  :     #A   (아이디가 A인 태그를 지정)

복합 선택자
  1.하위선택자 : A   B  (태그 A로 감싸져 있는 태그 B를 지정)
  2.자식선택자: A > B  (태그 A로 감싸져 있는 태그 B 중 한 단계 밑에 것을 지정)
  3.인접선택자: A + B  (태그 A와 B가 연속으로 나와 있는 것을 지정)

가상클래스 선택자(Selector) 요소
 1. :first-child 선택자  - A:first-child (태그A로 감싸져 있는 가장 처음 태그를 지정)
 2.언어선택자   -  A:lang(B)    (태그A중 언어가 B로 설정된 것을 지정)
 3.링크선택자  -  A:link          (태그A중 링크가 걸려있으면 지정)
                            A:visited    (태그A중 링크가 걸렸고 사용자가 이미 클릭한 태그를 지정)
 4.동정선택자  - A:active
                           A:hover
                           A:focus

기타 선택자
  :Attribute Selector  -  E[attr]
    - Element 에 사용된 속성(attribute)와 속성값등이 seletor로 지정하는 조건과 일치할때 적용.  ex) *[title]{background-color:gold;} /* titleattribute를 사용하는 문서내의 모든 element(*)에 적용 */

   :Attribute Seletor - E[attr="attVal"] 
      - 같은 속성(attribute)의 속성값이 해당 조건과 일치할때 적용
         ex)  a[href="http://www.ngio.co.kr/"]{font-weight:bold;}

  :Attribute Selector  - E[attr~="attVal"]
    - 속성값이 공백으로 분리되어 여러 개일 경우, 값들중에 해당 조건과 일치하는 경우 적용







크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/21 13:40 2011/03/21 13:40
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/5966

모바일웹 모음 - http://m.xiles.net/
사용자 삽입 이미지

크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/18 10:13 2011/03/18 10:13
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/5955

국립중앙박물관 모바일웹 http://m.museum.go.kr/

사용자 삽입 이미지

크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/18 10:07 2011/03/18 10:07
,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/5954

[jQuery] jQuery란 무엇인가?

What is jQuery?

jQuery is a library of JavaScript Functions.

jQuery is a lightweight "write less, do more" JavaScript library.

The jQuery library contains the following features:

    * HTML element selections
    * HTML element manipulation
    * CSS manipulation
    * HTML event functions
    * JavaScript Effects and animations
    * HTML DOM traversal and modification
    * AJAX
    * Utilities
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/16 17:15 2011/03/16 17:15
, , ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/5941

[Web] 구글 API Explorer

https://code.google.com/apis/explorer/
customsearch
diacritize
moderator
translate
urlshortener

크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/09 08:33 2011/03/09 08:33
, ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/5915

[Web] "Mobifying" Your HTML5 Site

* http://www.html5rocks.com/
* http://www.html5rocks.com/mobile/mobifying.html

Developing for the mobile web is a hot topic these days. This year, for the first time ever, smart phones out sold PCs. More and more users are using a mobile device to traverse the web, which means it's becoming critical for developers to optimize their sites for the mobile browsers.

The "mobile" battlefield is still uncharted waters for a large number of developers. Many folks have existing legacy sites that neglect mobile users altogether. Instead, the site was designed primarily for desktop browsing and degrades poorly in mobile browsers. This site (html5rocks.com) is no exception. At launch, we put little effort into a mobile version of the site.





크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/09 08:24 2011/03/09 08:24
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/5914

브라우저 호환성 확인 사이트

http://caniuse.com/
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/01/27 19:00 2011/01/27 19:00
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/5838

HTML5 referencR - https://developer.mozilla.org/en-US/docs


크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/01/20 10:05 2011/01/20 10:05
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/5823

iPad CSS Layout with landscape / portrait orientation modes

http://matthewjamestaylor.com/blog/ipa ··· it-modes
Free iPad CSS layout with landscape/portrait orientation modes

The iPad has finally launched in Australia today, hooray! I will probably get one soon so I can continue to optimise my CSS layouts for as many devices as possible. But in the mean-time I will continue using the iPad emulator that comes with the iPhone SDK.

To celebrate the launch of the iPad I have built a special iPad optimised website layout that uses pure CSS to change layouts in the portrait and landscape orientation modes. The layout can be downloaded for free at the bottom of this article or from my iPad demo page. Here is a basic diagram of how the two orientations look:

iPad CSS layout portrait / landscape designs

In Landscape mode the layout is in two columns. The main content is in a wide left column and three side sections are stacked vertically in a narrow right column. When you rotate the iPad to the portrait orientation the layout changes to a single column design. In portrait mode the main content fills the full width of the screen and the three side content areas are positioned horizontally as three columns under the main content.

In both orientations there is a header at the top and a footer at the bottom. These both change in width from 1024 pixels wide in landscape, and 768 pixels wide in portrait. See my demo page for a more detailed diagram with pixel dimensions. Below are screenshots of my demo layout in the iPad emulator:

iPad CSS layout in the iPad emulator

How does it work?

The first thing I do is lock the layout's resolution to a 1:1 ratio so that each pixel exactly lines up with the pixels in the iPad's screen. I do this with the following META tag:

<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />

Locking the layout to a 1:1 ratio will prevent the zooming-in and out that normally occurs when the iPad is rotated (normally, landscape mode is more zoomed-in because the width of the webpage is displayed across 1024 pixels, as opposed to portrait mode when there are only 768 pixels available).

Next I combine this with some CSS rules that change the layout in portrait and landscape modes. I do this by writing all my landscape styles normally then overwriting some of them with the @media rule at the bottom of the CSS file when the device is in portrait mode. Here is a cut-down version of the CSS:

/*normal styles here */
#wrap {
width:1024px;
}
@media only screen and (orientation:portrait){
/* portrait styles here */
#wrap {
width:768px;
}
}

The method above works beautifully for changing the layout for the two orientations without JavaScript. Check out my iPad layout demo or download the demo files and try it for yourself.


Demo Download (ipad-css-layout.zip - 41kb)


I hope you enjoyed this post. If you are reading this on your brand new iPad then... lucky you! :)


크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2010/12/27 15:41 2010/12/27 15:41
,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/5763

« Previous : 1 : 2 : 3 : 4 : 5 : 6 : ... 7 : Next »

블로그 이미지

- 홍반장

Archives

Recent Trackbacks

Calendar

«   2024/03   »
          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
31            
Statistics Graph

Site Stats

Total hits:
175538
Today:
64
Yesterday:
41