1cm

자바 프로그래밍_Day_46_표, 영역관련태그 본문

국비지원_Java/Java Programming_1

자바 프로그래밍_Day_46_표, 영역관련태그

dev_1cm 2021. 10. 30. 12:08
반응형

 

 

2021. 10. 22

 

 

     > 표 관련 태그 - <table></table>

       -> 웹 문서에서 자료를 정리할 때 주로 사용.

       -> 행과 열로 이루어져 있고 행과 열이 만나는 지점을 셀이라고 한다.

       -> ex. <table>

<td>내용1</td> <td>내용2</td> <td>내용3</td>
     
     

</table>

 

-------------------------------------------------------------------------------

<table>

   <tr>

       <td>내용1</td>

       <td>내용2</td>

       <td>내용3</td>

   </tr>

   ...

</table>

-------------------------------------------------------------------------------

 

       -> <tr></tr> : 한 개의 행(ROW)을 만드는 태그

       -> <td></td> : 한 개의 열을 만드는 태그

       -> <th></th> : 열에 대한 제목을 표시하는 태그로 중앙 정렬 및 굵게 표시됨

       -> <caption></caption> : 테이블의 제목이나 내용을 추가하는 태그, 다른 태그를 이용하여 텍스트를 꾸밀 수 있고, 기본 위치는 테이블 위 중앙에 배치

       -> <figure> <figcaption></figcaption> </figure> : <figure>태그로 감싸서 사용하며 <caption>과 비슷한 기능, 테이블 앞에 하고 싶을 시 <table> 전에 기술, 테이블 뒤에 하고 싶을 시 </table> 후에 기술, 태그 설명에 주로 사용한다.

          -> figure : 사진이나 문서 등 독립적인 컨텐츠 정의시 사용

 

 

 

     > 테이블 속성

       -> border - <table border="두께"> </table> : <table> 태그의 속성으로 표의 테두리 두께 지정

       -> rowspan, colspan : <td> 태그의 속성으로 rowspan은 지정한 수만큼의 행을 병합하고 colspan은 지정한 수만큼의 열 병합

          -> <td rowspan = "병합할 행 개수"></td>

          -> <td colspan = "병합할 열 개수"></td>

          -> 테이블 구조를 나누는 태그

             -> <thread></thread> : 테이블에 하나만 존재 가능

             -> <tbody></tbody> : 몸체로 테이블에 여러 개 존재 가능

             -> <tfoot></tfoot> : <thread> 태그 뒤에 있어야 하며 하나만 존재 가능

          -> <col> : 열에 대한 스타일을 적용할 때 사용. <caption> 태그 뒤, <tr><td> 태그 전에 위치, <span>태그를 사용하여 열을 묶을 수 있음

          -> <colgroup></colgroup> : 열을 그룹으로 묶어서 스타일 적용할 때 사용, <caption> 태그 뒤, <tr><td>태그 전 위치

 

 

 

     > 실습 코드

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>표 관련 태그</title>
    <style>
        /* table {
            background-color: aqua;
            border: 1px solid #ff0000;
            border-collapse: collapse;
        } */
 
        thead{
            background-color: gold;
        }
 
        /* tbody {
            background-color: greenyellow;
        } */
 
    </style>
