2020-07-20

오늘 수업은 실습 위주..

선형화

:컨텐츠의 논리적 흐름과 순서를 따져야 한다.

• 로그인 창의 순서정하기

  로그인 -> 아이디 -> 아이디입력상자 -> 비밀번호 -> 비밀번호입력상자 ->로그인버튼

  -> 링크목록 or버튼(레이어 실행기능)(회원가입, 아이디/비번찾기)

• 시멘틱 마크업

  :section, article 영역은 아웃라인 알고리즘상 내부에 heading 태그를 갖는다.

  ex) 로그인창이라는 정보를 heading으로 추가해준다. 위의 순서에서 1번의 로그인을 텍스트로 처리한다. 텍스트로 처리하면 텍스트는 벡터요소이기 때문에 해상도 문제가 발생하지 않는다. 이미지로 처리할 경우는 모바일 환경이나 고밀도를 가진 해상도에서 1배율, 2배율 화면에 따라서 이미지를 2개 준비해야한다.) 고밀도 이미지를 하나 더 준비해서 분기해야한다. 따라서 텍스트가 훨씬 간단하고 유지보수도 쉽다. (클라이언트 서버 모두에게)

  <h2>
      로그인   /* 중분류 */
  </h2>

  h1은 웹카페(대제목), 따라서 "웹카페의 로그인"이라는 계층구조 의미를 만들어 준다.

  컨텐츠를 마크업할 때, 컨텐츠 블록의 의미를 이해할 수 있도록 heading태그를 달아주는 것이 좋다.

  ---

  Form태그

  : 정보를 주고받는 경우 form태그를 사용한다. 필수로 action속성이 필요하다. [action=""] 전송값을 받아서 처리할 서버의 주소를 입력하는 곳이다. [method="get/post"] =>네이버나 다음에서 검색시 get방식으로 검색 정보가 주소url에 포함되어 날아간다.

  스타일적인 부분에서 버그가 많기 때문에, div로 대신하여 처리해주는 경우가 많다. 원하는 스타일 적용시 버그가 없다면 form태그를 사용해주는 것이 좋다.

• fieldset태그

  :form과 붙어다닌다. group을 지어주는 태그이다. div와 비슷한 역할을 하지만, div는 범용그룹화 요소로써 (의미가 없기에 아무거나 묶을 수 있다.) 연관성있는 서식(입력)/컨트롤(버튼)들만 묶어주는 field와는 차이가 있다.

• legend태그

  :서식의 이름을 명명해준다. (html4버전에서는 생략가능, xhtml에서는 필수속성, html5는 4버전과 xhtml의 문법을 둘다 허용한다. 가능하다면 field와 legend를 사용하는 것이다 좋다. 이유없이 생략하지 않을 것.)

• label태그

  :input 태그를 묶어준다. id형태로 네이밍을 한 input과 연결한다. (aria관련이나 input label은 반드시 id로 입력해준다.) label과 묶어주면 label요소를 클릭해주면 연결된 input창을 활성화시킨다. 사용성 관점, 접근성 관점 모두에서 도움이 된다. input요소에는 꼭 label을 묶어주도록 하자.

• button태그

  :type='submit'지정 , form의 정보를 action으로 보내주는 역할이다. reset으로 지정할 경우는 정보를 초기화 시켜준다.

• required 속성

  :논리속성, 필수를 의미(태그안에 required를 넣어주면 true, 적지않으면 false이다.)

  required속성을 가진 input요소에 값이 입력되지 않으면 서버로 정보전달이 되지 않는다.

• name 속성

  :서버에 정보를 전송하기위해서 필요하다. name=""에 기입된 내용이 서버로 전송되면 서버내의 데이터 테이블에 name별로 분류된다.

• form영역 확인하기

  

기타

• a태그로 배치할 때, 사용자가 클릭해서 사용하는 용도이기 때문에, 좋은 UX를 제공하기 위해서 a에 패딩을 줘서 클릭가능한 영역을 좀더 넓혀 주는 것이 좋다.(공백을 만들어야 할때 생각해서 정해줘야한다. 무조건 눈에 보이는대로 margin으로 밀어내는것은 구조,유지보수, UX모두에 좋지않다.)

• formspree.io(폼의 액션전달 테스트를 로그인하면 무료로 진행할 수 있음).

• label과 placeholder에 기입된 내용은 달라야한다.

  ex> label:아이디 , placeholder:아이디 => placeholder는 좀더 보충하는 내용을 가지는 것이 좋으므로 "이메일을 입력해주세요." 같은 추가정보를 기입시켜주는것이 좋다.

• 접근성 지침:

  WCAG 발췌 ; 모든 입력서식은 1:1로 대응하는 label을 제공해야 한다.

  ex>카드번호 입력받는 input요소는 ㅁ-ㅁ-ㅁ-ㅁ로 나눠서 입력받기에, label도 4개가 있어야 하는것이 원칙이다. label하나에 input4개를 복수연결 할 수없기때문에, 개발자들이 편의상 하나만 입력해주는 경우가 있다. title을 이용하여 4칸에 대한 부연설명을 해주거나, 애초에 카드번호 16자리를 한칸에 입력받도록 한다.