생활코딩 HTML 버튼 ~ meta

-Summary-

버튼 태그, <hidden>, <label>, <method>, get-post 방법, 파일 upload, <font>, <meta>

02-08 (버튼 ~ 컨트롤의 제목 - label)

---

-input type-

 

-button

input 태그의 type에 button 속성을 준다면 버튼을 구현할 수 있다. 앞서 배웠던 submit 역시 버튼이지만 이 submit 버튼은 동작이 정해져(form의 action 속성의 주소로 데이터 전송) 있는 반면, 이 button 속성은 동작을 정해줄 수 있다. 이 동작 같은 경우는 onclick 속성에 자바스크립트 등을 통해 작성해야한다. 또한 input tyoe="button"에 value 속성을 준다면 버튼안에 텍스트를 넣을 수 있다.

<input type="button" value="버튼" onclick="alert('Hello HTML')">

결과 화면

위는 input type을 button으로 주고 value에 '버튼'이라는 텍스트를, 그리고 onclick 속성에 alert('Hello HTML')을 넣어준 코드다. 결과를 보면 value의 텍스트가 버튼 안에 나타났고, 이 버튼을 클릭할 시 alert('Hello HTML')이 작동한다.

이 onclick안에 작성한 코드는 html이 아닌 자바스크립트인데, 자바스크립트의 alert 함수가 주어진 인자 텍스트로 결과 화면처럼 경고창이 뜨는 기능을해준다.

 

-reset

type="reset"은 submit과 비슷하게 버튼의 형태지만 동작이 이미 정해져 있다. 앞서 input 필드를 통해 데이터들을 입력하고 전송을 했었는데, reset은 form안의 사용자의 입력을 받는 부분들을 기본 값으로 초기화 시키는 것이다.

    <form action="">
        <p><input type="text" name="test" value="default"></p>
        <input type="reset">
    </form>

reset

위처럼 value로 기본값을 설정해주고 브라우저를 통해 입력 값을 변경 후 reset 버튼을 눌러보면, 기본값으로 주어진 value의 'default'로 변경된 것을 볼 수 있다. 실제 웹사이트에서 reset버튼은 거의 못본 것 같지만, 입력된 데이터를 일괄적으로 지우는데 유용하게 사용될 것 같다.

 

-hidden

지금까지는 ui를 통해 입력을 받고, 그 값을 submit을 통해 지정 주소로 데이터를 전송을 했었다. 이번에 정리할 이 hidden type은 사용자의 입력을 받을 ui가 존재하진 않지만, submit 버튼을 눌렀을 때, 해당 데이터가 전송되는 기능을 한다.

    <form action="">
        <p><input type="text" name="test" value=""></p>
        <input type="hidden" name="hidden" value="hidden data">
        <p><input type="submit"></p>
    </form>

결과 화면

위처럼 text type의 input 하나, hidden type의 input을 작성해서 결과를 보면, text type은 ui가 존재하는 반면, hidden type은 ui가 존재하지 않고, 공간도 차지하지 않는 것을 볼 수 있다.

주소창

위 화면에서 text type에 1234를 입력하고 submit 버튼을 누르니, text type의 1234값이 존재하고, ui가 없는 hidden의 default 값 또한 전달되는 것을 볼 수 있다.(hidden type에는 value 속성에 "hidden data"를 넣어서 기본 값을 주었다.)

 

이 hidden은 어떨 때 사용하는지 감이 잡히지는 않는데, 생활코딩 영상에 따르면 사용자의 눈에는 보이지 않는 값을 서버로 전송하는 등, 실무에서 쓰인다고 한다.

 

-<label>-

label은 상표, 라벨이라는 뜻이다. 

<h1>radio and checkbox</h1>
    <form action="">
        <h2>선호하는 정보보안 분야</h2>
        <p>
            시스템 해킹 : <input type="radio" name="security" value="pwnable">
            웹 해킹 : <input type="radio" name="security" value="web">
            네트워크 해킹 : <input type="radio" name="security" value="network">
            포렌식 : <input type="radio" name="security" value="forensic">
        </p>

        <h2>선호하는 프로그래밍 언어</h2>
        <p>
            c언어 : <input type="checkbox" name="language" value="c">
            c++ : <input type="checkbox" name="language" value="cpp">
            c# : <input type="checkbox" name="language" value="csharp">
            Python : <input type="checkbox" name="language" value="python">
            HTML : <input type="checkbox" name="language" value="html">
        </p>

        <p><input type="submit"></p>
    </form>

