사용자로부터 입력받은 정보를 모아서 서버로 보내 원하는 처리를 할 수 있게해주는 중요한 요소
입력양식을 만들어주는 폼 태그는 사용자가 입력한 데이터를 서버로 보내는것을 목적으로 하는 태그, 따라서 서버에 대한 이해가 반드시 필요하다.
입력양식이 사용된 페이지의 예
로그인 페이지
회원가입페이지
검색어입력페이지
서버
예를 들어로그인을 하려면 아이디와 비밀번호라는 정보요소가 필요하다. 요소를 입력을 하면 인터넷을 통하여 서버에 전달되고 정보를 제공해준다. 서버란 입력한 정보를 받아서 처리해줄 수 있는 프로그램, 그 프로그램이 설치되어있는 컴퓨터까지를 서버라고한다. 간단히 말해서 서버란 정보를 처리하고 제공하는 호스트
form
입력요소들을 감싸고, 입력 값을 서버측으로 제출(submit)하는 역할을 하는 태그
안에 다양한 입력태그들을 포함시키면 해당 입력요소들은 양식의 개별 항목으로써 역할을 수행한다.
단순히 폼 요소안에 입력요소를 포함한 것만으로는 서버에 입력 값을 전송할 수 없다. 역할을 수행하기 위해서는 아래의 속성을 사용해야한다.
action:입력값을 전송할 서버의 주소(url)
method:클라이언트(사용자)가 입력한 데이터를 어떤 방식으로 전송할지(GET or POST)
method
GET과 POST 둘중에서 어떤 방식으로 서버에 요청을 보낼지 고르는 것
GET:서버에 요청을 보내서 응답을 받아낸다. 서버로부터 정보를 '가져온다'라는 성격의 요청
POST:서버에 요청을 보내어 작업을 수행한다. 서버에 있는 데이터를 추가,수정,삭제한 후에 응답을 받아낸다. 서버의 정보를 '조작한다'라는 성격의 요청
이름을 반드시 지어줘야함
폼요소안에 필요한 만큼 입력요소를 포함하여 다양한 형태의 양식을 만들 수 있다. 폼요소안에 포함되어있는 각 입력요소에는 이름(name)속성을 추가해 각각 입력 항목의 역할을 구별해줄 수 있다. name은 들어있는 입력요소의 역할을 구별해주는 식별자
화면상 입력요소의 모양은 바뀌는 게 없으나 추후 실제로 서버에 데이터를 전송하는 작업을 하였을때에 상당히 중요하다. 서버가 정보를 받으면 name속성으로 항목을 구별하기 때문
시맨틱(의미론적인) 코드
다른점개발자와 브라우저에게 의미를 제공한다.
컨테이너코드와 역할이 거의 같지만 태그의 이름이 요소의 목적이나 역할을 강조하는 의미로 지어져있다라는 차이점이있다. 검색엔진에 좋은 단서가된다.
시멘틱태그의 장점
대부분은 컨테이너 태그(span/div)와 같이 특별한 스타일을 제공하지 않지만 아래와 같은 이점이 있다.
검색 엔진은 시멘틱 태그를 웹페이지를 검색하는데에 있어서 중요한 단서로 본다
적극적으로 사용하게되면 시각장애가있는 사용자가 화면판독기,음성인식기로 페이지를 탐색할때 참조가된다.
중요한 내용을 조금더 강조하는 효과가 있다. 웹 접근성을 향상 시킬 수 있다
코드의 가독성이 좋아진다. 이름으로 역할을 강조하기때문에 코드를 볼때 조금더 빠르게 코드를 캐치할 수 있다.
컨테이너의 남용을 방지할 수 있어 코드쓰기가 편하다.
컨테이너의 남용? 웹컨텐츠를 많이 페이지에 채우게되면 스타일이나 div가 많아짐 많아지게되면 코드를 작성하기에도 불편해짐
시멘틱코드의 종류
<articcle>-독립적인 컨텐츠
<aside>-별도의 컨텐츠
<details>-추가적인 상세정보
<figcaption>-figure의 자막
<figure>-설명이 붙는 독립컨텐츠
<footer>-맺음말
<header>-머릿말
<main>-주된 (메인) 컨텐츠
<nav>-네비게이션링크
<section>-컨텐츠의 한 섹션(절)
<summary>-detail의 헤더
<time>-강조할 시간
meta
HTML문서에 대한 메타데이터를 정의한다.
메타데이터란 데이터에 대한 데이터, '정보'를 의미한다.
meta태그는 항상 head 태그의 안에 들어가며, 문자세트, 페이지설명,키워드,문서의 작성자 및 뷰포트 설정을 지정하는데 사용된다. 없어도 페이지는 잘만들어지지만 웹페이지에 대한 정보를 제공하므로 검색엔진이 페이지를 검색할 때 참고할 수 있고, 검색결과에도 반영할 수 있다. 실무에 들어가게되면 페이지를 만드는 것뿐만 아닌 실제로 사용자들이 사용을 하는 웹을 만들어야하니 반드시 필요한 사항이다.
메타데이터의 유형과 속성
charset:문자세트 문자인코딩에 대한 요약정보를 기입하는 속성 문자인코딩이란 한글을 표시하기위해 문자세트를 지정하는 작업으로 영문과 한글을 모두 사용하기위해 utf-8방식을 사용하는 것이 좋다.
인코딩을 명확히 기입하지않으면 웹븡라우저 설정상황에 따라 자동으로 인코딩을 추정해서 처리한다. 문자가 깨질 가능성이 생긴다.
http-equiv:컨텐츠 속성정보에 대한 http 헤더 HTTP란 인터넷에서 데이터를 주고받을 수 있는 프로토콜(약속)이다. 정보를 송수신할때 사용하는 기술적인 방법. 해당속성에 http관련정보를 지정하면,'content'라는 속성에 그에 대한 정보(값)을 지정한다. 지정되어있는 값이 해당정보의 역할을 수행하게 된다.
name: 문서정보
form 에서는 입력요소간의 구분을 위해 사용이 된다. meta에서는 속성을 이름으로 content속성을 값으로 하여 문서정보를 이름+값 쌍의 형태로 제공할 때 사용할 수 있다. 검색최적화에 도움이 되는 작업이다.
HTML은 웹페이지에서 어느 부분에 텍스트나 이미지가 있어야할지, 요소가 있어야 할지 등등을 나타내는 역할을 한다. HTML은 '태그'라고 불리는 표시법을 사요와여 맡은 역할을 수행한다.
태그의 구성 요소
태그명(태그의 이름)
여는(시작) 태그
닫는(끝) 태그
컨텐츠
태그의 기본 형태는 <태그명>컨텐츠< /태그명 > 으로 구성된다. 컨텐츠 생략이 가능할 때에는 단일태그를 사용한다.
현재 교육을 진행하면서 사용하는 프로그램인 'Visual Stuudio code'에서는 여는 코드를 입력하면 자동으로 닫는 코드가 입력이 되어 크게 신경을 쓸 필요는 없지만 추후에 타 프로그램을 사용할 수도 있으니 반드시 알고 있어야하는 개념이다.
단일 태그형태
<태그명>
<태그명/>
올바른 태그 작성을 위해 알아두어야 할 사항
태그의 이름은 소문자로 쓴다.
여는 태그와 닫는 태그를 정확히 입력한다.
태그의 컨텐츠로 또 다른 태그가 포함될 수 있다.
들여쓰기를 적절하게 사용하는 것을 적극 권장한다.
속성
속성은 태그의 부가적인 기능을 정의하는 것으로 선택사항이다. 속성은 시작태그 내부에 입력을 하면된다. 갯수 제한은 따로 없고 여러 개를 추가할 경우 구분하기 위해 공백을 반드시 사용해야한다.
속성을 추가한 태그에 의해 표시되는 컨텐츠는 형태가 바뀔 수도 있다. 하지만 겉으로 드러나지 않는 속성도 여러가지 있다.
- (예시)속성을 추가한 태그의 형태
주석
주석은 코딩을 할때에 코드에 대한 메모를 남기기위한 용도로 주요 사용된다. 코딩을 진행하는 동안 사람에게는 보이지만 웹브라우저에는 보이지않는 코드이다.
문서 기본 구조
HTML문서에는 화면에 표시될 컨텐츠 외에 '문서 정보'도 포함된다. 문서의 정보를 기입하는 부분을 head 문서의 내용을 기입하는 부분을 body라고 한다. 이를 구분해서 적으면 작성자는 코드 관리하기가 편해져서 좋고 이를 해석하여 랜더링하는 웹브라우저나 웹시스템에게도 훨씬 좋다.
HTML문서는 모든 것을 태그로 표현한다. 따라서 정보와 내용의 구분 또한 태그로 해주어야 한다.
head 내부의 코드와 body 내부의 코드가 모여서 HTML문서를 구성한다. 두태그를 html태그로 묶어서 표현해줘야한다.
문서의 타입 (DOCTYPE)까지 써주면 완성이다. 작성하지 않아도 문제는 없지만 적어주는 것을 권장한다. 아래는 주로 사용하는 HTML문서의 기본 구조이다.
하이퍼링크를 통해 다른 문서로 접근할 수 있는 텍스트와 컨텐츠들을 표시하는 언어 쉽게 말해, 웹브라우저를 통해 표시되는 콘텐츠를 정의하기 위해 사용하는 언어
HTML5
HTML은 1991년에 웹의 창시자인 '팀 버너스리'에 의해 최초로 제안되었다. 만들어진 순간부터 지금까지 계속해서 기능을 개선하거나 추가해가면서 발전을 해왔다. 그 과정에서 새로운 버전이 계속 발표(버전 up)되었는데, 현시점에는 HTML5가 웹 개발 표준으로 인정받고 있다.
HTML과 HTML5의 차이
간단하게 말해서 버전의 차이이다. 현재 우리가 배우는 HTML은 제일 최근 버전인 HTML5라고 생각하면 된다.
HTML5가 2014년 10월에 발표되었는데 그러면서 많은 요소가 제거되거나 수정되었다.
정의
HTML-웹페이지 개발을 위한 기본언어
HTML5-컨텐프를 구조화 하고 표현하기 위해 인터넷 기술과 상호작용하기위한 핵심기술인 '마크업 언어'와 함께 새로운 기능을 가진 새로운 버전
멀티미디어
HTML-비디오 및 오디오를 지원하지않음.
HTML5-비디오 및 오디오를 지원함 (예전에는 비디오,오디오를 지원할 필요성이 적었으나, 현재는 영상,음성과 같은 시각적,청각적요소의 필요성이 늘어나서 그런게 아닐까?)
위치식별
HTML-사이트를 방문하는 사용자의 위치를 추적하는 기능이 있지만 프로세스가 번거롭고 모바일에서 로그인할 경우 찾기가 어려움
HTML5- JavaScript Ceolocation API를 사용하여 엑세스를 하는 모든 사용자의 위치를 식별하는데에 사용가능.
통신
HTML-클라이언트와 서버간의 통신은 소켓지원이 없기 때문에 스트리민 및 긴 풀링을 통해 수행되었음.
HTML5-클라이언트와 서버간의 통신을 허용하는 웹소켓을 지원.
브라우저 호환성
HTML-어도비플래시,실버라이트 등과 같은 다른 도구를 사용하여 벡터그래픽을 지원할 수 있음.
HTML5-캔버스와 SVG가 기본적으로 내장되어있어 벡터그래픽이 기본적으로 지원됨.
저장
HTML-브라우저 캐시메모리를 임시 저장소로 사용.
HTML5-응용프로그램 캐시,SQL 데이터베이스 및 웹 저장소와 같은 여러 저장소 옵션이 있음. 저장을 위해 사용하능한 JS API의 도움으로 백그라운드에서 JavaScript를 사용할 수 있음
스레딩
HTML-사용자가 상호작용하는 브라우저 인터페이스와 자바스크립트는 동일한 스레드에서 실행되므로 성능 문제가 발생
HTML5-자바스크립트 밀 웹브라우저 API가 있어서 다른 슬레드에서 자바스크립트 및 브라우저 인터페이스를 실행할 수 있음
