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
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3, li{color: brown;} /* 콤마는 각각 적용 */
        
        ul strong {color: dodgerblue;} /* 자손 : 태그의 하위 태그(와 그 모든 하위)를 선택하여 적용 */
        
        div > div > strong {background-color: yellow;} /* 자식 : 태그의 하위 특정태그를 선택하여 적용 */
        
        body.main {
            background: aliceblue;
        }
        
        #list {background: mistyrose;} /* id속성을 가진 태그를 꾸미기 위해서는 아이디명에 #을 붙여서 적용 */
 
        #list span {color: forestgreen;}
 
        .warning {color: red;} /* class속성을 가진 태그를 꾸미기 위해서는 클래스명에 .을 붙여서 적용 */
 
    </style>
</head>
<body class="main">
    <h3>Web Programming</h3>
    <hr>
    <div> 
        <div>2학기 <strong>학습 내용</strong>입니다.</div>
        <ul id="list">
             <li><span>HTML5</span></li>
            <li><strong>CSS</strong></li>
            <li>JAVASCRIPT</li>
        </ul>
        <div class="warning">60점 이하는 F</div>
    </div>
</body>
</html>
 cs

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

 

 

 


id, class 차이는 아래의 링크로 확인

https://blog.naver.com/juyoung1704/221634896152

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

css3 색 color 활용1  (0) 2020.03.05
css 기초 적용 예제2  (0) 2020.03.05
Css 스타일 맛보기  (0) 2020.03.05
form 태그 - 날짜, 숫자 입력, 이메일, 홈페이지, 전화번호, 검색어  (0) 2020.03.05
form태그와 input 태그의 여러가지 타입 type, select태그  (0) 2020.03.04
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>
    <style>
        /* css주석 */
        body {background-color: mistyrose;}
        h3 {color: purple;}
        hr {border: 5px solid yellowgreen;}
        span {color: blue; font-size: 20px;}
    </style>
</head>
<body>
    <h3>Css 스타일 맛보기</h3><hr>
    <p>나는  <span>웹프로그래밍</span>을 좋아합니다.</p>
</body>
</html>
 
<!--
    css 꾸미는 방법 3가지
    1.태그에 속성으로 입력
    2.head태그안에 style태그를 만들어서 작성
    3.따로 파일을 만들거나 링크를 이용
-->
 cs

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

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

css 기초 적용 예제2  (0) 2020.03.05
css 기초 적용 예제1 , 콤마, 자손, 자식, id, class  (0) 2020.03.05
form 태그 - 날짜, 숫자 입력, 이메일, 홈페이지, 전화번호, 검색어  (0) 2020.03.05
form태그와 input 태그의 여러가지 타입 type, select태그  (0) 2020.03.04
검색 페이지 만들기  (0) 2020.03.04

html

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
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <script>
         function check() {
             alert("호출");
         }
     </script>
</head>
<body>
    <h3>회원정보</h3>
    <form method="post" action="member.jsp">
        <!-- 
            label 태그안에 아래와 같이 코드를 넣으면, [이름:] 글자를 클릭 할 시
            입력박스안으로 커서가 옮겨진다
        -->
        <label>이름: <input type="text" name="name" placeholder="이름 입력" required></label><br>
        아이디: <input type="text" name="id" placeholder="아이디 입력" required><input type="button" value="중복확인"><br>
        비밀번호: <input type="password" placeholder="비밀번호 입력" name="pwd" required><br>
        비밀번호 확인: <input type="password" placeholder="비밀번호 확인" name="repwd" required><br>
        이메일: <input type="email" name="email" placeholder="Ex) aa@aa.com" required><br>
 
        이메일 수신동의:
        <input type="radio" name="mailagree" value="yes"> 동의
        <input type="radio" name="mailagree" value="no"> 비동의<br>
 
        전화번호: 
        <select name="phone">
            <option value="KT" selected>KT</option>
            <option value="SKT">SKT</option>
            <option value="U+" >U+</option>
        </select> 
        <input type="tel" name="number" placeholder="-빼고 숫자만 입력" required><br>
 
        정보이용
        <input type="checkbox" name="pagree1" value="1"> 개인정보이용
        <input type="checkbox" name="pagree2" value="2"> 개인정보사용<br>
        <input type="submit" value="가입"><br>
        <input type="button" value="가입2" onclick="check()"><br>
    </form>
