Notice
Recent Posts
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
관리 메뉴

공부기록용

HTML 기초 04 본문

📚강의록📚/유노코딩)HTML

HTML 기초 04

과부하가즈아 2023. 4. 13. 18:10

서버와 클라이언트

클라이언트(사용자)가 요청을 하면, 서버는 그에 대한 응답으로 정보를 제공한다.

 

  • Ex 1.
    ->클라이언트(사용자)
    : 네이버주소 입력 - 네이버 홈페이지를 보고싶습니다. - Enter(요청)
    ->서버(네이버)
    : 알겠습니다. - 저희 네이버 홈페이지의 html문서를 보내드리니, 보세요 - (네이버 웹페이지를 보냄_응답)
    ->클라이언트(사용자)
    : 제 웹브라우저에 네이버 홈페이지가 오픈되었습니다. 감사합니다.

 

  • Ex 2.

GET

서버에 요청을 보내어 응답을 받아낸다.(서버로부터 정보를 가져오겠다!)

POST

서버에 요청을 보내서 작업을 수행한다.(서버에 있는 정보를 추가, 수정, 삭제를 한 후에 응답을 받아낸다.) 서버의 정보를 조작하겠다는 성격의 요청

데이터 전송(Form)

양식을 만들어 주는 태그로써, 입력 요소들을 감싸고 있는 태그이다.
사용자가 입력한 데이터(input, select, textarea 등의 입력 값)를 서버로 보내기 위해 사용하는 태그이다. (서버란, 정보를 제공하는 호스트(host)이다.)

 

  • 기본구조
<form>
 <input type="text" placeholer="아이디">   ---> 텍스트를 입력하는 입력요소생성, 기본 입력값은 아이디
 <br> 
 <input type="text" placeholer="비밀번호">  ---> 텍스트를 입력하는 입력요소생성, 기본 입력값은 비밀번호
</form>

form은 입력 요소들을 감싸며, 입력 값을 서버 측으로 제출(submit)할 수 있다.

 

  • form의 내용을 제출
<form>
 <input type="text" placeholer="아이디">
 <br>
 <input type="text" placeholer="비밀번호"> 
 <br>
 <input type="submit" value="로그인">   ---> 버튼 형식
</form>

form의 내용(입력값)을 제출하기 위해 input 태그의 submit 타입 사용 가능

 

---> '로그인'버튼을 누르면 입력된 아이디와 비밀번호가 서버로 전송되고(요청),
---> 서버 측에서 데이터를 처리한 결과를 클라이언트에게 보내준다(응답)

 

  • form의 속성
<form action="exmaple.php" method="POST">
</form>

action(입력값을 전송할 서버의 url/서버측 주소를 지정하는 속성), method(클라이언트가 입력한 데이터를 전송 방식을 지정하는 속성(GET or POST))

 

---> exmaple.php 라는 서버 프로그램으로 입력값을 전송하여 요청할 것이며, POST 방식으로 전송할 것이다.

 

▶내용실습◀

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>서버에 요청을 보내자, 폼!</title>
  </head>
  <body>

    <h1>키우고 싶은 동물 고르기</h1>

    <form action="exam.php" method="post">               ---> 입력값을 exam.php에 전송할 것이다.(post방식으로)
      <input type="text" placeholder="NAME" name="name"> ---> 1. NAME라고 쓰여있는 text입력 창에 name를 입력하고
      
      <br>

      <select name="pet">
        <option value="dog">강아지</option>
        <option value="cat">고양이</option>
        <option value="parrot">앵무새</option>            --->2. pet를 선택할 수 있는 입력/선택 창에서 선택해서
      </select>

      <br>

      <input type="submit" value="전송">                 --->전송 버튼을 눌러 제출하겠다

    </form>
    
  </body>
</html>

meta태그

  • meta태그는 HTML 문서에 대한 메타데이터를 정의한다. (메타데이터란 데이터에 대한 데이터, 즉 데이터에 대한 정보 및 설정 값을 의미한다.)
  • meta태그는 항상 head태그의 안에 들어가며, 일반적으로 문자세트, 페이지 설명, 키워트, 문서의 작성자 및 뷰포트 설정을 지정, 표시하는데 사용된다.
  • 사용하는 이유
    : 웹페이지의 결과에는 영향을 끼치지 않지만 웹페이지에 대한 정보를 제공하므로 검색엔진이 페이지를 검색할 때 참고할 수 있고,(검색 최적화에 사용) 메타데이터에 작성된 정보의 일부는 검색 결과에도 반영할 수 있다.

meta태그가 제공하는 메타데이터의 유형 & 속성

  • charset
