본문 바로가기

Html/Jsp/Javascript

Html_02


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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</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>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th>
  </tr>

 </table>
</th>
</tr>

</table>

 

# 결과 :

2011년 10월
            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          

 

8. 폼태그 만들기

* <form> 태그 :

* <input> : 한줄의 text 입력

  - type 속성

     · 값 : text

 

<form action="login.jsp" method="post">
<!-- html은 환경만 만들어준다 보면 됨 method="post" 또는 "get" 뭐하는건진 나중에 -->
<!-- jsp는 서버언어, 폼에 입력된 값을 서버로 전송한다 -->
<table border=0>
<tr><td>
&nbsp;아이디&nbsp;&nbsp;&nbsp;<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