22.02.16
유노코딩님의 html기초 수강 후 복습하는 블로그
오늘 배운 태그와 속성 위주로 정리했음

Select와 Textarea

• select는 다수의 옵션에서 선택을 할 수 있게 한다.
• select에서 multiple속성을 추가하면 선택지가 펼쳐진 상태로 보이고 다중선택도 가능하게 된다.
• option에서 selected속성을 추가하면 그 option은 기본적으로 선택된 상태로 보여진다.
• textarea는 텍스트를 입력할 수 있게해준다. input과 다른 점은 여러줄을 입력할 수 있고 따라서 자동으로 스크롤바가 생긴다.
• textarea에도 속성을 추가할 수 있다. rows는 열, cols는 행(너비)을 제한할 수 있다.

<select name="pet" multiple>
    <option value="dog">강아지</option>
    <option value="cat">고양이</option>
    <option value="hamster">햄스터</option>
    <option value="parrot">앵무새</option>
</select>

<textarea name="content" rows="10" cols="30">
  텍스트창에 기본적으로 써지는 메시지입니다.
  사용자는 내용을 지우고 새로 입력하거나 이어서 입력 가능합니다.
</textarea>

Form

• form이란 사용자가 입력한 데이터를 서버로 보내는 태그

• form의 속성들

  💡 action = 입력값을 전송할 서버의 url

  💡 method = 클라이언트가 입력한 정보를 어떻게 전송할지 (GET 또는 POST)

  • cf. GET vs POST
    GET = 서버에서 정보를 요청해서 가져오는 것
    POST = 서버의 데이터를 조작하겠다.
    

<form action="exam.php" method="post">
 <input type="text" placeholder="이름" name="name">
 <br>
   <select name="pet">
     <option value="dog">강아지</option>
     <option value="cat">고양이</option>
     <option value="parrot">앵무새</option>
   </select>
 <br>
 <input type="submit" value="전송"> 
</form>

meta 태그에 속성을 넣어보자

• meta태그는 항상 head태그 안에 들어간다.

• 웹페이지에 대한 정보를 제공한다. 따라서 페이지 내용보다는 페이지 검색에 참고가 되는 정보를 제공한다.

• 속성의 종류가 매우 다양하고 많다. 직접 써보고 찾아보면서 익히자!

• charset = 문자세트를 지정하여 문자가 깨질 가능성을 낮춘다, utf-8(한글, 영문 사용)

• http-equiv = http헤더를 제공, 데이터를 주고 받는데 필요한 정보를 제공하는 속성

  예를 들어 IE 브라우저의 최신 버전 엔진을 사용하라던가 10초마다 페이지를 새로 고침하라던가...
  (http에 대한 추가 공부가 필요할 것 같음)

• name, content = name 속성 + content 속성 (이름+값) 한 쌍의 형태로 정보 제공
  💡 name=”author”, content=”ㅇㅇㅇ” <!— 문서 제작자 —>
  💡 name=”description”, content=”페이지에 대한 요약”
  <!—브라우저 즐겨찾기 기본값—>
  💡 name=”kewords”, content=”예) 강아지, 고양이, 반려동물”
  <!— 콘텐츠 관련, 쉼표로 구분 —>

뷰포트(viewport)

• 뷰포트란 현재 화면에 보여지고 있는 영역을 의미한다. 기기에 따라서 같은 뷰포트도 크기가 다르게 보인다.
• mata태그에서 뷰포트 설정을 넣어 기기가 달라져도 배율조정 현상에 대응할 수 있다.

   <meta name="viewport" content="width=device-wideh, initial-scale=1.0"> 

💡 뷰포인트 설정, 너비는 디바이스 너비에 맞춰서 비율은 1.0(원래 그대로)