[HTML][국비교육] Day 35

🔍 이미지 태그 <img>

화면에 이미지를 추가할 때 사용

• src 속성 : 보여질 이미지를 URL로 지정 👉🏻 절대경로 URL, 상대경로 URL을 이용할 수 있음
• alt 속성 : 이미지의 경로가 잘못되었거나 파일이 손상되었을 때 대체할 텍스트를 지정
• width 속성 : 이미지의 너비
• height 속성 : 이미지의 높이
  👉🏻 width, height속성은 정수값으로 설정
• <a href="" target=""> </a>으로 감싸서 클릭시 링크 이동하게 표현 가능

title 공용속성 : 태그에 설명을 추가하는 기능
적용된 태그 위에 마우스를 가져다대면 설명팝업(툴팁, tooltip)이 보임

---

🔍 테이블

표 형식을 표현하는 태그

• <table> : 표를 만들 때 사용하는 태그
  자식 요소들로 행과 열을 표현
• <tr>
  테이블의 각 행을 표현 👉🏻 table 태그의 자식 요소로 사용됨
• <th>, Table Head / <td>, Table Data
  테이블의 칸(셀, cell)을 표현 👉🏻 tr 태그의 자식요소로 사용됨
  th는 제목 셀, td는 데이터 셀을 표현

➰ 테이블 태그를 구성하는 기본 구조

<table>
  
  <tr>
    <th>제목1</th>
    <th>제목2</th>
  </tr>
  
  <tr>
    <td>데이터1</td>
    <td>데이터2</td>
  </tr>
  
</table>

➰ 테이블의 자식태그들

• <caption> : 테이블의 이름(설명)을 지정하는 태그
  • 테이블 상단 바깥쪽에 위치하는 문구를 지정할 수 있음
  • 실 사이트에서는 보이지 않게 스타일을 설정하는 경우가 많음
• <thead>, Table HEADer : 테이블의 머릿글로 최상단행으로 고정됨
• <tbody>, Table BODY : 테이블의 본문으로, thead와 tfoot의 중간 영역
• <tfoot>, Table FOOTer : 테이블의 바닥글로 최하단행으로 고정됨
  👉🏻 tr 태그의 부모태그, table 태그의 자식태그

➰ <th>, <td> 테이블셀 태그들의 공간 확장 속성

• <colspan> : 열(column)을 확장하는 속성
  셀이 차지하려는 칸 수를 숫자로 지정
• <rowspan> : 행(row)을 확장하는 속성
  셀이 차지하려는 줄(행)의 수를 숫자로 지정

---

🔍 HTTP(WEB Service) 통신 과정

HTTP Request(HTTP 요청), HTTP Response(HTTP 응답)에 사용되는 정보를 메시지라고 부름
요청 메시지, 응답 메시지는 HEADER 영역, BODY영역으로 구성됨

• HEADER 영역
  메시지의 속성, 설정 정보를 담고 있는 영역
• BODY 영역
  메시지의 내용물(본문, 컨텐츠)을 담고 있는 영역

---

🔍 form 태그

클라이언트가 서버로 HTTP요청을 보낼 때 데이터를 포함해서 전달(요청)할 수 있도록 만들어주는 태그

• 요청 데이터를 사용자가 직접 입력할 수 있도록 만들어줌
  요청데이터 : HTTP요청 메시지에 포함시키는 데이터 ➡ 요청 파라미터, 전달 파라미터, 전달 데이터
• <input>, <textarea>, <select> 등의 특정 자식 태그를 이용하여 데이터 입력요소를 만듦

➰ 주요 속성

• action : 요청 데이터를 전달할 서버의 URL을 지정 👉🏻 ""로 비워두면 현재 보고있는 페이지의 URL로 요청됨
• method 속성 : 요청데이터를 서버로 전달하는 방식을 지정 👉🏻 get 또는 post를 적용할 수 있음

➰ 주요 태그

• <input type= "text"> : 서버로 전송할 데이터를 사용자가 입력할 수 있는 입력창 태그
• <input type= "submit"> : 서버로 입력된 데이터를 전송하는 버튼 태그

---

🔍 HTTP의 요청 방식

Request Method, 요청 메소드

• 요청 메시지를 서버로 보낼 때 요청 데이터를 전달하는 방식을 나타냄
• HTTP Request에는 반드시 요청 메소드가 지정되어야 함 👉🏻 따로 지정하지 않으면 기본값으로 get방식으로 처리됨
• 주로 get방식, post 방식을 사용

➰ GET 방식, GET Method

URL의 마지막에 ?를 붙이고 그 뒤에 요청 데이터를 포함시킴 👉🏻 HEADER영역으로 들어감
https://www.google.co.kr/search?q=JAVA

• 요청데이터는 쿼리스트링 형식으로 작성
• GET 방식은 전달 데이터가 짧을 때, 적을 때, 없을 때 사용
• URL은 서버의 경로 + 자원의 경로를 포함하고 있음
  http://localhost:8088/tag/tag_11.html?query1=12345&query2=abcde
  • 서버의 경로 : http://localhost:8088/
  • 자원의 경로 : /tag/tag_11.html
  • ?는 전달데이터(요청 파라미터)의 시작을 알림 👉🏻 쿼리스트링 형식으로 작성됨

➰ POST 방식, POST Method

요청 데이터를 쿼리스트링 형식으로 요청 메시지의 BODY영역에 포함시켜 전달 👉🏻 GET방식과는 다르게 URL에 전달 데이터가 노출되지 않음

• POST방식은 전달데이터가 길고 복잡할 때 사용
  ❗ 민감정보일 경우 최대한 POST 방식을 사용

💡

• 서버의 데이터(DB), 자원을 조회(SELECT)할 때 필요한 데이터를 전달한다면 GET 방식을 선호
• 서버의 데이터(DB), 자원을 변화(INSERT, UPDATE, DELETE)시킬 때 필요한 데이터 전달에는 POST 방식을 선호

👉🏻 그렇다고 변화가 있을 때 무조건 POST만 쓰는 것은 아님! 코드가 짧고 민감정보가 아니면 GET을 사용하기도 함

• DB데이터를 삭제(DELETE)하는 URL 요청은 GET으로도 많이 작성됨

---

🔍 쿼리 스트링, Query String

HTTP통신에서 클라이언트가 서버로 데이터를 전달하는 형식

• "키=값" 쌍으로 데이터를 표현 👉🏻 "변수명=데이터"라고 생각해도 됨
• 키, 값 모두 String(문자열)타입으로 처리됨
• 여러개의 데이터일 경우 각 데이터 쌍을 &로 구분
  ex. id=abc&pass=123