'Programming/HTML' 카테고리의 글 목록

파일 업로드

Programming/HTML 2017. 12. 12. 10:23

파일 업로드는 업로드하기 위한 컨텐츠다.

문법

<input type="file" name="서버쪽에서 파일을 식별하기 위함 이름"/>
enctype="multipart/form-data" 옵션 꼭 지정해줘야됨. 안해주면 파일 전송 안됨.

예제

- uploadexample.html

<!DOCTYPE html>
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        </head>
        <body>
                <form action="example_receive.php" method="POST" enctype="multipart/form-data">
                    <input type="file" name="image" />
                    <input type="submit" />
                </form>
        </body>
</html>

- example_receive.php

<!DOCTYPE html>
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        </head>
        <body>
                <?php
                $uploaddir = '/html/';
                $uploadfile = $uploaddir . basename($_FILES['image']['name']);
                move_uploaded_file($_FILES['image']['tmp_name'], $uploadfile);
                ?>
                <img src="<?=$_FILES['image']['name']?>" />
        </body>
</html>

'Programming > HTML' 카테고리의 다른 글

URL, 경로 (0)	2017.12.12
체크박스 (0)	2017.12.12
콤보 박스 (0)	2017.12.12
라디오 버튼 (0)	2017.12.11
비밀번호, hidden data, textarea (0)	2017.12.11

꼴통보안인

,

체크박스

Programming/HTML 2017. 12. 12. 10:08

체크박스는 여러개의 항목 중에서 원하는 것을 복수로 선택할 수 있게 하는 컨트롤이다.

문법

<input type="checkbox" name="값의 이름" value="값">
- checkbox는 여러개의 값을 같은 이름으로 전송해야 하기 때문에 연관된 항목들의 name 값을 같은 이름으로 지정
- name의 끝에 '[]'을 붙이면 서버 쪽에서 실행하는 언어가 이 값을 배열로 인지.

예제

- checkboxexample.html

<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        </head>
        <body>
                <form action="example_receive_multi.php" method="POST">
                    관심사 : <br />
                    <input type="checkbox" name="interest[]" value="programming" /> 프로그래밍<br />
                    <input type="checkbox" name="interest[]" value="design" /> 디자인<br />
                    <input type="checkbox" name="interest[]" value="planning" checked="checked" /> 기획<br />
                    <input type="submit" />
                </form>
        </body>
</html>

- example_receive_multi.php

<html>

<body>
        당신의 관심사는? <br />
        <ul>
            <?php
            foreach($_POST['interest'] as $entry){
                echo "<li>$entry</li>";
            }
            ?>
        </ul>
</body>

</html>

예제 설명

예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.

기획에 checked 옵션이 설정되어 있으므로 처음 check는 기획에 되어있다. 기획 외에도 디자인을 체크하여 제출 버튼을 누르면 아래와 같은 화면이 출력된다.

'Programming > HTML' 카테고리의 다른 글

URL, 경로 (0)	2017.12.12
파일 업로드 (0)	2017.12.12
콤보 박스 (0)	2017.12.12
라디오 버튼 (0)	2017.12.11
비밀번호, hidden data, textarea (0)	2017.12.11

꼴통보안인

,

콤보 박스

Programming/HTML 2017. 12. 12. 00:05

콤보박스는 여러개의 항목 중에서 원하는 것을 하나만 선택하는 컨트롤이다.

문법

<select name="값의 이름" multiple="multiple">
<option value="선택될 경우 name의 값이 됨" selected="selected">값의 대한 표시값</option>
... option 반복
</select>
- multiple : 이 속성의 값을 multiple로 지정하면 여러개의 항목을 선택할 수 있은 컨트롤이 됨.

예제

- comboboxexample.html

<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        </head>
        <body>
                <form action="example_receive_single.php" method="POST">
                        관심사 : <br />
                        <select name="interest">
                                <option value="programming">프로그래밍</option>
                                <option value="design" selected="selected">디자인</option>
                                <option value="planning">기획</option>
                        </select>
                        <input type="submit" />
                </form>
        </body>
