TIL

🛌 감상

📙 열품타 5hour
👍🏼 -
👎🏼 늦게 일어남, 공부 시간 부족

🚀 목표

• 노마드 코더 React 복습 (-3/27)
• Udemy에서 Javascript 강좌 수강하기 (64/682)
• 매일 커밋 연속 30일 달성하기 (4/30)
• 3.24 발견 노션으로 옮기기
• SSAFY 지방 얼리버드 신청하기 (-3/26)
• 3.25에는 5시 기상 flex하기(제발)

🐥 개발 관련 팁

진짜 코딩 실무에 다가가고 싶으면 Python-GUI를 공부해서 프로젝트 만들기-포트폴리오-피드백 이 과정을 계속 반복

💡 발견!

Technical Interview Guidelines for Beginners
알고리즘 문제 해결 학습 이정표
코딩 캠프 총정리
취업을 위한 코딩테스트 공부 방법
알고리즘 공부 어떻게 해야 할까요
Open Source Flatform, ASP.net
코테 준비 기초 강의
패스트캠프 네카라쿠베
파이썬 알고리즘 무료 강의
실전 알고리즘 강좌

[링크 목록]

The Web Developer Bootcamp 2021

📣 The Web Developer Bootcamp 2021: 5.46-6.58

HTML: Form Element

<form action=""></form>
<!-- action attribute: specifies where the data should be sent, when the form is submitted>

submit a form -> http request will be sent
검색 기능에 활용 (ex. reddit), 정보 제출, 검색어 입력, 아이디와 비밀번호 입력

---

HTML: Form & Input Types & label & Button & Name Attribute

label element associates a direct connection between some input or some form control or some piece of text. - better experience for screen readers.
Ulso makes the label itself clickable

id supposed to be unique for the one input. label and id should be same.

Submit Also Submit Do not submit the form

Enter a Username

Enter a Username and submit

Enter a password

Enter a color

Enter a number

Enter a number

Search Reddit Search Google

---

<form action="/tacos">
<button>Submit</button>
<button type="submit">Also Submit</button>
<button type="button">Do not submit the form</button>
<!-- Not common, we got a javascript-->
  <p>
      <label for="username"> Enter a Username </label>
      <input id="username" type="text" placeholder="username">
  </p>
    <p>
      <label for="username"> Enter a Username and submit </label>
      <input id="username" type="text" placeholder="username" name="username">
  </p>
  <p>
    <label for="password"> Enter a password </label>
      <input id="password" type="password" placeholder="password">
  </p>
  <p>
 	  <label for="color"> Enter a color </label>
      <input id="color" type="color">
  </p>
  <p>
      <label for="number"> Enter a number </label>
      <input id="number" type="number" placeholder="number" min="10" max="100">
  </p>
  <p>
      <label>
         Enter a number
         <input type="number" placeholder="enter a number">
      </label>
    <!--This is a valid approach, but it's far more standard and common-->
  </p>
  <input type="submit" value="Yes, I also submit, but developers don't like me">
</form>
<!-- 실용적이진 않지만 원리 이해하기 좋음 -->
<form action="https://www.reddit.com/search">
  <input type="text" name="q">
  <button> Search Reddit </button>
</form>
<form action="https://www.google.com/search">
  <input type="text" name="q">
  <button> Search Google </button>
</form>
<form action="https://www.youtube.com/results">
  <input type="text" name="search_query" placeholder="Search Youtube. Press Enter">
</form>

---

HTML: Radio bottons, checkbox, select

I agree

XS S M

Please Select an Entree --Please choose an option-- Fish Vegetarian Steak Actually, I don't want it

Amount of Cheese

Any special Requests?

Submit

---

<form action="/birds">
  <input type="checkbox" name="agree_tos" id="agree" checked>
  <label for="agree"> I agree </label>
  <p>
    <label for="xs">XS</label>
    <input type="radio" name="size" id="xs" value="xs">
        <label for="s">S</label>
    <input type="radio" name="size" id="s" value="s">
        <label for="m">M</label>
    <input type="radio" name="size" id="m" value="m">
  </p>
  <p>
    <label for="meal"> Please Select an Entree </label>
    <select name="meal" id="meal">
      <option value="">--Please choose an option--</option>
      <option value="fsh">Fish</option>
       <option value="veg">Vegetarian</option>
       <option value="stk">Steak</option>
      <option value="non" selected>Actually, I don't want it</option>
    </select>
  </p>
  <p>
    <label for="cheese"> Amount of Cheese </label>
    <input type="range" id="cheese" name="cheese_level" min="0" max="25" step="5">
  </p>
  <p>
    <label for="requests">Any special Requests?</label>
    <textarea id="requests" rows="10" name="requests" cols="40" placeholder="Type Something here, But this is not an input"></textarea>
  </p>
  <button>Submit</button>
  </form>

---

✅ Forms Practice Excercies(Done)

Form Validations

요즘에는 자바스크립트를 사용하기 때문에 로그인 창에 아이디, 비번 입력할 때 바로 잘못된 것 알려주지만
예전에는 submit 버튼을 눌러야만 refresh 되면서 알려줌 (server side validation)

---

Enter First Name

Username

Submit

---

<form action="/dummy">
  <label for="first">Enter First Name</label>
  <input type="text" name="first" id="first" required>
  <p>
    <label for="username">Username</label>
    <input type="text" id="username" name="username" minlength="5" maxlength="20" required>
    <input type="email">
    <input type="url">
  </p>
  <button>Submit</button>
  </form>

---

✅ Creating a Marathon Registragion Form

Race Resistration!

First Name Last Name

Select a Race:

Fun Run 5k

Half Marathon

Full Marathon

Email Password

Select Age Group --Please select the age-- uner 18 18-30 30-50 over 50

Register

---

CSS

Rules

h1 {color: purple;}
selector {property: value;}
input[type="text"]{border:2px solid red;}