OpenFrameWork
오픈프레임워크_Day32
px
2015. 4. 28. 09:18
### : 목차 구분 기호
--- : 목차 내에 항목 구분 기호
@@@ : 태그 용도
--- : 목차 내에 항목 구분 기호
@@@ : 태그 용도
,,, : 같은 항목 내에 구분 기호
목차
1. 이론 및 정보
2. 설정 및 그 밖에
3. 소스코드 또는 실습
4. 과제
###################################
1. 이론 및 정보
-----------------------------------
* HTML 작성시 태그에 속성을 주는 것은 표준화에 도움이 안됨
모든 디자인은 별도의 속성을 주지 말고 style 속성으로 통일하기
이 방식이 표준화를 위한 방법 -> css 기본
-----------------------------------
***. CSS(Cascading Style Sheets)
1. 디자인의 효과적인 관리
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. 설정 및 그 밖에
-----------------------------------
###################################
2. 설정 및 그 밖에
-----------------------------------
-----------------------------------
###################################
3. 소스코드 또는 실습
-----------------------------------
###################################
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>
h2 {
font-weight:bold;
}
<!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>
4. 과제
-----------------------------------
<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>
<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>
<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>
<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;
}
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>
<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>
<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>
<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>
<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>
<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>
<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>
<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
<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>
<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>
<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>
<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>
<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>
<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>
<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. 과제 해결
-----------------------------------
5-1
-----------------------------------
5-2
-----------------------------------
5-3
-----------------------------------
5-4
-----------------------------------
###################################
6. 기타
----------------------------------- -----------------------------------