• 이름, 국어, 영어, 수학 점수가 빈칸일 경우 오류 메시지 띄우기

 

 

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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    function test(){
        if(document.getElementById("name").value==""){
            alert("이름을 입력하세요");
            return;
        }
        if(document.getElementById("kor").value==""
                ||isNaN(document.getElementById("kor").value)){
            alert("국어성적을 입력하세요"); //isNaN: 문자인지 아닌지 판별
            return;
        }
        if(document.getElementById("eng").value==""
                ||isNaN(document.getElementById("kor").value)){
            alert("영어성적을 입력하세요");
            return;
        }
        if(document.getElementById("math").value==""
                ||isNaN(document.getElementById("kor").value)){
            alert("수학성적을 입력하세요");
            return;
        }
        document.getElementById("frm").submit();
    }
</script>
</head>
<body>
<form action="scoreResult.jsp" id="frm">
이름: <input type="text" name="name" id="name"><br>
국어: <input type="text" name="kor" id="kor"><br>
영어: <input type="text" name="eng" id="eng"><br>
수학: <input type="text" name="math" id="math"><br>
<input type="button" value="전송" onclick="test()">
</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
27
28
29
30
31
32
33
34
35
36
37
38
39
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<%
    String name=request.getParameter("name");
    int kor=Integer.parseInt(request.getParameter("kor"));
    int eng=Integer.parseInt(request.getParameter("eng"));
    int math=Integer.parseInt(request.getParameter("math"));
    int tot=kor+eng+math;
    int avg=tot/3;
    String grade="";
    switch(avg/10){
    case 10
    case 9: grade="A학점"break;
    case 8: grade="B학점"break;
    case 7: grade="C학점"break;
    default : grade="F학점";
    }
    out.println("name");
    out.println("kor");
    out.println("eng");
    out.println("math");
%>
<body>
결과<hr>
이름: <%=name %><br>
국어: <%=kor %><br>
영어: <%=eng %><br>
수학: <%=math %><br>
총점: <%=tot%><br>
평균: <%=avg%><br>
학점: <%=grade %><br>
</body>
</html>
cs

 

 

  • 자바스크립트에서 객체 접근방식

    • BOM: 브라우저에서 오브젝이 표현되는 방식

    • DOM: 도큐먼트, HTML 트리구조 (id)로 접근

  • 요즘에는 자바스크립트와 관련된 파일들의 라이브러리 모임=jquery로도 많이 접근

 


  • 이름, 학번이 빈칸일 경우 오류메시지 띄우기

 

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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function check(){
    if(document.getElementById("name").value==""){
        alert("이름을 입력하세요");
        return;
    }
    if(document.getElementById("studentNum").value==""){
        alert("학번을 입력하세요");
        return;
    }
    frm.submit(); //직접 submit()이라는 메소드를 호출. 액션을 들고 가줌
}
</script>
</head>
<body>
<form action="output.jsp" method="post" name="frm"> 
<!--method="post"하면 선택된 값들이 주소창에 안보임--> <!--method="get"하면 주소창에 선택값들이 표시됨 -->
이름: <input type="text" name="name" id="name"><br> <!-- DOM방식은 id로 접근 -->
학번: <input type="text" name="studentNum" id="studentNum"><br>
성별: 
<!-- 
<input type="radio" name="gender" value="man" checked>남자
<input type="radio" name="gender" value="woman">여자<br>
-->
<input type="radio" name="gender" value="man" checked  id="man">
<label for="man">남자</label> <!-- id, label을 이용하여 글자를 클릭해도 선택됨 -->
<input type="radio" name="gender" value="woman" checked  id="woman">
<label for="woman">여자</label><br>
전공: 
<select name="major">
    <option value="국문학과" selected>국문학과</option>
    <option value="영문학과">영문학과</option>
    <option value="수학과" >수학과</option>
    <option value="정치학과">정치학과</option>
    <option value="체육학과">체육학과</option>
