Html,Jsp,Css_04 Html/Jsp/Javascript 2011. 10. 13. 23:45

전일에 이어 스타일시트 글자속성 중 background img 부터..

style.css 수정 후 link로 style.css파일을 import하는 tag가 입력되어 있는 style2.html에서 확인

 

8. background : 배경 설정 스타일시트

 

 8-1. background-image : 스타일 시트를 적용하는 구간 : Document, 즉 Body

 

        → BODY {background-image: url(..\HTML\img\ Untitled-1_02.gif);}

        ▲ 이미지 가져오기

 

 8-2. background-repeat : 반복여부 결정

 

        → BODY {background-repeat: no-repeat;}

                  ▲ no-repeat: 반복없이 한번만 백그라운드 이미지 사용

 

        → BODY {background-repeat: repeat;}

             ▲ repeat: 전체 무한반복 (기본값)

 

        → BODY {background-repeat: repeat-x;}

             ▲ 상단 X축 한줄만 무한반복

 

        → BODY {background-repeat: repeat-y;}

             ▲ 좌측 Y축 한줄만 무한반복

 

 8-3. background-attachment : 배경고정

 

        → BODY {background-attachment: fixed;}

             ▲ 스크롤바를 내려도 배경은 고정

 

 8-4. background-position : 배경이미지의 위치지정

 

        → background-position:50% 100%;}

             ▲ 이미지의 중심점을 기준으로 X좌표와 Y좌표를 백분율(%)로 표시

          꼭 백분율(%)이 아니라 left, center, right, top, middel, bottom값으로도 표시가능

 

 8-5. 속성의 그룹화 (8-1~8-4) : background 라는 속성명이 같아 그룹화 가능

 

        → BODY {background: url(..\HTML\img\ Untitled-1_02.gif) no-repeat fixed 50% 100%;}

        ▲ 각 속성값의 순서는 바뀌어도 관계 없음

 

# CODE

 

- 그룹을 풀어 놓은 소스

 

BODY {

             background-image:url..\HTML\img\Untitled-1_02.gif);

             background-repeat:no-repeat;

             background-attachment:fixed;

             background-position:50% 100%;

             }

 

- 그룹화 소스

 

BODY {

           background: url..\HTML\img\Untitled-1_02.gif) no-repeat fixed 50% 100%;

          }

 

- body 적용 소스 (style2.html)

 

<link rel="stylesheet" type="text/css" href="style.css">

 

배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>

<p>외부스타일 적용하기</p>

<div>외부스타일 적용하기2</div>

<a href="#">외부스타일 적용하기3</a>

 

 

# 결과 ▽

 

 

 

* 스타일시트를 외부에서 불러오기로 위와같이 (style.css에 속성값 저장 후 style2.html에서  <link rel="stylesheet" type="text/css" href="style.css"> 소스를 입력하여 import 하는 방식으로) 테스트 하는데 불편함이 있어 style3.html 을 작성 후 전일 기술했던 1. inLine방식(body안의 태그에 직접입력)  2. style태그를 이용한 방식(head안에 <style>TAG</style>)으로 바로 실행 결과를 볼 수 있도록 한다.

 

A. 스타일시트 (box) : <head>와 </head>사이에 <style>입력</style>

 

 1. box의 여백(margin)설정

 

1-1. 풀어진 소스

 

        → .margin1{margin-top:50px;}

             ▲ .클래스명{속성명:크기} : 본문 위쪽 기준 50px 여백 설정

 

        → .margin1{margin-right:50px;}

             ▲ .클래스명{속성명:크기} : 본문 오른쪽 기준 50px 여백 설정

 

        → .margin1{margin-bottom:50px;}

             ▲ .클래스명{속성명:크기} : 본문 아래쪽 기준 50px 여백 설정

 

        → .margin1{margin-left:50px; }

             ▲ .클래스명{속성명:크기} : 본문 왼쪽 기준 50px 여백 설정

 

1-2. 합쳐진 그룹소스

 

        → .margin2{margin:50px 20px 50px 20px;}

             ▲ .클래스명{속성명:top right bottom left;} : top기준 시계방향

 

# CODE

 