</body>
</html>
 cs

 

jsp

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
<%@ page contentType="text/html; charset=utf-8"%>
<%
    request.setCharacterEncoding("utf-8");
    String name = request.getParameter("name");
    String id = request.getParameter("id");
    //ctrl+alt+방향키
    String pwd = request.getParameter("pwd");
    String email = request.getParameter("email");
    String mailagree = request.getParameter("mailagree");
    String phone = request.getParameter("phone");
    String number = request.getParameter("number");
    String pagree1 = request.getParameter("pagree1");
    String pagree2 = request.getParameter("pagree2");
    
 
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>회원가입 확인</title>
</head>
<body>
    name: <%=name%><br/>
    id: <%=id%><br/>
    email: <%=email%><br/>
    mailagree: <%=mailagree%><br/>
    phone: <%=phone%><br/>
    number: <%=number%><br/>
    agree1: <%=pagree1%><br/>
    agree2: <%=pagree2%><br/>
</body>
</html>
 cs

 

위 코드를 적용시 크롬에서 아래와 같이 나옵니다.

--

칸을채우고 [가입] 버튼을 누르면 jsp 주소로이동

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

자바스크립트의 역할  (1) 2020.05.19
QueryBean  (0) 2020.05.19
out.print  (0) 2020.05.19
데이터베이스의 자료를 Jsp를 이용하여 출력하기  (0) 2020.04.23
이클립스에 톰캣 설치하기  (0) 2020.04.23
 

날짜


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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>form에 사용된 시간 날짜 요소</h3>
    <form method="get" >
 
        <!-- 
            날짜요소는 html5에서 새로 추가됨 
            외관상, 편의상 불편하기 때문에 
            자바스크립트로 만든 날짜요소를 넣는 것이 보통
        -->
        month: <input type="month"><br>
        week: <input type="week"><br>
        date: <input type="date"><br>
        time: <input type="time"><br>
        local: <input type="datetime-local"><br>
    </form>
</body>
</html>
 cs

위 코드를 적용시 크롬에서 아래와 같이 나옵니다.

 

창을 누를시 나타나는  모습

--

숫자 입력

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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>
    <form>
        지속시간 <input type="number" min="0.0" max="10.0" step="0.5"><br>
        온도 <input type="range" min="10" max="30" list="temp">
            <datalist id="temp">
                <option value="12" label="Low"></option>
                <option value="20" label="Medium"></option>
                <option value="28" label="High"></option>
            </datalist>
    </form>
</body>
</html>
 cs

 

위 코드를 적용시 크롬에서 아래와 같이 나옵니다.

--

이메일 홈페이지 전화번호 검색어

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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>
    <form>
        <!-- placeholder는 예시나 안내를 보여줌 -->
        email <input type="email" placeholder="id@host"><br>
        홈페이지 <input type="url" placeholder="http://"><br>
        전화번호 <input type="url" placeholder="010-0000-0000"><br>
        검색어 <input type="search" placeholder="검색어"><br>
    </form>
</body>
</html>
 cs

위 코드를 적용시 크롬에서 아래와 같이 나옵니다.

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

css 기초 적용 예제1 , 콤마, 자손, 자식, id, class  (0) 2020.03.05
Css 스타일 맛보기  (0) 2020.03.05
form태그와 input 태그의 여러가지 타입 type, select태그  (0) 2020.03.04
검색 페이지 만들기  (0) 2020.03.04
form 폼 태그  (0) 2020.03.04
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!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>
    <form>
        <textarea cols="20" rows="5">
