정현희 / WS

Go to a project
Toggle navigation Toggle navigation pinning
정현희
c707a705 1 parent 87ab79c4

2017.03.28 CSS실습

Inline Side-by-side
Showing 21 changed files with 818 additions and 58 deletions
1 +<html>
2 +<style>
3 +a:link, a:visited
4 +{
5 +/* font-size: 2.5em;
6 + background-color: red;
7 + color:white;
8 + text-decoration: none;*/
9 + //버튼
10 + background-color: lightblue;
11 + color: green;
12 + padding: 14px 25px;
13 + text-align: center;
14 + text-decoration: none;
15 + display: inline-block;
16 +
17 +}
18 +a:hover
19 +{
20 + color:hotpink;
21 +}
22 +body
23 +{
24 + // background-color: lightblue;
25 +}
26 +ul.a
27 +{
28 + font-family: "Malgun Gothic",serif;
29 + list-style-type: upper-roman;
30 + //list-style-type: square;
31 +}
32 +p
33 +{
34 + font-style: oblique;
35 + font-size: 40px;
36 +}
37 +p1
38 +{
39 + //list-style-image: url('https://pixabay.com/photo-157349/');
40 + border: 1px solid black;
41 + outline-color: lightgreen;
42 +}
43 +p1.solid {outline-style: solid;}
44 +</style>
45 +<title>CSS1</title>
46 +<body>
47 + <h1><a href="https://namu.wiki/w/%EB%B9%85%EB%B1%85"><meta charset="utf-8">빅뱅</a></h1>
48 + <img src="http://pds21.egloos.com/pds/201502/10/79/b0215379_54da13e304e3e.jpg"/> <!--URL로 이미지를 넣음-->
49 + <ul class="a">
50 + <li>구성원</li>
51 + <ul>
52 + <li>지드래곤</li>
53 + <li>태양</li>
54 + <li>탑</li>
55 + <li>대성</li>
56 + <li>승리</li>
57 + <br/>
58 + </ul>
59 + <li>설명</li>
60 + 2006년에 힙합 그룹으로 데뷔 한 YG엔터테인먼트 대표 아이돌이다.<br/>
61 + 2007년 10대들의 패션과 이후 쏟아져나온 아이돌 그룹의 컨셉에 크게 영향을 준 그룹이다.<br/>
62 + 힙합 컨셉을 정면으로 들고 나와 큰 성공을 거뒀다.<br/><br/>
63 + <li>소속사 : <a href = "http://www.ygfamily.co.kr/" target="_blank">YG entertainment</a></li> <!--target="_blank"의 의미 : 새 탭에 띄운다.-->
64 + <br/>
65 + <p1 class="solid">
66 + 앨범</br>
67 + 1. Always</br>
68 + 2. Hot Issue</br>
69 + 3. Stand Up</br>
70 + </p1>
71 + </ul>
72 + <p>
73 + 추가적으로 기재하는 내용입니당</br>
74 + CSS를 연습해봐요!
75 + </p>
76 +</body>
77 +</html>
1 +<html>
2 +<meta charset="utf-8">
3 +<title>CSS2</title>
4 +<style>
5 + table, th, td
6 + {
7 + border-collapse: collapse;
8 + }
9 +
10 + tr:nth-child(even){background-color: red;}
11 +
12 +</style>
13 + <body>
14 + <table>
15 + <caption>홈런순위</caption>
16 + <!--표의 제목같은 역할-->
17 + <thead>
18 + <tr>
19 + <th>이름</th>
20 + <th>홈런</th>
21 + </tr>
22 + </thead>
23 + <!--표의 제목같은 역할-->
24 + <tbody>
25 + <tr>
26 + <td>이대호</td>
27 + <td>41</td>
28 + </tr>
29 +
30 + <tr>
31 + <td>최진행</td>
32 + <td>27</td>
33 + </tr>
34 +
35 + <tr>
36 + <td>홍성은</td>
37 + <td>26</td>
38 + </tr>
39 + </tbody>
40 +
41 + <tfoot>
42 + <tr>
43 + <th colspan="2">2010-08-22</th>
44 + </tr>
45 + </tfoot>
46 + </table>
47 + </body>
48 +</html>
1 +<html>
2 +<meta charset="utf-8">
3 +<title>CSS3</title>
4 +<style>
5 + table
6 + {
7 + border-collapse: collapse;
8 + widtd: 100%;
9 + }
10 + th, td
11 + {
12 + text-align: center;
13 + padding: 8px;
14 + }
15 + tr:nth-child(even)
16 + {
17 + background-color: red;
18 + //padding: 15px;
19 + }
20 + th
21 + {
22 + background-color: #4caf50;
23 + color: white;
24 + }
25 +
26 + p
27 + {
28 + border-left: 6px solid green;
29 +    background-color: #f2f2f2;
30 + }
31 +
32 +</style>
33 +<body>
34 +<table>
35 + <tr>
36 + <th>First name</th>
37 + <th>Last name</th>
38 + <th>Savings</th>
39 + </tr>
40 + <tr>
41 + <td>Peter</td>
42 + <td>Grifflin</td>
43 + <td>$100</td>
44 + </tr>
45 + <tr>
46 + <td>Lois</td>
47 + <td>Grifflin</td>
48 + <td>$150</td>
49 + </tr>
50 + <tr>
51 + <td>Joe</td>
52 + <td>Swanson</td>
53 + <td>$300</td>
54 + </tr>
55 + <tr>
56 + <td>Calos</td>
57 + <td>Brown</td>
58 + <td>$250</td>
59 + </tr>
60 +</table>
61 +<p>
62 + 끄아아앙아앙아아앙</br>
63 + 넘나 어려운것!!</br>
64 + 자소서 쓰기 시러양!!!!!!
65 +</p>
66 +</body>
67 +</html>
1 +h1
2 +{
3 + text-align: center;
4 +}
5 +a:link, a:visited
6 +{
7 + text-decoration: none;
8 + color: black;
9 +}
10 +a:hover
11 +{
12 + color: hotpink;
13 +}
14 +a.a1:link, a.a1:visited
15 +{
16 + background-color: #50c964;
17 + color: white;
18 + padding: 15px 500px;
19 + text-align: center;
20 + display: inline-block;
21 + border-radius: 15px; /*상자의 끝을 둥글게 굴려주는 역할. 숫자가 클 수록 많이 굴려짐*/
22 +}
23 +a.a1:hover
24 +{
25 + background-color: #5060c9;
26 + color: #000;
27 +}
28 +
29 +img
30 +{
31 + width: 375px;
32 + padding: 10px;
33 + border: 5px solid gray;
34 + margin: 0;
35 +}
36 +
37 +/*클래스 쓰는 방법*/
38 +li.inline_practice
39 +{
40 + display: inline;
41 + margin-right: 10%;
42 +}
43 +li.member:first-letter
44 +{
45 + font-size: 20px;
46 + font-style: italic;
47 +}
48 +
49 +p
50 +{
51 + /*왼쪽에만 선을 그림*/
52 + border-left: 20px solid #50c964;
53 +}
54 +p:first-line
55 +{
56 + color: hotpink;
57 +}
58 +
59 +table
60 +{
61 + /*margin: 50px 50px; /*위와 왼쪽에 여백을 줌*/
62 +
63 + width: 70%;/*간격을 띄움*/
64 +}
65 +
66 +td, tr
67 +{
68 + padding:50px;
69 + background-color: gray;
70 + text-align: center;
71 +}
1 <html> 1 <html>
2 -<style> 2 +<link rel='stylesheet' type='text/css' href='css_practice1.css' />
3 -h1
4 -{
5 - text-align: center;
6 -}
7 -a:link, a:visited
8 -{
9 - text-decoration: none;
10 - color: black;
11 -}
12 -a:hover
13 -{
14 - color: hotpink;
15 -}
16 -a.a1:link, a.a1:visited
17 -{
18 - background-color: #50c964;
19 - color: white;
20 - padding: 15px 500px;
21 - text-align: center;
22 - display: inline-block;
23 - border-radius: 15px; /*상자의 끝을 둥글게 굴려주는 역할. 숫자가 클 수록 많이 굴려짐*/
24 -}
25 -a.a1:hover
26 -{
27 - background-color: #5060c9;
28 - color: #000;
29 -}
30 -/*클래스 쓰는 방법*/
31 -li.inline_practice
32 -{
33 - display: inline;
34 - margin-right: 10%;
35 -}
36 -table
37 -{
38 - border-collapse: collapse;
39 - width: 50%;/*간격을 띄움*/
40 -}
41 -table
42 -{
43 - margin: 50px 50px; /*위와 왼쪽에 여백을 줌*/
44 -}
45 -p
46 -{
47 - /*왼쪽에만 선을 그림*/
48 - border-left: 20px solid #50c964;
49 -}
50 -</style>
51 <meta charset="utf-8"> 3 <meta charset="utf-8">
52 -<title>실습2</title> 4 +<title>CSS 실습1</title>
53 <body> 5 <body>
54 <h1><a class = "a1" href="https://namu.wiki/w/%EB%B9%85%EB%B1%85">빅뱅</a></h1> 6 <h1><a class = "a1" href="https://namu.wiki/w/%EB%B9%85%EB%B1%85">빅뱅</a></h1>
55 <img src="http://pds21.egloos.com/pds/201502/10/79/b0215379_54da13e304e3e.jpg"/> <!--URL로 이미지를 넣음--> 7 <img src="http://pds21.egloos.com/pds/201502/10/79/b0215379_54da13e304e3e.jpg"/> <!--URL로 이미지를 넣음-->
56 <ul> 8 <ul>
57 <li>구성원</li> 9 <li>구성원</li>
58 <ul> 10 <ul>
59 - <li>지드래곤</li> 11 + <li class = "member">지드래곤</li>
60 - <li>태양</li> 12 + <li class = "member">태양</li>
61 - <li>탑</li> 13 + <li class = "member">탑</li>
62 - <li>대성</li> 14 + <li class = "member">대성</li>
63 - <li>승리</li> 15 + <li class = "member">승리</li>
64 </ul> 16 </ul>
65 <li>설명</li> 17 <li>설명</li>
18 + <br/>
66 <p> 19 <p>
67 - <br/>2006년에 힙합 그룹으로 데뷔 한 YG엔터테인먼트 대표 아이돌이다.<br/> 20 + 2006년에 힙합 그룹으로 데뷔 한 YG엔터테인먼트 대표 아이돌이다.<br/>
68 2007년 10대들의 패션과 이후 쏟아져나온 아이돌 그룹의 컨셉에 크게 영향을 준 그룹이다.<br/> 21 2007년 10대들의 패션과 이후 쏟아져나온 아이돌 그룹의 컨셉에 크게 영향을 준 그룹이다.<br/>
69 힙합 컨셉을 정면으로 들고 나와 큰 성공을 거뒀다.<br/><br/> 22 힙합 컨셉을 정면으로 들고 나와 큰 성공을 거뒀다.<br/><br/>
70 </p> 23 </p>
71 -
72 <li>소속사 : <a href = "http://www.ygfamily.co.kr/" target="_blank">YG entertainment</a></li> <!--target="_blank"의 의미 : 새 탭에 띄운다.--> 24 <li>소속사 : <a href = "http://www.ygfamily.co.kr/" target="_blank">YG entertainment</a></li> <!--target="_blank"의 의미 : 새 탭에 띄운다.-->
73 <br/> 25 <br/>
74 <li>앨범</li> 26 <li>앨범</li>
75 - <table border="0"> 27 + <table>
76 <tr> 28 <tr>
77 <td>Always</td> 29 <td>Always</td>
78 <td>Hot Issue</td> 30 <td>Hot Issue</td>
......
1 +/*ex02.css*/
2 +
3 +a:link, a:visited
4 +{
5 + font-family: Arial, Helvetica, sans-serif;
6 + text-decoration: none;
7 + color: white;
8 +
9 + padding: 10px;
10 + background-color: gray;
11 +}
12 +
13 +a:hover
14 +{
15 + color: yellow;
16 + background-color: black;
17 +}
18 +
19 +a.direction:link, a.direction:visited
20 +{
21 + color: yellow;
22 +}
1 +<html>
2 +<link rel='stylesheet' type='text/css' href='css_practice2.css' />
3 +<title>CSS 실습2</title>
4 +<meta charset="utf-8">
5 +<body>
6 + <div class = "pagination">
7 + <a href = "www.naver.com" class="direction"><span class ='arrow'>&lsaquo;</span>이전</a>
8 + <a href = "www.naver.com">11</a>
9 + <a href = "www.naver.com">12</a>
10 + <a href = "www.naver.com">13</a>
11 + <a href = "www.naver.com">14</a>
12 + <a href = "www.naver.com" class ="current">15</a>
13 + <a href = "www.naver.com">16</a>
14 + <a href = "www.naver.com">17</a>
15 + <a href = "www.naver.com">18</a>
16 + <a href = "www.naver.com">19</a>
17 + <a href = "www.naver.com">20</a>
18 + <a href = "www.naver.com" class="direction">다음<span class ='arrow'>&rsaquo;</span></a>
19 + </div>
20 +</body>
21 +</html>
1 +#border
2 +{
3 +
4 +}
5 +
6 +#header
7 +{
8 + padding: 10px;
9 + font-family: Arial, Helvetica, sans-serif;
10 + background-color: #50c964;
11 + color: white;
12 +}
13 +
14 +div.col
15 +{
16 + display: inline;
17 +}
18 +
19 +div.title
20 +{
21 + padding-right: 50%;
22 +}
23 +
24 +div.number
25 +{
26 + padding-right: 5%;
27 +}
28 +
29 +div.date
30 +{
31 + padding-right: 10%;
32 +}
33 +
34 +div.name
35 +{
36 + padding-right: 20%;
37 +}
1 +<html>
2 +<link rel='stylesheet' type='text/css' href='css_practice3.css' />
3 +<title>CSS 실습3</title>
4 +<meta charset="utf-8">
5 +<body>
6 + <div id="board">
7 + <div id="header">
8 + <div id="row">
9 + <div class="col number">번호</div>
10 + <div class="col title">제목</div>
11 + <div class="col date">날짜</div>
12 + <div class="col name">작성자</div>
13 + </div>
14 + </div>
15 +
16 + <div id="content">
17 + <div id="row">
18 + <div class="col number">10</div>
19 + <div class="col title">10번째 게시물</div>
20 + <div class="col date">2015-09-11</div>
21 + <div class="col name">리지</div>
22 + </div>
23 +</body>
24 +</html>
No preview for this file type
1 +<html>
2 +<style>
3 +a link{
4 + background-color: red;
5 + color : white;
6 + text-decoration: none;
7 +}
8 +</style>
9 +<meta charset="utf-8"><title>2013104114 정현희 퀴즈1</title>
10 +<body>
11 + <p>
12 + <h1>2013104114 정현희</h1>
13 + <ul>
14 + <li>생일 : 1994.02.08</li>
15 + <span style="color:DimGray">
16 + 같은 년도에 태어난 연예인
17 + <ul>
18 + <li>혜리</li>
19 + <li>수지</li>
20 + <li>설리</li>
21 + </ul>
22 + </span>
23 + 출처 : <a href="http://m.blog.naver.com/0111780/220632755359" target = "_blank">네이버 블로그</a>
24 + </br></br>
25 +
26 + <li>좋아했던 연예인 : 지드래곤</li>
27 + <img src="http://cfile26.uf.tistory.com/image/2476714A577939C90EE1CB">
28 + </br></br>
29 +
30 + <li>다니는 학교 : <a href="http://khu.ac.kr">경희대학교</a></li>
31 + </br>
32 +
33 + <li>좋아하는 게임</li>
34 + <table border="1">
35 + <thead>
36 + <tr>
37 + <th>게임 이름</th>
38 + <th>회사</th>
39 + </tr>
40 + </thead>
41 + <tbody>
42 + <tr>
43 + <td>던전앤 파이터</td>
44 + <td>네오플</td>
45 + </tr>
46 + <tr>
47 + <td>메이플스토리</td>
48 + <td>넥슨</td>
49 + </tr>
50 + <tr>
51 + <td>테일즈위버</td>
52 + <td>소프트맥스</td>
53 + </tr>
54 + <tr>
55 + <td>스카이림</td>
56 + <td>베데스다 게임 스튜디오</td>
57 + </tr>
58 + </tbody>
59 + </table>
60 + </ul>
61 +</p>
62 +</body>
63 +</html>
No preview for this file type
1 +<html>
2 +<body>
3 + <h1><meta charset="utf-8">큰 제목</h1>
4 + <p>
5 + 이것은 나의 첫 HTML문서입니다. <br/>
6 + <!--<img src="/images/dog.png"/> <!--<br/>-->
7 + <img src="http://download.xpressengine.com/xedownload/app/22753814/thumbnails/md.png"/> <!--URL로 이미지를 넣음-->
8 + <span style="color:red">
9 + 빨간 글씨 속에
10 + <b>두꺼운 글씨</b>가 있습니다.
11 + </br>log<sub>10</sub><sup>2</sup>
12 + </span>
13 + </p>
14 + <p>두번째 단락입니다.<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/><br/><br/></p>
15 + <a href="#top">처음으로 가기</a>
16 +</body>
17 +</html>
1 +<html>
2 +<meta charset="utf-8">
3 +<title>실습3</title>
4 + <body>
5 + <table border="1">
6 + <caption>홈런순위</caption>
7 + <!--표의 제목같은 역할--><thead>
8 + <tr>
9 + <th>이름</th>
10 + <th>홈런</th>
11 + </tr>
12 + </thead>
13 + <!--표의 제목같은 역할-->
14 + <tbody>
15 + <tr>
16 + <td>이대호</td>
17 + <td>41</td>
18 + </tr>
19 +
20 + <tr>
21 + <td>최진행</td>
22 + <td>27</td>
23 + </tr>
24 +
25 + <tr>
26 + <td>홍성은</td>
27 + <td>26</td>
28 + </tr>
29 + </tbody>
30 +
31 + <tfoot>
32 + <tr>
33 + <th colspan="2">2010-08-22</th>
34 + </tr>
35 + </tfoot>
36 + </table>
37 + </body>
38 +</html>
1 +<html>
2 +<meta charset="utf-8"><title>예제3</title>
3 +<body>
4 + <p>
5 + <form action="/update.php" method="post"><!--수행버튼을 눌렀을 때 update.php를 실행하라는 의미지만 현재 이 파일이 없으므로 아무 일도 일어나지 않는다.-->
6 + <input type="hidden" name="type" value="user"/><!--화면에 보이진 않고 유저에 대한것임을 서버에 알려줌-->
7 + 아이디 : <input type="text" name="name" size="10"/><!--name = 번수이름, size = 창의크기-->
8 + <input type="button" value="중복조회"/> <br/>
9 +
10 + 비밀번호 : <input type="password" name="pwd" size="10"/><br/>
11 +
12 + 성별:
13 + <input type="radio" name="sex" value="m"/>남
14 + <input type="radio" name="sex" value="f"/>여<br/>
15 +
16 + 취미:
17 + <input type="checkbox" name="hobby" value="book"/>독서
18 + <input type="checkbox" name="hobby" value="movie"/>영화감상
19 + <input type="checkbox" name="hobby" value="music"/>음악감상<br/>
20 +
21 + 사진:<input type="file" name="photo"/><br/>
22 +
23 + 주소:<select name="address">
24 + <option value="seoul">서울</option>
25 + <option value="busan">부산</option>
26 + <option value="etc">기타</option>
27 + </select><br/>
28 +
29 + 소개:<br/>
30 + <textarea cols="30" rows="5" name="intro"></textarea> <br/>
31 +
32 + <input type="submit" value="전송!"/>
33 + </form>
34 + </p>
35 +</body>
36 +</html>
1 +응 깃 짜증나~
2 +지대로 나오지도 않냐 ㅂㄷㅂㄷ
3 +마지막 확인..
...\ No newline at end of file ...\ No newline at end of file
1 +<html>
2 +<title>실습1</title>
3 + <body>
4 + <meta charset="utf-8">
5 + <a href="http://www.khu.ac.kr">경희대학교</a><br/>
6 + 컴퓨터공학과<br/>
7 + 4학년<br/>
8 + 2013104114<br/>
9 + 정현희<br/>
10 + </body>
11 +</html>
1 +<html>
2 +<title>실습2</title>
3 +<body>
4 + <h1><a href="https://namu.wiki/w/%EB%B9%85%EB%B1%85"><meta charset="utf-8">빅뱅</a></h1>
5 + <p>
6 + <img src="http://pds21.egloos.com/pds/201502/10/79/b0215379_54da13e304e3e.jpg"/> <!--URL로 이미지를 넣음-->
7 + <ul>
8 + <li>구성원</li>
9 + <ul>
10 + <li>지드래곤</li>
11 + <li>태양</li>
12 + <li>탑</li>
13 + <li>대성</li>
14 + <li>승리</li>
15 + <br/>
16 + </ul>
17 + <li>설명</li>
18 + 2006년에 힙합 그룹으로 데뷔 한 YG엔터테인먼트 대표 아이돌이다.<br/>
19 + 2007년 10대들의 패션과 이후 쏟아져나온 아이돌 그룹의 컨셉에 크게 영향을 준 그룹이다.<br/>
20 + 힙합 컨셉을 정면으로 들고 나와 큰 성공을 거뒀다.<br/><br/>
21 + <li>소속사 : <a href = "http://www.ygfamily.co.kr/" target="_blank">YG entertainment</a></li> <!--target="_blank"의 의미 : 새 탭에 띄운다.-->
22 + <br/>
23 + <li>앨범</li>
24 + <ol>
25 + <li>Always</li>
26 + <li>Hot Issue</li>
27 + <li>Stand Up</li>
28 + </ol>
29 + </ul>
30 + </p>
31 +</body>
32 +</html>
1 +<html>
2 +<meta charset="utf-8">
3 +<title>실습3</title>
4 + <body>
5 + <table border="1">
6 + <!--표의 제목같은 역할-->
7 + <thead>
8 + <tr>
9 + <th>분류</th>
10 + <th>제품명</th>
11 + <th>단가</th>
12 + <th>수량</th>
13 + <th>금액</th>
14 + </tr>
15 + </thead>
16 + <!--표의 제목같은 역할-->
17 +
18 + <!--공산품-->
19 + <tbody>
20 + <tr>
21 + <td rowspan="3">공산품</td>
22 + <td>iPhone</td>
23 + <td>900,000</td>
24 + <td>2</td>
25 + <td>1,800,000</td>
26 + </tr>
27 +
28 + <tr>
29 + <td>LED TV</td>
30 + <td>3,000,000</td>
31 + <td>3</td>
32 + <td>9,000,000</td>
33 + </tr>
34 +
35 + <tr>
36 + <td colspan="3">소계</td>
37 + <td>10,800,000</td>
38 + </tr>
39 + <!--공산품-->
40 +
41 + <!--농산품-->
42 + <tr>
43 + <td rowspan="2">농산품</td>
44 + <td>인삼</td>
45 + <td>10,000</td>
46 + <td>200</td>
47 + <td>2,000,000</td>
48 + </tr>
49 +
50 + <tr>
51 + <td colspan="3">소계</td>
52 + <td>2,000,000</td>
53 + </tr>
54 + <!--농산품-->
55 +
56 + <!--합계-->
57 + <tr>
58 + <td colspan="4">합계</td>
59 + <td>12,800,000</td>
60 + </tr>
61 + <!--합계-->
62 + </tbody>
63 +
64 + <!--합계 (두꺼운글자로 나옴)
65 + <tfoot>
66 + <tr>
67 + <th colspan="4">합계</th>
68 + <th>12,800,000</th>
69 + </tr>
70 + </tfoot>
71 + 합계-->
72 + </table>
73 + </body>
74 +</html>
1 +<html>
2 +<meta charset="utf-8">
3 +<title>실습3</title>
4 + <body>
5 + <table border="0"><!--기트가 안된다-->
6 + <!--아이디-->
7 + <tbody>
8 + <tr>
9 + <td>아이디</td>
10 + <td colspan="3"><input type="text" name="_id" size="10"/>
11 + <input type="button" value="중복조회"/></td>
12 + </tr>
13 +
14 + <!--비밀번호-->
15 + <tr>
16 + <td>비밀번호</td>
17 + <td><input type="password" name="pwd" size="10"/></td>
18 + <td>확인</td>
19 + <td><input type="password" name="pwdCheck" size="10"/></td>
20 + </tr>
21 +
22 + <!--이름-->
23 + <tr>
24 + <td>이름</td>
25 + <td colspan="3"><input type="text" name="name" size="10"/></td>
26 + </tr>
27 +
28 + <!--이메일-->
29 + <tr>
30 + <td>이메일</td>
31 + <td colspan="3"><input type="text" name="email" size="10"/></td>
32 + </tr>
33 +
34 + <!--성별-->
35 + <tr>
36 + <td>성별</td>
37 + <td colspan="3"><input type="radio" name="sex" value="m"/>남
38 + <input type="radio" name="sex" value="f"/>여</td>
39 + </tr>
40 +
41 + <!--지역-->
42 + <tr>
43 + <td>지역</td>
44 + <td colspan="3">
45 + <select name="address">
46 + <option value="seoul">서울</option>
47 + <option value="busan">부산</option>
48 + <option value="etc">기타</option>
49 + </select></td>
50 + </tr>
51 +
52 + <!--약관동의-->
53 + <tr>
54 + <td colspan="4"><input type="checkbox" name="agree" value="agree"/>약관에 동의합니다.</td>
55 + </tr>
56 + </tbody>
57 + </table>
58 + <input type="submit" value="회원가입"/>
59 + </body>
60 +</html>
1 +<html>
2 +<meta charset="utf-8">
3 +<style>
4 +ul1
5 +{
6 + list-style-type: square;
7 +}
8 +table
9 +{
10 + width: 30%; /*상위 엘레멘트 넓이의 30%*/
11 + text-align: center;
12 + border-collapse: collapse; /*쉽게말해 테이블을 구성하는 선을 한 줄로 설정*/
13 + margin: 10px; /*표와 웹페이지 사이의 여백*/
14 +}
15 +
16 +table, th, td
17 +{
18 + border: 1px solid black;
19 +}
20 +td
21 +{
22 + padding: 5px; /*안쪽에 5px씩 여백을 줌*/
23 +}
24 +
25 +/*표의 가장 윗칸만 다르게 설정*/
26 +th
27 +{
28 + background-color: #404040; /* 배경색 */
29 + color: #fff; /* 글자색 */
30 +}
31 +</style>
32 +<title>실습3</title>
33 + <body>
34 + <table border="1">
35 + <!--표의 제목같은 역할-->
36 + <thead>
37 + <tr>
38 + <th>분류</th>
39 + <th>제품명</th>
40 + <th>단가</th>
41 + <th>수량</th>
42 + <th>금액</th>
43 + </tr>
44 + </thead>
45 + <!--표의 제목같은 역할-->
46 +
47 + <!--공산품-->
48 + <tbody>
49 + <tr>
50 + <td rowspan="3">공산품</td>
51 + <td>iPhone</td>
52 + <td>900,000</td>
53 + <td>2</td>
54 + <td>1,800,000</td>
55 + </tr>
56 +
57 + <tr>
58 + <td>LED TV</td>
59 + <td>3,000,000</td>
60 + <td>3</td>
61 + <td>9,000,000</td>
62 + </tr>
63 +
64 + <tr>
65 + <td colspan="3">소계</td>
66 + <td>10,800,000</td>
67 + </tr>
68 + <!--공산품-->
69 +
70 + <!--농산품-->
71 + <tr>
72 + <td rowspan="2">농산품</td>
73 + <td>인삼</td>
74 + <td>10,000</td>
75 + <td>200</td>
76 + <td>2,000,000</td>
77 + </tr>
78 +
79 + <tr>
80 + <td colspan="3">소계</td>
81 + <td>2,000,000</td>
82 + </tr>
83 + <!--농산품-->
84 +
85 + <!--합계-->
86 + <tr>
87 + <td colspan="4">합계</td>
88 + <td>12,800,000</td>
89 + </tr>
90 + <!--합계-->
91 + </tbody>
92 +
93 + </table>
94 +
95 + <ul>
96 + <li>구성원</li>
97 + <ul class="ul1">
98 + <li>지드래곤</li>
99 + <li>태양</li>
100 + <li>탑</li>
101 + <li>대성</li>
102 + <li>승리</li>
103 + <br/>
104 + </ul>
105 + </ul>
106 + </body>
107 +</html>