HTML(2)

✅HTML구성

element(요소) : 태그
property, attribute : 속성

✅form

사용자로부터 값을 입력을 받는 양식을 만들기 위해서 사용 (ex. id, pw 입력)
사용자가 입력한 정보를 받는 블럭은 form태그로 감싸야함
중첩으로 사용불가

✅<form> 동작방법

1. 폼이 있는 웹 페이지 방문
2. 폼 내용 입력
3. 폼 안에 있는 모든 데이터를 웹서버로 보냄
4. 웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘김
5. 웹 프로그램은 폼 데이터를 처리
6. 처리결과에 따른 새로운 html 페이지를 웹서버에 보냄
7. 웹 서버는 받은 html 페이지를 브라우저에 보냄
8. 브라우저는 받은 html 페이지를 보여줌

✅form 컨트롤 Element(요소)

<input>

form태그 안에서 추가되는 입력 요소들 중 가장 중요한 태그
type 이라는 속성을 이용해 입력 양식을 여러가지로 변경하여 사용
닫는태그 없음

✅<form> 전송 방식

get

• URL에 정보가 담겨서 전송됨
• 전송할 수 있는 정보의 길이가 제한되어 있음
• 퍼머링크로 사용될 수 있음 → 정보를 식별하는 고유한 식별자(고유한 주소체계)

• URL 상에 파라미터를 표현할 때에는 '?' 앞뒤로 구분하여 앞에 것은 URL, 뒤의 것은 파라미터이다.
• 각각의 파라미터는 '&'로 구분하여 id 와 password라는 두개의 파라미터가 온 것을 알 수 있다.
• '='을 이용하여 파라미터와 파라미터의 값을 구분한다.

post

• header의 body에 담겨서 전송됨
• URL 상에 전달한 정보가 표시되지 않음
• GET에 비해서 보안상 약간의 우위에 있음 (사실상 동일)
• 전송할 수 있는 데이터의 길이 제한이 없음
• 퍼머링크로 사용할 수 없음
• 서버 쪽에 어떤 작업을 명령할 때 사용 (데이터의 기록, 삭제, 수정 등)

✅property, attribute(속성)

action

폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시

type

form 태그 안에서 <button>의 타입

• submit : 데이터를 제출하기 위한 버튼 (form태그 안에서는 기본값) → 기본값이라도 명시해주는것이 좋음
• reset : 초기화버튼으로 지정한다. 클릭 시 <form> 내부의 모든 값(value)을 초기화, 기본값(default value)을 지정해놨다면 기본값으로 초기화됨
• button : submit 하지않고 버튼 기능 그대로만 사용하고싶을때 지정, 클릭 이벤트 핸들러는 JavaScript로 직접 구현

<button type="submit> 과 <input type="submit">의 차이

<button>은 여는 태그와 닫는 태그가 있어 내용에 다른 태그들을 추가 할 수 있지만 <input>은 value값만 변경가능함
<button>은 오래된 브라우저에서는 지원하지 않을 수도 있음
<button>은 기본적으로 form태그 안에서는 submit 타입이므로 불필요한 폼 전송이 일어날 수도 있음
결론은 웬만하면 <input>태그를 쓰고, 버튼의 다양한 커스터마이징을 원한다면 CSS 처리를 하자!

✅식별자

변수나 함수의 이름을 작성할 때 사용하는 이름
영문자, 숫자, 언더스코어(_) 또는 달러($)만 사용 가능 (단, 시작은 숫자로 할 수 없음)
Camel Case방식, Underscore Case방식 으로 작성 가능

• Underscore Case방식: 소문자로만 작성하고 언더스코어로 연결

Camel Case방식을 더 많이 사용
자바와 마찬가지로 예약어를 식별자로 사용할 수 없음

id

문서내에 유일한 객체 식별자
모든 태그에 적용 가능
고유한 식별을 목적으로함(중복값 발생 X)
CSS, Jvavscript 에서 사용 많이함
JavaScript나 JQuery접근시 주로 사용

class

성격이 동일한 태그들을 그룹으로 나타내기 위한 식별자
재사용을 목적으로함(중복값 발생 O)
모든 태그에 적용 가능
CSS, Jvavscript 에서 사용 많이함

name

<a>,<img>,<form>태그에만 적용가능
태그의 의미 식별 X
컨트롤 요소의 값(value)을 서버로 전송
BackEnd에서 접근시 주로 사용

✅블록 요소 (block element)

• 사용 가능한 최대 가로 너비를 사용함 ( 기본 너비값은 100% )
• 전체를 차지하기 때문에 각 요소들이 수직으로 쌓임 ( 한 줄에 한개만 배치 )
• 크기값 가질 수 있음 ( 가로 너비 & 세로 길이 지정 가능 )
• 상하좌우 마진 & 패딩을 가질 수 있음
• 레이아웃을 작업하는 요소로 적합

<div>

division(분할)의 약자
주로 특정 작업을 수행하기 위한 일종의 컨테이너로 자주 사용됨
CSS와 함께사용하는것이 일반적
속성 : style, width, height, background-color, float, margin

✅인라인 요소 (inline element)

• 사용 가능한 필요한 만큼의 영역을 사용함 ( 컨텐츠 너비 만큼 )
• 요소들이 수평으로 쌓임 ( 한 줄에 여러개 배치 )
• 크기값 가질 수 없음 ( 사이즈 지정 불가능 )
• 상하 마진 적용 불가능 ( 좌우 마진은 가능 / 상하좌우 패딩도 가능 )
• 텍스트를 작업하는 요소로 적합

<span>

주로 특정 작업을 수행하기 위한 일종의 컨테이너로 자주 사용됨
CSS와 함께사용하는것이 일반적
속성 : display, width, height, background-color, color, font-style, margin, padding

✅HTML 레이아웃 관련 시멘틱 태그

<section>와 <article>의 차이점
article과 section 태그는 모두 구획을 짓기 위한 요소
article은 독립적인 요소를 다룸
section은 하나의 요소에 목차와 같은 구획을 나눌 때 사용