위 코드는 input type radio, checkbox를 정리할 때 썻던 코드인데, 선택지들을 보면 앞에 시스템 해킹 : <input type="radio"> 이런식으로 해당 선택지의 이름을 붙여줬다. label은 이 선택지의 이름을 표현하는 태그다.

 

물론 label 태그없이 위처럼만 작성해줘도 되지만, label을 사용하면 이 '시스템 해킹'이라는 이름표가 누굴 가리키는지 명확하지 않을 수 있고, 이 선택지의 이름표다 라고 정확하게 적어줄 수 있다.

    <form action="">
        <p>
            <label>name : </label>
                <input type="text" name="name">
        </p>
        <p>
            <label>id : 
                <input type="text" name="id">
            </label>
        </p>
        <p>
            <label for="input_pwd">pw : </label>
            <input id="input_pwd" type="password" name="pwd">
        </p>
            
        <p><input type="submit"></p>
    </form>

결과 화면

label은 name부분처럼 <label>(이름표)</label> 이런식으로 사용하면 된다. 하지만 이런식으로 사용하면 누구의 이름표인지가 명확하지 않으므로 id 부분처럼 label 안에 입력을 받는 태그를 포함하거나, pw 처럼 for 속성을 줘서 누구의 이름표인지 명시해줘야한다.

속성 for 같은 경우는 이름표의 주인 태그의 id를 적어줘야하는데, 이는 해당 태그에 id="(원하는 id명)" 이렇게 써주고, 해당 id명을 label의 속성 for에 적어주면 된다. 이렇게 누구의 라벨인지 구분해주면 장점이 알아보기가 쉽고, 또한 브라우저에서 저 label 부분을 클릭하면 해당 form으로 커서가 자동으로 간다. 위 사진의 경우 id : 부분을 클릭하니 id 입력칸으로 커서가 넘어간 모습이다.

 

02-09 (method ~ meta)

---

-get, post-

주소창

앞서 form을 이용하여 사용자의 데이터를 받고 서버로 전송할 때, 위 사진처럼 url에 데이터가 들어가는 방식으로 전송했다. 이 방법이 get 방식이라고 앞서 정리했었는데, 예상했던데로 get 방식은 사용자의 중요한 정보를 전송하기에는 보안적으로 취약하다. url에 입력 데이터가 들어가기 때문에, 남이 보거나, url을 공유할 때 정보가 노출되기 때문이다.

 

이 get 방식 말고, post 방식이라는게 있다. post 방식은 get처럼 url을 통해 데이터를 전달하는게 아닌, body를 통해 전송한다.(post 방식은 구글링했다.)

 

실습했을 때는 자동으로 get 방식으로 데이터가 전송됐는데, 이를 바꾸는 법은 form 태그에 method 속성을 주면 된다.

    <h1>Login</h1>
    <form action="" method="POST">
        <p><label>id : <input type="text" name="id"></p></label>
        <p><label>password : <input type="password" name="pwd"></p></label>
        <p><input type="submit"></p>
    </form>

결과 화면

form을 정리할 때 실습 코드로 썻던 로그인 화면의 전송 방식을 Post 방식으로 변경했다. 아이디와 비밀번호 form에 각각 1234를 쳐서 제출을 눌렀지만, 주소창에 변화가 없는 것을 알 수 있다. 

 

-file upload-

파일 업로드는 input의 type="file" 속성을 사용하면 된다. file 속성으로 작성하면, 웹페이지에서 흔히 볼 수 있는 파일 선택 버튼이 나타나는데, 그 버튼을 클릭하면 원하는 파일을 선택할 수 있다. 참고로 name은 반드시 써줘야한다.

 

이 파일 업로드 역시 form 태그의 action 주소로 전송되는데, 이때 method는 post, 그리고 새로운 속성인 enctype는 multipart /form-data로 해줘야한다.(form 태그 안에 파일 전송이 하나라도 포함되어 있으면 이렇게 속성을 설정해줘야한다.)

    <h1>File Upload</h1>
    <form action="" method="POST" enctype="multipart/form-data">
        <p><input type="file" name="file"></p>
        <p><input type="submit"></p>
    </form>

결과 화면

위처럼 input type="file"을 써준다면 파일을 업로드할 수 있는 버튼이 생긴다. 이 버튼을 클릭하면 업로드할 파일을 선택할 수 있다. form의 method, enctype 속성은 지정해주지 않아도 결과화면이 똑같지만, 이는 서버로 전송 관련이므로, 실제로 전송을 구현할 때는 저렇게 속성을 써줘야한다.

 

