URL, 경로

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

URL이란 웹페이지, 이미지, 동영상과 같은 정보가 위치하는 특별한 위치정보다.

 

URL 구성

예시 : http://codingeverybody.com/codingeverybody_html_tutorial/url_72/example2.html?mode=view#bookmark

 

 부분

명칭

설명

 http

schema

통신에 사용되는 방식. 프로토콜

 codingeverybody.com

hosts

자원이 위치하고 있는 웹서버의 이름. 도메인이나 IP가 사용

 codingeverybody_html_tutorial/

url_72/example2.html

url-path

루트 디렉터리로부터 자원이 위치한 장소까지의 디렉터리와 파일명

?mode=view

query

웹서버에 넘기는 추가적인 질문

#bookmark

bookmark

하이퍼링크를 클릭했을 때 틀정 위치로 이동하기 위해서 사용

 

경로

  - 상대경로 : 문서를 기준으로 한 다른 리소스들의 위치 정보
  - 절대경로 : 문서의 위치를 가르키는 도메인을 포함한 전체 위치 정보

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

파일 업로드  (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: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>

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<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
블로그 이미지

꼴통보안인

,

공지사항

태그목록

최근에 받은 트랙백

글 보관함

달력

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

티스토리툴바