</html>

- example_receive_single.php

예제 설명

예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.

처음에 디자인에 selected 옵션이 설정되어 디자인으로 나와있고, 스크롤을 내려서 다른 항목으로 바꿀수 있다. 원하는 항목을 선택 후 제출 버튼을 누르면 라디오 버튼에서 했던 것과 같은 결과가 나온다.

'Programming > HTML' 카테고리의 다른 글

파일 업로드 (0)	2017.12.12
체크박스 (0)	2017.12.12
라디오 버튼 (0)	2017.12.11
비밀번호, hidden data, textarea (0)	2017.12.11
폼(form), 텍스트 입력 (0)	2017.12.11

꼴통보안인

,

라디오 버튼

Programming/HTML 2017. 12. 11. 23:57

라디오 버튼은 여러개의 항목 중에서 하나만을 선택할 수 있도록 제한하는 컨트롤이다.

문법

예제

- radiobuttonexample.html
<!DOCTYPE html>
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        </head>
        <body>
                <form action="example_receive_single.php" method="POST">
                    관심사 : <br />
                    <input type="radio" name="interest" value="programming" checked="checked" /> 프로그래밍<br />
                    <input type="radio" name="interest" value="design" /> 디자인<br />
                    <input type="radio" name="interest" value="planning" /> 기획<br />
                    <input type="submit" />
                </form>
        </body>
</html>

- example_receive_single.php

예제 설명

해당 예제는 웹서버를 구성해야 가능하다.(apm을 활용) 예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.

프로그래밍에 checked 옵션이 있으므로 프로그래밍에 체크되어있다. 만약 다른곳에 checked 옵션이 있다면 그곳에 체크 되어있었을 것이다. 제출 버튼을 누르면 체크한 정보가 example_receive_single.php 파일에 전송되어 아래와 같은 화면이 출력된다.

'Programming > HTML' 카테고리의 다른 글

체크박스 (0)	2017.12.12
콤보 박스 (0)	2017.12.12
비밀번호, hidden data, textarea (0)	2017.12.11
폼(form), 텍스트 입력 (0)	2017.12.11
head, meta, title (0)	2017.12.11

꼴통보안인

,

비밀번호, hidden data, textarea

Programming/HTML 2017. 12. 11. 23:37

비밀번호는 보안이 중시되는 데이터의 입력을 받는다.

예제

<!DOCTYPE html>
<html>
    <head>
        <title>네이버</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <body>
        <form action="url" method="GET">
            비밀번호 :
            <input type="password" name="password" />
            <br />
            <input type="submit" />
        </form>
    </body>
</html>

예제 설명

예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.

input type을 password로 지정하였기 때문에 텍스트 입력창에 입력을 해도 평문으로 보이지 않는다.

hidden data는 화면상에 표시되지 않는 컨트롤을 생성하고, 서버로 전달할 데이터지만 사용자에게 노출할 필요가 없는 데이터인 경우 사용한다.

예제

예제 설명

예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.

위와 같이 input type을 text로 지정한 것만 보이고 hidden으로 지정해놓은 것은 안보인다.

textarea는 여러줄의 텍스트를 입력할 때 사용한다.

문법

<textarea name="값의 이름" rows="행의 수" cols="열의 수" disabled="disabled" readonly="readonly">값</textarea>
- rows : 입력한 행의 수 만큼 높이가 정해짐
- cols : 입력한 열의 수 만큼 폭이 정해짐.

예제

<!DOCTYPE html>
<html>
    <head>
        <title>네이버</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <body>
        <form action="url" method="GET">
            내용 : <br />
            <textarea rows="5" cols="20"></textarea> <br />
            <input type="submit" />
        </form>
    </body>
</html>

예제 설명

예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.

rows가 5이기 때문에 5줄이 생성되고, cols가 20이므로 20칸 짜리 텍스트 입력 받는 곳이 생성되었다.

'Programming > HTML' 카테고리의 다른 글

