본문 바로가기
반응형

html54

[html] mark 태그 [html] mark 태그 mark 태그는 사용자에게 관계된 텍스트를 강조하고자 할 때 사용합니다. ▶브라우저 지원 ie9+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+ ▶mark 요소 사용 예 1. 검색 결과에서 찾은 키워드를 두드러지게 표시하여 사용자가 원하는 것을 쉽게 찾을 수 있도록 함. 2. 인용할 때 특정 텍스트를 강조하게 위해 strong, em, mark 태그 차이 텍스트를 강조하는 의미에서 세 가지가 쓰일 수 있는데, 각기 용도가 다릅니다 em. 강세를 둔 강조. emphasized text 약자로 이탤릭체로 표시함. 강조의 위치는 문장의 의미를 바꿈 Cats are cute animals. '고양이'에 강조 Cats are cute an.. 2015. 3. 3.
[html] abbr 태그 [html] abbr 태그 abbr 태그는 두문자어(acronym)와, 약어(abbreviation )에 사용하는 요소로, 브라우저나 검색엔진에 유용한 정보를 줍니다. 넷스케이프가 abbr 요소를 만들고, 마이크로소프트가 acronym을 만들어 두 요소 다 html4까지 사용하고 있었지만, 두 정의가 혼동스럽고 브라우저 지원도 저마다 달라, html5부터 acronym은 퇴화 요소로 규정합니다. html5부터는 두문자어와, 약어에 모두 abbr 태그를 사용합니다. 참고 acronym: 단어의 머리글자를 딴 말. NATO는 North Atlantic Treaty Organization의 두문자어임 '나토'라고 읽음. abbreviation: 쉽게 알아들을 수 있도록 줄인 말. BBC는 British Bro.. 2015. 3. 2.
HTML5 퇴화 요소(deprecated, obsolete 차이) HTML5 퇴화 요소(deprecated, obsolete 차이) 예전에 table에서 퇴화 속성에 대해 적은 적이 있는데, 어떤 분이 퇴화 속성인데 왜 여전히 정상적으로 작동하는지 질문하신 분이 계셨습니다. table 태그, tr 태그, th 태그, td 태그와 table 속성 정리 저도 궁금하던 차였는데, 마침 글을 읽다가 deprecated, obsolete 차이에 대해 나온 글이 있어서 정리해 보았어요. 더불어 html5에서 퇴화로 규정된 태그를 살펴볼까 합니다. 우선 용어 정의부터.... 제 블로그엔 '퇴화 요소' '퇴화 속성'이란 단어가 많이 등장하는데 deprecated와 obsolete를 저는 통일해서 '퇴화'라고 설명해 놓았습니다. 하지만 두 단어엔 차이가 있습니다. deprecated .. 2015. 2. 27.
이미지맵 태그(map, area 태그) 이미지맵 태그(map, area 태그) map 태그는 이미지맵을 만드는 태그입니다. 이미지맵이란 클릭할 수 있는 영역을 지닌 이미지를 말합니다. map 요소는 몇 가지의 area 요소를 포함합니다. area 요소는 이미지맵에서 영역을 지정합니다. 사용 예: map 요소의 name(또는 id) 속성은 img 요소의 usemap 속성과 관계가 있습니다. 따라서, usemap과 name 이름은 동일해야 함. name과 id를 반복해서 쓴 이유는, name 속성이 xhtml에서는 퇴화 속성이기 때문. ▶함께 사용할 수 있는 속성 속성 속성값 설명 alt text area 대체 텍스트. Href 속성이 있으면 필수 coords area의 좌표. 0,0이 상단 왼쪽임 x1, y1, x2, y2 사각형 모양일 때(s.. 2015. 2. 25.
[html5] figure 태그, figcaption 태그 [html5] figure 태그, figcaption 태그 책이나 잡지에서 이미지, 차트 등이 나올 때 이를 설명하는 문구와 함께 소개됩니다. figure 요소는 이처럼 사진, 도표, 삽화, 오디오, 비디오, 코드 등을 담는 컨테이너 역할을 하는 태그이고, figcaption 요소는 이에 대한 설명하는 문구를 담는 태그 입니다. figcaption 요소는 선택적이며, figure 요소 안에 사용합니다 (내용 앞 뒤로 올 수 있음) figcaption 요소는 figure 요소에서 한 번만 사용할 수 있으며 figure 안에는 여러 가지의 자식 요소(img, code 등)을 포함할 수 있습니다. ▷ 브라우저 지원 ie 9.0+, chrome 6.0+, firefox 4.0+, safari 5.0+, oper.. 2015. 1. 20.
IE 문서 모드란(meta http-equiv="x-ua-compatible" content="IE=edge") IE 문서 모드란(meta http-equiv="x-ua-compatible" content="IE=edge" ) 오늘은 메타 태그 중 아래 코드에 대해 알아보겠습니다. content="IE=edge"는 IE브라우저에서, 각 버전 중 가장 최신 표준 모드를 선택하는 문서 모드입니다.(IE6부터 IE11까지) 문서 유형 (document type) 선언과 함께 사용해야 유효합니다. /*가장 최신의 웹표준을 지원하는 HTML5 DOCTYPE을 추천함 */ DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML) IE11에서는, 문서 모드가 곧 퇴화될 것이며 앞으로 사용되지 말아야할 것으로 규정합니다. 현재로서, IE11는 edge mode가 추천하는 문서 모드입니다. 참조: .. 2015. 1. 16.
[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.
반응형