</select>
<br>
취미<br>
<input type="checkbox" name="hobby" value="운동">운동
<input type="checkbox" name="hobby" value="운동1">운동1
<input type="checkbox" name="hobby" value="운동2">운동2
<input type="checkbox" name="hobby" value="운동3">운동3
<input type="checkbox" name="hobby" value="운동4">운동4 <br>
<input type="button" value="보내기" onclick="check()"> 
<!-- submit=form안에 있는 값들을 들고 액션한테 가라는 뜻. 그전에 검사하기-->
<!-- button=모양만 버튼. 아무 역할이 없음. 그래서 뒤에 onclick="check()"-->
<input type="reset" value="취소">
</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
27
28
29
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<%
request.setCharacterEncoding("utf-8"); //method가 post라도 한글이 안깨짐
    String[] hobby=request.getParameterValues("hobby");
%>
<body>
결과 <hr>
이름: <%=request.getParameter("name") %><br>
학번: <%=request.getParameter("studentNum") %><br>
성별: <%=request.getParameter("gender") %><br>
전공: <%=request.getParameter("major")%><br>
<%
    String str="";
    if(hobby!=null){
        for(int i=0;i<hobby.length;i++){
        str+=hobby[i]+" ";
        }
    }
%>
취미: <%=str%>
</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
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
table{
    width: 600px;
    heigh: 400px;
}
table, th, td{
    border: 1px solid gray;
}
th.thColor{
    background-color: skyblue;
}
ol.olType{
    list-style-type: upper-roman;
}
</style>
<table>
</head>
<body>
<form action="introProc.jsp" method="post">
    <tr>
        <th>성명</th>
        <td><input type=text name=name></td>
        <th>성별</th>
        <th><input type=radio name="man" value="남" checked id="남"> 
            <label for="남"></label>
            <input type=radio name="man" value="여" checked id="여">
            <label for="여"></label></th>
    </tr>
    <tr>
        <th>생년월일</th>
        <td colspan=3><input type=text name=year size=15>
        <input type=text name=month  size=5>
        <input type=text name=day size=5>
        <input type="radio" name="yy" value="양력" checked  id="양력">
        <label for="양력">양력</label>
        <input type="radio" name="yy" value="음력" checked id="음력">
        <label for="음력">음력</label></td>
    </tr>
    <tr>
        <th>주소</th>
        <td colspan=3><input type=text size=55 name=addr ></td>
    </tr>
    <tr>
        <th>전화번호</th>
        <td colspan=3><input type=text size=15 name=phone> - <input type=text size=15 name=phone1 > - <input type=text size=15 name=phone2 ></td>
    </tr>
    <tr>
        <th colspan=4 class="thColor">사용가능한 프로그램 선택하기</th>
    </tr>
    <tr>
        <td colspan=4>
            <ol class="olType">
                <li><input type=checkbox name="pgm" value="한글">한글
                <li><input type=checkbox name="pgm" value="포토샵">포토샵
                <li><input type=checkbox name="pgm" value="매크로 미디어 디렉터">매크로 미디어 디렉터
                <li><input type=checkbox name="pgm" value="드림위버">드림위버
                <li><input type=checkbox name="pgm" value="3D MAX">3D MAX</li>
            </ol>
        </td>
    </tr>
    <tr>
        <th colspan=4 class="thColor">가고싶은 여행지를 모두 선택하세요.</th>
    </tr>
    <tr>
        <td colspan=4><select size=3 name=play multiple>
                <option value="설악산" selected>설악산
                <option value="경포대">경포대
                <option value="토발">토발
                <option value="거제도">거제도
                <option value="변산반도">변산반도
                <option value="단양8경">단양8경
                </select>
        </td>
    </tr>
    <tr>
        <th colspan=4 class="thColor">미래의 꿈은 어떠한가요</th>
    </tr>   
    <tr>
        <td colspan=4>
            <textarea cols=50 rows=5 name="memo">미래의 꿈은 희망입니다.</textarea>
    </tr>
    <tr>
        <th colspan=4><input type=submit  value="전송" ><input type=reset name=reset value="다시쓰기"></th>
    </tr>
