css ( cascading style sheets )
-----------------------------스타일 시트란.----------------------------------
HTML만으로 웹을 꾸밀때 많은 태그들을 쓰게 되는데, 태그들을 너무 남발하다보면,
복잡해지기 쉽다. 또한, 세부적으로 태그들을 지정해주기엔 비효율적이다.
태그들을 하나의 스타일로 설정한 후 이를 HTML문서에 적용함으로써 깔끔하게 문서를 작성할 있다.
스타일 시트로 가능한 작업은?
1.HTML 문서 내에 글자의 글꼴 종류, 크기 ,색, 여백 등을 지정한다.
2.글자의 정렬 방식을 결정하거나 글자에 그림자를 지정하는 등 다양한 효과를 줄 수 있다.
3.박스에 다양한 효과를 줄 수 있다.
4.사용자의 웹 브라우저 환경에 상관없이 일정한 화면을 보여줄 수 있다.
--------------------------스타일 시트의 기본 형식------------------------------
selector{ 속성 : 값 }
---------------------------------------------------------------------------
스타일을 적용할 대상이 있어야 하는데 , selector가 바로 스타일 적용 대상이다.
주의할 점은 태그의 이름이 기존에 HTML에서 사용하고 있는 것이어야 한다.
예를 들면 'H1'은 스타일을 적용할 대상으로 적당하지만 'K1'은 HTML에서 사용하는
태그가 아니므로 스타일 적용 대상으로는 불가능하다.
속성
기본(디폴트)으로 설정된 스타일 중 변경하고자 하는 속성이다. 글자의 크기나 글자의 색상 등이
바로 이 속성에 해당된다. 이 속성에 변경하고자 하는 값을 지정하기 위해서는 콜론을
기술한 후 값을 설정한다. "속성 : 값"과 같이 한 쌍으로 기술한다.
ex) H1 { color : red }
--------------------------------여러가지 속성 설정하기---------------------------------
속성에 값을 설정하기 위해서는 콜론을 사이에 두고 속성과 값을 한 쌍으로 기술한다.
태그에 여러 가지 속성을 지정하고 싶을 때에는 각 쌍들을 구분하기 위해 세미콜론(;)을
기술한다.
★★★★★★★얘네는 값에 " " 이거 쓰지 않아!!★★★★★★★★★
ex)
selector { 속성1 : 값1; 속성2 : 값2; 속성N : 값N; }
P{ font-size : 18pt; font-family: 굴림; color : green ; }
-------------------------HTML 문서에 스타일 시트를 적용하는 방법 3가지----------------------
|
종류 |
설명 |
|
embedding (삽입) |
<head> 태그에 스타일 설정을 삽입하는 형식. |
|
link |
외부 파일에 존재하는 스타일 시트 파일을 HTML에 삽입하는 형식. |
|
inline |
HTML 문서의 태그에서 직접 스타일을 설정하는 형시 |
-----------------------<head> 태그에 스타일 설정하는 embedding 스타일----------------------
embedding 스타일은 <head> 태그에 스타일 설정을 삽입하는 형식이며, 스타일을 설정하기 위해서는
HTML문서의 <HEAD>태그에 <STYLE> 태그를 삽입한다.
<STYLE>과 </STYLE> 태그 사이에 스타일을 설정하는 내용을 기술한다.
이 때 주의 할 점은 TYPE속성에 "text/css"를 기술하여야 한다.
ex)
<haed>
<STYLE TYPE = "text/css">
selector { 속성1 : 값1; 속성2 : 값2; ...속성N : 값N ;}
selector { 속성1 : 값1; 속성2 : 값2; ...속성N : 값N ;}
selector { 속성1 : 값1; 속성2 : 값2; ...속성N : 값N ;}
</STYLE>
</head>
<head> 태그에 <style> 태그를 삽입하여 스타일을 설정한 후 이를 <body>태그에서 적용한다.
ex)
<html>
<head>
<STYLE TYPE = "text/css">
H1{font-family : 굴림체; color : #FFFFFF}
H2{font-family : 궁서체; color : pink;}
</STYLE>
</head>
<body bgcolor = "#400040">
<center>
<H1>스타일 시트 적용하기</H1>
<br><hr>
<H2> embedding 스타일</H2>
<hr>
</center>
</body>
</html>
----------------외부 파일에 존재하는 스타일 시트 파일을 HTML에 삽입하는 link스타일.----------------------
여러 문서에서 동일한 스타일을 적용할 경우에는 매번 동일한 스타일을 적용할 필요 없이,
스타일 시트를 설정부분만 따로 파일로 작성하여 이를 HTML 문서에서 불러와 사용한다.
★★★★ 스타일 시트를 설정하여 저장할 때에는 확장자를 "CSS"로 지정한다.★★★★
또한 따로 존재하는 파일을 HTML 문서에서 가져다 쓰기 위해서는 <LINK> 태그를 사용한다.
사용법,
<link rel = "stylesheet" type="text/css" href = "경로">
ex)
파일명 ㅡ> css01-02.css
H1{ font-family : 굴림체; color : #FFFFFF }
H2{font-family : 궁서체; color : pink ;}
파일명 ㅡ>css01-02.html
<html>
<head>
<link rel = "stylesheet type" = type = "text/css" href = "css01-02.css">
</head>
<body bgcolor = "#400040">
<center>
<H1>스타일 시트 적용하기</H1><br><hr>
<H2> LINK 스타일 </H2><hr>
</center>
</body>
</html>
------------------HTML 문서의 태그에서 직접 스타일 설정하는 inline 스타일-------------------
HTML 문서 내의 태그에 직접 스타일을 지정할 수 있는데, 이 방식을 인라인 방식이라 하며,
인라인 방식으로 스타일을 설정할 때에는 내용 전체를 이중 따옴표로 둘러쌓아서 기술한다.
사용법,
<html>
<head>
</head>
<body bgcolor ="#400040">
<center>
<H1 STYLE = "font-family : 굴림체; color : #FFFFFF">
스타일 시트 적용하기
</H1>
<br><hr>
<H2 STYLE = "font-family : 궁서체 ; color : pink;">
inline 스타일
<H2>
<hr>
</center>
</body>
</html>
----------------------------특정 부분에서만 스타일 적용하기--------------------------------
태그에 스타일을 설정하고 나면 그 태그가 사용된 문자열은 모두 동일한 스타일로 지정된다.
H1 태그의 color 속성을 하얀색으로 지정하면 H1태그가 사용된 모든 문자열의 색상이 하얀색으로
나타난다. 이때 모든 경우가 아니라 특정 부분에서만 선택적으로 스타일을 적용하기 원할 경우,
class나 ID속성을 이용하여 특정 태그에서만 스타일을 적용할 수 있다.
1. class로 속성 정의하기.-----------------------------------------------------------------
사용법,
<STYLE TYPE = "text/css">
.클래스이름 {속성1 : 속성값1; 속성2 : 속성값2; 속성N: 속성값N;}
★★★ 클래스 이름앞에 "." 이 중요 !!!★★★
ex)
<STYLE TYPE = "text/css">
.style1{ color : #FFFFFF }
.style2 { color : yellow; }
</STYLE>
이렇게 클래스 이름을 새롭게 설정하였으면 이를 HTML 문서에서 사용한다.
이를 사용하기 위해서는 태그를 기술한 후에 class라는 키워드 다음에 선택적으로 기술한다.
ex)
<H1 class = style1> 김창호 </H1><br>
<H2 class = style1> 김창호 </H2><br>
<H2 class = style2> 김창호 </H2><br>
<H3 class = style2> 김창호 </H3><br>
2.ID로 속성 정의하기----------------------------------------------------------------------
스타일을 정의한 후 이에 새로운 이름을 지정하는 것으로 , 이름을 지정할 때에는 #기호를
새로운 이름 앞에 기술한다.
사용법,
<STYLE TYPE = "text/css">
#새로운속성{속성1 : 속성값1; 속성2 : 속성값2; 속성N : 속성값N;}
</STYLE>
ex)
<STYLE TYPE = "text/css">
#type1{color : gold;}
#type2{color : silver;}
</STYLE>
스타일을 설정한 후 새로운 이름을 설정하였으면 이를 HTML 문서에 적용하기 위해서 태그를 기술한 후에
ID라는 키워드 다음에 선택적으로 기술하여 사용한다.
<H1 ID = type1> 여기는 황금색 </H1><br>
<H2 ID = type1> 여기도 황금색 </H2><br>
<H2 ID = type2> 이제는 은색 </H2><br>
<H3 ID = type2> 여기도 은색 </H2><br>
'css' 카테고리의 다른 글
| css 정리 <2> (0) | 2012.08.08 |
|---|