과제 리뷰_11/3

🚩11/3

오늘은 어제의 과제 리뷰로 시작했다. 실제로 있는 홈페이지라서 이론상의 내용과는 조금 달랐지만, 구체적으로 구현된 모습을 볼 수 있어서 좋았다.
(물론, github에 올린 코드에서는 내용을 다지웠다!)

링크텍스트

---

중요한 리뷰

• h1 태그는 문서에 한개만 있어야 한다.
• 웹접근성을 높이기 위해 section에는 heading이 있어야 한다.
• br태그가 문장안에 있는 형태는 지양하자.
• footer에서는 구획을 나누지 않는 것이 좋다.
• 전화번호나 메일은 클릭을 했을때 전화,메일이 될 수 있도록 a 태그를 쓴다.

<a href="mailto:hi@kstartupforum.org">hi@kstartupforum.org</a>
<a href="tel:02-6211-9400 ">02-6211-9400</a>

• 약관에 동의합니다. 와 동의하지 않습니다. 가 있는 경우,
  1) 동의하지 않습니다.가 기본값으로 가있어야 한다.
  2) 둘 다 체크 되지 않도록 꼭 radio가 있어야 한다.
  

    <label>
    <input type="radio" name="terms1">
    <span>약관에 동의합니다</span>
    </label> 
    <label>
    <input type="radio" name="terms1" checked>
    <span>약관에 동의하지 않습니다.</span>

---

수업 보충

**fieldset** : 폼 태그의 내용이 방대할때, 요소를 그룹화 한다.

<fieldset>
          <legend>Choose your favorite monster</legend>
      
          <input type="radio" id="kraken" name="monster">
          <label for="kraken">Kraken</label><br/>
      
          <input type="radio" id="sasquatch" name="monster">
          <label for="sasquatch">Sasquatch</label><br/>
      
          <input type="radio" id="mothman" name="monster">
          <label for="mothman">Mothman</label>
</fieldset>

legend : fieldset의 바로 아래 위치해서 폼 태그의 목적을 나타낸다.

label : input의 입력해야 하는 내용을 안내 한다.
(* 웹접근성을 높이기 위해 시멘틱한 요소를 사용해야 한다.)

<label 태그 선언방식>

• 명시적인 선언 방식
  label의 for="" 의 값과 input의 id를 일치시켜준다.

<label for="member_id">아이디</label>
   <div>
     <input type="text" required placeholder="아이디 입력" id="member_id">
      <button type="button">
         중복확인
      </button>
   </div>

• 묵시적인 연결 방법
  label태그 안에 input 태그를 넣어준다.
  

<label>
	이름 :
	<input type="text" name="name">
</label>

---

오늘 주된 내용은 선택자 였는데 이건 좀 더 꼼꼼히 살펴보고 각각의 예시를 쌓아서 블로그에 올려야 겠다.😂