tweet form

html 코드

<section>
  <h1>What's happening</h1>
  <form action="#" method="POST">
    <img src="#" alt="@frenchkebab" />
    <textarea name="" id="" placeholder="What's happening?" maxlength="280"></textarea>

    <button type="button" aria-label="Upload files">
      <!-- icon -->
    </button>
    <input type="file" multiple accept="image/*, video/*" />
    <button type="button" aria-label="Search GIFS...">
      <!-- icon -->
    </button>
    <button type="button" aria-label="Create a poll">
      <!-- icon -->
    </button>
    <button type="button" aria-label="Choose emoji">
      <!-- icon -->
    </button>
    <strong aria-label="0 out of 280 characters"></strong>
    <button type="button" aria-label="Add another Tweet">
      <!-- icon -->
    </button>
    <button type="submit">Tweet</button>
  </form>
</section>

😀 알아갈 점들

😎 section 태그

오로지 tweet 작성만을 위한 부분이므로, section 태그를 사용한다.
form 작성 이외에 어떠한 기능도 하지 않으므로, 브라우저에게
'여긴 form을 작성하기 위한 section이야!' 라고 명시적으로 알려주면 훨씬 의미가 살아날 것!

😎 section 태그는 sectioning element이므로 반드시 제목을 작성!

heading으로 보이는 요소가 보이지 않더라도 문법적으로 완전하려면 반드시 작성해야 한다!

파일 업로드 버튼

• button 보다는 파일을 업로드하는 input의 기능이 더 강하다!
  (버튼은 따로 예쁘게 만들어 주고, 해당 버튼을 누르면 input이 동작하게끔 한다)
• multiple 속성을 사용하면 파일을 여러 개 업로드할 수 있다.
• accept="image/*, video/*" 값을 넣어주면 이미지와 비디오만 업로드 하도록 설정할 수 있다