- 그룹을 풀어 놓은 소스

 

.margin1{

                margin-top:50px;

                margin-right:50px;

                margin-bottom:50px;

                margin-left:50px;

              }

 

- 그룹화 소스

 

.margin2{

                margin:50px 20px 50px 20px;

               }

 

- body 적용 소스 (style3.html)

 

<p class="margin1" style="background-color:#ffff66">margin1 p</p>

<div class="margin2" style="background-color:#ffcc00">margin2 div</div>

 

# 결과 ▽

 

 

 

 

 2. box의 border(선)설정

 

2-1. border-style : 선의 전체 모양

 

         → .border1{border-style: dotted;} : 점선 ▽

          

 

         → .border1{border-style: solid;} : 실선 ▽

          

 

         → .border1{border-style: dashed;} : 긴 점선 ▽

          

 

         → .border1{border-style: double;} : 이중 실선 ▽

          

 

         → .border1{border-style: groove;} : 오목하게 들어간 선 ▽

          

 

         → .border1{border-style: ridge;} : 볼록하게 나온 선 ▽

           

 

         → .border1{border-style: inset;} : 왼쪽에 빛이 비춰져 오목한 모양의 명암 ▽

         

 

         → .border1{border-style: outset;} : 왼쪽에서 빛이 비춰져 볼록한 모양의 명암 ▽

          

 

              ▲ .클래스명{속성명: 선종류;} : 상하좌우 그룹화

 

  ※ 시계방향 속성이 적용되며 1개 입력시 전체적용 / 2개 상하 좌우 / 3개 입력시 상 우좌 하 / 4개 입력시 상 우 좌 하 적용 : 스타일시트내 그룹화 소스에 적용되나 그룹의그룹(2-7) 에는 각 그룹의 한 속성까지만 가져올 수 있어 불가능하다

 

2-2. border-방향-style :  선의 일부 모양

 

         → .border1{

                              border-top-style: solid;

                              border-right-style: dashed;

                              border-bottom-style: double;

                              border-left-style: groove;

                              }

              ▲ 상 : 실선 / 우 : 긴 점선 / 하 : 이중 실선 / 좌 : 오목하게 들어간 선.

                  그룹을 풀어 놓은 형태

 

# 결과

 

 

 

 

2-3. border-width : 선의 전체 두께, 대개는 1px로 사용

 

         → .border1{border-width:10px;}

              ▲ .클래스명{속성명:선두께;} : 상하좌우 그룹화

 

2-4. border-방향-width : 선의 일부 두께

 

         → .border1{

                              border-top-width: 5px;  

                              border-right-width: 20px;

                              border-bottom-width: 5px;

                              border-left-width: 20px;

                              }

              ▲ 상 : 5px / 우 : 20px / 하 : 5px / 좌 : 20px.

                  그룹을 풀어 놓은 형태

 

# 결과  (style은 solid적용)

 

 

 

 

2-5. border-color : 선의 전체 색상

 

         → .border1{border-color: red;}

             ▲ .클래스명{속성명:선색상;} : 상하좌우 그룹화

 

2-6. boder-방향-color : 선의 일부 색상

 

         → .border1{

                              border-top-color: #ffcc00;

                              border-right-color: #ff9900;

                              border-bottom-color: #cc9900;

                              border-left-color: #ccff33;

                              }

             ▲ 상 : 5px / 우 : 20px / 하 : 5px / 좌 : 20px.

                  그룹을 풀어 놓은 형태

 

# 결과

 

 

 

 

2-7. 선(border)의 색상/두께/모양의 그룹화 : 그룹의 그룹이라 해야 될까.....?

 

       → .border1{border: green 10px solid;}

           ▲ .클래스명{속성명:색상 두께 모양} : 순서는 관계 없으나 속성은 한가지씩!

 

# 결과 ▽

 

 

 

B. 스타일시트 : <body>와 </body> 사이에 inLine방식입력

 

 1. div style

 