콤보 박스 (0)	2017.12.12
라디오 버튼 (0)	2017.12.11
폼(form), 텍스트 입력 (0)	2017.12.11
head, meta, title (0)	2017.12.11
표 (0)	2017.12.11

꼴통보안인

,

폼(form), 텍스트 입력

Programming/HTML 2017. 12. 11. 23:28

form은 사용자의 데이터를 서버에 전송하는 방법이다.

문법

<form action="서버로 전송한 데이터를 수신할 URL" method="데이터를 전송하는 방법">
텍스트 필드, 라디오 버튼, 체크박스와 같은 컨트롤을 생성하는 태그
</form>

- action: 사용자가 입력한 데이터를 전송할 서버의 URL
- method : 사용자가 입력한 데이터를 전송하는 방법
* get : action에 입력한 url에 파라미터의 형태로 전송
* post : header의 body에 포함해서 전송

텍스트 입력은 사용자로부터 텍스트를 입력받는다. 한줄 정도의 단문에 적당하고 긴 줄의 텍스트는 <textarea>를 이용한다.

문법

<input type="text" name="값의 이름" value="값" disabled="disabled" readonly="readonly"/>
- type : text를 사용해야할 텍스트 필드가 됨.
- name : 입력한 데이터의 이름
- value : 데이터의 값. 입력한 데이터의 기본 값으로 이 값이 기본적으로 텍스트 필드에 표시됨.
- disabled : 값으로 disabled를 지정하면 텍스트 필드가 불능 상태가 됨. 서버로 전송해도 이 속성이 설정된 컨트롤의 데이터는 서버로 전송되지 않음.
- readonly : 값으로 readonly를 지정하면 텍스트에 값이 입력되지 않음. 서버로는 데이터 전송됨.

예제

<!DOCTYPE html>
<html>
    <head>
        <title>네이버</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <body>
        <form action="url" method="GET">
            아이디 :
            <input type="text" name="id" />
            <br />
            <input type="submit" />
        </form>
    </body>
</html>

예제 설명

예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.

아이디 : 옆에 텍스트박스를 통해 글을 작성할 수 있고, 아래 제출 버튼을 누를수 있다. 제출버튼에 대한 코딩이 없으므로 눌러도 값이 전송되진 않는다.

'Programming > HTML' 카테고리의 다른 글

라디오 버튼 (0)	2017.12.11
비밀번호, hidden data, textarea (0)	2017.12.11
head, meta, title (0)	2017.12.11
표 (0)	2017.12.11
이스케이핑 (0)	2017.12.11

꼴통보안인

,

head, meta, title

Programming/HTML 2017. 12. 11. 23:21

head는 문서의 내용 자체가 아닌 문서의 내용이 어떤 내용을 담고있는가를 설명하는 정보를 담는 태그다.

meta는 문서에 대한 정보를 기술하는 태그다.

문법

예제

- metaexample1.html
<!DOCTYPE html>
<html>
    <head>
        <meta name="description" content="다음은 검색 엔진" />
        <meta name="keywords" content="다음, HTML, HEAD, META" />
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
</html>

- metaexample2.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="refresh" content="2;url=https://www.naver.com/">
    </head>
</html>

예제 설명

- metaexample1.html

예제를 html 파일에 코딩하여 실행해도 특별히 나오는 화면은 없다. 일반적으로 소스코드를 통해서 문서를 설명하는 예제이다.

- metaexample2.html

예제를 html 파일에 코딩하여 실행하면 2초 뒤에 네이버 웹페이지로 이동한다.

title은 문서의 제목을 정의하는 마크업이고, 제목을 제목 표시줄에 출력해서 문서를 찾는데 도움을 준다. 검색엔진에서 중요한 정보로 취급된다.

예제

<!DOCTYPE html>
<html>
    <head>
        <title>네이버</title>
    </head>
    <body>
    네이버는....
    </body>
</html>

예제 설명

예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.

head에 title을 추가하여 빨간 박스에 있는 것과 같이 title이 네이버로 설정되었다. body에 설정한 네이버는....도 출력되었다.

