본문 바로가기

Html/Jsp/Javascript

Html,Jsp,Css_04

전일에 이어 스타일시트 글자속성 중 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_03  (0) 2011.10.12
Html_02  (0) 2011.10.11
Html_01  (0) 2011.10.10