수업 내용

HTML
HTML(Hyper Text Markup Langage) : 웹문서 구조적으로 표현하기 위한 언어=> 태그를 사용하여 박스모델로 표현 - DOM(Document Object Model)
=> 브라우저 엔진에 의해 해석되어 출력 - CSL(Client Script Language) : HTML, CSS, JavaScript 등
태그의 이해
태그를 사용하여 HTML 문서 작성 - 태그는 대소문자 미구분 시작태그와 종료태그가 하나의 짝으로 구성 - 독립태그 존재 태그는 계층적 구조로 표현 - 상위태그와 하위태그 존재 : DOM Tree 시작태그와 종료태그 사이에 하위태그 또는 태그내용 표현 시작태그에는 속성과 속성값을 사용하여 태그를 다양한 형태로 표현
블럭, 인라인 레벨 태그
블럭 레벨 태그 : 하나의 태그가 하나의 라인(Line)을 모두 사용하는 태그 - div, h1, p, ol, ul 등 인라인 레벨 태그 : 하나의 태그가 라인 일부분을 사용하는 태그 - span, img, input, select 등

이클립스상 서버 등록 방법
Java Build Path에서 server 등록
Context Name = webapp 폴더 (계층적 구조로 존재)
web은 모듈 경로를 가짐.

이클립스 인코딩 방식 설정방법

window - preference - web
정하고 싶은 파일 원하는 방식으로 변경
웬만하면 UTF-8로 바꾸자

경로 표시 방법

리소스 파일이 HTML 문서와 같은 서버에 존재하면 프로토콜,서버명,포트를 생략하여 표현
절대경로 표현방법 : 서버의 최상위 디렉토리(Root Directory : /)를 기준으로 리소스 경로를 표현하는 방법
상대경로 표현방법 : 현재 요청문서의 위치를 기준으로 리소스 경로를 표현하는 방법

a 태그

=> href 속성을 이용하여 하이퍼 링크(Hyper Link) 기능을 제공
href 속성 : 요청 웹문서(웹프로그램)의 URL 주소를 속성값으로 설정
=> a 태그의 박스모델에서 클릭 이벤트가 발생될 경우 href 속성값으로 설정된 URL 주소의 웹문서(웹프로그램)을 요청하여 새로운 응답결과를 받아와 출력 - 페이지 이동
=> 브라우저의 주소창이 href 속성값으로 설정된 URL 주소로 변경
target 속성 : 웹문서(웹프로그램)을 요청하여 출력될 브라우저를 속성값으로 설정
=> 속성값 : _self(현재 브러우저 - 기본), _blank(새로운 브러우저), _top(최상위 브러우저) , _parent(부모 브러우저), _child(자식 브러우저), iframe 태그(가상의 브러우저)의 name 속성값

form 태그

a 태그를 이용하여 다른 웹문서(웹프로그램) 요청
=> href 속성에 요청 웹문서(웹프로그램)의 URL 주소를 설정하여 페이지 이동
=> 요청 URL 주소에 쿼리 스트링을 사용하여 값 전달
쿼리 스트링(QueryString) : URL 주소 뒤에 ? 기호를 사용하여 [이름=값] 형식으로 값 전달
=> & 기호를 사용하여 전달값을 연결해 여러개의 값을 전달 가능
URL 주소는 영문자, 숫자, 일부 특수문자로만 표현되며 그외 문자는 사용 불가능
=> 전달값으로 영문자, 숫자, 일부 특수문자를 제외한 문자 전달 불가능
=> 영문자, 숫자, 일부 특수문자를 제외한 문자는 부호화 처리하여 전달 - JavaScript 이용
form 태그 : 사용자로부터 값을 입력받아 웹프로그램을 요청하여 입력값을 전달
=> 하위태그로 입력태그와 요청 이벤트(Submit Event)를 제공하는 태그를 반드시 작성
action 속성 : 요청 웹프로그램(Servelt 또는 JSP)의 URL 주소를 속성값으로 설정
=> action 속성을 생략한 경우 현재 브라우저 주소창에 URL 주소의 웹프로그램 재요청
method 속성 : GET(기본) 또는 POST 중 하나를 속성값으로 설정 - 요청 방식
=> GET : 입력값을 URL 주소의 QueryString으로 전달 - 소용량의 보안이 필요없는 값 => POST : 입력값을 리퀘스트 메세지의 바디(Body)에 저장하여 전달 - 대용량 또는 보안이 필요한 값
enctype 속성 : 입력값을 전달하는 방식을 속성값으로 설정
=> [application/x-www-form-urlencoded] 속성값(기본) : 입력값을 인코딩 처리된 문자 데이타(2Byte)로 전달 => [multipart/form-data] 속성값 : 입력값을 원시 데이타(1Byte)로 전달 - 파일을 입력받아 전달할 경우 사용
name 속성 : 태그의 이름을 속성값으로 설정 - JavaScript에서 속성값을 객체로 표현
입력태그 : input, select, textarea 등 - 1개 이상
요청 이벤트(Submit Event)를 제공하는 태그 : input 태그, button 태그 등 - 1개
button 태그의 type 속성값을 [submit]으로 설정하면 버튼을 클릭한 경우 요청 이벤트 발생
=> 요청 이벤트가 발생된 경우 form 태그가 동작되어 설정된 URL 주소의 웹프로그램을 요청하여 입력값 전달 => 브라우저 주소창은 요청 웹프로그램의 URL 주소로 변경

스터디 내용
HTML 태그를 복습함 (웹 프로그래밍에서 제일 중요한 a, form 태그 위주 개념 정리)
깃(git) 관련 공부를 계획. (생활코딩 강좌 주말간 혼자버전)
곧 다가올 세미프로젝트의 대비점 토의
기술 면접 준비를 위한 주기적인 상호간의 java 개념 성 질문을 던지기로 계획함
주말 계획 세우기! 나는 자바스크립트와 깃을 혼자버전을 공부할 생각!

오늘의 평가

HTML의 기본 태크들을 배웠다. 그 중에서 웹 프로그래밍에서 주로 쓰이는 a태그와 form태그를 집중적으로 복습을 했다.

주소 url을 얻어와 웹 페이지를 열고 폼을 생성하여 버튼 및 입력을 받는 태크들을 이용한 예제를 보며 복습을 마쳤다.

잠깐의 css와 javascript 코드를 통해 동적인 웹이 무엇인지를 체감하게 된 하루였다. 자바를 한 때에 비해서는 크게 어려운 느낌은 없었지만 결코 가볍게 여기는 마음 없이 겸손히 꾸준히 공부에 임하겠다는 다짐을 했다.

주말간 힘내서 자바스크립트와 깃 공부를 해야지!