html

컨테이너와 전역 속성

• 콘텐츠나 레이아웃에 영향을 주지 않는 태그 요소를 컨테이너라 한다.
• 컨테이너는 영역을 묶어서 관리하고자 할 때 사용한다.
• 모든 태그에 공통적으로 지정 가능한 속성을 전역 속성이라 한다.
• id와 class는 태그명이 같은 요소들을 식별하기 위해 사용하는 속성들이다.
• id는 태그당 하나씩만 지정해야 하나, class는 다중 지정 및 중복 가능하다.

링크 만들기

• a 태그는 페이지를 다른 위치로 이동시킬 수 있는 링크를 만든다.
• href 속성에는 링크가 참조하는(이동하고자 하는) url을 입력한다.
• target 속성에는 새 페이지가 열릴 대상(탭)을 지정할 수 있다.
• target="_self": 현재 탭에서 열기
• target="_blank": 새 탭에서 열기
• href 속성을 통해 전화 걸기, 이메일 보내기 등을 지정할 수도 있다.
• <a href="tel:010-1234-5678"> <a href="mailto:komg00@naver.com">

목록 표시

• 목록은 연관 있는 항목들을 나열한 것이다.
• 목록 요소는 '순서 없는 목록'과 '순서 있는 목록'으로 구분할 수 있다.
• 목록 안에 들어가는 항목 요소를 표시할 때는 li 태그를 사용한다.
• ol, ul, li 태그는 모두 블록 레벨 요소를 표시하는 태그이다.

입력 요소 만들기

• input 태그는 입력 요소를 만드는 태그이다.
• input 태그는 type 속성을 통해 형태와 입력 값 유형을 결정한다.
  
  순서대로 type이 text, button, color, range, date
• name 식별자를 추가하여 input 요소를 구별할 수 있다.
  <input type="text" name="nickname" />
<input type="text" name="job" />

select와 textarea

• select는 선택 메뉴를 나타내는 태그이다.
• select의 각 선택지는 option 태그를 통해 표시한다.
• 각각의 option에는 value를 지정하여 추후 처리(자바스크립트를 통한 입력 값 처리)를 준비한다.
• textarea는 여러 줄의 일반 텍스트를 입력하는 요소를 나타낸다.

form 태그

• form은 사용자가 입력 요소에 입력한 데이터를 서버로 전송해준다.
• form은 입력 요소(input, select, textarea 등)를 감싸고, 데이터를 제출(submit)한다.

<form>
  <input type="text" placeholder="아이디">
  <br>
  <input type="text" placeholder="비밀번호">
  <br>
  <input type="submit" value="로그인">
</form>

'로그인' 버튼을 누르면 입력된 아이디와 비밀번호가 서버로 전송되고(요청), 서버 측에서 데이터를 처리한 결과를 클라이언트에게 보내준다(응답).

form의 속성

• action: 입력값을 전송할 서버의 url
• method: 클라이언트가 입력할 데이터를 어떤 식으로 전송할지(GET or POST)

<form action="example.php" method="POST">
</form>

위 예제는 example.php라는 서버 프로그램으로 입력값을 전송하여 요청하고, POST 방식으로 전송한다.

meta 태그

• meta 태그는 HTML 문서의 메타데이터(정보)를 표시하는 태그다.
• 검색엔진 최적화에 기여하며, 검색 결과에도 영향을 끼친다.
• charset는 문자 인코딩에 대한 요약 정보를 기입하는 속성이다.
• http-equiv는 콘텐츠 속성의 정보/값에 대한 HTTP 헤더를 제공한다.

<!-- IE 브라우저의 최신 버전의 엔진을 사용하라는 뜻 -->
<meta http-equiv="x-ua-compatible" content="IE-edge">
<!-- 10초마다 페이지 새로고침하라는 뜻 -->
<meta http-equiv="refresh" content="10">

• name 속성은 문서의 다양한 정보를 제공할 수 있는 메타데이터의 이름이다.
• content는 메타데이터의 구체적인 내용을 기입하는 속성이다.

뷰포트(viewport)

• 뷰포트는 현재 화면에 보여지고 있는 영역을 의미한다.
• 웹 문서는 기본적으로 PC 화면에 맞춰 설계되었기 때문에, 다른 기기에서 배율 조정이 일어난다.
• 배율 조정 현상에 대응하기 위해 개발자는 메타 태그를 사용해 뷰포트 관련 설정을 추가할 수 있다.

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

=> 뷰포트의 너비를 단말기 너비에 맞추고, 초기 배율을 1로 한다