OpenFrameWork

오픈프레임워크_Day32

px 2015. 4. 28. 09:18
### : 목차 구분 기호
--- : 목차 내에 항목 구분 기호
@@@ : 태그 용도 
,,, : 같은 항목 내에 구분 기호

목차
1. 이론 및 정보
2. 설정 및 그 밖에
3. 소스코드 또는 실습
4. 과제

###################################
1. 이론 및 정보
-----------------------------------
* HTML 작성시 태그에 속성을 주는 것은 표준화에 도움이 안됨
모든 디자인은 별도의 속성을 주지 말고 style 속성으로 통일하기
이 방식이 표준화를 위한 방법 -> css 기본
----------------------------------- 
***. CSS(Cascading Style Sheets)
1. 디자인의 효과적인 관리
2. 웹 표준화

3. 사용방법
(1) External Style Sheet
          - 별도의 .css 파일을 만들어서 불러다 사용하는 방식
(2) Internal Style Sheet
          - 하나의 페이지에 단 한번만 정의함으로써 같은 페이지 내에서는 동일한 디자인을 재사용 할 수 있다.
(3) Inline Style Sheet
          - 태그안에서 직접 사용하는 방식(즉흥적인 사용방식)자주안씀
          - Style 이라는 속성을 통해서 사용하는 방식 

4. 문법
          Selector {property:value; property:value; ...}

5. Property 정리
(1) Font 관련
          1) font-family
          2) font-size
          3) font-style : normal, italic, oblique
          4) font-weight : 글자의 굵기
          5) line-height : 줄간격
          6) font-variant : 텍스트를 작은 대문자로 
          7) font : 여러개의 속성 값을 하나로 묶어서 사용 가능

(2) 색상 및 이미지 관련
          1) color : 글자 색
          2) background-color
          3) background-image : 배경 이미지의 반복 방법 지정
          4) background-attachment : 배경이미지의 고정 여부
          5) background-position : 배경 이미지의 시작 위치 지정
          6) background : 여러개의 속성 값을 하나로 묶어서 사용 가능

(3) 텍스트관련
          1) text-transform : 텍스트를 대문자 또는 소문자로 변환
          2) text-align
          3) text-indent : 문단의 들여쓰기
          4) text-decoration : 텍스트에 더해지는 장식 효과
          5) vertical-align : Top, Middle, bottom (수평은 left center right,양쪽 정렬은 justified)
          6) line-height

(4) 여백 관련
          1) 가장 바깥쪽 여백
                    margin-top,margin-right,margin-left,margin-bottom
          2) 가장 안쪽 여백
                    padding-top,padding-right,padding-left,padding-bottom
          3) 경계선 여백(바깥쪽과 안쪽의 중간 여백)
                    border-top,border-right,border-left,border-bottom
                    border-width,border-style,border-color
          4) width,height : 내용(객체)의 크기

6. 그외 기타 문법
(1) 독립적 상속
          - 하나의 태그가 다른 태그를 포함할 경우 그 포함된 태그는 포함된 태그 스타일의 영향을 받는다.
          - 만약 상속을 거부할 경우, 다시 포함된 태그에서 프로퍼티를 지정해 주면 된다.
(2) 선택적 상속
          - A태그안에 B태그를 포함시켜 정의하는 방식으로 B태그는 A태그 영역에서만 유효한 값을 가진다.
(3) 동일한 스타일을 여러개 지정할 경우
          예를 들어 A태그,B태그,C태그가 동일한 디자인일 경우
          A{디자인 프로퍼티;...}
          B{디자인 프로퍼티;...}
          C{디자인 프로퍼티;...}

          이것을 다음과 같이 바꿀 수 있다.
          A,B,C{디자인 프로퍼티;...} 

7. 원하는 디자인을 골라서 사용하기
(1) Stylesheet를 class속성으로 지정하기(최근 방식, 가장 많이 씀)
(2) *(all)을 이용한 class속성 지정
          - 특정 태그를 위한 것이 아닌 어떤 객체에서도 stylesheet를 가져다 사용할 수 있게 하기위한 기능
