본문 바로가기
반응형

전체 글333

[CSS] @viewport rule [CSS] @viewport rule 지난 시간엔 meta viewport 태그를 배웠습니다 meta viewport (메타 뷰포트 태그) 사용법 head안에 사용하는 이런 것들 말이죠 잠깐 복습하면, 메타 뷰포트 태그(meta viewport)는 애플이 사파리 아이폰 브라우저를 위해 처음 개발했지만 이후 다른 브라우저들(오페라, 안드로이드, 페넥 브라우저)도 채택하여 사용하고 있습니다. 현재는 메타 뷰포트 태그가 널리 사용되고 있지만, 이 태그는 표준이 아니며, W3C에서 메타 뷰포트 태그의 기능들을 @viewport rule로 표준화하려는 시도를 하고 있습니다. (참조: CSS Device Adaptation ) @viewport rule는 현재 제안된 표준으로, 초안 단계입니다. 정식 표준이 되면 .. 2015. 1. 15.
[html5] main 태그 [html5] main 태그 main 요소는 문서의 주요한 내용을 담는 태그입니다. 과 같은 역할 문서에서 main은 하나 이상 있어선 안 되며, 페이지 당 한 번 사용할 수 있습니다. 사이드바, 네비게이션 링크, 저작권 정보에 있던 내용을 main에서 반복해서 사용할 수 없습니다. 또한 main은 article , aside, footer, header, nav의 자손이어선 안 됩니다. main 요소가 문서 영역을 구분짓는 용도로 사용하진 않기 때문. ▶브라우저 지원 ie 지원하지 않음, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+ main 요소를 ie에서 지원할 때까지 "main" ARIA role 추가하는 것도 좋습니다. 내용 *ARIA role이란?.. 2015. 1. 14.
meta viewport (메타 뷰포트 태그) 사용법 meta viewport(메타 뷰포트 태그) 사용법 얼마 전에 meta 태그 사용법이란 글을 썼는데 [html] meta 태그 사용법 위 글에서 다루지 못한(빠진) 것들을 다루어 보려고 해요. 힌트를 주신 admin 님께 감사합니다.^^ 오늘 다룰 부분은 meta viewport(메타 뷰포트 태그) 입니다. 웹페이지 소스를 보면 간혹 head 에 이런 meta 구문을 보신 적이 있으실 거예요. meta viewport 태그는 애플이 아이폰, 아이패드 등 자사의 모바일 브라우저의 뷰포트(viewport) 크기 조절을 위해 만들었습니다. (뷰포트에 대한 설명은 본문 참조) meta viewport 태그는 W3C 명세에는 없지만,(따라서 표준이 아님) iOS 장치(아이폰 운영체제 브라우저 safari)가 널리.. 2015. 1. 9.
[html5] footer 태그 [html5] footer 태그 footer 요소는 문서에 대한 꼬릿말로서, 그 문서에 대한 정보를 담고 있어야 합니다. 대체로 footer가 문서의 끝에 오는 경우가 많지만, 꼭 끝에 올 필요는 없습니다. ▶사용 예 글쓴이 정보, 저작권 정보, 연락처 정보, 사이트 맵, 맨 위로 돌아가기, 관계된 문서 등. 참고로, 글쓴이에 대한 연락처 정보는 address 요소에 속합니다. 한 문서에 여러 개의 footer 요소를 지닐 수 있습니다. footer 요소는 문서의 영역을 구분짓는 sectioning 요소가 아닙니다. 새로운 문서를 소개하지는 않으니까요. ▶브라우저 지원 ie9.0+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+ ▶html/css 적용 예를 .. 2015. 1. 7.
[html5] aside 태그 [html5] aside 태그 오늘은 aside 요소를 다룰 텐데요 ▶우선 aside 영어 뜻을 먼저 살펴 보겠습니다. aside 명사 a remark about someting that is not the main subject of your discusstion 토론의 주요한 주제가 아닌 것에 대한 논평 http://www.macmillandictionary.com/dictionary/british/aside_6 중요하게 눈여겨 볼 부분은 '주요한 주제가 아니라는 것' 이처럼 aside 태그는 주요한 내용이 아니라 부차적인 내용을 담는 태그입니다. aside 요소는, article 요소 안쪽 또는 바깥 쪽에 올 수 있습니다. article 태그 안쪽에 aisde가 있을 때는, aritcle의 본문 내.. 2015. 1. 6.
[html5] nav 태그 [html5] nav 태그 지난 시간엔 header 요소를 배웠습니다. [html5] header 태그 오늘 배울 nav 태그는 사이트에서 주요한 네비게이션 역할을 하는 링크 그룹을 담을 때 사용합니다. nav 요소를 사용하면, 스크린 리더를 이용하는 사용자가 네비게이션을 쉽고 빠르게 찾을 수 있고, 필요하지 않을 경우 건너뛰기 할 수도 있습니다. nav 요소는 header나 article 요소 안에 올 수 있습니다. ▶사용 예 네비게이션 링크이전 페이지로 가기(previous), 다음 페이지로 가기 버튼(next)목차 ▶브라우저 지원 ie9.0+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+ ▶html/css 작성 예 html Home Guest Noit.. 2015. 1. 5.
[html5] header 태그 [html5] header 태그 요소는 사이트 네비게이션이나 페이지에 대한 정보를 담는 태그로, 페이지 상단에 위치합니다. 의 머릿말을 담기도 함. 와 같은 역할. 보통 하나 이상의 제목 요소( h1-h6 나, hgroup)나 사이트 로고, 저작권 정보를 포함합니다. 명세에 따르면 최근에는 요소를 포함할 수 있습니다. 한 문서에 여러 개의 요소가 있을 수 있습니다. 다만, 또는 다른 안에 를 둘 수 없습니다. ▶브라우저 지원 ie9.0+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+ ▶html/css 작성 예입니다. html HEADER The header element represents the header of a section. css header{b.. 2015. 1. 2.
[html5] article vs section 차이 [html5] article, section 차이 html5에 새로운 요소들을 알아보겠습니다 첫 타자로 article과 section 입니다. 요소 article 요소는 내용이 각기 독립적이고, 홀로 설 수 있는 내용을 담습니다. 주로 블로그 글, 포럼 글, 뉴스 기사 등을 article로 묶을 수 있습니다. ▶브라우저 지원 ie9.0+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+ ▶사용 예 쇼셜네트워크 온라인의 가상공간을 통해... ... 요소 section은 서로 관계 있는 문서를 분리하는 역할을 함. 주로, 문서를 다른 주제로 구분짓기 위해 사용됨 ▶브라우저 지원 ie9.0+, chrome 6.0+, firefox 4.0+, safari 5.0+, .. 2014. 12. 30.
웹사이트 운영자라면 알아야할 html, css 상식 웹사이트 운영자라면 알아야할 html, css 상식 크리스마스는 잘 보내셨나요? 저는 25일에 광명 이케아 갔다가 엄청 고생하고 왔습니다 ㅎㅎ 생각보다 가는 대중 교통 편이 너무 복잡하더라구요. 결국 택시 타고 갔는데, 입구에서 30~40분을 기다리고, 레스토랑에서 20분 정도 기다리고 나오면서 길 못찾아 헤매고, 건물 안은 사람들이 미어 터집니다. 그럼에도 가볼만은 했다고 생각은 하지만.... 다음엔 사람 없을 때 가고 싶네요. 며칠 남지 않은 12월, 사람들 많은 데 가서 고생하지 마시고, 조용하고 한적한 곳에서 지난 일을 관조하는 것도 좋을 것 같습니다. 오늘은 연말 결산으로, 지금까지 써온 글 중에 사이트(티스토리, 블로그, 까페 포함) 운영자라면 알아두어야 할 html, css 상식을 다루어 볼.. 2014. 12. 26.
HTML5 기본 레이아웃 HTML5 기본 레이아웃 오늘부터 HTML5에 대해 조금씩 다뤄 보도록 하겠습니다. ▶HTML4 기본 레이아웃 HTML4까지 기본적인 레이아웃을 만들려면 이렇게 작성했습니다. 2014. 12. 24.
반응형