【HTML practice note_03】
Input Group
✨submit 해야하는 것이 있다면 form 태그로 제출할 요소들(input or textarea, button)을 감싸줘야 한다.
가장 근본적인 이유는 'action'과 'method' 속성을 적어야 서버에게 정확하게 요청을 보낼 수 있기 때문에 사용한다.
그러나 form을 사용하지 않아도 요청은 가능하다!😂
실무에서는 javascript로 Event를 처리하는 경우에 form을 많이 사용한다고 한다.
form의 가장 기본적인 사용 형태에 대해서 익히는 것을 중점적으로 이해하자.
Feed
역대급 어렵!😭 다시 실습해보기!
※ 참고사항
1) 기능이 모두 표시되어 있는 '완성본'을 보고 markup 작업하는 것을 추천!
2) 먼저해야 할 일은 최소한의 기능을 하는 단위로 요소를 쪼개기! 그리고 나서 그에 맞는 태그를 설정하기!
3) 콘텐츠를 대표하는 내용의 역할을 하는 제목(heading 태그)을 하나씩 지정하는 것을 선호(강사님 스타일)
text로 보이는 요소를 click할 때 '특별한 기능'을 한다면 일반적인 text가 아니라 기능을 수행하는 button이라고 생각하자.
submit할 text 길이가 긴 경우 서버에게 보내기 위한 url에 내용을 모두 담기 어려울 수 있다.
form으로 제출하고자 하는 input값이 길 때는 form의 method 속성을 GET보다 'POST'로 설정하는 경우가 많다.
Gmail Inbox
역대급 어렵!😭 다시 실습해보기!
이전에 배운 개념 총집합! 복습 필요~~
이미지로 보이는 요소를 click하면 다른 요소의 상태를 변경시키는 것은 일반적인 그림 보다 클릭함에 따라 특정 기능이 동작되기 때문에 img 태그를 사용하지 않고 button을 만들어 css로 스타일 처리한다.
읽은 메일과 안읽은 메일을 눈으로 구분할 수 있지만 screen reader 사용자에게 정보를 제공하기 위해 'sr-only' 범용 클래스(css framework인 Bootstrap에서 제공하는 utility class)를 추가한다. html 코드를 작성하고 css로 화면에 보이지 않게 스타일 적용시킨다.
'list'와 'table'로 각각 markup 했을 때의 뉘앙스 차이 이해하기!
해당 예제의 경우 여러 내용이 삽입된 하나의 행이 다음 행에도 반복되는 형태를 가지므로 table로 작성했음을 참고한다.
☪ screen reader 사용자에게 정보를 전달하기 위해 class명 지정했을 때와 'aria-label' 속성을 사용할 때의 차이?
🅰 class="sr-only" 는 원래 text는 있지만 화면에는 표시되지 않아 눈에 보이지 않지만 screen reader에 읽히는 정보일 때 사용된다. html에는 작성했지만 css로 화면에 보이지 않도록 class를 지정했으며 관습같이 많이 사용되는 클래스명이다.
반면에 'aria-label' 속성은 원래 text가 없어서 아무 설명도 할 수 없을 때 사용하는 것이 적절하다.
☪ p 태그와 span 태그를 사용하는 각각의 기준?
🅰 개개인의 스타일 방식이기 때문에 정답은 없다.
문장인 경우 p 태그를 사용하고, 단어 같이 문장이 아닌 경우 span 태그를 사용한다.
text 중에서도 중요하다고 판단되는 경우 보통 strong 태그를 사용한다.(강사님fficial)
☪ table 안에 있는 td 태그에 class 추가를 하지 않고 별도로 div를 생성해서 묶어주는 이유는?
🅰 th, tr, td와 같은 table과 관련된 요소의 display, width, height 등의 값을 직접적으로 변경하면 잘못 구현되는 경우가 발생하여 tr, td 태그들을 div로 묶고 div에 스타일을 적용하는 방식을 선호한다.(강사님fficial)
Music Player
문서의 기본 언어를 html 태그에 영어로 설정(lang="en")한 상태에서 특정 요소만 다른 언어로 되어있는 경우 해당 태그에 언어 설정(lang="ko")을 달리해준다.
스타일 요소를 위해 class 추가하는 작업은 꼭 div 태그에서만 가능한 것은 아니다!
ol, li, span, img 태그에서도 class 추가 가능하므로 div 갯수를 늘릴 필요 없다.
☪ screen reader 사용자를 위해 'sr-only' 클래스로 처리하는 것과 'aria-label' 속성의 차이?
🅰 공통적으로 브라우저와 사용자에게 정보 콘텐츠의 의미를 정확하고 풍부하게 전달하기 위한 처리이며, 단지 스타일 차이이다. 어떤 것을 사용하든 무방하다.
〔sr-only〕: 실제로 text가 있지만 화면 상에서만 보이지 않게 처리
(※ .sr-only를 반드시 사용해야 하는 경우! 구조적 웹 문서 설계를 위한 Sectioning element를 사용할 때에는 화면에 보이지 않아도 내부에 반드시 heading 태그가 있어야 함)
〔aria-label〕: screen reader에게 작성한 내용 대신 속성값으로 작성한 구체적인 내용으로 읽어 달라고 명령
sr-only는 markup의 하나의 요소로서 코드의 일부분
aria-label은 screen reader 사용자를 위한 WAI-ARIA 기능
☪ ul, ol(+li)과 dl(+dt, dd)과 table(+tr, th, td) 태그를 사용할 때 각각의 기준?
🅰 둘 중 어떠한 것을 사용하든 스타일 적용이 가능하다면 상관없으며, 정보의 이미 전달에 초점을 두고 태그를 사용한다.
〔ul, ol〕: 동일한 구조를 가진 요소가 병렬적으로 나열될 때
(예. 커버, 제목, 가수 등의 아이템들이 동일한 구조로 되어있는 Music Player)
〔dl〕: {key: value} 형태로 해석이 가능할 때 (예. 설명 리스트 목록)
〔table〕: 행과 열로 이루어진 데이터 (예. 시간표, 실시간 음악순위 목록)
Video Player
video 태그에 class 작성하기 보다 div 태그로 감싸주고 div에 class 추가하기
☪ video와 같은 미디어 파일을 업로드할 때 여러 포맷의 파일을 올려야하는가?
🅰 브라우저마다 통상 지원하는 영상 포맷이 다르고 통상적으로 .mp4와 .webm 을 많이 사용한다. 초창기 HTML5가 도입되었을 때 각각 지원하는 포맷이 달라 여러개를 사용했으나 지금은 구형 브라우저(예: IE)를 제외한 대부분의 브라우저에서 .mp4와 .webm을 지원하므로 위 두가지 포맷위주로 사용하면 된다.