1-1. 객체의 위치설정 : static(기본값), relative(인접객체와의 상대위치설정), absolue(본문기준의 절대위치설정)

 

         → <div style="position:absolute; top:100; left:100; background:white; width:350; height:500">

             <img src="..\html\img\week\sun.jpg"></div>

             ▲ background는 설정하지 않아도 기본이 투명이라 없게하고 싶다면 
                 white라도 적용 해야 한다.
객체의 위치값에는 음수도 입력 가능

# 결과 ▽

 

 

 

 

  1-2. Exam : 공통속성=solid외곽선 박스의 사이즈 가로세로 200

                        다음과 같은 형태를 구현하라

 

 

         → <head>와</head>사이에 <style>여기에 입력</style>

         → DIV {position:absolute; width:200; height:200; border:solid 1px black;}

             .one {top:100; left:100; z-index:731564832145967;}

             .two {

                      top:250; left:160; text-align:center; vertical-align:50%;

                      background:#3399cc; font-size:30pt; letter-spacing:10px;

                      z-index:731554832145967; vertical-align:bottom}

              .three {top:180; left:50; z-index:730554832145967}

             ▲ 레이어의 순위설정 : z-index:양의 정수, 값이 클 수록 위쪽

                레이어의 표시여부 결정 : visibility=visible(보임), hidden(숨김)

 

         → <body>와</body>사이에 div 태그 입력

             <div class="one">

              <table border="1" width="100%" height="100%">

              <tr>

                           <th align="center">좋아하는<br>과일이름</th>

                           <th align="center">싫어하는<br>과일이름</th>

              </tr>

              <tr align="center">

                           <td>과일별로</td><td>과일별로</td>

              </tr>

              <tr align="center">

                           <td>과일별로</td><td>과일별로</td>

              </tr>

              <tr align="center">

                           <td>과일별로</td><td>과일별로</td>

              </tr>

              </table>

              </div>

 

              <div class="two">

              <br><br><br><br><br><br><b>엄기백</b>

              </div>

 

              <div class="three">

              <img src="..\html\img\week\sun.jpg" width="200" height="200">

              </div>

 

# 결과 ▽

 

 

 

  1-3. Exam : 1-2. Exam 의 style소스를 수정하고 input 태그를 넣어 버튼을 활성화 후

         이미지를 보이거나 숨기는 버튼을 만들어본다.

 

         - 함수에 클래스명을 쓸 수 없어 아이디로 style태그의 id명과 body태그도
            class대신
id로 수정하고 body태그내에 input태그로 버튼을 만들되
            onClick이벤트에
onClick="함수명('상수','상수')" 를 넣고 script함수
            선언시 변수를 두개 선언한다.

 

         - 이유인즉, body의 onClick시 실행되는 함수의 상수가 스크립트내에 함수명()
            괄호안에 변수값에 저장되며
if else 구문으로 두번째 값인 1,2 가 즉 n이
            1과 같을때 visible(보이기)을 실행하도록 하고
그것이 아닐때 hidden(숨기기)
            을 실행하도록 짜 놓은 스크립트....-_-a 인것 같다.

           
설명을 들어도 잘 이해가 가지 않아 그냥 그렇겠거니 한 결론..

 

         → #one{top:100; left:100; z-index:731564832145967;}

              #two{

                           top:250; left:160; text-align:center; vertical-align:50%;

                           background:#3399cc; font-size:30pt; letter-spacing:10px;

                           z-index:731554832145967; vertical-align:bottom}

              #three{top:180; left:50; z-index:730554832145967}      

             ▲ <head>내의 <style> 태그 수정

 

         → <script language="javascript"> // language="javascript"는 생략가능

              function show(p,n){

                           if(n==1){

                           document.all[p].style.visibility = "visible"; // 스타일시트 적용은 자바스크립트에서 .all['이름'].

                           }else{

                           document.all[p].style.visibility = "hidden"; // 함수명(변수,변수)

                                    }

                           }           

              </script>

              ▲ <head>내의 <script> 태그 수정 

 

         → <input type="button" value="이미지보이기" onClick="show('three','1')"> <!-- 함수명('상수','상수') -->

             <input type="button" value="이미지숨기기" onClick="show('three','2')">

             <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><br>

             <input type="button" value="표보이기" onClick="show('one','1')"> <!-- 1번을 show, 2번을 hidden의

              역할로 지정-->

             <input type="button" value="표숨기기" onClick="show('one','2')">

             <input type="button" value="글자보이기" onClick="show('two','1')">

             <input type="button" value="글자숨기기" onClick="show('two','2')"> 

              ▲ <body>내에 <input> 태그 입력

 

         → <div class="one">

              <table border="1" width="100%" height="100%">

              <tr>

                           <th align="center">좋아하는<br>과일이름</th>

                           <th align="center">싫어하는<br>과일이름</th>

              </tr>

              <tr align="center">

                           <td>과일별로</td><td>과일별로</td>

              </tr>

              <tr align="center">

                           <td>과일별로</td><td>과일별로</td>

              </tr>

              <tr align="center">

                           <td>과일별로</td><td>과일별로</td>

              </tr>

              </table>

              </div>

 

              <div class="two">

              <br><br><br><br><br><br><b>엄기백</b>

              </div>

 

              <div class="three">

              <img src="..\html\img\week\sun.jpg" width="200" height="200">

              </div>

             ▲ <body>내의 <div> 태그 수정

 

