[HTML] 웹 표준 및 접근성 II - 텍스트 관련 태그, 기타 태그, 크로스 브라우징 etc.

1. 텍스트 관련 태그

• 줄바꿈이 일어나는 태그
  • <h1>~<h6>
    - 제목을 표시할 때 사용
    - 스크린 리더 사용자가 사용하는 탐색 기법은 제목에서 제목으로 옮겨가는 방식이기 때문에, 제목 단계를 뛰어넘으면 문서의 층위를 파악하는데 혼란이 있을 수도
    - 그래서 제목 단계는 순차적으로 늘어나야 함(<h1> 다음에 <h3>이 오지 않도록 하는 것)
    - 페이지당 하나의 <h1> 태그 사용 
    
    
  • <hr>
    - 수평줄이 생김
    - '주제가 바뀔 때' 분위기 전환을 위해 넣음('이 글의 주제가 여기서 바뀌었다'를 알리는 역할)
    
    
  • <pre>
    - 표시한 공백(스페이스바로 띄운 공간)이 그대로 표시
    - CSS에서 지정할 수 있는 white-space 속성의 'pre'값이 같은 의미를 가짐
    
    
  • <blockquote>
    - 태그 안쪽 텍스트가 인용문임을 알림, 본문보다 전체적으로 들여쓰기 됨
    
    
• 줄바꿈이 일어나지 않는 태그
  • <strong>
    - 태그 안쪽 텍스트가 '중요한 내용'임을 의미, 글자를 굵게 표시
    
    
  • <b>
    - 중요하다는 의미를 가지진 않지만, 글자를 굵게 표시
    
    
  • <em>
    - '강조하고자 하는 내용'임을 의미, 글자를 기울여 표시
    
    
  • <i>
    - 특정한 의미를 담지 않고, 단순히 글자를 기울여 표시하고 싶을 때 사용
    
    
  • <q>
    - 단락과 문장 중간에 줄바꿈 없이 '인용문'을 표시할 때 사용
    - 태그로 묶은 내용 앞뒤에 따옴표가 붙음
    
    
  • <mark>
    - 문장에 형광펜을 긋는 것처럼, 강조하고 싶은 부분을 태그로 묶으면 안쪽 텍스트 배경색이 노란색으로 표시됨
    - 텍스트의 중요성보다는, 검색 결과 표시 등 현재 맥락과 연관성이 있는 텍스트를 강조할 때 사용

 

2. 기타 태그

• Q) Button 태그의 Default type은?
• A) submit임
  form 태그 안에 form data와 관련 없는 버튼을 만든 후 그 버튼을 누르면 form이 전송될 경우가 발생할 수 있으니 버튼태그는 꼭 type을 명시할 것!!
  
  • submit: 폼을 제출하는 이벤트를 발생
  • reset: 폼안에 작성된 내용을 초기화
    
    
  • button은 그 자체로는 아무런 이벤트가 없고, click이벤트와 연결시켜서 자바스크립트를 활용하는 방법을 많이 사용
    
• Q) Section 태그와 Article 태그의 차이점은?
  • article: 문서나 사이트에서 독립된 컨텐츠 영역을 지정함. 이 부분을 다른 곳에 옮기더라도 분리되어지고, 의미가 통해야 함
  • section: 페이지의 주요부분을 의미하며, 긴 글의 세부사항과 같은 관련 컨텐츠의 묶음, 또는 탭 키 사용을 요하는 인터페이스를 가진 웹 어플리케이션에서의 페이지의 묶음 단위를 의미

 

3. 크로스 브라우징이란

• 크로스 브라우저
  • 웹 사이트 또는 웹 응용 프로그램이 서로 다른 웹 브라우저에서 정확하고 일관성 있게 작동하는 기능
• 여기에는 구글 크롬, 모질라 파이어폭스, 사파리, 마이크로소프트 엣지와 같은 인기 있는 브라우저의 다양한 버전과 오페라와 같은 덜 사용되는 브라우저가 포함됨
• 크로스 브라우징 호환성은 웹 사이트 또는 웹 응용 프로그램에 액세스하여 가능한 한 광범위한 사용자가 사용할 수 있도록 하는 데 중요