'Programming > HTML' 카테고리의 다른 글

비밀번호, hidden data, textarea (0)	2017.12.11
폼(form), 텍스트 입력 (0)	2017.12.11
표 (0)	2017.12.11
이스케이핑 (0)	2017.12.11
iframe, frame (0)	2017.12.11

꼴통보안인

,

표

Programming/HTML 2017. 12. 11. 22:59

표는 데이터를 일목요연하게 표현하기 위한 방법이다. 데이터를 구조화 할때 사용하고, 레이아웃으로도 활용되나, 불가피한 경우를 제외하면 div와 css 등을 이용한다.. th는 데이터 그룹의 제목(header cells)에 해당하고, td는 th에 속하는 데이터 그룹(standard cells)에 해당한다.

문법

예제

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <body>
        <table border="1">
            <tr>
                <td>이름</td><td>성별</td><td>나이</td>
            </tr>
            <tr>
                <td>홍길동</td><td>남</td><td>20</td>
            </tr>
            <tr>
                <td>임꺽정</td><td>여</td><td>21</td>
            </tr>
        </table>
    </body>
</html>

예제 설명

예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.

첫번째 행에는 이름, 성별, 나이가 입력되고, 두번째 행에는 홍길동의 정보, 세번째 행에는 임꺽정의 정보가 입력된다.

'Programming > HTML' 카테고리의 다른 글

폼(form), 텍스트 입력 (0)	2017.12.11
head, meta, title (0)	2017.12.11
이스케이핑 (0)	2017.12.11
iframe, frame (0)	2017.12.11
목록 (0)	2017.12.11

꼴통보안인

,

이스케이핑

Programming/HTML 2017. 12. 11. 19:34

이스케이핑은 html 코드 및 태그를 html 언어가 아닌 일반 문자로 해석되어 표시되게 하는 것이다.

코드 리스트
    * & → & (ampersand, U+0026),  
    * < → < (less-than sign, U+003C)
    * > → > (greater-than sign, U+003E)
    * " → " (quotation mark, U+0022)
    * ' → ' (apostrophe, U+0027)

참고(온라인 이스케이핑 도구 사이트) : http://www.htmlescape.net/htmlescape_tool.html

'Programming > HTML' 카테고리의 다른 글

head, meta, title (0)	2017.12.11
표 (0)	2017.12.11
iframe, frame (0)	2017.12.11
목록 (0)	2017.12.11
이미지 태그 (0)	2017.12.11

꼴통보안인

,

부분	명칭	설명
http	schema	통신에 사용되는 방식. 프로토콜
codingeverybody.com	hosts	자원이 위치하고 있는 웹서버의 이름. 도메인이나 IP가 사용
codingeverybody_html_tutorial/ url_72/example2.html	url-path	루트 디렉터리로부터 자원이 위치한 장소까지의 디렉터리와 파일명
?mode=view	query	웹서버에 넘기는 추가적인 질문
#bookmark	bookmark	하이퍼링크를 클릭했을 때 틀정 위치로 이동하기 위해서 사용

'Programming/HTML'에 해당되는 글 16건

URL, 경로

'Programming > HTML' 카테고리의 다른 글

파일 업로드

'Programming > HTML' 카테고리의 다른 글

체크박스

'Programming > HTML' 카테고리의 다른 글

콤보 박스

'Programming > HTML' 카테고리의 다른 글

라디오 버튼

'Programming > HTML' 카테고리의 다른 글

비밀번호, hidden data, textarea

'Programming > HTML' 카테고리의 다른 글

폼(form), 텍스트 입력

'Programming > HTML' 카테고리의 다른 글

head, meta, title

'Programming > HTML' 카테고리의 다른 글

표

'Programming > HTML' 카테고리의 다른 글

이스케이핑

'Programming > HTML' 카테고리의 다른 글

공지사항

카테고리

태그목록

최근에 받은 트랙백

글 보관함

달력

링크

꼴통보안인

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

« 2024/05 »
일	월	화	수	목	금	토
			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