CSS(cascading Style Sheet)
웹페이지의 디자인 표현을 위해 사용하는 언어
적용방법
1. 내부스타일
- 현재 문서에 스타일을 정의한 후 효과를 직접작성
- 반드시 head 태그 안에서 정의
<style type="text/css"> <!----스타일 선언/정의---->
효과
효과
.
.
</style>
2. 외부스타일
- 스타일 효과를 " 이름.css"로 저장하고 효과를 적용할 문서에 링크시켜서 적용
- 효과를 적용할 문서의 head 태그 안에 <link rel="stylesheet" type="text/css" href="이름.css">
- css 문서에는 스타일 정의하지 않음
실습
1. html 파일 2개, 보통문서 1개
1) inStyle.html 2)outStyle.html 3) common.css
<P>태그 - 문단을 나눈다
CSS를 사용했을때 정의를 하기 때문에 새로운 기능을 만들어 사용할 수 있다
*작성방법
1. 태그 재정의
-기존 태그의 기능에 스타일 효과를 추가
-해당 태그 작성시 효과가 자동으로 적용
2. 사용자 정의
- 임의로 효과 작성
- 필요한 요서에 직접 호출하여 적용
- 태그 정의 스타일보다 우선
사용자 정의 스타일
1. id <tag id="#name">
-"#"으로 이름지정
- id="이름" 형식으로 적용
- 하나의 문서에 같은 이름의 id를 중복사용 불가
2. class
- ".(dot)"으로 이름 지정
- class="이름" 형식으로 적용
- 여러번 사용가능
*문법
<태그 속성(attribute)="속성값" 속성="속성값"...>
선택자{
|
속성(property):속성값; 속성:속성값; . . <!---효과----> |
}
***잘만든 CSS
1. 최대한 짧게 표현
2. 효과는 최대한 한줄로표기
3. 마지막 세미콜론은 반드시 생략
4. 줄여서 표기가 가능한 효과들은 반드시 줄여서 작성
ex)기존작성방법
선택자 {
속성:속성값;
속성:속성값;
.
.
}
ex)최근 작성 방법
선택자{속성:속성값;속성:속성값}
*색상 사용하기
1. 색상의 영문명
2. 색상코드
#FFFFFF <---16진수로 된 6자리 입력
스타일에서 색상 사용시 각 색상별 숫자가 동일한 경우에는 3자리로 표기가능 (2자리씩 완전히 동일할 경우)
ex)#336699 ----> #369
#aaffbb ----->#afb
**선택자**
1. 단일 선택자
-선택자가 한 개인 경우
2. 다중 선택자
- 여러 개의 선택자에 동시 효과 적용
- ","로 선택자 나열
ex) p,a, table{
border:0
}
3. 부분 지정 선택자
- 같은 태그라 하더라도 부모 태그에 따라 다른 효과 적용
- 공백으로 선택자 나열
ex) p a{
border:0
}
과제 : CSS의 효과 공부 (실전 사이트를 기준으로)
실습내용
↓
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body{
font-size:20px
}
h1 {
font-size:20px;
font-weight:bold;
color:#ff00ff;
}
h2{
background-color:#99cc00;
color:#ffffff
}
#p1{
font-family:"바탕";
color:#ff00cc;
}
.p2{
font-family:"맑은 고딕";
color:#009900;
}
</style>
</head>
<body>
<h1>* CSS (Cascading Style Sheet) </h1>
<h2>* 적용방법</h2>
<p id="p1">1. 내부 스타일은 문서의 head안에 스타일을 선언하고 효과를 직접 작성합니다 </p>
<p class="p2">2. 외부 스타일은 CSS파일을 따고 작성하고 필요한 문서에 링크시켜서 효과를 적용합니다</p>
</body>
</html>
'홈피관련글' 카테고리의 다른 글
| [130624] 웹표준 6강 (0) | 2013.06.24 |
|---|---|
| [130619] 웹표준 5강 (0) | 2013.06.19 |
| [130614] 웹표준 3강 (0) | 2013.06.17 |
| [130612] 웹표준 2강 2교시 - 태그 (0) | 2013.06.12 |
| 130612 웹표준 2강 (0) | 2013.06.12 |