</table>
</form>
</body>
</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
46
47
48
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<%
    request.setCharacterEncoding("utf-8");
    String[] pgm=request.getParameterValues("pgm");
    String[] play=request.getParameterValues("play");
%>
<body>
결과<hr>
성명: <%=request.getParameter("name")%><br>
성별: <%=request.getParameter("man")%><br>
생년월일:
<%=request.getParameter("year")%>-
<%=request.getParameter("month")%>-
<%=request.getParameter("day")%>-
<%=request.getParameter("yy")%>
<br>
주소: <%=request.getParameter("addr")%><br>
전화번호:
<%=request.getParameter("phone")%>-
<%=request.getParameter("phone1")%>-
<%=request.getParameter("phone2")%>
<br>
<
    String str="";
    if(pgm!=null){
        for(int i=0;i<pgm.length;i++){
            str+=pgm[i]+" ";
        }
    }
    String strP="";
    if(play!=null){
        for(int i=0;i<play.length;i++){
            strP+=play[i]+" ";
        }
    }
%>
프로그램: <%=str%><br>
여행지: <%=strP%><br>
장래희망: <%=request.getParameter("memo")%>
</body>
</html>

 


 

 

input.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
34
35
36
37
38
39
40
41
42
43
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="output.jsp" method="get"> 
<!--method="post"하면 선택된 값들이 주소창에 안보임-->
<!--method="get"하면 주소창에 선택값들이 표시됨 -->
이름: <input type="text" name="name"><br>
학번: <input type="text" name="studentNum"><br>
성별:
<!--
<input type="radio" name="gender" value="man" checked>남자
<input type="radio" name="gender" value="woman">여자<br>
-->
<input type="radio" name="gender" value="man" checked  id="man">
<label for="man">남자</label> <!-- id, label을 이용하여 글자를 클릭해도 선택됨 -->
<input type="radio" name="gender" value="woman" checked  id="woman">
<label for="woman">여자</label><br>
전공:
<select name="major">
    <option value="국문학과" selected>국문학과</option>
    <option value="영문학과">영문학과</option>
    <option value="수학과" >수학과</option>
    <option value="정치학과">정치학과</option>
    <option value="체육학과">체육학과</option>
</select>
<br>
취미<br>
<input type="checkbox" name="hobby" value="운동">운동
<input type="checkbox" name="hobby" value="운동1">운동1
<input type="checkbox" name="hobby" value="운동2">운동2
<input type="checkbox" name="hobby" value="운동3">운동3
<input type="checkbox" name="hobby" value="운동4">운동4 <br>
<input type="submit" value="보내기">
<input type="reset" value="취소">
</form>
</body>
</html>
cs

 

 


output.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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<%
    String[] hobby=request.getParameterValues("hobby");
%>
<body>
결과 <hr>
이름: <%=request.getParameter("name") %><br>
학번: <%=request.getParameter("studentNum") %><br>
성별: <%=request.getParameter("gender") %><br>
전공: <%=request.getParameter("major")%><br>
<%
String str="";
for(int i=0;i<hobby.length;i++){
    str+=hobby[i]+" ";
}
%>
취미: <%=str%>
</body>
</html>
cs
 

 

 


 

score.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="scoreResult.jsp">
이름: <input type="text" name="name"><br>
국어: <input type="text" name="kor"><br>
영어: <input type="text" name="eng"><br>
수학: <input type="text" name="math"><br>
<input type="submit" value="전송">
</form>
</body>
</html>
cs

 


 

scoreResult.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
34
35
36
37
38
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<%
    String name=request.getParameter("name");
    int kor=Integer.parseInt(request.getParameter("kor"));
    int eng=Integer.parseInt(request.getParameter("eng"));
    int math=Integer.parseInt(request.getParameter("math"));
    int tot=kor+eng+math;
    int avg=tot/3;
    String grade="";
    switch(avg/10){
    case 9: grade="A학점"break;
    case 8: grade="B학점"break;
    case 7: grade="C학점"break;
    default : grade="F학점"break;
    }
    out.println("name");
    out.println("kor");
    out.println("eng");
    out.println("math");