<meta charset=”utf-8”>

문자 인코딩에 대한 요약 정보를 기입하는 속성이다. (문자 인코딩이란 한글을 표시하기 위해 문자 세트를 지정하는 작업)
영문과 한글 모두를 사용하기 위해 utf-8방식을 사용하는 것이 좋다.

 

--> 인코딩을 명확하게 기입해두지 않으면 웹브라우저 설정 상황에 따라 자동으로 인코딩을 추정해서 처리한다. 즉, 문자가 깨질 가능성이 생긴다.

 

  • http-equiv
<!--IE 브라우저의 최신 버전의 엔진을 사용하라는 뜻--> 
<meta http-equiv=”x-ua-compatible” content=”IE=edge”>  -->데이터를 표시하기 전에 호환성 문제에 대한 정보를 추가한 것 

<!--10초마다 페이지 새로고침하라는 뜻-->
<meta http-equiv=”refresh” content=”10”>

콘텐츠 속성 정보/값에 대한 http 헤더를 제공한다. (http란 인터넷에서 데이터를 주고 받을 수 있는 프로토콜)
즉, 데이터를 주고 받는데 필요한 정보를 제공하는 속성으로 일반적으로는 http-equiv의 속성을 지정한 다음 콘텐츠 속성을 추가하여 해당 속성에 대한 설정 값을 추가한다.

 

  • name(문서정보) & content(메타데이터 내용)
<!--문서제작자-->
<meta name=”author” content=”유노코딩”>

<!--페이지에 대한 요약. 브라우저 즐겨찾기 페이지의 기본 설명 값-->
<meta name=”description” content=”페이지에 대한 짧고 명확한 요약”>

<!--페이지의 콘텐츠와 관련된, 쉼표로 구분한 키워드 목록-->
<meta name=”keywords” content=”예를 들면, 강아지, 고양이, 정보, 반려동물, 등등”>

name속성은 문서의 다양한 정보를 제공할 수 있는 메타데이터의 이름을,
content속성은 메타데이터의 구체적인 내용 값으로 문서 정보를 이름+값 쌍의 형태로 제공할 때 사용할 수 있다.

 

▶내용실습◀

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">      ---> IE:인터넷익스플로러의 최신버전인 edge=엣지 를 사용한 html 이라는 의미
    <meta name="author" content="유노코딩">                     ---> 이 페이지의 author(작성자)는 유노코딩이다.
    <meta name="keywords" content="메타태그, 학습, 코딩교육">     ---> 이 페이지의 keywords는 메타태그, 학습, 코딩교육이다
    <meta name="description" content="메타태그를 추가하는 방법">  ---> 이 페이지의 description(서술, 설명?)는 메타태그를 추가하는 방법이다 
    <title>메타태그 추가하기</title>
  </head>
  
  <body>
    <h1>메타태그 추가하기</h1>
  </body>
</html>

 

  • viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">

현재 화면에 보여지고 있는 영역을 의미한다. 기기 별로 뷰포트가 다르기 때문에, 동일한 웹페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타난다.(모바일과 pc에서 보이는 화면이 다른것에 대한)

 

컴퓨터 화면에서의 웹 페이지는 웹브라우저라는 소프트웨어를 통해 페이지 크기를 조절해가며 웹을 조회할 수 있지만, 모바일 기기에서는 고정된 사이즈(스크린 크기)로 조회해야 하므로 모바일기기 웹에 모든 콘텐츠를 표시하기 위해서는 배율 조정을 해야만 한다.(이 때문에 pc용 웹페이지와 모바일 웹페이지를 따로 만드는 경우도 있다.)

 

---> 기기 별로 viewport가 다르기 때문에 meta 태그를 통해 viewport 관련 설정을 추가해줄 수 있다.
---> '포트의 너비를 단말기 너비에 맞추고, 초기 배율을 1로 한다'는 의미

 

▶내용실습◀

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport"
    content="width=device-width, initial-scale=1.0">
    
    <title>뷰포트 체험하기</title>
  </head>
  
  <body>
    <h1>안녕하세요!</h1>
    <h1>감사해요!</h1>
    <h1>잘있어요!</h1>
    <h1>다시만나요!</h1>
  </body>
</html>

 

 

출처 : @https://www.youtube.com/@uknowcoding

'📚강의록📚 > 유노코딩)HTML' 카테고리의 다른 글

HTML 기초 03  (0) 2023.04.13
HTML 기초 02  (0) 2023.04.13
HTML 기초 01  (0) 2023.04.13
'📚강의록📚/유노코딩)HTML' Related Articles more
Comments