(3) Stylesheet를 id속성을 지정 (쓰지 말아라! 이유는 #이 다른 곳에서 쓰임)

8. 정렬
(1) align
(2) float
----------------------------------- 
*. css version
최신 css3 version -> html5와 궁합이 잘 맞는 버전, html5를 위해 나옴
우리 배우는 건 css2 version
----------------------------------- 
###################################
2. 설정 및 그 밖에
-----------------------------------
----------------------------------- 
###################################
3. 소스코드 또는 실습 
-----------------------------------
3-1
/HtmlTemplate/WebContent/06-테이블.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
     <table border="1" width="300" height="100" bgcolor="yellow"
          background="images/duke_pencil.gif" align="center" >
          <caption>연습용 테이블1</caption>
          <tr>
               <th >Month</th>
               <th>Saving</th>
          </tr>
          <tr>
               <td align="right">1월</td>
               <td>$100</td>
          </tr>
     </table>
    
     <hr/>

     <table border="1" width="70%" height="10%" cellpadding="10"
          cellspacing="10">
          <tr>
               <th>아이디</th>
               <th>이름</th>
               <th>주소</th>
          </tr>
          <tr>
               <td>1</td>
               <td>홍길동</td>
               <td>서울</td>
          </tr>
          <tr>
               <td>2</td>
               <td>임꺽정</td>
               <td>경기</td>
          </tr>
     </table>

     <hr/>

     <table border="1" width="300">
          <tr>
               <td>1행 1열</td>
               <td rowspan="2">1행 2열</td>
               <td>1행 3열</td>
          </tr>
          <tr>
               <td>2행 1열</td>
              
               <td>2행 3열</td>
          </tr>
          <tr>
               <td colspan="2">3행 1열</td>              
               <td>3행 3열</td>
          </tr>
     </table>
    
     <hr/>
    
     <table border="1" width="70%" height="10%"  cellpadding="30">
          <tr>
               <td rowspan="3">1</td>
               <td colspan="3">2</td>              
          </tr>
          <tr>              
               <td colspan="2">3</td>
               <td rowspan="3">4</td>              
          </tr>
          <tr>              
               <td >5</td>
               <td >6</td>                        
          </tr>
          <tr>
               <td colspan="3">7</td>                        
          </tr>
     </table>
    
</body>
</html>
----------------------------------- 
3-2
/HtmlTemplate/WebContent/07-div.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>

     <table style="background:red">
          <tr>
               <td>한칸 이것도 크기가 내용 만큼?</td>
          </tr>
     </table>
    
     <br/><br/><br/><br/><br/>
    
     <div style="background:red">한칸</div>
    
     <br/><br/><br/><br/><br/>
    
     <span style="background: red">한칸 내용만큼만 크기 결정</span>
    
     <hr/>
    
     <div style="width:200px; height:50px; background:red">한칸</div>
     <div style="width:200px; height:50px; background:yellow">두칸</div>

     <div style="margin-top:10px">
          <div style="width: 200px; height: 50px; background: red">한칸</div>
          <div style="width: 200px; height: 50px; background: yellow">두칸</div>
     </div>
    
     <hr/>
    
     <div style="width:200px; height:50px; background:red; float:left">한칸</div>
     <div style="width:200px; height:50px; background:yellow; float:right">두칸</div>
     <div style="clear:both;"></div> <!-- 위에 float 속성을 지워서 뒤에 영향을 미치지 않게 한다 -->
     <div style="margin-top:10px">
          <div style="width: 200px; height: 50px; background: red">한칸</div>
          <div style="width: 200px; height: 50px; background: yellow">두칸</div>
     </div>

     <hr/>
    
     <div id="wrap" style="width:600px">
          <div id="header" style="height:50px; background:black"></div>
         
          <div id="main" style="margin-top:10px">
          <div id="left_main" style="height:300px; width:100px; background:gray; float:left; margin-right:10px"></div>
          <div id="center_main" style="height:300px; width:490px; background:gray; float:left;" ></div>
          </div>
          <div style="clear:both;"></div>
          <div id="footer" style="height:50px; margin-top:10px; background:black"></div>
     </div>

</body>
</html>
----------------------------------- 
3-3
/HtmlTemplate/WebContent/08-inputType.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>

<form action="">
<!-- 문자열 입력 받기 -->
     <input type="text"></input><br/>
     <input type="text" size="30" maxlength="10"><br/>
     <!-- value는 서버로 전송하기 위한 역할 -->
     <input type="text" value="여기에 값을 입력하세요" disabled/><br/>
     <input type="text" value="여기에 값을 입력하세요" disabled="disabled"/><br/>
     <!-- 서버가 있을때 disabled는 서버에게 전달이 안됨,웹에서는 사용 불가능 -->
     <!-- 서버가 있을때 readonly는 서버에게 전달이 됨,  웹에서는 사용 불가능 -->
     <input type="text" value="여기에 값을 입력하세요" readonly="readonly"/><br/>
     <input type="password"/><br/>
    
     <hr/>
    
<!-- 선택에 따른 입력 받기 -->
     <!-- 이름을 똑같이 주어야 그룹이 형성이 된다 -->
     <input type="radio" name="r1" checked="true"/>첫번째 라디오<br/>
     <input type="radio" name="r1"/>두번째 라디오<br/>
     <!-- checkbox를 같은 이름으로 주면 서버에서 받을때 배열로 묶을 수 있음 -->
     <!-- checkbox의 value는 서버로 전달 한다 -->
     <input type="checkbox" name="c1" value="등산"/>등산<br/>
     <input type="checkbox" name="c1"/>여행<br/>
     <input type="checkbox" name="c1"/>독서<br/>
    
     <hr/>
    
<!-- 버튼 관련 -->
     <!-- 버튼에 value는 캡션의 의미, 서버로 전달 안됨 -->
     <input type="button" value="버튼"/><br/>
     <!-- submit은 기능이 만들어져 있음, 서버에 전송 기능 -->
     <input type="submit" value="submit버튼"/><br/>
     <input type="reset" value="리셋버튼"/><br/>
     <!-- reset은 입력한 값을 취소하는 기능, 범위를 묶어줘야함, form -->    
     <input type="image" src="images/duke_pencil.gif"/><br/>
    
     <hr/>
    
         
<!-- 자체 태그명 -->
     <!-- textarea는 반드시 두개의 시작,끝태그를 써야함,한개로 닫는거 안됨 -->
     <textarea rows="10" cols="50"></textarea>
    
     <!-- opetion에 value 값이 서버에 전달되는데 없으면 태그 사이에 값이 전달됨 -->
     <select size="5" multiple="multiple">
          <option vale="서울">서울</option>
          <option selected="selected">경기</option>
          <option>인천</option>
          <option>수원</option>
          <option>제주</option>
     </select>
    
     <select size="3" multiple="multiple">
          <option>서울</option>
          <option>경기</option>
          <option>인천</option>
          <option>수원</option>
          <option>제주</option>
     </select>
    
     <select>
          <option>서울</option>
          <option>경기</option>
          <option>인천</option>
          <option>수원</option>
          <option>제주</option>
     </select>

<!-- 기타 -->
     <input type="file"/><br/>
     <!-- 서버에 전달하기 위해 몰래 사용하는 것 -->
     <input type="hidden" value="무슨 값일까?"/>

</form>

</body>
</html>
----------------------------------- 
3-4
/CssTemplate/WebContent/01-인터널방식.html

<!DOCTYPE html>
<html>
<head>
     <meta charset="EUC-KR">
     <title>Insert title here</title>
     <!-- style type="text/css" 생략가능 -->
     <style>
          h1{font-size:30pt; font-family:궁서체; color:red}
     </style>
</head>
<body>
     <h1>현재 디자인이 적용될 문장입니다.</h1>
     안녕하세요! 홍길동님~~<br />
     <h1>안녕히 가세요</h1>
</body>
</html>
----------------------------------- 
3-5 
/CssTemplate/WebContent/css/external.css

h1 {
     font-size: 30pt;
     font-family: 궁서체;
     color: red;
     font-style:oblique;
}

h2 {
     font-weight:bold;
}
----------------------------------- 
3-6
/CssTemplate/WebContent/02-익스터널방식.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<!-- MIME 타입 -->
<link rel="stylesheet" type="text/css" href="css/external.css">
</head>
<body>
     <h1>현재 디자인이 적용될 문장입니다.</h1>
     안녕하세요! 홍길동님~~<br />

     <h1>안녕히 가세요</h1>
     <h2>이것은 font 속성을 사용함.</h2>
</body>
</html>
----------------------------------- 
3-7 
/CssTemplate/WebContent/03-색상관련1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
body {
     background-color: #FFFF99;
     color:purple;
}
h1 {color:gold}
h2 {color:green}
</style>
</head>
<body>
     배경색은 연노랑색이며 기본 글자색은 보라색
     <h1>h1의 글자색은 금색</h1>
     <h2>h2의 글자색은 초록색</h2>
</body>
</html>
----------------------------------- 
3-8 
/CssTemplate/WebContent/04-색상관련2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
     body {
          color:navy;
          font-weight:bold;
          background-image:url("images/duke_flip.gif");
     }
</style>
</head>
<body>
     배경을 그림으로 채운다.<br/>
     배경을 그림으로 채운다.<br/>
     배경을 그림으로 채운다.<br/>
</body>
</html>
----------------------------------- 
3-9 
/CssTemplate/WebContent/05-색상관련3.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
     body {
          color:navy;
          font-weight:bold;
          background-image:url("images/duke_flip.gif");
          background-repeat: no-repeat;
          background-position: 200px 100px
     }
</style>
</head>
<body>
     배경을 그림으로 채운다.<br/>
     배경을 그림으로 채운다.<br/>
     배경을 그림으로 채운다.<br/>
</body>
</html>
----------------------------------- 
3-10 
/CssTemplate/WebContent/06-색상관련4.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
     /*
     body {
          color:orange;
          font-weight:bold;
          background-image:url("images/Jellyfish.jpg");
          background-repeat:repeat-y;
          background-position:center top;
          background-attachment:fixed;         
     }
     */
     body {
          color:orange;
          font-weight:bold;
          background: url("images/Jellyfish.jpg") center top fixed repeat-y;         
     }
</style>
</head>
<body>
     글자색은 오렌지색, 배경 이미지는 상단 중앙에서 세로만 반복된다.
     <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/><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/><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/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>         
</body>
</html>
----------------------------------- 
3-11 
/CssTemplate/WebContent/07-텍스트관련1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
     h1{
          font-size: 9pt; font-weight: normal;
          text-transform: uppercase; text-align: left;
     }
     h2{
          font-size: 9pt; font-weight: normal;
          text-transform: lowercase; text-align: right;
     }
     h3{
          font-size: 9pt; font-weight: normal;
          text-transform: capitalize; text-align: center;
     }
     h4{
          font-size: 9pt; font-weight: normal;
          text-transform: none; text-align: justify;
     }
</style>
</head>
<body>
     <h1>welcome to my world</h1>
     <h2>WELCOME TO MY WORLD</h2>
     <h3>welcome to my world</h3>
     <h4>Welcome To My World</h4>
</body>
</html>
----------------------------------- 
3-12 
/CssTemplate/WebContent/08-텍스트관련2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
     h1{
          font-size: 9pt; font-weight: normal;
          text-indent: 5%; text-decoration: underline;
     }
     h2{
          font-size: 9pt; font-weight: normal;
          text-decoration: overline;
     }
     h3{
          font-size: 9pt; font-weight: normal;
          text-decoration: line-through;
     }
     a{
          text-decoration: none; cursor:move;
     }
     /*
          아래 코드 되는지 확인
          cursor:url("images/duke_pencil.gif")
     */
</style>
</head>
<body>
<!-- h1,h2,h3 태그에 글자 크기는 9pt, 굵기는 기본 -->
     <h1>들여쓰기를 윈도우 기준 5%안으로 넣고 텍스트에 밑줄 효과 적용</h1>
     <h2>텍스트에 윗줄 효과 적용</h2>
     <h3>텍스트에 취소선 효과 적용</h3>    
     <br/><br/>
    
     <a href="http://www.naver.com">네이버로 이동</a>
</body>
</html>
-----------------------------------
3-13
/CssTemplate/WebContent/09-여백관련.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
    h1{
         font-size:13px;
         border-style:dashed;
        border-color:red;
        border-width:thin;
        border-top-width:50px;
        width:500px;
        height:100px;
        margin-top:50px;
        padding-left:150px;
    }
</style>
</head>
<body>
     <h1>경계선 스타일은 대쉬, 경계선 색상은 빨간색<br/>
          경계선 두께는 얇게<br/>
          경계선 상단 굵기는 50px<br/>
          객체 가로는 500px, 세로는 100px<br/>
          객체와 본문과의 상단 간격도 50px<br/>
          내용과 경계선과의 왼쪽 간격은 150px<br/>
     </h1>
</body>
</html> 
-----------------------------------
3-14 
/CssTemplate/WebContent/10-독립적 상속.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
     h1{
          font-size: 16pt;font-weight: normal; color: green;
     }
     strong {
          font-size: 9pt;font-weight: bold;
     }
</style>
</head>
<body>
     <h1>h1은 초록색 글씨에 16pt,굵기는 보통이다.
     <strong>strong은 글자색을 지정하지 않아도 h1의 초록색 글자는 상속되고 글자의 크기는 지정한 값이 9pt이다.</strong>
     strong을 벗어나면 다시 h1의 속성을 가지므로 글자크기는 16pt가 된다.
     </h1>
</body>
</html>
----------------------------------- 
3-15
/CssTemplate/WebContent/11-선택적 상속.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
     h1{color:green;font-size:9pt;font-weight:normal;}
     h2{color:green;font-size:9pt;font-weight:normal;}
    
     h1 span{font-size:9pt;font-weight:normal;color:red;}
</style>
</head>
<body>
     <h1>
          h1은 글자 속성이 초록색이고 <span>여기서 부터는 h1과 무관하게 빨간색이지만</span><br/>
          span을 벗어나면 다시 초록색이 된다.
     </h1>
     <h2>
          h2는 초록색이지만 <span>여기서 부터는 span이 h1에 포함되지 않으므로 초록색이며</span><br/>
          span을 벗어나면 h2의 영향을 받아서 또한 초록색이 된다.
     </h2>
</body>
</html>
----------------------------------- 
3-16
/CssTemplate/WebContent/12-class속성 지정.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
     /*
     여기도 #으로 id속성이 가능한데 혼란의 여지가 있음
     h1#BLUE{color:blue;}
     h1#RED{color:red;}
     */
     h1.BLUE{color:blue;}
     h1.RED{color:red;}
</style>
</head>
<body>
     <h1 class="BLUE"> 클래스 속성을 지정하여 h1의 글자색을 파랑으로 지정 </h1>
     <h1 class="RED"> 클래스 속성을 지정하여 h1의 글자색을 빨강으로 지정 </h1>
</body>
</html>
----------------------------------- 
3-17 
/CssTemplate/WebContent/13-all방식의 class속성 지정.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
     h1,h2,h3{color:green;}
     .BLUE{color:blue;font-size:9pt;font-weight:normal;}
     .RED{color:red;font-size:9pt;font-weight:normal;}
</style>
</head>
<body>
     <h1>h1태그에 클래스를 지정하지 않은 경우 초록색으로 출력됨 </h1>
     <h2>h2태그에 클래스를 지정하지 않은 경우 초록색으로 출력됨 </h2>
     <h3>h3태그에 클래스를 지정하지 않은 경우 초록색으로 출력됨 </h3>
    
     <h2 class="BLUE">h2태그에 클래스 속성을 BLUE로 지정하면 글자색을 파랑</h2>
     <h3 class="RED">h3태그에 클래스 속성을 RED로 지정하면 글자색을 파랑</h3>
     <i class="RED">i태그에 클래스 속성을 RED로 적용(빨강에 기울임꼴)</i>
</body>
</html>
----------------------------------- 
3-18
/CssTemplate/WebContent/14-id속성 지정.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
     h1,h2,h3{color:green;}
     #BLUE{color:blue;font-size:9pt;font-weight:normal;}
     #RED{color:red;font-size:9pt;font-weight:normal;}
</style>
</head>
<body>
     <h1>h1태그에 클래스를 지정하지 않은 경우 초록색으로 출력됨 </h1>
     <h2>h2태그에 클래스를 지정하지 않은 경우 초록색으로 출력됨 </h2>
     <h3>h3태그에 클래스를 지정하지 않은 경우 초록색으로 출력됨 </h3>
    
     <h2 id="BLUE">h2태그에 클래스 속성을 BLUE로 지정하면 글자색을 파랑</h2>
     <h3 id="RED">h3태그에 클래스 속성을 RED로 지정하면 글자색을 파랑</h3>
     <i id="RED">i태그에 클래스 속성을 RED로 적용(빨강에 기울임꼴)</i>
</body>
</html>
----------------------------------- 
3-19
/CssTemplate/WebContent/15-float.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
     body, img{margin:40px}
     img{float:right;}
</style>
</head>
<body>
     <img src="images/duke_thinking.gif" />
     float을 이용한 이미지와 텍스트의 위치 지정
</body>
</html>
----------------------------------- 
###################################
4. 과제
-----------------------------------
4-1
/CssTemplate/WebContent/09-여백관련.html
안에 내용을 하시오
이 과제 올릴때 지난 DB과제 올리기
----------------------------------- 
4-2
----------------------------------- 
4-3
----------------------------------- 
4-4
----------------------------------- 
4-5
-----------------------------------
###################################
5. 과제 해결
-----------------------------------
5-1
-----------------------------------
5-2
----------------------------------- 
5-3
-----------------------------------
5-4
-----------------------------------
###################################
6. 기타
----------------------------------- 
-----------------------------------