2021.12.17의 기록

• 오늘 배운 내용

- 각종 HTML 태그들

---

수업 내용

• 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은 모듈 경로를 가짐.

---

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

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

---

• 경로 표시 방법

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

---

 

• a 태그

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

---

• form 태그

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

---

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

---

오늘의 평가

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

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

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

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