%>
<body>
결과<hr>
이름: <%=name %><br>
국어: <%=kor %><br>
영어: <%=eng %><br>
수학: <%=math %><br>
총점: <%=tot%><br>
평균: <%=avg%><br>
학점: <%=grade %><br>
</body>
</html>
cs

 

 

package com.calculator;

public class Calculator {

    public int sum(int a, int b) {

        return a+b;

    }

}

 

package com.test;

import static org.junit.Assert.assertEquals;

import org.junit.Test;

import com.calculator.Calculator;

public class CalculatorTest {

    @Test

    public void testSum() {

        Calculator cal=new Calculator();

        assertEquals(30, cal.sum(20, 10));

    }

}

 

 


package com.test;

import static org.junit.Assert.assertEquals;

import org.junit.Test;

import com.calculator.Calculator;

public class CalculatorTest {

    @Test

    public void testSum() {

        Calculator cal=new Calculator();

        assertEquals(30, cal.sum(20, 10));

        System.out.println("test1");

    }

    @Test

    public void testSum1() {

        Calculator cal=new Calculator();

        assertEquals(60, cal.sum(50, 10));

        System.out.println("test2");

    }

}


 

package com.test;

import static org.junit.Assert.assertEquals;

import org.junit.After;

import org.junit.AfterClass;

import org.junit.Before;

import org.junit.BeforeClass;

import org.junit.Test;

import com.calculator.Calculator;

public class CalculatorTest {

    @Test

    public void testSum() {

        Calculator cal=new Calculator();

        assertEquals(30, cal.sum(20, 10));

        System.out.println("test1");

    }

    @Test

    public void testSum1() {

        Calculator cal=new Calculator();

        assertEquals(60, cal.sum(50, 10));

        System.out.println("test2");

    }

    //BeforeClass부터 출력됨

    @BeforeClass

    public static void beforeTest() {

        System.out.println("BeforeClass");

    }

    @Before //단위 테스트 할때마다 부름

    public void setUp() {

        System.out.println("Before setUp");

    }

    @After //단위 테스트 할때마다 부름

    public void tearDown() {

        System.out.println("After tearDown");

    }

    //AfterClass가 제일 마지막에 출력됨

    @AfterClass

    public static void afterTest() {

        System.out.println("AfterClass");

    }

}

 

 


 

 

 

 

  • WebContent에 새 폴더 생성 (폴더명 exam, test.jsp 파일 생성)

  • test.jsp에 이름과 주소 칸, 전송 버튼을 생성

 

 

 

  • 서버 프로그램을 만들기 때문에 이런 값들이 서버에게 전달되기 위해서는 반드시 폼태그에 감싸져야함

 

 

  • action을 써줌. submit이라는 것이 action으로 가고, 갈때 두 개의 값을 들고 가라는 뜻.

 

 


 

  • test.jsp에 써준대로 testResult.jsp라는 파일을 새로 생성

 

 

  • 이제 test.jsp에서 Run As를 하고 전송을 누르면 크롬에서 새 페이지가 뜨면서 서버라는 글자가 뜬다.

 


  • 칸에 적은 값이 뜨도록 하려면 요청을 처리하는 request와 출력을 담당하는 객체인 out을 사용하여 testResult.jsp를 수정해야함

  • 스크립틀릿 (%)을 이용하여 HTML 안에 자바문법을 기입

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<%

 String name=request.getParameter("name"); //request는 요청을 담당하는 객체

 String addr=request.getParameter("addr");

 out.println(name); //out은 출력을 담당하는 객체

 out.println(addr);

%>

<body>

서버

</body>

</html>

 

  • 전송 버튼을 누르면 새 페이지에 이름과 주소가 뜸

  • 주소창을 잘 보면 testResult.jsp?name=홍길동&addr=부산 이라고 나와있음

 

 


  • 만약 이름: 홍길동 주소: 부산 이렇게 보여주고 싶다면?

  • <Body></Body>안에 원하는 형식과 스크립틀릿을 함께 기입

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<%

 String name=request.getParameter("name"); //request는 요청을 담당하는 객체

 String addr=request.getParameter("addr");

 out.println(name); //out은 출력을 담당하는 객체

 out.println(addr);

