[Day 6] 0404 회고 & HTML 그룹핑 복습 & Form

활기찬 2주 차 월요일-!

오늘은 메이커준님께서 진행하시는 회고로 아침을 시작했다.

https://www.makerjun.com/ 

메이커준을 소개합니다.

우테코에서 프론트엔드 교육 강사로 활동 중이신 준님:)

밝음의 아이콘이셔서 그런지 덩달아 나도 아침부터 활기활기🔥

 

크게 3부로 나눠서 회고를 진행하였는데,

 

1부 - 피드백이 중요한 이유

2부 - 무엇을 피드백 받아야 하지?

3부 - 피드백을 위한 체크리스트

 

순서로 진행하였다.

 

게임에서는 레벨, 점수, 경험치라는 측정치가 있기 때문에

내가 성장, 레벨업하는 것을 시각적으로 볼 수 있지만,

현실에서는 게임처럼 내가 성장하고 있는지 몸소 느낄 수 있는 방법이 없다🤢.

 

내가 과연 잘하고 있는가, 못하고 있는가.

잘하고 있다면 어떤 부분에서 잘하고 있고,

부족하다면 어떤 부분에서 부족한지

현실에서 객관적으로 알 수 있게 할 수 있는 방법이 바로 

"피드백"이다.

 

이러한 피드백, 또는 회고를 어떠한 방식으로 해야하는지,

중요하게 생각해야 할 점이 무엇인지에 대해서 3시간 동안 진지하게 생각해볼 수 있었다 :)

 

우리 회고6팀 헬-발자 팀원들이랑도 어떻게 서로 효율적으로 피드백을

주고 받을 수 있을지에 대해 얘기해본 결과,

팀 스프레드 시트에서 각자 코드 링크를 올린 후 팀원들에게 피드백을 받는 식으로 해보기로 결정했다:)

요런 식

 

다음 전체 회고는 2주 뒤인데,

일단 2주 동안 이런 식으로 피드백을 받아보고 나도 피드백을 주면서

2주 동안 이런 피드백이 주는 영향력이 매우 기대된다!

 

+) 구글 스프레드시트 철회하고 노션으로 노선 변경!  :)

https://www.notion.so/6-eace6e4578fb49c0a34ba2295c247069

 

---

점심시간 후에는 재현님과 HTML 수업 진도를 이어 나갔다.

특히 저번 주에 재현님께서 페이지(네이버 공홈, 동물의 숲, 삼성 공홈 중 1택)에 대해 

HTML 태그 그룹핑 과제를 내셨는데, 이번 시간에 과제한 것에 대해서 확인하는 시간을 가졌다.

거의 과제 확인만 3시간 정도 한 것 같은데 다른 동기들이 한 것을 보면서

이렇게도 쓸 수 있구나 깨닫기도 하고, 재현님께서 적재적소에 태그를 어떻게 써야 하는지에 대해서

알려주시기도 하면서 정말 그룹핑이란 어려우면서도 재밌다는 것을 느꼈다.

(많이 해보면서 경험치를 쌓자!!)

 

 

그룹핑 수업을 하면서 깨달은 점

•  <article>은 독립적으로도 사용할 수 있는 경우에 쓴다.
• <section> 안에 <section>을 써도 된다.
• <time>, <small>, <cite>, <dl>,<dt>,<dd>,<address> 등 보다 다양한 태그를 적재적소에 활용하자!
• 광고는 주로 <aside>를 사용
• <main>은 페이지 당 한 번만 사용하는 것을 권장

 

 

---

과제 확인 후에는 호준님과 저번 주에 했던 HTML Form 수업을 이어서 진행했다.

크게 <input>, <select>, <button>태그를 중심으로

Form에 대한 내용을 마무리할 수 있었다.

 

1. <input>

사용자가 정보를 입력할 때 쓰는 태그로, <form> 태그 안에 넣어서 쓰인다.

input의 타입으로는 text, search, date, time, range, radio, color....등 다양하게 있다.

 

*<label>은 <input>태그를 설명하는 텍스트로, 시멘틱하게 사용해야 좋다.

1) label 태그 안에 input을 넣어도 되고

2) lebel의 for 속성을 활용하여 label 따로 input 따로 써줘도 된다.

(**for은 id값과 일치해야 한다.)

 

 

2. <select>

드롭다운 리스트 박스를 생성하는 태그다.

리스트 안의 요소가 있어야 하므로 <option> 태그와 같이 쓰인다.

 

<form action="">
  <label for="myDevice">현재 사용하고 있는 스마트폰의 제조사를 선택해주세요</label>
  <select name="device" id="myDevice">
    <option value="iphone">아이폰</option>
    <option value="galaxy">갤럭시폰</option>
    <option value="ㅜㅜ">LG폰</option>
  </select>
</form>

 

3. <button>

말 그대로 버튼을 만드는 태그로, type으로는 submit, reset, button이 있다.

 

**<input> vs <button>

디자인적으로 컨트롤하기 쉽게 만들기 위해선 button을 우선적으로 고려하는 것이 좋다.

 

 

+)자매품 <datalist>

앞의 input과 select 를 섞어서 사용할 수 있는 태그로, 

쉬운 예시로 회원가입 시 이메일 주소 선택 혹은 직접입력 폼으로 생각하면 편하다:)

 

<label for="email-form">이메일을 입력하세요: </label>
    <input type="text" id="email-id">
    <span>@</span>
    <input type="text" id="email-at" list="emails" name="emails">
    <datalist id="emails">
    	<option value="gmail">gmail.com</option>
    	<option value="naver">naver.com</option>
    	<option value="daum">daum.net</option>
    	<option value="hotmail">hotmail.net</option>
    </datalist>

datalist를 통해 만들어 본 이메일 폼