생활코딩 파일 업로드 7:20

위 코드는 php로 만들어진 파일 업로드 코드로, 파일 전송이 이뤄진다면, 위 php 코드를 통해 파일을 서버 컴퓨터에 저장하고 그 파일을 웹을 통해 보여주는 기능을 한다. php는 공부해본적이 없어 잘 모르겠지만 첫번째 박스의 코드에서 전달된 파일을 받고 지정 경로의 서버 컴퓨터에 저장을 한 후, 아래 html 코드를 통해 해당 경로의 사진을 불러오는 것 같다.

 

-<font>-

font 태그는 텍스트를 꾸며주는 역할을 한다. <font> </font>로 꾸밀 텍스트를 감싼 후 size(크기), color(색)과 같은 속성들을 이용해 텍스트를 꾸며준다.

<font size="6" color="green">Hello</font> HTML

결과 화면

size : 6, color : green 이렇게 속성을 주고 브라우저에서 열어보니 Hello라는 글자만 사이즈가 커졌고, 색이 초록색이 됐다. font 태그의 영역 밖인 HTML은 꾸밈없이 그대로 보여진다.

 

이 태그는 사실 퇴출된(사용하지 않는) 태그다. 이유는 이 태그는 디자인 관련 역할만 하고, h1 태그는 제목, li는 list, input은 사용자의 입력을 받음 등과 같이 해당 영역에 대한 어떤 정보도 갖지 않기 때문이다. 또한 텍스트를 꾸며줄 때마다 여러번 사용해야하므로 가독성이 떨어지고, 해당 html 파일의 용량이 증가한다는 등의 이유가 있다.

 

VSCODE

실제로 vscode(visual stdio code)를 통해 작성해보면, 제대로 브라우저에서 보여지지만, 자동 완성 기능을 제공하지 않고 저렇게 빨간 글씨로 써진다.

 

따라서 텍스트를 꾸며줄 때는 font 태그를 사용하지 말고 css 언어를 통해 꾸며주는 것이 좋다.

 

-<meta>-

meta 태그는 html 문서의 부과적인 정보를 설정할 때 사용하며, 사용자의 눈에는 보이지 않는다. 

 

-charset 속성

위 font의 head 부분을 보면 meta charset="UTF-8"이라는 코드가 있는데, 항상 html 코드를 짤 때 보면 head에는 이 코드가 존재하고 있었다.이 charset 속성은 문자의 규칙을 의미한다. 이 속성의 값인 utf-8 유니코드를 위한 가변 길이 문자 인코딩 방식(출처 : ko.wikipedia.org/wiki/UTF-8)으로 단순히 브라우저가 이 html 문서의 텍스트들을 utf-8로 해석하여, 한글들이 깨지지 않도록 해주는 것이라고 생각하면 된다.

 

-name, content 속성

메타 태그는 페이지에서 보이지는 않지만, 검색 엔진으로 검색을 할 때 검색 결과에 대한 내용 요약을 표시할 때 사용할 수 있다.

내용 요약은 meta의 name 속성에 "description"을 주고 content 속성에 요약 내용을 적어주면 된다.

 

그리고 검색 결과를 보면 키워드 같은 것도 볼 수 있는데, 이는 name 속성에 "keyword"를 주고 content 속성에 키워드들을 적어주면 된다.

 

그 밖에 작성자를 의미하는 name="author" content="(작성자)"가 있다.

 

-http-equiv, content 속성

이 http-equiv 속성에 refresh를 주고 content 속성에 초를 적어주면, content의 초 간격으로 자동으로 refresh를 해준다.

 

 

이처럼 meta 태그는 웹페이지의 내용은 아니지만, 이 웹페이지는 utf-8로 인코딩 됐고, 키워드는 OO고 요약은 OOO다. 같이 그 웹페이지의 정보를 설명해주는 태그다.

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="description" content="font 태그">
    <meta name="keyword" content="font">
    <meta name="author" content="dypar">
    <title>index.html</title>
</head>
<body>
    <font size="6" color="green">Hello</font> HTML
</body>
</html>

위 코드는 meta 태그를 통해 html 문서의 정보를 설명해줬다. meta의 정보에 따르면 먼저 이 html 문서는 utf-8로 인코딩됐고, font 태그에 대한 내용이 있고, keyword는 'font', 작성자는 dypar이다.