스크린 리더를 위한 속성들
lang
lang 속성은 스크린리더 프로그램을 위한 것이다.
1, 2, 3을 한글(ko)은 "일 이 삼"으로 영어(en)는 "one two three"로 읽어준다.
그렇기에 lang은 꼭 적어야하는 속성이다.
<html lang="ko">
만약 특정 부분에서 언어를 바꾸고 싶다면 해당 태그에 다시 지정해준다.
<i lang="en">1, 2, 3</i>
alt
이미지의 경우는 스크린리더가 동작하지 않기에 이미지에 대한 설명을 위해서
alt 속성에 간단히 써줘야 한다.
더불어 이미지를 불러오기에 실패했을 때도 도움이 된다는 점.
그러니 img 태그에 alt는 필수 속성이라고 생각하자.
<img src= "img/6014.jpg" alt="사진">
Sematic Markup
Markup 시 태그의 의미, 의도에 맞게 사용해야 한다는 의미.
그 의미에 맞게 사용해야 스크린리더가 정확하게 화면 속 정보를 음성으로 전달할 수 있다
시멘틱하게 마크업을 한다는 의미는, 태그 좀 적합한 곳에 똑바로 써라는 의미로 이해하면 된다
inline element VS block element
| inline element | block element |
| - 줄바꿈X - 자식 요소로 inline 요소와 텍스트/문자 포함 가능 - block 요소를 자식 요소로 불가능 |
- 줄바꿈O - 자식 요소로 inline 요소와 텍스트/문자 포함 가능 - block 요소 중에서 자식 요소로 포함 가능한 요소와 아닌 요소가 있으니 주의 |
| <a> - block 요소 허용됨, but <input>, <button>X <img>, <input>, <textarea>, <select> |
<p>, <address>, <ol><ul>(<li> 제외), <li> - block 요소 포함 불가능 <form>은 <form>만 자식요소로 불가능 |
+) <address> : html 문서의 소유자나 단체의 연락처를 정의할 때 사용. <footer> 내에서 많이 사용
+) contents category
| 종류 | 내용 | ex |
| Metadata Content | <head>에 포함되는 요소. 콘텐츠의 표현, 동작설정, 문서간 관계 설정, 정보전달을 포함하는 요소를 의미 |
<link>, <meta>, <script>, <style>, <title> ... |
| Flow Content | <body>에 포함되는 요소. | <h1>, <address>, <p>, <a>, <img>, <ul>, <table>, <form> ... |
| Sectioning Content | heading과 footer의 범위를 정의 | <article>, <aside>, <nav>, <section>... |
| Phrasing Content | text를 마크업하는 요소 | <a>, <strong>, <em>, <sub> ... |
| Embedded Content | HTML에 다른 리소스를 삽입하는 요소 | <img>, <audio>, <video>, <iframe> ... |
| Interactive Content | 사용자와의 상호작용을 위한 요소 | <a>, <button>, <select>, <audio>, <video> ... |
+) Phrasing Content
| <em> | 강조하고 싶은 텍스트를 정의. 기울임체로 표시됨. 문맥의 의미까지 변화시킬 정도임 |
| <strong> | 중요한 텍스트를 정의. 볼드체로 표시됨. |
| <b> | 의미X. 그저 볼드체로 표시. => CSS로도 가능 |
| <mark> | 주의 깊게 볼 텍스트를 강조하기 위해. 노란색으로 표시됨. |
| <small> | 주의사항, 법적제한, 저작권 등을 정의. 작은 글씨로 표시됨. |
| <sub> 와 <sup> | 아래첨자 그리고 윗첨자 텍스트 정의 |
<a> 태그
- 내부 링크
문서 내 이동, 건너뛰기 링크 등으로도 불림 (Skip Navigation)
<a href="#conent">
해당 태그를 클릭 시 선택자 id가 #(id이름)인 태그로 찾아감
html 문서 내용이 길어져 한 눈에 내용이 보이지 않을 때 사용
<a href="#">
id 이름 없이 #만 적어둔다면 해당 html 문서의 최상단으로 이동
이를 방지하기 위해선, <a href="javascript:;">
- target 속성
링크된 문서를 어떤 방식으로 브라우저에 보여줄 것인지 정하는 속성
ex) _blank : 링크된 문서를 새 탭(새 창)으로 보여줌 -> 스크린리더도 새 창으로 열린다는 것을 말해줌.
만약 자바스크립트로 새 창을 띄운다면 꼭 title 속성으로 새 창 표시를 알려주어야 함
ex) <a href="#" onclick="window.open('http://~~'); return false" title="새 창">링크</a>
하나의 img에 여러 개의 링크 적용하기 - <map>
<img>에 usemap="#맵이름" 속성을 명시하고
아래 <map> 태그 속 자식 요소인 <area> 태그에 링크 적기
+) <area>에 target 속성 가능
<img src="img/4601254.jpg" alt="사진" usemap="#mapping">
<map name="mapping">
<area shape="rect" coords="0,0,10,10" href="https://www.google.co.kr/" alt="사각형">
<area shape="circle" coords="100,100,50" href="https://www.naver.com/" alt="원" target="_blank">
<area shape="poly" coords="각 꼭짓점의 x,y 좌표값" href="https://ko.reactjs.org/" alt="다각형">
</map>
<table>
마크업 순서: <table> -> <tr>행 -> <td>d열
column끼리 묶고 싶다면 <colgroup>, <col> 태그를 먼저 사용
<style>
table{
width:100%;
border-collapse: collapse;
}
.c1{
background:#ff0;
}
.c2{
background:#0ff;
}
</style><table>
<colgroup>
<col class="c1">
<col class="c2">
</colgroup>
~~~
</table>
+) <th>: 제목 역할을 하는 셀을 정의할 때 사용
<thead> 표의 내용의 제목 영역, <tbody> 본문 영역, <tfoot>열의 요약 영역
<style>
table{
width:100%;
border-collapse: collapse;
}
td, th{
border: 1px solid #000;
}
</style>
+) 행 또는 열 합치기
<td rowspan="2">, <td colspan="3">
<form>, <fieldset>
- action 속성
입력된 내용을 처리해줄 프로그램의 주소(URL)를 지정
- method 속성
서버 프로그램에 어떤 방식으로 값을 전달할지 정의
1. get 방식 : 검색
2. post 방식 : 로그인, 회원가입 (중요한 정보)
<form action="#" method="post">
<fieldset>
<legend>로그인</legend>
<p>ID : <input type="text"></p>
<p>PW : <input type="password"></p>
</fieldset>
</form>
<input> type 속성
| text | 한 줄 글 입력 상자 maxlength 속성으로 최대 글자 수 제한 |
| password | 비밀번호 입력 입력된 내용은 *로 표시됨 |
| search | 검색 입력 상자 |
| email , tel | 이메일, 전화번호 입력 상자 |
| color | 컬러 입력 상자 |
| number | 숫자 입력 상자 -> 범위 지정 가능 (min, max) |
| range | 슬라이드바 -> 범위 지정 가능 (min, max) |
| radio | 라디오 버튼 name 속성이 모두 동일하면 하나만 선택 가능 checked 속성으로 기본값 선택 가능 |
| checkbox | 체크박스 -> 다중 선택 가능 checked 속성으로 기본값 선택 가능 |
| submit, reset, button | 전송 버튼, 초기화 버튼, 범용 버튼 value 속성으로 버튼 속 텍스트 지정 |
| image | 이미지 버튼 (alt 필수) |
| file | 첨부 파일 선택하기 버튼 |
| hidden | 사용자에게 노출할 필요가 없는 데이터를 지정 화면에 표시되지 않음 |
'Web > Frontend' 카테고리의 다른 글
| DOM Node(API) 조작하기 (0) | 2021.05.19 |
|---|---|
| AJAX (0) | 2021.05.07 |
| Event Handler (0) | 2021.05.07 |
| DOM, querySelector (0) | 2021.05.07 |
| [JS] window 객체 (setTimeout) (0) | 2021.05.07 |