</head>
<body>
    <!--
        표(테이블) : 웹 문서에서 자료를 정리할 때 자주 사용한다.
                    행과 열로 이루어져 있고, 행과 열이 만나는 지점을 셀이라고 한다.
        
        표를 만드는 기본적인 태그는 <table>, <tr>, <th>, <td>가 있다.
            <table></table> : 표의 시작과 끝을 나타낸다.
            <tr></tr> : 표의 행을 나타내는 태그이다.
            <th></th> : 표의 제목 셀을 나타내는 태그이다. (가운데 정렬, 글자 굵게)
            <td></td> : 표의 일반 셀을 나타내는 태그이다.
        
        * 기본적인 구조
        <table>
            <tr>
                <th>제목</th>
                <th>제목</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
    -->
 
    <h1>표 관련 태그</h1>
 
    <h3>기본적인 표 만들기</h3>
    <table border="1"> <!-- border : 표의 테두리 두께 -->
        <tr>
            <!-- caption : -->
            <caption>
                웹 브라우저의 종류
            </caption>
            <!-- width, height 속성을 이용하여 가로, 세로 길이를 지정 가능-->
            <th width="120px" height="50px">브라우저명</th>
            <th>제조사</th>
            <th width="300px">홈페이지</th>
        </tr>
        <tr>
            <td>익스플로러</td>
            <td width="120px">MS</td>
            <td>http://www.microsoft.com</td>
        </tr>
        <tr>
            <td>크롬</td>
            <td>google</td>
            <td>http://www.google.com</td>
        </tr>
        <tr>
            <td>사파리</td>
            <td>Apple</td>
            <td>http://www.apple.com</td>
        </tr>
        <tr>
            <td>파이어폭스</td>
            <td>Mozila</td>
            <td>http://www.mozila.com</td>
        </tr>
        <!-- <caption>
            웹 브라우저의 종류
        </caption> -->
    </table>
 
    <!-- 작성하는 위치에 따라 테이블 위 또는 아래에 설명을 달아줄 수 있다. -->
    <figure>
        <figcaption>figure를 이용해서 테이블의 설명 혹은 img의 설명에 주로 사용된다.</figcaption>
        <figcaption>설명 내용을 여러 줄로 표기할 수도 있다.</figcaption>
    </figure>
    
    <h3>표의 행과 열 합치기</h3>
    <!--
        <td> 태그의 속성을 이용하여 행과 열이 합치기를 할 수 있다.
            rowspan : 지정한 수만큼 행을 병합
            colspan : 지정한 수만큼 열을 병합
    -->
    <h4>회원 정보</h4>
    <table border="1">
        <tr>
            <td colspan="2" rowspan="2" width="110px" height="110px">사진</td>
            <!-- <td></td>-->
            <td width="75px">이름</td>
            <td width="350px"></td>
        </tr>
        <tr>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <td>연락처</td>
            <td></td>
        </tr>
        <tr>
            <td width="55px" height="50px">주소</td>
            <td colspan="3"></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <td height="100px">자기소개</td>
            <td colspan="3"></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
    </table>
 
    <h3>테이블 태그의 구조 설정</h3>
    <table border="1">
        <thead>
            <tr>
                <th>이름</th>
                <th>나이</th>
                <th>주소</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>홍길동</td>
                <td>19</td>
                <td>경기도 안양시</td>
            </tr>
            <tr>
                <td>인절미</td>
                <td>25</td>
                <td>조선 한양</td>
            </tr>
            <tr>
                <td>고구마</td>
                <td>30</td>
                <td>경기도 성남시</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th colspan="2">총 인원</th>
                <td>3명</td>
            </tr>
        </tfoot>
    </table>
 
 
 
 
 
    <br><br><br><br><br>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <br><br><br><br><br>
</body>
</html>
 cs

 

 

 

 

     > 영역 관련 태그 (페이지 영역 분할)

       -> <div></div> : block 형식의 공간을 수직으로 분할

       -> <span></span> : inline형식의 공간을 수평으로 분할

       -> <iframe></iframe> : 웹 문서 안에 다른 웹 페이지를 추가하는 태그

          -> 속성 

          -> width / height : 페이지 크기 설정

          -> name : 인라인 프레임 이름

          -> src : 페이지 경로

 

 

     > 실습코드와 출력 결과

 

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>영역 관련 태그</title>
    <style>
        div {
            border : 1px solid brown;
            width: 100px;
            height: 100px;
        }
 
        span {
            border: 1px solid hotpink;
            /* width : 200px;
            height : 200px;
            */
        }
    </style>
