구차니의 잡동사니 모음

왼쪽 메뉴 크기를 고정하고

메인 내용을 가변으로 가득 채우고 싶어서 발악(?) 했는데

의외로 손쉽게 그런 구조로 되어 있는 녀석을 발견 ?!?!?!?

뜯어봐도 이해를 못하겠... OTL

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

결론은. - 마진인가...

다만 float : right 정도?

[링크 : http://stackoverflow.com/.../2-column-layout-left-column-fixed-width-right-fluid-clearboth]

margin : top right bottom left 순서..

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

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

margin: 0 -220px 0 auto;

그럼.. top 0

right -220

bottom 0

left auto ?

흠... iframe이랑 하려니 잘 안되네...

daum.net 뜯어 보다

head가 아닌 header가 보여서 먼가 ... 찾아 봤더니

HTML5 태그라고 한다.

<article>

<aside>

<details>

<figcaption>

<figure>

<footer>

<header>

<main>

<mark>

<nav>

<section>

<summary>

<time>

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

nav도 html5 였구나..

크롬에서 vlc가 안되서 찾아 봤더니

vlc도 npapi를 통해 호출한거라 막혔... OTL

VLC에 PPAPI 버전이 나오기 전까지는 답이 없다는게 함정...

[링크 : http://www.vboxcomm.com/enable-vlc-web-plugin-in-google-chrome-npapi.html?tmpl=component]

    [링크 : https://wiki.videolan.org/OPW_Summer_2014/#Port_VLC.27s_NPAPI_web_plugin_to_PPAPI]

[링크 : https://support.google.com/chrome/answer/6213033?hl=ko]

혹시나 해서 찾아 봤지만

역시나.. 표준으로는 form은 중첩불가! 라고 해놨...

아놔...

Note you are not allowed to nest FORM elements!

[링크 : https://www.w3.org/MarkUp/html3/forms.html]

해결책으로는 jquery 등을 써서 넣었다 뺐다 하는 정도일려나?

[링크 : http://blog.avirtualhome.com/how-to-create-nested-forms/]

넷플릭스로 인해서 알게 된 문제(?) 인데

크롬에서 1080 동영상을 지원하지 않는다는데...

유튜브도 안되는건가?

아니면.. HTML5 video 태그를 통한 재생에서 그렇다는건가?

There are a couple of reasons.

Some content owners don't even allow 720p in the browser (Fox the main one)

Silverlight can't handle over 3000kbps (720p)

HTML5 hasn't had its DRM standardised yet and until it is the browsers looking to abide by standards won't get 1080p. It's only IE 11 on Win8 which takes MS standard approach of going their own way and not following standards which has a DRM that's been fully accepted by the Movie/TV industry

[링크 : https://www.reddit.com/r/netflix/comments/320c3u/all_why_is_it_that_chrome_and_firefox_can_only/]

[링크 : https://productforums.google.com/forum/#!topic/chrome/InUdBrue7Mg]

Netflix system requirements for HTML5 Player and Silverlight

Resolution: Stream in HD if your Internet connection supports 5 megabits per second or more.

Google Chrome up to 720p

Internet Explorer up to 1080p

Microsoft Edge up to 1080p

Mozilla Firefox up to 720p

Opera up to 720p

Safari up to 1080p on Mac OS X 10.10.3 or later

[링크 : https://help.netflix.com/en/node/23742]

[링크 : https://help.netflix.com/ko/node/23742]

HTML5용이라 IE9도 안된다 ㄷㄷㄷ

IE10 부터 적용가능..

<input type="range" />

크롬

IE10(에뮬레이션)

[링크 : http://webtutsdepot.com/2010/04/24/html-5-slider-input-tutorial/]

The id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element should be unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

The style rule below will be applied to the HTML element with id="para1":

The class Selector

The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the name of the class.

In the example below, all HTML elements with class="center" will be red and center-aligned:

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

id는 유일한 거라고 하지만.. 크롬이나 ie에서 실험적으로 해봐도

경고나 에러를 띄우진 않는데.. 머가 맞는걸려나..

[링크 : http://okky.kr/article/89313]

[링크 : http://www.homejjang.com/07/class_id.php

크게는 세가지

1. html에 style을 이용해서 적용

2. css를 끌어와서 적용

3. 어트리뷰트로 사용

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

적어 둔줄 알았는데 없네 -_-

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

포인트는.. li의 display : inline

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

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