[TIL] HTML FORM과 TABLE, 약간의 CSS

HTML FORM

<Form> 기본 속성

• 폼은 정보를 입력하고 특정 목적지로 정보를 보내주는 역할을 한다.
• method
  • GET : get은 웹 서버에 데이터를 요청할 때 사용, 보안이 필요없는 데이터
  • POST : post는 파일을 올리거나, 보안이 필요한 데이터를 전송할 때 등 사용

1. form에 데이터 입력
2. submit 버튼을 눌러 웹서버로 전송
3. 웹 서버는 데이터를 처리하기 위해 APP을 호출
4. 필요에 따라 APP은 DB로 데이터를 전송
5. DB에서 CRUD 작업이 일어나고 작업 결과를 APP으로, WEB으로 전송
6. 웹 서버는 받은 결과를 Client 브라우저에게 전송
7. 사용자 브라우저는 Response 받은 페이지를 렌더링

<input>

• 다양한 속성을 통하여 다양한 정보 입력을 받을 수 있는 Tag
• type에 따라 text,password,radio,range 등 다양한 타입을 지원한다.

<label>

• <input> 태그를 설명하는 텍스트를 옆에 붙여 무엇을 입력해야 하는지 설명

• 웹 접근성을 고려하여 시각 장애인들도 폼을 사용할 수 있도록 시멘틱하게 사용한다.

• 사용법

  • 텍스트의 설명과 폼 입력 모두를 포함하는 방식

  <label>
      이름 :
      <input type="text" name="name">
  </label>

  • 폼 입력에서 분리하여 for 속성을 이용해 레이블을 지정하는 방식

  <label for="myName">이름 : </label>
  <input type="text" name="name" id="myName">
  

• <label> 의 for 속성은 해당 레이블이 속할 폼 컨트롤의 id 값과 일치해야한다. 묶어주는 역할

<select>

• <select> 요소는 드롭다운 리스트 박스
• <option> 요소와 같이 사용

<form action="">
  <label for="dropBox">드롭박스</label>
  <select name="drop" id="dropBox">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
</form>

• multiple 속성을 사용하면 사용자가 여러개의 option 요소를 선택할 수 있게됨
  • windows 에서는 ctrl 누르고 클릭
  • mac에서는 command 누르고 클릭

<option>

• <select> 요소의 자식으로 사용됨
• 옵션
  • value : 드롭다운 메뉴에서 선택했을때 전송되는 값
  • selected : 드롭다운 메뉴에서 기본으로 선택되는 옵션 , 생략하면 첫번째 option값이 전송

<fieldset>

• fieldset 요소를 사용하면 form 태그들의 자식들을 그룹화 할 수 있다.
• 폼 내용이 방대하여 섹션별로 나눌 필요성이 있을 경우 유용

<form action="">
  <fieldset>
    <legend>개인정보</legend>
    <label for="">이름</label>
    <input type="" name="" id="">
    <label for="">성별</label>
    <input type="" name="" id="">
    <label for="">나이</label>
    <input type="" name="" id="">
  </fieldset>
  <fieldset>
    <legend>개인정보 제공 동의</legend>
    <label for="">개인정보 제공에 동의하십니까?</label>
    <input type="" name="" id="">
  </fieldset>
</form>

<legend>

• <fieldset> 태그 바로 뒤에 위치하며 폼 그룹의 목적을 나타내는 제목
• 반드시 <fieldset>의 첫번째 자식으로 사용되야함

<button>

• <button> 태그는 클릭 가능한 버튼
  • submit: 버튼이 서버로 양식 데이터를 제출, 지정하지 않은 경우 기본값
  • reset: <input type="reset"> 처럼, form의 모든 값을 초기화
  • button: 클릭 가능한 버튼입니다. 기능 부여 전까지는 아무 기능이 없다.

<datalist>

• <datalist>는 <select>와 <input> 을 섞어서 사용됨
• <input> 의 list 속성을 이용해 <datalist> 요소의 id 속성과 연결하여 사용