</head>
<body>
    <!--
        블럭 요소
            - 한 줄 단위로 영역을 차지하는 요소(너비가 100%)
            - 새로운 블록 요소는 새로운 라인에 영역이 잡힌다.(두 블록 간에는 겹치는 일이 없다.)
            - p, pre, div, ...
        인라인 요소
            - 내용에 해당하는 부분만 영역을 차지하는 요소
            - 줄 바꿈이 적용되지 않아 옆으로 영역이 잡힌다.(다음 줄로 넘기고자 한다면 직접 br 태그를 넣어줘야 한다.)
            - span, label, ...
        
        <div> : 블록 요소의 태그로 레이아웃 분할을 위해 사용한다.
        <p>   : 블록 요소의 태그로 문단 영역을 지정하는 용도로 사용한다.
        <spn> : 인랑니 요소의 태그로 컨텐츠를 감싸는 역할을 하는 태그이다.
    -->
    <h1>영역 관련 태그</h1>
    
    <h3>div 태그와 span 태그의 차이 1</h3>
 
    <h4>div 태그</h4>
    <p>
        div 태그 영역은 이미 존재하는 태그 다음 줄에 영역이 설정된다.
        (block 요소 : 공간을 수직으로 분할)
    </p>
 
    <div>
        첫 번째 영역
    </div>
 
    <div>
        두 번째 영역
    </div>
 
    <div>
        세 번째 영역
    </div>
 
    <h4>span 태그</h4>
    <p>
        span 태그 영역은 줄바꿈이 일어나지 않고, 옆으로 영역이 설정된다.
    </p>
 
    <span>
        첫 번째 영역
    </span>
 
    <span>
        두 번째 영역
    </span>
 
    <span>
        세 번째 영역
    </span>
    
    <h3>div 태그와 span 태그의 차이 2</h3>
    <h4>div 태그 : 사각형 박스로 영역을 지정</h4>
    <div>
        동해물과 백두산이 마르고 닳도록 <br>
        하느님이 보우하사 우리나라 만세.<br>
    </div>
    
    <p></p>
    <h4>span 태그 : 문장 단위로 영역을 지정</h4>
    <span>
        동해물과 백두산이 마르고 닳도록 <br>
        하느님이 보우하사 우리나라 만세. <br>
        무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세
    </span>
 
    <hr>
 
    <h3>iframe</h3>
 
    <iframe src="03_표관련태그.html" width="650px" height="600px"></iframe>
    <!--
        상대 경로를 이용한 파일 찾기 (상대 경로일 때는 찾으려고 하는 파일이 기준이 된다.(상대적으로 파일이 어디있는지))
        <iframe src="../03_표관련태그 copy.html" width="650px" height="600px"></iframe> 
        
        절대 경로를 이용한 파일 찾기
        <iframe src="/Users/hani/Desktop/develop_2/FRONT/03_표관련태그 copy.html" width="650px" height="600px">
    -->
    
    <p></p>
 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VAB_7Quy72Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
 cs

 

 

 

 

 

 

     > 연습문제 1

 

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
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>표 태그 1</title>
    <style>
        thead{
            background-color: aqua;
        }
 
        tbody{
            background-color: orange;
        }
        tfoot{
            background-color: yellow;
        }
 
        tbody th, tfoot th {
            background-color: tomato;
        }
    </style>
</head>
<body>
    <h1>연습문제2_표 태그 1</h1>
    <table border="1">
        <thead>
            <tr>
                <th width="350px" colspan="5">하수정 보석 컬렉션</th>
                <!-- <th></th> -->
                <!-- <th></th> -->
                <!-- <th></th> -->
                <!-- <th></th> -->
            </tr>
        </thead>
        <tbody>
            <tr>
                <th width="100" height="120" rowspan="5">제품리스트</th>
                <th height="25px">코드</th>
                <th>분류</th>
                <th width="60px">가격</th>
                <th>구매가능 개수</th>
            </tr>
            <tr>
               <!-- <td></td> -->
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
               <!-- <td></td> -->
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
               <!-- <td></td> -->
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <!-- <td></td> -->
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
             </tr>
        </tbody>
        <tfoot>
            <tr>
                <th colspan="3">총합</th>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
 cs

 

 

 

     > 연습문제 2

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>표 태그 2</title>
    <style>
 
    </style>
</head>
<body>
    <h1>연습문제2_표태그2</h1>
    <table border="1">
        <caption>KH 정보교육원 강의</caption>
        <thead>
            <tr>
                <th>관</th>
                <th>강의장</th>
                <th>인원수</th>
                <th>강사명</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="6">1관</td>
                <td rowspan="2">R강의장</td>
                <td rowspan="2">30명</td>
                <td>오전 : 홍길동 <button>신청하기</button></td>
            </tr>
            <tr>
                <td>오후 : 홍길동 <button>신청하기</button></td>
            </tr>
            <tr>
                <td rowspan="2">S강의장</td>
                <td rowspan="2">23명</td>
                <td>오전 : 고길동 <button>신청하기</button></td>
            </tr>
            <tr>
                <td>오후 : 고길동  <button>신청하기</button></td>
            </tr>
            <tr>
                <td rowspan="2">T강의장</td>
                <td rowspan="2">27명</td>
                <td>오전 : 두루미 <button>신청하기</button></td>
            </tr>
            <tr>
                <td>오후 : 두루미 <button>신청하기</button></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th colspan="4">많이 신청해주세요!</th>
                <!-- <td></td> -->
                <!-- <td></td> -->
                <!-- <td></td> -->
            </tr>
        </tfoot>
    </table>
</body>
</html>
 cs

반응형

'국비지원_Java > Java Programming_1' 카테고리의 다른 글

자바 프로그래밍_Day_48_폼 관련 태그  (0) 2021.10.30
자바 프로그래밍_Day_47_멀티미디어, 하이퍼링크 관련 태그  (0) 2021.10.30
자바 프로그래밍_Day_45_HTML개요, 글자/목록 관련 태그  (0) 2021.10.30
자바 프로그래밍_Day_44_SQL응용 평가  (0) 2021.10.26
자바 프로그래밍_Day_43_문제풀이  (0) 2021.10.26
'국비지원_Java/Java Programming_1' Related Articles more
Comments