패스트캠퍼스 강의를 정리한 내용입니다.
"The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명"

Interactive content

• 사용자와 상호 작용할 수 있는 콘텐츠
• a, audio, button, details, embed, iframe, img, input, label, select, textarea, video
• 입력장치(키보드, 마우스)로 조작 가능
• deisplay: inline | inline-block;

a vs button

• 같은 외형을 지닌 경우라도 a, button 요소를 구별해서 사용
• cursor 명세 정의에서, pointer는 링크를 나타내므로 a 태그에만 pointer를 사용하고 button 태그는 default로 두는 것을 권장
• 실행 결과를 가리킬 수 있는 고유한 URL이 있으면 a요소, 참조할 URL이 없으면 button 요소로 마크업
• a 태그는 링크 위에 마우스를 올리면 웹 브라우저가 상태 표시줄에 목적지 URL을 표시해주지만, button 그렇지 않음
• a 태그는 Context Menu를 이용하면 새 탭에서 링크 열기 기능 사용 가능하지만 버튼 요소는 이 기능을 사용할 수 없음

a 태그

사용 예

• 다른 페이지로 이동할 것이라는 신호 제공
• 탭을 클릭하여 페이지 전체를 갱신하는 경우 (페이지 이동)
• 고유한 URL로 접근하여 특정 콘텐츠를 보는 경우
• 탭을 클릭하여 현재 페이지의 해당 섹션으로 스크롤 하는 경우
  =섹션을 항상 참조할 수 있는 URL(해시)가 있는 경우
• 대화상자를 참조하는 경우

* a 요소의 href 값은 dialog 요소의 id(해시 URL)를 참조
<a href="#modal">...
<dialog id="modal">...

a target

<a
	href="https://external.com/"
    target="_blank"
    rel="noopener noreferrer"
>

• 안전하지 않은 외부 페이지 새 창 링크
• 새 창으로 외부 페이지 B는 자바스크립트 window.opener 객체를 통해 부모 페이지 A의 제어 권한을 획득
  → 사용자는 탭 가로채기(tabnabbing) 공격에 노출됨
• 탭 가로채기 공격을 해결 방법 → 링크에 rel 속성 추가
  • noopener 값은 window.opener 객체를 제거
  • noreferrer 값은 window.opner 제어 불능
  • noopener를 지원하지 않는 낡은 브라우저를 위해 noreferrer를 함게 표기
• 최신 브라우저는 target="_blank" 속성을 지정하면, rel="noopener" 속성을 암시적으로 적용하고 있으나, 낡은 브라우저를 위해 rel="noopener noreferrer" 속성을 명시하는 것이 좋음

button 태그

사용 예

• 탭을 클릭하여 특정 섹션의 목록을 갱신하는 경우
• 타겟 URL을 설정할 수 없거나 타겟 URL을 설정하지 않는 게 나은 경우

details vs summary

• 열림 상태일 때 정보를 표시하는 위젯
• details 요소에 open 속성을 넣으면 열린 상태로 표시
• summary 요소는 details 요소의 나머지 부분에 대한 요약, 캡션, 범례를 의미
• 숨겨진 폼(form)을 드러내기도 함
• 브라우저가 기본적으로 'marker' 표시 제공

<details open>
	<summary>
      ::marker
      "details 요소란?"
	</summary>
    <p>열림 상태일 때 정보를 표시하는 위젯</p>
</details>

input type

search

• <input type="search">
• 검색창을 만들 때 사용
• 검색창 우측에 기본적으로 X 버튼 제공

tel

• <input type="tel">
• 모바일 디바이스에서 input에 초점을 넣으면 전화번호 전용 키패드가 노출됨
  → 사용자가 다른 문자를 실수로 입력할 확률을 낮출 수 있음

url

• <input type="url">
• 모바일 디바이스에서 input에 초점을 넣으면 URL 입력에 용이한 키패드가 노출됨 (슬래시와 닷컴 키를 포함한 키패드)

email

• <input type="email">
• 사용자가 과거 입력했던 이메일을 자동 완성 기능으로 제공
• 모바일 디바이스에서 input에 초점을 넣으면 골뱅이(@) 키패드가 화면에 노출됨

date

• <input type="date">
• 사용자가 날짜나 시간에 대한 유효한 포맷을 입력할 수 있도록 제공되는 인터페이스
• 브라우저마다 지원하는 인터페이스 모양이 다름

datetime-local

• <input type="datetime-local">
• 날짜와 시간을 함께 입력할 수 있는 인터페이스

month

• <input type="month">

week

• <input type="week">

time

• <input type="time">

number

• <input type="number">

range

• <input type="range">
• 슬라이드 바 모양의 인터페이스
• 사용자가 조절점을 잡고 범위를 설정 가능

color

• <input type="color">

input attr

required

• 사용자가 input을 작성하지 않으면 브라우저에 내장된 에러 또는 도움말 메세지가 표시됨
• 메세지 박스의 모양이나 노출되는 텍스트는 브라우저에 따라 상이

placehoder

• 자리 표시자
• 컨트롤에 초기값이 없을 때 사용자에게 데이터 입력을 지원하고자 제공하는 짧은 힌트나 샘플
• label 대안으로 사용하지 않도록 주의
• 내용 입력 시 배경 텍스트가 사라지므로, 반드시 필요한 설명은 placeholder가 아닌 텍스트로 노출하기를 권장
• 가급적이면 사용하지 않는 것이 사용자 경험과 접근성에 좋음

datalist

• input 태그와 함께 사용
• 다른 콘트롤을 위해 미리 정의된 옵션 세트를 의미
• 숨겨진 상태로 표시됨
• input에 무언가 작성할 때 미리 정해진 데이터들이 있고 그 중 하나를 선택하고자 할 때 사용
• 사용 예 : 사용자가 키워드 검색 시 노출되는 연관 검색 키워드 목록
• input value 값과 datalist id 값은 반드시 동일하게 작성

<label for="local">지역번호:</label>
<input type="text" id="local" list="local-list">

<datalist id="local-list">
	<option value="02" label="서울"></option>
    <option value="031" label="경기"></option>
</datalist>