HTML - QA 2
1.aria-label / class=”sr-only” 사용
- 홈페이지에 보이지 않지만 마크업 (문법) 상으로 받드시 존재 해야 할 때(Sectioning Elements-H1~6, ul,ol,dl) sr-only 사용
ex1) code
<section>
<h1 class="sr-only">화면에 안보여야할 내용</h1>
</section>
<dl>
<dt class>화면에 안보여야할 내용</dt>
<dd>김버그</dt>
</dl>
2.스크린 리더
- 보통 aria-label 사용 안하지 -항공사 등 국제 웹접근성 표준이 중요한 사이트들은 필수 사용
3. 닫아주는 태그가 없는 경우 /
<img> , <br>, <link> 등 닫아주는 태그 </img> , </br>, </ink> 가 없는 태그들 끝에 / 를 사용해도 문법상 오류는 없음. ex) <img src="" /> , <br/>
단, 리액트에서 닫아주는 태그가 없는 경우 슬래시(/) 입력해야하므로 습관화
4. form method
method : GET/POST
HTTP 웹 (요청) - 서버 (응답)
[요청의 4가지 패턴 CRUD(생성,읽기,업데이트,삭제)]
- Create - POST (중요한 데이터:비밀번호, 댓글 등)
- Read - GET (공개되도 되는 데이터)
- Update - Fetch , Put
- Delete - Delete
GET :데이터가 노출되기 때문에 보안에 취약 하며, 개인정보가 포함되지 않는 상황에서 캐싱을 하여 페이지 로딩 속도를 높일 때 사용.
POST : BODY에 데이터를 넣어 전송하며 길이의 제한이 없다. 따라서 GET과 다르게 대용량 데이터를 전송 할 수 있으며, BODY에 전송되어 내용이 눈에 보이지 않아 보안적으로 조금 더 안전 하다고 할 수 있다. 하지만 POST요청도 크롬 개발자 도구같은 툴로 요청내용을 확인할 수 있기 때문에 민감한 데이터는 반드시 암호화 하여 전달해야 한다.
5. <div> 와 <span>의 차이 및 사용 기준
<div> / <span> : HTML 사용시 최대한 사용 하지마라. CSS 사용 시 스타일을 먹여주기 위해 <div> 사용. HTML 작성 시 정보에 관한 마크업 이후 가장 마지막에 사용하는 최후의 옵션.
CSS 작성 시 스타일을 적용을 위해서 <div>는 자유롭게 사용
- <div> : 큰 덩어리 (그룹화)
- <span> : 작은 조각 (보통 중요하지 않은 텍스트만 있는 경우)
마크업은 정답이 없다. 단, 일관된 자기만의 규칙으로.