[Tech] 웹 접근성을 위한 태그 & 크로스 브라우징

웹 접근성을 위한 태그

• 웹 접근성을 고려한 HTML 태그의 다양한 성질이 있다.
• 그 중, <button>과 시멘틱 태그의 성질에 대해 살펴보자.

Button 태그의 기본 타입

• <button> 태그는 type 속성을 가져, 해당 버튼의 타입을 나타낸다.

• 그 중 type 속성의 속성 값은 다음과 같다.

  속성 값	내용
  button	클릭할 수 있는 버튼임을 명시. 아무런 이벤트는 없음.
  submit	폼을 제출할 수 있는 버튼임을 명시.
  reset	폼 데이터를 초기화하는 버튼임을 명시.

이 중, 기본 타입은 submit 이다.

---

<section> vs <article>

두 태그의 차이점을 알기 위해, 각각의 쓰임새와 복합적으로 사용했을 때를 구분하자.

<section>	<article>
페이지의 한 장 or 절을 의미	본문과 독립적으로 존재하는 컨텐츠
문서 내 의미 있는 단위로 구분 시 사용	블로그 글, 카드, 댓글로 구분 시 사용

여기서 핵심은! 어떤 부분을 떼어 놓을 때, 그 자체로 독립적이면 article로 사용할 수 있다는 것이다.

두 태그를 복합적으로 사용하면?

위와 같이, 두 태그를 복합적으로 사용하면, 다음과 같은 용도를 사용할 수 있다.

• section 안의 <article>
  • 여러 개의 글 목록을 보여주고 싶을 때 사용.
  • 예: 인기 게시글 목록 안의 글1, 글2, 글3 …
• article 안의 <section>
  • 하나의 글을 여러 절로 나눌 때 사용.
  • 예: 하나의 긴 글 안의 서론, 본론, 결론 …

---

크로스 브라우징

• 현대 웹 브라우저 엔진의 종류는 다양하다.
  • 크롬, 파이퍼폭스, 사파리, 엣지, 오페라 등…
• 이렇게 서로 다른 브라우저에서 일관성 있게 동작하기 위한 별도의 작업을 의미한다.

• 따라서, 표준 규격인 W3C를 적용하여 모든 브라우저에서 의도대로 비춰지게끔 구성해야한다.

• 대표적으로 크로스 브라우징을 위한 작업으로 브라우저별 접두사를 활용하는 것이 있다.
  • 크롬: -webkit-
  • 사파리: -webkit-
  • 파이어폭스: -moz-
  • 오페라: -o-
  • 익스플로러: -ms-

  이를 Vender Prefix라고 한다.

---

✨ 출처

prepare_frontend_interview
TCPSchool, Button 태그의 type 속성
Blog, [HTML] 시맨틱 태그(Semantic Tag)로 구조적 웹 만들기, 미야옹
Blog, 크로스브라우징(cross browsing)의 중요성과 해결방법

---