1. 문자스타일(charStyle.html) : 더 많이 있으나 주로 사용되는 것들 정리
1-1. 같은 문자스타일의 이탤릭체 Tag (결과물은 거의 차이가 없으나 알아두면 타인이 작성한 코드 분석시 유리할 수 있음)
① <i> : 이탤릭체 → <i>문자스타일</i>
② <em> : 문서내의 강조할 부분 이탤릭체로 → <em>문자스타일</em>
③ <cite> : 문서내에 인용문 표시 → <cite>문자스타일</cite>
④ <address> : 문서제작회사나 제작사의 정보 → <address>문자스타일</address>
▲ address는 줄을 바꾸어주지 않아도 한줄을 차지한다.
⑤ <var> : 변수이름 중간에 삽입 → <var>문자스타일</var>
⑥ <dfn> : Definition, 문자정의시 사용 → <dfn>문자스타일</dfn>
# 결과 :
1-2. 볼드/취소선/밑줄/첨자 등
① <b> : 볼드체, 진하게 → <b>Bold 진하게</b>
② <strong> : 상동 → <strong>상동</strong>
③ <strike> : 취소선 → <strike>취소선</strike>
④ <s> : 상동 → <s>상동</s>
⑤ <u> : 밑줄 → <u>밑줄</u>
⑥ <big> : 기본폰트 사이즈보다 1크게 → <big>주위의 글자보다 조금 크게</big>
▲ 기본폰트 사이즈 3 일때 4사이즈로 표시
⑦ <small> : 기본폰트 사이즈보다 1작게 → <small>주위의 글자보다 조금 작게</small>
▲ 기본폰트 사이즈 3 일때 2사이즈로 표시
⑧ <sup> : 윗첨자 → X<sup>2</sup> + Y<sup>2</sup> = Z<sup>2</sup>
▲ 혹시나 해서 테스트 해보니 특수문자로도 대체가 가능한듯하다: X² + Y² = Z² (ㅊ한자)
⑨ <sub> : 아랫첨자 → H<sub>2</sub>O
▲ 이 또한 테스트 해보니 특수문자로 대체가 가능하나, 조금 부자연 스럽다: H₂O
# 결과 :
2. 경계선의 속성 Tag
- size : 선의 두께
- width: 선의 길이, 기본은 픽셀이나 비율(%)로도 넣을 수 있다.
- color: 선의 색깔, 색을 입히는 순간 오목하게 들어가 보였던 입체적 모양이 없어진다.
- noshade: 칼라는 입히지 않고 입체적 모양만 없앤다. 속성명만 있고 값이 없다. (우선순위: color > noshade)
→ <HR size="5" width="500" color="red" noshade>
# 결과 :
3. Marquee : 문자나 이미지가 특정 방향으로 움직이게 하는 Tag
* behavior : 문자나 이미지가 움직이는 방향을 설정
- scroll : 한쪽방향으로 움직인 후 다시 시작
- slide : 이동 후 한쪽에서 멈춤 (loop의 영향을 받지 않는다)
- alternate : 양쪽방향으로 반복
* direction : 문자나 이미지의 흘러가는 방향 설정
- left, right, up, down
* scrollamount : 속도, 숫자가 클수록 빨라진다.
* scrolldelay : 속도, 픽셀의 간격으로 속도 조절
* loop : 반복회수(infinite:무한반복=0)
<marquee bgcolor="white" scrollamount="1" behavior="scroll" width="500" height="120" direction="right">
흘러가는문자<br>
<img src="img\01.jpg" width="100" height="80">
</marquee><br>
<marquee bgcolor="white" scrolldelay="50" behavior="alternate" width="500" height="120" direction="left" loop="0">
흘러가는문자<br>
<img src="img\01.jpg" width="100" height="80">
</marquee><br>
# 결과 :
3-1. Exam : 대각선방향으로 움직이도록 해봐라
<marquee scrollamount="10" behavior="scroll" width="630" height="600" direction="right">
<marquee scrollamount="10" behavior="scroll" width="630" height="600" direction="up">
<img src="img\01.jpg" width="150" height="150">
</marquee>
</marquee>
▲ marquee tag 안에 marquee tag를 넣음으로 오른쪽 방향과 위쪽 방향이 번갈아가며 움직여
대각선으로 이동하듯 보이도록 유도한다.
# 결과 :
4. <H#> Tag
* 글자크기를 설정할 수 있는 태그 : (크고)1 ~ 6(작다) → 폰트태그와는 반대
* 자동줄바꿈 : 앞에 다른 텍스트가 있을시 앞에서 줄바꿈, 뒤에 다른 텍스트가 있을시 뒤에서
줄바꿈
→ <h2>홍길동</h2>은 천재다<h1>.</h1>
# 결과 :
5. A Tag
* href : url, file명
* target : _blank(새창에 열림) 기본값 self
5-1. 메일링 : Outlook Express 발동!
- 메일링 : <a href="mailto:kbeoum@nate.com">편지쓰기</a>
# 결과 : kbeoum@nate.com
5-2. 다운로드 : 웹상에서 다운로드 기능실행 → 웹상에서 실행 가능여부에 따라 다운로드
되기도 실행되기도 한다
- 그렇다면 항상 다운로드 되도록 하는 소스는 없을까? html/java는 안되나 jsp에서는
a4용지 반페이지 정도의 소스가 있는데 그것을 응용하면 확장자 구분없이 다 다운로드가
가능하다. html에서 하는 범위는 여기까지다.
다운로드 : <a href="img\blog_img.GIF">gif다운로드</a><br>
다운로드 : <a href="img\01.jpg">jpg다운로드</a><br>
다운로드 : <a href="..\util\Edit Plus 3.31.zip">zip다운로드</a><br>
다운로드 : <a href="..\util\Ms Office 2003 (Excel.Word.Powerpoint)\SETUP.EXE">exe다운로드</a><br>
다운로드 : <a href="..\HTML_ppt\test.xls">xls다운로드</a><br>
# 결과 :
다운로드 : gif다운로드
다운로드 : jpg다운로드
다운로드 : zip다운로드
다운로드 : exe다운로드
다운로드 : xls다운로드
5-3. 같은 페이지에서 이동 : href의 링크를 클릭하면 name의 위치로 이동한다.
수업내용엔 없었지만 최상단으로 올라가는 top tag 추가 작성
* FAQ에서 질문에 해당되는 단락 : <a href="#지정이름">Qtext</a>
* FAQ에서 답변에 해당되는 단락 : <a name="지정이름">Atext</a>
1. <a href="#one">aaaaa</a><br>
2. <a href="#two">bbbbb</a><br>
3. <a href="#three">ccccc</a><br>
4. <a href="#four">ddddd</a><br>
<p>
1. <a name="one">aaaaa</a> <a href="#">top</a><p>
a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>
<a href="#">top</a><p>
2. <a name="two">bbbbb</a> <a href="#">top</a><p>
b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>b<p>
<a href="#">top</a><p>
3. <a name="three">ccccc</a> <a href="#">top</a><p>
c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>c<p>
<a href="#">top</a><p>
4. <a name="four">ddddd</a> <a href="#">top</a><p>
d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>
<a href="#">top</a><p>
# 결과 : 생략
6. 이미지의 특정부분에 링크걸기
* usemap : 이미지의 별명 → <img src="img\01.jpg" usemap="#imgMap">
* area : 좌표와 링크정보 표시 → <area shape="" coords="" href="">
- shape : 링크범위설정 모양
· rect : 사각형 / circle : 원 / poly : 다각형
- coords : 좌표포인트
· rect : 왼쪽 위 X,Y좌표와 오른쪽 아래 X,Y좌표 → coords="X1,Y1,X2,Y2"
· circle : 원의 중심점을 기준으로 X,Y좌표와 반지름R → coords="X1,Y1,R"
· poly : 시계방향이건 반시계방향이건 한쪽방향으로 순서대로 X,Y좌표 입력
→ coords="X1,Y1,X2,Y2,X3,Y3...Xn,Yn"
- href : 링크주소
- 링크모양의 선을 없애는 건 자바스크립트에서 가능하다.
<img src="img\01.jpg" usemap="#imgMap" border="0">
<map name="imgMap">
<area shape="rect" coords="600,350,834,543" href="http://www.naver.com" alt="네이버" target="_blank">
<area shape="circle" coords="200, 200, 150" href="http://www.daum.net" alt="다음" target="_blank">
<area shape="poly" coords="1176,215,1289,264,1242,389,1113,391,1066,276" href="http://www.google.co.kr" alt="구글" target="_blank">
# 결과 : 생략
- 위의 방법은 좌표값을 정확히 알 수 없어 비효율적이다.
7-1. Table tag
* <table> : 표의 시작
- width : 표의 전체폭 (열폭과는 관계 없다)
- height : 표의 전체높이 (열높이와는 관계 없다)
- align : 창을 기준으로 정렬(left, right, center)
- bgcolor, background : 표 전체에 컬러, 이미지 백그라운드로 적용
- cellpadding : 표의 라인과 내용간의 간격 (테이블 태그에만 적용)
- cellspacing : 표의 구분선의 간격 (테이블 태그에만 적용)
▲ cellspacing과 border의 차이점: border는 외곽선에만 치수 적용 되고 cellspacing은
내부라인에도 적용되며 bgcolor과 적용됨과 두 태그를 동시 사용시 cellspacing은
border안으로 중복적용
- bordercolor : border에 색을 입힘
- bordercolorlight : 입체적인 표라 봤을 때 조명을 받아 밝은 곳의 색
- bordercolordark : 입체적인 표라 봤을 때 조명을 받지 않아 어두운 곳의 색
* <tr> : 행 만들기
- height : 행높이
- width : 행폭
- align : 표 안에 내용을 기준으로 정렬(left, right, center)
- valign : 수직정렬 (top, middle, bottom)
- bgcolor, background : 행에만 컬러, 이미지 백그라운드로 적용
* <td> : 열 만들기
- height : 열높이
- width : 열폭
- align : 표 안에 내용을 기준으로 정렬(left, right, center)
▲ tr에 align적용시 해당 행이 모두 코드에 맞에 정렬되나 특정 열만 정렬 방법을 바꾸고
싶다면 해당 열의 td에 align을 적용한다.
- valign : 수직정렬 (top, middle, bottom)
*tip: table에 적용된 치수는 tr이나 td에서 재적용시 사이즈가 변경되므로 보편적으로 table에
전체 사이즈를 적용하기보다 tr과 td에서 적용함이 유리하다.
- bgcolor, background : 열에만 컬러, 이미지 백그라운드로 적용
<table align="center" border="10" width="500" height="300" bgcolor="black" cellpadding="10" cellspacing="5"
bordercolorlight="gray" bordercolordark="black">
<tr align="right" height="100" bgcolor="green">
<td width="250">AAA</td>
<td align="center"><img src="img\Untitled-1_02.gif" height="100"></td>
</tr>
<tr height="150" valign="top">
<td bgcolor="gray">BBBBBBBBBBBB</td>
<td align="center"><img src="img\Untitled-1_05.gif" height="100"></td>
</tr>
<tr height="100">
<td valign="bottom"><a href="http://www.daum.net">다음으로</a></td>
<td align="center" background="img\xbox.gif">홍길동</td>
</tr>
</table>
# 결과 :
| AAA |  |
| BBBBBBBBBBBB | |
| 다음으로 | 홍길동 |
7-2. 표 만들기
* rowspan : 행 합치기
* colspan : 열 합치기
* caption : 표의 제목을 표시 (align 속성: left, center, right)
table tag안에만 있으면 어디에 입력되건 관계 없이 상단에 위치한다.
* th : 타이틀로 표시할 칸을 <td> 대신 사용, 진하게/가운데정렬 된다.
* Ex : 달력을 만들어보자.
<table align="center" border="1" cellspacing="0">
<caption align="center"><b>2011년 10월</b></caption>
<tr><th><img src="img\c.gif" width="500" height="200"></th></tr>
<tr><th>
<table align="center" width="100%" height="450">
<tr align="center" >
<th><font color="red">일</font></th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th><th><font color="blue">토</font></th>
</tr>
<tr align="center">
<th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th><font color="blue">1</font></th>
</tr>
<tr align="center">
<th><font color="red">2</font></th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th><font color="blue">8</font></th>
</tr>
<tr align="center">
<th><font color="red">9</font></th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th><th><font color="blue">15</font></th>
</tr>
<tr align="center">
<th><font color="red">16</font></th><th>17</th><th>18</th><th>19</th><th>20</th><th>21</th><th><font color="blue">22</font></th>
</tr>
<tr align="center">
<th><font color="red">23</font></th><th>24</th><th>25</th><th>26</th><th>27</th><th>28</th><th><font color="blue">29</font></th>
</tr>
<tr align="center">
<th><font color="red">30</font></th><th>31</th><th> </th><th> </th><th> </th><th> </th><th> </th>
</tr>
</table>
</th>
</tr>
</table>
# 결과 :
 | |||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
8. 폼태그 만들기
* <form> 태그 :
* <input> : 한줄의 text 입력
- type 속성
· 값 : text
<form action="login.jsp" method="post">
<!-- html은 환경만 만들어준다 보면 됨 method="post" 또는 "get" 뭐하는건진 나중에 -->
<!-- jsp는 서버언어, 폼에 입력된 값을 서버로 전송한다 -->
<table border=0>
<tr><td>
아이디 <input type="text" name="id" value="" size="10">
</td><td rowspan="2" valign="middle"><input type="submit" value="로그인"></td>
</tr>
<tr><td>
비밀번호 <input type="password" name="pw" value="" size="10">
<!-- input box 크기가 password가 더 크나 html의 한계, 스타일시트가능 -->
</td></tr>
</table>
</form>
# 결과 : 실제 결과는 생략 이미지 첨부
'Html/Jsp/Javascript' 카테고리의 다른 글
| [Test] 회원가입 폼 만들기 (1) | 2011.10.16 |
|---|---|
| Html,Jsp,Css_05 (0) | 2011.10.14 |
| Html,Jsp,Css_04 (0) | 2011.10.13 |
| Html,Jsp,Css_03 (0) | 2011.10.12 |
| Html_01 (0) | 2011.10.10 |