%>

<body>

결과 <hr>

이름: <% out.println(name); %> <br>

주소: <% out.println(addr); %> <br>

</body>

</html>

 

<hr>

이름: <%=name %><br>

주소: <%=addr %>

 

 


 

  • score.jsp 생성하여 이름, 국어, 영어, 수학 성적을 기입하는 칸과 전송 버튼을 만들기

  • scoreResult.jsp 생성하여 입력받은 값, 총점 출력

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<form action="scoreResult.jsp">

이름: <input type="text" name="name"><br>

국어: <input type="text" name="kor"><br>

영어: <input type="text" name="eng"><br>

수학: <input type="text" name="math"><br>

<input type="submit" value="전송">

</form>

</body>

</html>

 


 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<%

    String name=request.getParameter("name");

    int kor=Integer.parseInt(request.getParameter("kor"));

    int eng=Integer.parseInt(request.getParameter("eng"));

    int math=Integer.parseInt(request.getParameter("math"));

    int tot=kor+eng+math;

    out.println("name");

    out.println("kor");

    out.println("eng");

    out.println("math");

%>

<body>

결과<hr>

이름: <%=name %><br>

국어: <%=kor %><br>

영어: <%=eng %><br>

수학: <%=math %><br>

총점: <%=tot%>

</body>

</html>

 

웹 프로그래밍을 할 수 있는 언어들: JSP, ASP, PHP 등. 

우리는 자바 기반의 JSP를 배움

클라이언트가 요청하면 서버에 전송되고 다시 서버에서 클라이언트로 응답함. 

클라이언트의 요청을 JSP가 처리하고 해석하며 was(웹 애플리케이션 서버)를 통해 동적인 처리가 가능.

 

  • 톰캣(WAS중 하나)을 설치해서 내 컴퓨터를 서버로 만듦. 웹 서버와 연동하여 실행할 수 있는 자바 환경을 제공. 

https://tomcat.apache.org/download-90.cgi

 


 

  • Java JEE를 실행하고 우측 상단에서 Open Perspective에서 Java EE를 선택

 

 

 

 

  • Package Explorer에서 Dynamic Web Project를 새로 만듦

 

 

 

  • (프로젝트 이름을 FirstJSP로 했음)

 

 

  • New Runtime에서 Apache Tomcat v9.0을 선택하고 Next

 

 

  • JRE를 선택하고 Finish

 

 

 

  • WebContent에 JSP File 만들기 (반드시 WebContent에 만들기. WEB-INF에 만들면 오류남)

 

 

  • 파일명은 NewFile.jsp로 하고 Next

 

  • html5 선택

 

 

  • 만들어놓은 JSP 파일에서 마우스 우클릭 Run As-Run on Server

 

 

  • 오류가 날수도 있다. 포트 번호를 8080에서 다른 것으로 바꿔주고 인코딩 방식도 UTF-8로 바꿔줘야함

  • Package Explorer에서 Servers라는 폴더가 새로 생겼다면 server.xml을 열고 port 번호를 바꿈

 

 

 

  • Window-Preferences-Web-JSP Files-Encoding을 UTF-8로 변경

 

 

 

  • Window-Preferences-General-Web Browser-설정을 아래와 같이 바꿈 (Chrome)

 

 

  • JSP파일에서 HTML형식 중 body 부분에 아무 내용을 타이핑하고 저장

 

 

  • JSP파일에서 다시 우클릭-Run As-Run on Server를 하면 크롬에서 팝업창이 뜸

 

 

 

  • 표 제목: <caption>, <figure>, <figcaption>

 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>표 만들기</title>

    <style>

        table, th, td {

            border:1px solid #ccc;

        }       

        td, th {

            padding:10px;   /* 셀 테두리와 내용 사이의 간격(패딩) */

        }

    </style>

</head>