# 결과 ▽

 

 

 

C. 스크롤바 스타일시트 : <style>태그 (<head>사이에 입력)

 

 1. 속성 : face(전체), shadow(그림자:오른쪽아래), hightlight(밝은곳:왼쪽위),
                track(스크롤트랙),
arrow(화살표)

     → BODY,TEXTAREA {

                                        scrollbar-face-color:white; /* 전체 색깔 */

                                        scrollbar-shadow-color:black; /* 그림자 색깔 */

                                        scrollbar-highlight-color:gray; /* 밝은곳 왼쪽 위 빛 */

                                        scrollbar-track-color:white; /* 스크롤 트랙 */

                                        scrollbar-arrow-color:#cc0000; /* 화살표 */

                                        }

        ▲ A,B와 같은 속성이겠지만 C라 따로 적었다. 자세한 설명은 필요 없을 듯.

 

# 결과 ▽

 

부분적용 face ▽

 

 

부분적용 shadow ▽

 

 

부분적용 highlight ▽

 

 

부분적용 track ▽

 

 

부분적용 arrow ▽

 

 

전체적용 ▽

 

 

 

D. A링크 스타일시트 : <style>태그 : <head>사이에 입력 후 적용 html tag <body>사이 입력

 

 1. 속성 : link(기본값), visited(방문이력이있는링크), hover(마우스롤오버), 
               active(클릭시)

 

     → A:link {color:gray; text-decoration:none;} /*기본 값☆ */

         A:visited {color:gray; text-decoration:none;} /*이미 방문 */

         A:hover {color:green; text-decoration:underline;} /*마우스 롤오버*/

         A:active {color:red; text-decoration:underline;} /*클릭했을 때*/

 

         DIV {

                 position:absolute; width:200; height:200;

                 border:solid 1px black;          

                }

        ▲ A,B,C와 같은 속성이겠지만 D라고 따로 적었다. 자세한 설명은 필요 없을 듯.

           순서(link→visited→hover→active)도 영향을 받는다.        

           : ←는 가상요소. 즉 소스☆를 읽어보면 "링크라는 A태그의 가상요소(링크된
           객체의 속성지정)"

           위 태그는 <style>태그로 <head>사이에 입력되는 소스

 

     → <a href="http://www.naver.com/" target="_blank">A링크 테스트 A링크 네이버</a><br>

         <a href="http://www.daum.net/" target="_blank">A링크 테스트 A링크 다음</a><br>

         <a href="http://www.paran.com/" target="_blank">A링크 테스트 A링크 파란</a><br>

         <a href="http://www.chol.com/" target="_blank">A링크 테스트 A링크 천리안</a><br>

         <a href="http://www.yahoo.co.kr/" target="_blank">A링크 테스트 A링크 야후</a><br>

         <a href="http://www.google.co.kr/" target="_blank">A링크 테스트 A링크 구글</a><br>

        ▲ 위 태그는 <body>사이에 입력되는 소스

 

# 결과 ▽

 

기본값 (=이미 방문) ▽

 

 

