🐣TIL 4 - HTML 배우기(3) + git, github

2022.03.31 목요일

벌써 3월 마지막 날이라니ㅎ,,,🥲

✨img, audio, video 포함 절대경로, 상대경로 개념 익히기
✨form 태그의 method 중 "get"과 "post" 개념 잘 이해하기
✨git, github 는 여러 번 업로드 하면서 익히기

iframe 태그

• 현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶을 때 사용
• width 혹은 height 속성으로 크기를 조절
• src 속성으로 불러올 HTML링크를 설정(주로 유튜브)
• frameborder 는 테두리를 그려줄지 결정하는데 현재는 더 이상 사용하지 않고 CSS 의 border 를 사용
• allow : iframe 에서 허용할 기능들을 지정
• allowfullscreen : 전체화면을 지원
  (더 궁금한 내용은 MDN 사이트 참고하기)

audio 태그

• 음악 컨텐츠를 재생하기 위한 태그
• src 속성은 브라우저에게 오디오 파일의 위치 및 파일명을 알려줌
• controls : 음악 파일을 제어할 수 있는 컨트롤러
• autoplay : 로딩이 완료된 파일을 자동으로 재생
  (Chrome에서 정책상 autoplay가 안됩니다. 간혹 되는 경우도 있으나 정책상 안되는 것이 맞습니다. 그래서 js로 컨트롤합니다.)
• loop : 음악을 반복

video 태그

• 동영상 파일을 재생하기 위한 태그
• 오디오 태그와 같은 속성을 가짐
  (더 많은 내용은 MDN 사이트 참고하기)

form 태그

• 정보를 입력하는 영역
• 로그인 화면에서 아이디와 비밀번호를 입력
• 회원가입 정보를 입력하는 양식

📌 폼에 입력을 하고 제출(submit)하게 되면 데이터는 서버로 전송되고, 전송한 데이터는 웹 서버가 처리하며, 처리 후 로그인 결과 화면 같은 다른 웹 페이지를 클라이언트에 전송한다.

form 동작 방식

1. 웹 페이지에 있는 form에 데이터를 입력한다.
2. 웹 페이지 내 액션이 일어나게 되면 데이터는 웹 서버로 이동한다.
3. 웹 서버는 데이터를 처리하기 위해 APP을 호출하고, 이때 APP은 물리적으로 별도의 서버일 수도 있다.
4. 필요에 따라 APP은 DB로 데이터를 전송하고, 이때 DB는 물리적으로 별도의 서버일 수도 있다.
5. DB에서 CRUD 작업이 일어나고 작업 결과를 APP으로, WEB으로 전송한다.
   (Create, Read, Update, Delete)
6. 웹 서버는 받은 결과를 Client 브라우저에게 보낸다.
7. 사용자 브라우저는 Response 받은 페이지를 렌더링하여 사용자에게 보여준다.

form 의 속성

• action : 입력 값을 전송할 페이지를 나타낸다.
• method : 폼의 데이터를 전송할 방법을 정의. method의 속성에는 get과 post가 있다.
• get : 웹 서버에 데이터를 요청할 때 사용하며, 주소에 데이터를 입력하는 방식
• post : 파일을 올리거나, 보안이 필요한 데이터를 전송할 때 등 사용. 또한, 주소에 입력 내용이 나타나지 않도록 한다.
  (url로 데이터를 전달할 수 없거나 보안 등이 필요한 것들을 받아올 때)

input 태그

• 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 주고, 사용자에게 정보를 입력받는다.
• input 태그의 타입은 다양하며 대표적으로 text, checkbox, password 등이 있다.

label 태그

• input 태그에 무엇을 입력해야 하는지 설명하기 위해 사용된다
• 시각 장애인들도 폼을 사용할 수 있도록 시멘틱한 label 요소를 사용하는 것이 좋다