<body>  

    <table>

        <caption>

            <strong>Modern Browser</strong>

            <p>국내에서 자주 사용하는 모던 브라우저</p>

        </caption>

            <tr> 

                <th>브라우저</th>

                <th>제조업체</th>

                <th>다운로드</th>

            </tr>

            <tr> 

                <th>크롬(Chrome)</th>

                <td>Google</td>

                <td>https://www.google.com/chrome/</td>

            </tr>

            <tr> 

                <th>파이어폭스(Firefox)</th>

                <td>Mozilla</td>

                <td>https://mozilla.org/ko/firefox</td>

            </tr>

            <tr>

                <th>엣지(Edge)</th>

                <td>Microsoft</td>

                <td>https://www.microsoft.com/ko-kr/windows/microsoft-edge</td>

            </tr>

    </table>

</body>

</html>

 

 


<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>표 만들기</title>

    <style>

        table, th, td {

            border:1px solid #ccc;

        }       

        td, th {

            padding:10px;   /* 셀 테두리와 내용 사이의 간격(패딩) */

        }

    </style>

</head>

<body>  

    <figure>

        <figcaption>

            <p>국내에서 자주 사용하는 <b>모던브라우저</b></p>

        </figcaption>

    <table>

            <tr> 

                <th>브라우저</th>

                <th>제조업체</th>

                <th>다운로드</th>

            </tr>

            <tr> 

                <th>크롬(Chrome)</th>

                <td>Google</td>

                <td>https://www.google.com/chrome/</td>

            </tr>

            <tr> 

                <th>파이어폭스(Firefox)</th>

                <td>Mozilla</td>

                <td>https://mozilla.org/ko/firefox</td>

            </tr>

            <tr>

                <th>엣지(Edge)</th>

                <td>Microsoft</td>

                <td>https://www.microsoft.com/ko-kr/windows/microsoft-edge</td>

            </tr>

    </table>

    </figure>

</body>

</html>

 

 


 

  • 표 구조 정의하기: <thead>, <tbody>, <tfoot>

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>표 만들기</title>

    <style>

        table, th, td {

            border:1px solid #ccc;

        }

        th, td {

            width:80px;  /* 셀의 너비 */

            padding:10px; /* 셀 테두리와 내용 사이의 간격(패딩) */

        }

        thead, tfoot { 

            background : #eeeeee;  /* thead와 tfoot의 배경 색 */

        }

    </style>

</head>

<body>

    <table>

        <caption>제주특별자치도 학교현황(2015.4.1 기준)</caption>

        <thead>

            <tr>        

                <th>구분</th>

                <th>학교수</th>

                <th>학급수</th>

                <th>학생수</th>

                <th>교원수</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <th>유치원</th>

                <td>117</td>

                <td>252</td>

                <td>5,547</td>

                <td>474</td>

            </tr>

            <tr>

                <th>초등학교</th>

                <td>111</td>

                <td>1,720</td>

                <td>37,686</td>

                <td>2,632</td>

            </tr>

            <tr>

                <th>중학교</th>

                <td>44</td>

                <td>699</td>

                <td>21,274</td>

                <td>1,412</td>

            </tr>

            <tr>

                <th>고등학교</th>

                <td>29</td>

                <td>676</td>

                <td>22,019</td>

                <td>1,433</td>

            </tr>

            <tr>

                <th>특수학교</th>

                <td>3</td>

                <td>90</td>

                <td>428</td>

                <td>160</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <th>합계</th>

                <td>300</td>

                <td>3,437</td>

                <td>86,954</td>

                <td>6,111</td>

            </tr>

        </tfoot>

    </table>

</body>

</html>

 

 


  • 열끼리 묶어 스타일 지정: <col>, <colgroup>

 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>표 만들기</title>

    <style>

        table, th, td {

            border:1px solid #ccc;

        }

        td {

            width:100px;  /* 셀 너비 */

            height:30px;  /* 셀 높이 */

        }

    </style>

</head>

<body>

    <table border="1">

        <caption>colgroup 연습</caption>

        <colgroup>

            <col>

            <col span="2" style="background-color: blue;">

            <col style="background-color: yellow;">

        </colgroup>

        <tr>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

        </tr>

    </table>

</body>