마우스 롤오버 ▽

 

 

클릭했을 때 ▽

 

 

 

E. document : <script>와 </script>사이에 입력

 

 1. write : 화면상에 값을 출력하는 태그이며 주석문으로 전체 내용 기술함

 

 <script>

  a = 10+'20'; // 자동으로 형선언

  document.write("<b>"+a+"<b>"+'<font color="red">홍길동</font>') // body에 출력 / 문자는 ""안에 / 숫자+문자=숫자문자 연결된다,

   // 즉 +는 연결하는 기호다

   // 자바스크립트안에서 html 태그를 입력하기 위해서는 반드시 "" 안에 들어가야 한다. 위에서 속성값을 "red"로 쓰니 오류 나네..

   // 따옴표를 쓰면 안되지만 죽어도 해야겠다 하면 바깥이 '싱글따옴표일때 해당구간을 "더블로 바깥이 "더블이라면 반대

   // 변수는 ""따옴표 안에 들어가면 안된다. // 스크립트에서만 해당되는것: " 와 ' 중 무엇을 써도 관계 없다. 자바에서는 안됨

 

   document.write("<br><img src ='..\HTML\img\blog_img.jpg' style='border:solid 1px green'>"); // 경로에 역슬러쉬x는 스크립트 오류 발생.

   // 16진수를 표시하는 0x라는 수식 때문인듯 한다지만 \x 라는 말이 붙음으로 오류가 나는건 이해가 잘 안됨.. \n 이라면 모를까

   // \n은 오류 없음 , \0은 오류 없고 이미지 표시만 안됨.. 프로그램 창시자가 8진수에 안좋은 추억이 있는듯?

   // 특정 이미지명 + 역슬러쉬 = 스크립트 오류. 결론은 경로에 역슬러쉬를 쓰지 말고 만약 쓴다면 x라는 단어가 폴더나 파일명에 첫글자로 오지 않게 할것;;

 

   b="<br><img src = ../HTML/img/blog_img.jpg style='border:solid 1px green'>"

 

   document.write(b);

 

   // 연산자 (+, -, *, /, %(나머지), ++(1씩증가), --(1씩감소) )

 

   num=5;

   num += 1; //num=num+1; //num++;

   num -= 1; //num=num-1; //num--; 대입연산자(+=, -=, *=, /=, %=, =): 4칙연산이 다 된다.

 

   document.write("<br><br>"+num);

   //관계연산자 ( >, >=, <, <=, ==, != )

   c=10>20;

   document.write("<br>"+c);

 

   //논리연산자 ( &&(and), ||(or), !(not))

 

   //조건연산자 if문없이 조건을 비교 후 둘중 참 또는 거짓을 출력하는 연산

   //result = (조건식)? 조건식의결과가True일때 : 조건식의결과가False일때 ;

   result=(num>5)? num*2: num;

   document.write("<br>"+result);

   </script>

 

# 결과

 

 

 

F. if ~ else : 만약에 OO하다면 if 다음을 실행하고 그렇지 않다면 else 다음을 실행

 

<script>

num = prompt("1~100사이의 값을 입력하세요..","") // 사용자가 입력할 수 있는 대화상자

// 입력한 값이 짝수 인지 홀수 인지 구별해서 결과 출력

if(num%2==1){ //참

                                                     document.write(num+"은(는) 홀수입니다.....");

                                        }

else{ //거짓

                  document.write(num+"은(는) 짝수입니다.....");

             }

</script>

 

# 결과 ▽

 

 

 

G. eval : 문자열의 속성이 가지고 있는 값으로 자동으로 형 변환

 

<script>

                  result = eval(prompt("수식을 입력하세요..",""));

             // eval위치 : 아래에 위치해도 위와 아래 둘다 같은 의미, 적용은→ write((eval(result));

            document.write(result);  // 화면상에 출력을 원하지 않을 땐 삭제

</script>

 

# 결과 ▽

 


'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_02  (0) 2011.10.11
Html_01  (0) 2011.10.10
Html_02 Html/Jsp/Javascript 2011. 10. 11. 23:34

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_02  (0) 2011.10.11
Html_01  (0) 2011.10.10