본문 바로가기
반응형

html54

[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.
HTML5 기본 레이아웃 HTML5 기본 레이아웃 오늘부터 HTML5에 대해 조금씩 다뤄 보도록 하겠습니다. ▶HTML4 기본 레이아웃 HTML4까지 기본적인 레이아웃을 만들려면 이렇게 작성했습니다. 2014. 12. 24.
IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법) IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법) 우리나라에서 자주 사용하는 브라우저는 인터넷 익스플로러(IE)와 크롬(chrome) 정도로 구분할 수 있을 것 같은데요. 사용하는 버전도 다양해서 IE만 보자면 IE11버전 점유율이 가장 높고 IE7이 20% 정도, IE8이 30% 정도 입니다. (이건 구글 애널리틱스에 기반한 제 개인적인 통계입니다.) 브라우저 점유율 (IE, 크롬 점유율 비교) 블로그 운영자라면, 이 수치는 무시할 수 없는 수준이고, 웹사이트 개발자라면 1% 미만도 안 되는 IE6 이용자까지도 고려해서 사이트를 설계해야 할 경우도 있습니다. IE 구 버전(IE6~8)의 문제 인터넷 익스플로가 초반에 무료로 배포되면서 우리나라에는 유독 IE 이용자가 많습니다. 다.. 2014. 12. 19.
html5shiv 삽입하기 (ie6-8에서 html5 적용하기) html5shiv 삽입하기 (ie6-8에서 html5 적용하기) 며칠째 글이 잘 써지지가 않네요. 이야기를 하지 않으려 했지만, 앞으로 글이 올라오는 주기가 길어지면 주인장이 어딘가 변했다고 생각을 하실 수도 있어 말씀 드립니다. 지금 제가 임신 3개월째입니다.^^ 그래서인지 무슨 일을 하나 끝내기에 체력이 많이 딸려요. 개인적으로 하고 있는 일도 있어... 예전만큼 글을 자주 올리지는 못할 것 같아요. 일주일에 2회 정도로 생각하고 있어요. 컨디션이 좋아지면 더 열심히 해야겠죠.. 사실 월요일부터 gradient 속성을 정리해 보려 했는데, 공부해야 할 부분이 너무나 광범위하더라고요. 아니면 현 시점이라 그런 생각이 부쩍 드는지 모르겠어요. 버거운 gradient 속성 정리는 다음으로 미루고 html5.. 2014. 12. 18.
[html] meta 태그 사용법 [html] meta 태그 사용법 html 강좌 초기에 에 들어가는 태그란 제목에서 잠깐 meta 태그를 언급했습니다. head 에 들어가는 태그 (title, style, script, meta 태그) html을 공부하는 사람뿐 아니라 블로그나 웹사이트를 운영하는 분들은 자신의 사이트가 좀 더 상위 노출되길 바라는 마음에서 이 meta 태그를 어떻게 활용할까 생각해 보셨을 법한데요. 오늘은 이 meta 태그 사용법을 자세히 알아 볼까 합니다. 우선 기초적인 부분을 공부하고 맨 마지막에 현재 meta 태그가 검색 엔진에서 어떻게 쓰이고 있는지, 잘 활용하는 방법도 알아볼게요. meta태그는 metadata(정보에 대한 정보를)제공하는 역할을 합니다. 쉽게 말해, 사이트 자체에 대한 정보나, 저작자, 문서.. 2014. 12. 17.
[html5] datalist 태그 [html5] datalist 태그 datalist 태그는 html5에 새로 추가된 속성으로, form 요소에서 미리 지정된 옵션 목록을 제공합니다. 쉽게 말해, 사용자들이 특정 글자를 입력하면 그에 해당하는 미리 지정된 목록을 보여줍니다. ▶사용 예: 사용 예에서 본 것처럼, datalist는 option목록을 지닌 요소 안에서 사용하며 의 list 속성은, 의 id와 같은 값을 사용해 함께 묶을 수 있어요. 예: ▶브라우저 지원: ie10+, chrme 20+, ff 4.0+, opera 9.0+ html 작성 예를 보겠습니다~ html 통학 수단을 선택하세요 ▶ 실행화면 b를 클릭하면 b에 해당하는 자동 완성 목록(bus/ bicycle)이 나타납니다. 오늘로서 html form 양식에 관련한 태그.. 2014. 10. 28.
fieldset 태그, legend 태그 [html] fieldset 태그, legend 태그 지난 시간에 optgroup 태그는 관계 있는 옵션들끼리 묶는 역할을 한다고 했습니다. [html] optgroup 태그 fieldset 태그도 이와 유사합니다. fieldset은 form 양식에서 관계된 요소들끼리 묶어주며, 관계 요소 주위에 박스를 그립니다. fieldset은 주로 legend 태그와 함께 쓰이는데, fieldset 요소에 대한 설명글 입니다. fieldset 문법: 내용 legend 문법: 내용 ▶함께 사용할 수 있는 속성 속성 속성값 설명 name text fieldset 이름 form form id fieldset이 속한 form의 id disabled disabled form에서 관계 요소그룹이 비활성화 됨 문법: , xht.. 2014. 10. 27.
[html] optgroup 태그 [html] optgroup 태그 며칠 전 option 태그를 배웠습니다. [html] option 태그 option은 select 태그나 datalist 태그 안에서 사용하여, 드롭다운 목록을 만드는 역할을 합니다. optgroup 태그는 옵션 목록이 길 경우 관계 있는 옵션들끼리 묶어주는 기능을 합니다. 주로 label 속성과 함께 사용 문법: 내용 ▶함께 사용할 수 있는 속성 속성 속성값 설명 disabled disabled 옵션 그룹이 비활성화 됨 문법: , xhtml에서는 label text 옵션 그룹에 대한 설명 html 작성 예를 보겠습니다~ html 신발 사이즈 선택 225mm 230mm 235mm 255mm 260mm 265mm ▶실행 화면 female 과 male로 구분이 되어 표시가 .. 2014. 10. 24.
반응형

티스토리툴바