</html>

 

 

 

 


 

 

  • 목록을 만드는 태그

    • <ul>, <li>: 순서 없는 목록. 각 항목 앞에 불릿이 붙여짐

    • <ol>,<li>: 순서 목록. 숫자 혹은 a,b,c로 구분

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>1박 2일 가족 여행 코스</title>

</head>

<body>

    <ul>

        <li>1일차</li>

            <ol type="a">

                <li>해녀박물관</li>

                <li>낚시체험</li>

            </ol>

        <li>2일차</li>

        <ol type="a" start="3">

            <li>용눈이오름</li>

            <li>만장굴</li>

            <li>카약체험</li>

        </ol>

    </ul>

</body>

</html>

 


 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>1박 2일 가족 여행 코스</title>

</head>

<body>

    <h1>관광 안내 전화</h1>

    <p>한국관광공사에서는 전국의 관광안내소와 공동으로 여러분의 여행편의를 위해 관광안내전화 1330 서비스를 연중무휴 실시하고 있습니다.

    </p>

    <p>

    1330에는 해당 지역의 지도와 관광 가이드북, 관광안내소를 대신할 수 있을 정도의 다양한 정보가 있습니다. 원하는 관광지는 물론이며 숙박, 교통, 음식점 등의 자세한 정보를 한국어를 비롯한 영어, 중국어, 일어의 3개 국어로도 이용 가능합니다.

        <ul>

        <li>일반전화: (국번없이) 1330</li>

        <li>휴대전화: 064-1330</li>

        </ul>

    </p>

</body>

</html>

 

 

 


  • <dl>, <dt>, <dd>: 설명 목록

    • 제목과 그에 대한 설명으로 이루어진 목록

    • 하나의 <dt>에 여러 개의 <dd>값을 가질 수 있음

<dl>

<dt>

<dd>

<dd>

</dt>

</dl>

 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>제주 올레</title>

    <style>

        dl {

            line-height:25px;   /* 줄 간격 */

        }

    </style>

</head>

<body>

    <h1>제주 올레</h1>

    <dl>

        <dt>올레1코스</dt>

            <dd>코스: 시흥초등학교</dd>

            <dd>거리: 14.6km</dd>

            <dd>난이도: 중</dd>

        <dt>올레2코스</dt>

            <dd>코스: 광치기 해변</dd>

            <dd>거리: 14.5km</dd>

            <dd>난이도: 중</dd>

    </dl>

</body>

</html>

 


 

  • 표를 만드는 태그

    • <table>: 표 전체

    • <tr>: 행

    • <td>: 셀 <th>: 제목 셀

    • <colspan>, <rowspan>: 열과 행을 합침

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>표 만들기</title>

    <style>

        table, th, td {

            border:1px solid #ccc;

        }       

        td {

            padding:5px;  /* 셀 테두리와 내용 사이의 간격(패딩) */

        }

    </style>

</head>

<body>

    <table>

        <tr>

            <th> 제목셀 </th>

            <td> 1행 2열 </td>

            <td> 1행 3열 </td>

        </tr>

        <tr>

            <th> 제목셀 </th>

            <td> 2행 2열 </td>

            <td> 2행 3열 </td>

        </tr>

    </table>

</body>

</html>

 

 

 

 


 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>표 만들기</title>

    <style>

        table, th, td {

            border:1px solid #ccc;

        }       

        th {

            padding:15px;   /* 셀 테두리와 내용 사이의 간격(패딩) */

        }

        tr > td:nth-child(odd) { 

            width:120px;  /* 홀수번째 열의 너비 : 120px */

        }

        tr > td:nth-child(even) { 

            width:300px;  /* 짝수번째 열의 너비 : 120px */

        }

    </style>

</head>

<body>

    <table>

        <tr> 

            <th>이름</th>

            <td> </td>

            <th>연락처</th>

            <td> </td>

        </tr>

        <tr> 

            <th>주소</th>

            <td colspan="3"></td>

        </tr>

        <tr> 

            <th>자기소개</th>

            <td colspan="3"></td>

        </tr>

    </table>

</body>

</html>

 

 

+ Recent posts