1.스타일 시트란?
-HTML문서에 CSS를 적용하면 깔끔해진다.
-계단형 스타일 시트(Cascading Style Sheets)이다.
-그림이나 레이어에 적용하여 웹 페이지를 동적으로 다이나믹하게 구성 할수있다.
1.1 스타일 시트로 가능한 작업
-스타일 시트는 일정한 기능들을 미리 지정하여 여러 부분에서 동일하게 사용할수 있다.
-반복되는 속성을 일괄적으로 지정하기 때문에 수정하기 수월하다.
*스타일 시트로 가능한 작업
-HTML 문서 내에 글자의 글꼴 종류, 크기, 색, 여백 등을 지정.
-글자의 정렬 방식을 결정하거나 글자에 그림자를 지정하는 등 다양한 효과를 줄 수 있다.
-박스에 다양한 효과를 줄 수 있다.
-사용자의 웹 브라우저 환경에 상관없이 일정한 화면을 보여줄 수 있다.
2.스타일 시트의 기본 형식
*selector { 속성 : 값 } | H1 { color : red }
selector
-스타일 적용 대상, 기존 HTML 태그 중에서 선택
속성
-기본(디폴트)으로 설정된 스타일 중 변경하고자 하는 속성
-속성 : 값 한 쌍으로 기술
2.1 여러 가지 속성 설정하기
-속성에 값을 설정하기 위해서는 콜론을 사이에 두고 속성과 값을 한 쌍으로 기술
-각 쌍들을 구분하기 위해 세미콜론을 “;”을 기술
selector {
속성1 : 값1 ;
속성2 : 값2 ;
:
속성N : 값N ;
}
3.홈페이지에 스타일 설정하여 적용하기
*HTML 문서에 스타일 시트 적용하는 3가지 방법
-embedding | <head> 태그에 스타일 설정을 삽입하는 형식
-link | 외부 파일에 존재하는 스타일 시트 파일을 HTML에 삽입하는 형식
-inline | HTML 문서의 태그에서 직접 스타일을 설정하는 형식
4.특정 부분에서만 스타일 적용하기
-태그에 상관없이 스타일이 모두 적용될 수 있도록 함.
-스타일을 정의한 후 이에 새로운 이름을 지정.
-이름을 지정할 때에는 "#"이나"."기호를 새로운 이름 앞에 기술함.
-설정된 스타일은 어느 태그에서나 "ID","Class" 속성으로 적용할 수 있음.
4.1 class로 속성 정의하기
<STYLE TYPE = "text/css">
.style1 {
color : #FFFFFF
}
.style2 {
color : yellow;
}
</STYLE>
<H1 class = style1> 스타일 시트 적용하기 </H1>
4.2 ID로 속성 정의하기
<STYLE TYPE = "text/css">
#type1 {
color : gold;
}
#type2 {
color : silver;
}
</STYLE>
<H1 ID = type1> 스타일 시트 적용하기 </H1>