폼에 들어가는 value 영역
        </textarea>
    </form><hr>
    <form>
        
        <!-- 속성 style="resize: none;"을 넣으면 사이즈 조절이 안되도록 가능 -->
        <textarea cols="20" rows="5" style="resize: none;">
폼에 들어가는 value 영역
        </textarea>
    </form><hr>
    <form>
 
        <!--input의 list속성의 값과 datalist의 id값은 반드시 같아야한다 -->
        <input list="country">
        <datalist id="country">
            <option>대한민국</option>
            <option>일본</option>
            <option>중국</option>
        </datalist><br>
        짜장면 <input type="checkbox" value="1" name="china">
 
        <!-- checkbox타입에서 속성checked 를 입력하면 실행시 기본으로 체크가 되어 있다 -->
        짬뽕 <input type="checkbox" value="2" name="china" checked>
        탕수육 <input type="checkbox" value="3" name="china" checked><br>
 
        <!-- 
            checkbox 타입은 checked를 여러항목에 쓸수 있는 반면,
            radio 타입은 checked를 여러개 써도 하나만 선택된다
        -->
        짜장면 <input type="radio" value="1" name="china" checked>
        짬뽕 <input type="radio" value="2" name="china" checked>
        탕수육 <input type="radio" value="3" name="china"><br>
    </form><hr>
 
    <!-- 
        select타입의 폼에서 option태그 안에 속성selected 
        를 입력하면 실행시 기본으로 체크가 되어 있다 
    -->
    <select name="china">
        <option value="1">짜장면</option>
        <option value="2">짬뽕</option>
        <option value="3" selected>탕수육</option>
    </select><hr>
    글자색 선택 <input type="color" value="#FFFFFF" 
    onchange="document.body.style.color=this.value"><br>
    배경색 선택 <input type="color" value="#FFFFFF" 
    onchange="document.body.style.background=this.value"><br>
</body>
</html>
 cs

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

--

글자색, 배경색 선택

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

Css 스타일 맛보기  (0) 2020.03.05
form 태그 - 날짜, 숫자 입력, 이메일, 홈페이지, 전화번호, 검색어  (0) 2020.03.05
검색 페이지 만들기  (0) 2020.03.04
form 폼 태그  (0) 2020.03.04
html 미디어 (비디오, 오디오) 재생  (0) 2020.03.04
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
<!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>
    <form method="get" action="https://search.naver.com/search.naver">
        검색어 <input name="query">
        <input type="submit" value="검색">
    </form><hr>
    <h3>구글 검색하기</h3>
    <form method="get" action="https://www.google.com/search">
        검색어 <input name="q">
        <input type="submit" value="검색">
    </form><hr>
    <h3>다음 검색하기</h3>
    <form method="get" action="https://search.daum.net/search">
        검색어 <input name="q">
        <input type="submit" value="검색">
    </form><hr>
</body>
</html>
 cs

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

--

검색시

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

form 태그 - 날짜, 숫자 입력, 이메일, 홈페이지, 전화번호, 검색어  (0) 2020.03.05
form태그와 input 태그의 여러가지 타입 type, select태그  (0) 2020.03.04
form 폼 태그  (0) 2020.03.04
html 미디어 (비디오, 오디오) 재생  (0) 2020.03.04
페이지 내의 프레임에 사이트 띄우기  (0) 2020.03.04

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

 

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

 

로그인 버튼 누르면

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

form태그와 input 태그의 여러가지 타입 type, select태그  (0) 2020.03.04
검색 페이지 만들기  (0) 2020.03.04
html 미디어 (비디오, 오디오) 재생  (0) 2020.03.04
페이지 내의 프레임에 사이트 띄우기  (0) 2020.03.04
iframe 사용 예제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
<!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

+ Recent posts

티스토리툴바