글

라벨이 웹접근성인 게시물 표시

[HTML5] 웹표준에 맞게 Table태그 구성하기

불필요한 경우에도 table 태그를 무분별하게 사용하는 것을 자주 보아왔기에 평소에 table 태그 사용을 지양 하는 편입니다. 그러나 필요한 부분에서는 table 태그를 사용 해야 할 때가 있습니다.  그때마다 웹표준에 맞게 표를 작성해야하는데 헷갈릴 때가 많아 정리해두려합니다.  참고로 이 내용은 웹 저작자를 위한 W3C의 HTML5 기술 표준 명세서를 바탕으로 작성한 것입니다. 표를 구성하기 위해서 필요한 것은 소개, 기본 적인 셀 구조, 사용법 등입니다.  이 형태들은 단락을 만들어 사용하거나, caption 을 사용하거나, figure 안에 표를 작성하는 방법 등이 있습니다.  저는 보통 caption 을 이용합니다. 아래와 같이 사용하시면 됩니다. caption 안에 details 엘리먼트를 사용할수도있습니다. Table 구성 <table> <caption> 각 태그의 이름과 설명 <details> <summary>도움</summary> <p>이 표는 태그와 그 설명에 대한 내용을 담고 있습니다.~단위는 ~</p> </details> </caption> //colgroup: 전체 열에 스타일을 적용하는 데 유용합니다 <colgroup> <col> </colgroup> <thead> <tr> <th>태그이름</th> <th>설명</th> </tr> </thead> <tbody> <tr> <td>p태그</td> <td>단락을 표현할 때 사용합니다.</td...

[HTML5] 웹 접근성/ 기본 언어 명시하기

HTML5에서 기본언어를 명시하는 것은  화면 낭독 프로그램이 언어를 인식해 자동으로 음성 변환을 하거나, 선택된 언어에 적합한 발음을 제공하기 때문에 필요한 작업입니다. 아래와 같이 HTML5를 구성할때 html 태그에 명시하시면 됩니다. < ! DOCTYPE html > < html lang = "ko" > //이곳에 명시합니다. < head > < meta charset = "UTF-8" > < title > < / title > < / head > < body > < / body > < / html > 언어별로 속성값이 다르며, 자주 사용하는 한국어, 영어, 프랑스어, 독일어, 중국어, 일본어는 아래에 표기해두었습니다. 한국어(ko) 영어(en) 프랑스(fr) 독일어(de) 중국어(zh) 일본어(ja)  그외의 언어는 하단의 링크를 참조해주세요. https://www.w3schools.com/tags/ref_language_codes.asp