form - 입력받은 값을 server에게 요청, 요청한 페이지 받음
name - 자바스크립트와 연동하기 위해 , 구분하기 위한 속성
method - get(default) - 검색, 글읽기
post - 글쓰기, 수정
action - 요청 페이지를 지정하는 것
자세한 내용 - https://blog.naver.com/sajkl2/221825920476

서버설치(tomcat)
(설치하는 이유 - form기능을 직접 확인하기 위함)

 

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
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 함수 내의 document는 html의 body영역 -->
    <script>
        function check(){
            alert("보이나요?");
            f = document.frm;
            if(f.id.value==""){
                alert("아이디를 입력하세요.");
                return;
            }
        }
    </script>
</head>
<body>
    <h3>로그인 폼</h3>
    <!-- 
        선택창, 로그인창, 게시판 등도 모두 form 이다.
        form, input에는 name 속성이 있어야한다. 
    -->
    <form name="frm" method="" action="">
        <!-- 
            input태그의 type의 기본 값은 text이다(생략가능)
        -->
        아이디: <input type="text" size="15" name="id"><br>
        패스워드: <input type="password" size="15" name="pwd"><br>
        <input type="submit" value="로그인" onclick="check()">
    </form>
</body>
</html>
cs

 

위 코드를 적용하면 아래와 같이 나옵니다.

 

로그인 버튼 누르면

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>비디오 플레이</h3>
    <!-- 
        controls - 재생버튼, 일시정지버튼, 음량조절 등의 기능 추가
        (controls가 없을 때에는 미디어에 마우스 오른쪽을 클릭하여 컨트롤)
        
        autoplay - 자동재생 
        (크롬브라우저는 자동재생이 안되는 듯, 엣지 등 기타 브라우저로 테스트)
 
    -->
    <video src="media/bear.mp4" width="320" height="240" controls autoplay>
        브라우저가 video 태그를 지원하지 않습니다.</video>
</body><hr>
    <h3>오디오 플레이</h3>
    <!-- loop - 반복재생 -->
    <audio src="media/EmbraceableYou.mp3" controls autoplay loop>
        브라우저가 audio 태그를 지원하지 않습니다.
    </audio>
</html>
cs

위 코드를 적용하면 아래와 같이 나옵니다.

 

 

--

크롬 자동재생 관련 링크
https://blog.edit.kr/entry/video-%ED%83%9C%EA%B7%B8-autoplay-%EC%9E%AC%EC%83%9D%EC%9D%B4-%EC%95%88%EB%90%A0%EB%95%8C-Chrome-Safari

'Web > Html_Css' 카테고리의 다른 글

검색 페이지 만들기  (0) 2020.03.04
form 폼 태그  (0) 2020.03.04
페이지 내의 프레임에 사이트 띄우기  (0) 2020.03.04
iframe 사용 예제1  (0) 2020.03.03
a 태그에 다운로드 속성(html5 지원)  (0) 2020.03.03

메인 페이지

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    2개의 iframe을 가집니다.
    <hr>
    <iframe src="leftframe.html" name="left" width="200" height="500"></iframe>
    <iframe src="rightframe.html" name="right" width="400" height="500"></iframe>
</body>
</html>
cs

 

왼쪽 프레임 페이지

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- leftframe.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    이곳은 왼쪽 프레임 입니다.<br>
    <ul>
        <li><a href="http://jspstudy.co.kr" target="right">jspstudy</a></li>
        <li><a href="http://www.dt.co.kr" target="right">dt</a></li>
        <li><a href="http://www.etnews.com" target="right">dtnews</a></li>
    </ul>
</body>
</html>
cs

위 코드를 적용하면 아래와 같이 나옵니다.

링크를 누르면 아래와 같이 나옵니다.

'Web > Html_Css' 카테고리의 다른 글

form 폼 태그  (0) 2020.03.04
html 미디어 (비디오, 오디오) 재생  (0) 2020.03.04
iframe 사용 예제1  (0) 2020.03.03
a 태그에 다운로드 속성(html5 지원)  (0) 2020.03.03
태그 앵커 만들기 (페이지 내에서 이동)  (0) 2020.03.03

포트번호 기본은 80이다.
기본 포트는 생략가능하다.

원래는 http://www.naver.com:80 이지만 naver.com으로 접속해도 접속됨.

--

프레임 iframe

html페이지 안에 또다른 페이지를 넣는 등.
ex)
http://tomcat.apache.org/tomcat-9.0-doc/servletapi/index.html

'낙서장' 카테고리의 다른 글

