웹프로그래밍/실습
HTML) 목록, table, 하이퍼링크
by LaTale
2016. 9. 24.
실습문제 1) 순서 없는 리스트와 순서 있는 리스트를 사용하여 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 <HTML>
<HEAD>
<TITLE> 번호 없는 리스트 </TITLE>
</HEAD>
<BODY>
<UL>
<LI> 제1장 HTML
<OL>
<LI> HTML 기초
<OL TYPE = "a" >
<LI> HTML 개요
<LI> HTML 문서의 구조
</OL>
<LI> HTML 문서의 구조
<OL TYPE = "i" >
<LI> 기본 태그
<LI> 문자 서식 태그
</OL>
</OL>
<LI> 제2장 CSS
<UL>
<LI> CSS 기초
<UL>
<LI> CSS 개요
<LI> CSS 사용방법
</UL>
</UL>
</UL>
</BODY>
</HTML>
접기
<다운로드>
실습문제 2) <table> 태그의 colspan과 rowspan을 이용하여 다음과 같이 이력서를 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
49
50
51
52
53
54
55
56
57 <HTML>
<HEAD>
<TITLE> 실습과제2</TITLE>
</HEAD>
<BODY>
<TABLE border = "1" >
<CAPTION align = "top" ><U><B> 이력서</B></U></CAPTION>
<TR>
<th rowspan = "4" ></th>
<td rowspan = "2" > 성명</td>
<td> 한글</td>
<td> 손지수</td>
<td> 생년월일</td>
<td> 1992년11월18일</td>
</tr>
<tr>
<td> 한자</td>
<td> 孫智壽</td>
<td> 주민등록번호</td>
<td> 921118-1xxxxxx</td>
</tr>
<tr>
<td colspan = "2" > 주소</td>
<td colspan = "3" > 서울특별시 중구 필동3가</td>
</tr>
<tr>
<td colspan = "2" > 연락처</td>
<td> 054-821-8751</td>
<td> 휴대폰</td>
<td> 010-5143-8751</td>
</tr>
<tr>
<th rowspan = "5" bgcolor = "yellow" ><CENTER> 학력</CENTER></th>
<th colspan = "3" bgcolor = "blue" ><CENTER> 기간</CENTER></th>
<th colspan = "2" bgcolor = "blue" ><CENTER> 학교명</CENTER></th>
</tr>
<tr>
<td colspan = "3" > 1999.3-2005.2</td>
<td colspan = "2" > 길주초등학교졸업</td>
</tr>
<tr>
<td colspan = "3" > 2005.3-2008.3</td>
<td colspan = "2" > 길주중학교졸업</td>
</tr>
<tr>
<td colspan = "3" > 2008.3-2011.3</td>
<td colspan = "2" > 경일고등학교졸업</td>
</tr>
<tr>
<td colspan = "3" > 2012.3-현재</td>
<td colspan = "2" > 동국대학교 재학중</td>
</tr>
</TABLE>
</BODY>
</HTML>
접기
<다운로드>
실습문제 3) 태그를 이용하여 다음과 같이 출력되는 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
49
50
51
52
53
54
55
56 <HTML>
<HEAD>
<TITLE> 영화 </TITLE>
</HEAD>
<BODY style = "background:FFFFCC" >
<font size = "5" color = "GREEN" ><B> 영화 정보</B></font>
<br><br>
<HR>
<UL>
<font color = "GREEN" ><LI> 현재 상영작</font>
<UL>
<font color = "GREEN" ><LI><a href = "#밀정" link = "#2D8F26" alink = "#FFD047" vlink = "#FF0000" > 밀정</a></font>
<font color = "GREEN" ><LI><a href = "#벤허" link = "#2D8F26" alink = "#FFD047" vlink = "#FF0000" > 벤허</a></font>
<font color = "GREEN" ><LI><a href = "#매그니피센트7" link = "#2D8F26" alink = "#FFD047" vlink = "#FF0000" > 매그니피센트7</a></font>
</UL>
</UL>
<HR>
<br><br><br>
<UL>
<font size = "4" color = "GREEN" ><LI><B> 밀정</B><br><br></font>
<a href = "http://movie.naver.com/movie/bi/mi/basic.nhn?code=137952" name = "밀정" ><IMG SRC = "밀정.jpg" width = "100" height = "150" align = "left" ></a>
<font color = "GREEN" > 다른 제목 : The Age of Shadow<br></font>
<font color = "GREEN" > 감독 : 김지운<br></font>
<font color = "GREEN" > 출연 : 송강호(이정줄), 공유(김우진)<br></font>
<font color = "GREEN" > 국내 등급 : 15세 관람가<br></font>
<br><br><br><br><br><br><br>
<a href = "2.3.html" ><p style = "text-align:right" > 위로</p></a>
</UL>
<UL>
<font size = "4" color = "GREEN" ><LI><B> 벤허</B><br><br></font>
<a href = "http://movie.naver.com/movie/bi/mi/basic.nhn?code=125468" name = "벤허" ><IMG SRC = "벤허.jpg" width = "100" height = "150" align = "right" ></a>
<font color = "GREEN" > 다른 제목 : Ben-Hur<br></font>
<font color = "GREEN" > 감독 : 티무르 베크맘베토브<br></font>
<font color = "GREEN" > 출연 : 잭 휴스턴(벤허), 모건 프리먼(일더림), 토비 켐벨(메살라)<br></font>
<font color = "GREEN" > 국내 등급 : 12세 관람가<br></font>
<br><br><br><br><br><br><br>
<a href = "2.3.html" ><p style = "text-align:right" > 위로</p></a>
</UL>
<UL>
<font size = "4" color = "GREEN" ><LI><B> 매그니피센트7</B><br><br></font>
<a href = "http://movie.naver.com/movie/bi/mi/basic.nhn?code=136835" name = "매그니피센트7" ><IMG SRC = "매그니피센트7.jpg" width = "100" height = "150" align = "left" ></a>
<font color = "GREEN" > 다른 제목 : The Magnificent Seven<br></font>
<font color = "GREEN" > 감독 : 안톤 후쿠아<br></font>
<font color = "GREEN" > 출연 : 덴젤 워싱턴(샘 치좀), 크리스 프랫(조슈아 패러데이), 이병헌<br></font>
<font color = "GREEN" > 국내 등급 : 15세 관람가<br></font>
<br><br><br><br><br><br><br>
<a href = "2.3.html" ><p style = "text-align:right" > 위로</p></a>
</UL>
<br><font color = "GREEN" > 자료 출처 : http://movie.naver.com</font>
</BODY>
</HTML>
접기
<다운로드>
http://hilite.me/ 로 하이라이터를 바꿨다. 가로 짤림 현상도 해결하고 줄번호도 붙어서 좋긴 한데 = 뒤에 이상한 칸이 생긴다.. 하나하나 지우다가 귀찮아서 그냥 감수하고 보기로 했다..
3번 문제는 프레임으로 짰는데 이유는 모르겠지만 안나와서.. 그냥 name태그를 사용했다.
2.1.html
