박코딩

박코딩

공부기록 블로그

주요 태그_7

1 minute read

주요 태그 7

오랫동안 사용돼온 태그나 사용빈도가 높은 태그들을 정리한다.



데이터 전송

form 태그를 사용하여 서버에 데이터를 전송할 때 url에 보내는 데이터의 정보가 그대로 노출되게 된다.

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="http://localhost/method.php">
            <input type="text" name="id">
            <input type="password" name="pwd">
            <input type="submit">
        </form>
    </body>
</html>

get_method

이렇게 외부로 노출되면 안되는 정보를 전송할 때는 속성을 통해서 방식을 바꾸어줄 수 있다.


method

form의 method 속성은 전송 방식을 결정한다.

방식을 지정하지 않은 경우 기본적으로 get 방식으로 전송되며 url에 정보가 그대로 노출된다.

또 다른 방식은 post 방식이다.


post

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="http://localhost/method.php" method="post">
            <input type="text" name="id">
            <input type="password" name="pwd">
            <input type="submit">
        </form>
    </body>
</html>

post_method

post 방식을 사용하면 전송한 데이터가 url에 표시되지 않게 된다.


전송 방식 결정

정리하면 get 방식은 url을 사용하여 데이터를 전송하는 방식이며 post는 url이 아닌 보이지 않는 방식으로 전송하게 된다.

form을 사용하는 데이터 전송에서 거의 모든 경우 post를 사용하지만 예외적으로 요청이 있는 경우에만 get을 사용하게 된다.

보안과 직접적으로 관련되어 있기 때문에 사용하는데 있어서 유의해야할 부분이다.


파일 전송

업로드한 파일을 서버로 보내는 방법

  • 파일을 선택하는 ui

    <html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
            <input type="file" name="profile">
    </body>
</html>

    input 태그의 type 속성을 file로 지정하면 파일을 업로드 할 수 있는 ui가 만들어 진다.

  • 업로드한 파일 전송

    <html>
  <head>
      <meta charset="utf-8">
  </head>
  <body>
      <form action="http://localhost/upload.php" method="post" enctype="multipart/form-data">
          <input type="file" name="profile">
          <input type="submit">
      </form>
  </body>
</html>

    우선 form의 action 속성으로 전송받을 서버의 경로를 지정한다.

    추가로 파일의 전송을 위해서 method 속성은 post, enctype 속성을 multipart/form-data로 지정해야한다.

    input태그의 submit으로 동작을 수행할 제출 버튼을 생성한다.

    그리고 추가적으로 php로 작성된 코드가 필요하다.

    // 전송 받은 파일을 디렉토리에 저장
<?php
$source = $_FILES['profile']['tmp_name'];
$dest = "./".basename($_FILES['profile']['name']);
move_uploaded_file($source, $dest)
?>
// 전송 받은 파일을 화면에 띄움
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <img src="<?=$_FILES['profile']['name']?>"alt=""/>
  </body>
</html>

    서버를 구축한 상태라면 해당 디렉토리에 업로드한 파일이 생성되고 웹 페이지에는 그 파일이 열리는걸 확인할 수 있다.

이 파트에 대해서 전부 이해하기 위해서는 서버와 php도 필요하기 때문에 html 코드에 대해서만 이해하고 넘어간다.

You may also enjoy