웹서버 메모1  (0) 2020.03.04
이클립스 코드 실행 단축키, form 태그 method 속성  (0) 2020.03.04
테이블, 정적페이지, 동적페이지  (0) 2020.03.03
브라우저 출력  (0) 2020.03.03
알아둘것,  (0) 2011.12.27
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>2개의 IT전문 사이트 가져오기</h3>
 
    <!-- iframe을 이용하여 페이지 내에 다른 페이지 띄우기 -->
    <iframe src="http://www.dt.co.kr" width="300" height="300"></iframe>
    <iframe src="http://www.etnews.com" width="300" height="300"></iframe>
</body>
</html>
cs

 

위 코드를 적용하면 아래와 같이 나옵니다.

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>a 태그에 다운로드 속성(html5 지원)</h3>
    <hr>
    <ul>
        <!-- 
            서버가 아닌, 파일에서 링크를 클릭하면
            다운로드 속성이더라도 다운로드가 되지않고 페이지가 열린다.
            vscode를 사용한다면 live server 확장을 설치하여 실행해 본다.
            해당 페이지에서 마우스 우클릭으로 open with live server 실행.
        -->
        <li><a href="media/Elvis.png" download="">엘비스 이미지 다운로드</a></li>
        <li><a href="media/chapter9.pdf" download>chapter9.pdf 다운로드</a></li>
        <li><a href="media/EmbraceableYou.mp3" download>EmbraceableYou.mp3 다운로드</a></li>
        <li><a href="ex2.html" download>ex2.html 다운로드</a></li>
        
        <!--
             브라우저에서 실행 가능한 파일은 바로 켜지고 
             실행이 되지 않으면 download 속성이 없어도 바로 다운로드됨.
             ex) hwp 파일은 실행되지 않아서 다운로드됨.
        -->
        <li><a href="media/test.hwp">test.hwp 다운로드</a></li>
    </ul>
</body>
</html>
cs

'Web > Html_Css' 카테고리의 다른 글

페이지 내의 프레임에 사이트 띄우기  (0) 2020.03.04
iframe 사용 예제1  (0) 2020.03.03
태그 앵커 만들기 (페이지 내에서 이동)  (0) 2020.03.03
하이퍼링크 만들기  (0) 2020.03.03
하이퍼링크 예제1  (0) 2020.03.03
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
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>a 태그 앵커 이동 만들기</h3>
    <!-- 링크를 누르면 페이지 내의 해당 앵커 id 위치로 화면이 이동된다. -->
    <ul>
        <li><a href="#love">Love me tender</a></li>
        <li><a href="#can">Can't help falling in love</a></li>
        <li><a href="#it">It''s now or never</a></li>
    </ul>
    <h3 id="love">Love me tender</h3>
        Love me tender, Love me sweet, Never let me go.<br>
        You have made my life complete, <br>
        And I love you so.<br>
        Love me tender, Love me true, <br>
        All my dreams fulfilled.<br>
        For my darling I love you, And I always will.<br>
        <h3 id="can">Can't help falling in love</h3>
        Love me tender, Love me sweet, Never let me go.<br>
        You have made my life complete, And I love you so.<br>
        Love me tender, Love me true, All my dreams fulfilled.<br>
        For my darling I love you, And I always will.<br>
        <h3 id="it">It''s now or never</h3>
        It's now or never, Come hold me tight<br>
        Kiss me my darling, Be mine tonight<br>
        Tomorrow will be too late,<br>
        It's now or never. My love won't wait.<br>
</body>
</html>
cs

'Web > Html_Css' 카테고리의 다른 글

iframe 사용 예제1  (0) 2020.03.03
a 태그에 다운로드 속성(html5 지원)  (0) 2020.03.03
하이퍼링크 만들기  (0) 2020.03.03
하이퍼링크 예제1  (0) 2020.03.03
테이블 만들기  (0) 2020.03.03
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
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>하이퍼링크 만들기</h3>
 
    <!--
        href의 값은 "URL" / "URL#앵커이름 / "URL#앵커이름"
        (앵커는 페이지 내의 id등의 위치)
        target의 값은 "_blank" / "_self" / "_parent" / "_top"
 
        target의 디폴트 값은 "_self"
        target="_blank"는 새창에서 링크의 페이지 실행.
    -->
    <a href="http://naver.com" target="_blank">네이버</a><br>
    <a href="http://google.com" target="_self">구글</a><br>
 
    <!-- 
        frame 태그에 적용 되는 target :
 
        target="_parent"는 부모프레임에 오픈
        target="_top" 전체화면에 오픈
    -->
    <a href="http://youtube.com" target="_parent">유튜브</a><br>
    <a href="ex12.html" target="_top">ex12</a><br>
    <a href="ex14.html" target="">ex14</a><br>
    <a href="ex14.html#can" target="">ex14 #can</a><br>
</body>
</html>
cs

 

+ Recent posts