사용자에게 기본적으로 선택할 수 있는 옵션을 제공함과 동시에, 만약 옵션에 선택하고 싶은 값이 없는 경우 사용자 가 원하는 임의의 값을 입력 받을 수 있도록 편의성을 제공합니다.

---

HTML Tabular data

<table>

• <table> 태그는 테이블을 생성할 때 사용

• <table> 태그는 컨테이너 요소로서 다음과 같은 역할들이 필요하다.

  • 제목(caption)
  • 행(tr)
  • 열(col)
  • 셀(td)
  • 셀의 제목(th)

• <caption> : 테이블의 제목이나 설명을 의미함, <table> 요소의 첫번째 자식으로 사용해야함

• <thead>, <tbody>, <tfoot>

  • 각각 머리글, 본문, 바닥 글을 의
  • 테이블의 내용이 많을 때 테이블의 구역을 나누는 요소로 사용

• <tr>, <th>, <td>

  • <tr> 태그는 테이블의 행을 나눌 때 사용
  • <td> 태그는 <tr> 태그로 나눈 행에서 셀을 분리할 때 사용
  • <th> 태그는 행, 열의 머리말을 나타내는 데 사용
  • <th>, <td> 태그에 colspan, rowspan 속성을 사용하여 각각 열간, 행간 병합이 가능하다.

• <scope>

  • <th>요소에 <scope>속을 사용하여 <td> 와의 연결 관계를 설정
  • 스크린 리더기에서 읽을 방향을 지정해주는 역할

---

CSS

CSS 적용의 우선 순위

• 개발자가 작성하는 외부 스타일 (우선 순위 최하)
• head 태그 안의 스타일
• 태그 안에서 작성되는 inline 스타일
• 사용자 정의 스타일 (우선 순위 최상)
• !important (우선 순위 무시하고 우선 적용)

CSS 업데이트에 관하여

• 기존 CSS1, CSS2 , CSS3로 업데이트마다 네이밍 되었으나 작은 단위로 나누어 개발하고 완료된것 먼저 업데이트 하기로 방향을 바꾸게되면서 모듈(module) 단위로 업데이트하게 되고 CSS 버전은 더이상 CSS3, CSS4로 가져가지 않게 됨

폰트 트래픽 문제

• 폰트 같은 경우 용량이 크기 때문에 여러 사용자들이 접속하면 점점 트래픽에 부하가 걸리기 시작함

• 개선방법

  • 잘 사용되지 않는 폰트는 이미지화
  • 많이 사용되지 않는 폰트는 경량화
  • 많이 사용되는 폰트는 CDN을 사용하기 보다는 내부 API 서버나 로컬서버에서 서빙

---

서버에 관하여

로컬 :

• 단점 : 트래픽확장이 어려움, 서버 확장이 어렵고 들어오는 트래픽 제한(대역폭 bandwidth의 문제),
• 장점 : 비용 (전기세 + 인터넷)

클라우드 :

• 단점 : 비용
• 장점 : 서버 확장이 쉽다. 이전도 쉽다. IP를 할당 받거나 도메인 연결하기 쉽고 , HTTPS 인증도 쉽고 ...

Server : 서빙(24시간돌아가는 컴퓨터, 대부분 IP 연결) = 식당에 서빙하는 종업원처럼 파일을 전달하는 역할

Web Server : 정적 파일을 서빙(PHP와 같은 프로그래밍 언어도 처리하긴 함)

App Server : 두뇌 역할

DB Server: 데이터 저장(이미지 같은 경우는 이미지 경로만 저장함, 이미지는 스토리지에저장)

API Server : 이미 작성된 기능들을 특정 양식으로 요청하면 전달해주는 서버

개발 되어 있는 바퀴를 새로 만들지 말라
input text area : 보통 직접 textarea를 사용하지않고 "WYSIWYG editor"를 사용한다.
ex) toastUI Editor , SummerNote