□ 스타일 시트의 개념과 사용법 □
좌측 html강좌에 나온 스타일시트는 부족한 부분이 만아서 다솜지기님 홈에서 발췌해온 것입니다.
분량이 상당히 많기 때문에 천천히 읽어보도록 하세요. 만은 도움이 될겁니다.
스타일 시트가 필요한 가장 큰 이유는 웹페이지를 보다 깔끔하고 보기 좋게 꾸며 관리하기 쉽게 하는데 있다.
스타일 시트의 가장큰 장점을 든다면 같은 스타일의 문단이 반복적으로 사용될 경우 작업의 속도를 향상시키고
웹 페이지의 용량을 줄일 수 있다는데 있다. 또한 글자의 크기 자간과 행간을 마음대로 조절할 수 있으며 하이퍼
링크의 형태를 다양화 시킬 수 있다.
아무튼 스타일 시트는 현재와 앞으로 웹 페이지를 작성하면서 몰라서는 안될 부분의 하나이다.
스타일 시트를 선언하는 방법은 3가지가 있다.
첫번째는 <head>와 </head>사이에 넣는 방법이다.
아래 예제와 같이 사용한다.
<html>
<head>
<title>스타일 시트 선언하기</title>
<STYLE TYPE="text/css"> [스타일 시트의 시작을 의미한다]
<!--
선택자 스타일 속성1:속성의 값; 스타일 속성2:속성의 갑; ...
//-->
</STYLE>[스타일 시트의 끝을 의미한다]
</head>
<body>
본문내용
</body>
두번째는 HTML태그 내에 삽입하여 선언한다.
<태그 style="스타일 속성1:속성의 값; 스타일 속성2:속성의 값;..">....</태그>
세번째는 외부파일을 이용하여 선언한다.
스타일 시트의 외부 파일의 이름은 확장자가 CSS인 파일을 사용한다.
사용법은 <head>와 </head>사이에 넣는다.
<html>
<head>
<title>스타일 시트 선언하기</title>
<link rel="StyleSheet" HREF="스타일파일의 경로/스타일파일의 이름.css" type="text/css">
<body>
본문내용
</body>
CSS란 Cascading Style Sheet의 약자로서 웹 페이지 제작에 사용되는 HTML의 한계를 보안하기 위해 W3C에서 발표한 것이다.
1바이트 문자인 영어의 경우에는 글자의 여백을 주는 등의 효과를 따로 설정할 필요가 없지만 한글과 같은 2바이트의 문자에는 이것이 불가능하다
따라서 이런 2바이트의 문장의 한계를 보안하기 위해서 생겨난 것이 바로 CSS라 할 수 있다.
□ 스타일 시트의 폰트 관련 속성 □
font-family
값..............c:windowsfonts 디렉토리에 있는 폰트 이름
설명......화면에 나타나는 글씨의 종류를 설정할 때 쓰인다. 시스템에 있는 폰트 이름 중 하나를 사용하면 된다.
예제......P{font-family:Courier New}
기타......만일 윈도우 시스템에 굴림체가 없다면 Arial로 대체 하라는 의미로 다음과 같이 사용할 수도 있다. 참고로, 이것은 제작자의 시스템에는 해당 폰트가 있으나, 다른 사람들의 컴퓨터에는 폰트가 없을 시 아주 유용하게 쓰인다.
P{font-family:굴림,Arial}
font-style
값...........normal,italic,oblique
설명......화면에 나타나는 글씨의 모양, 즉 이탤릭으로 나타낼 것이냐 아니면 오를리크로 나타낼 것이냐를 설정한다.
예제......H1{font-style:italic}
font-weight
값...........normal,bold,border,lighter,100,200,300,400,500,600,700,800,900
설명......글씨의 굵기 설정.일반적인 폰트는 normal 또는 bold만을 지원한다.
예제......H2{font-weight:bold}
font-size
값..........절대값-포인트(pt),센티미터(cm),픽셀(px),인치(in)
상대값- larger,smaller
퍼센트 값 등
설명......글씨의 크기를 설정한다.
예제......H3{font-size:9pt}
□ 스타일 시트의 색깔과 배경 관련 속성 □
color
값...........색깔이름,RGB값
설명......글씨의 색깔을 설정한다.RGB 값,십진수, 색깔의 고유 이름으로도 사용.
예제......EM{color:red}
EM{color:rgb(255,0,0)}
background
값...........transparent,색깔 이름,URL,RBG 값 등
설명......백그라운드 색깔 및 이미지를 설정한다.
예제......P{background:transparent}
BODY{background:red}
BODY{background(pcline.gif)}
□ 스타일 시트의 텍스트 문자 관련 속성 □
word-spacing
값..............normal,길이
설명......단어와 단어 사이의 공간을 얼마나 넣어줄 것이냐 하는 속성이다.
예제......H1{word-spacing:0.4cm}
letter-spacing
값...........normal,길이
설명......word-spacing과는 다르게,글자와 글자 사이에 공간을 얼마나 넣어줄 것이냐 하는 속성이다.
예제......H1{letter-spacing:0.4cm}
text-decoration
값...........none,underline,overline,line-through,blink
설명......글자 또는 문자열을 어떻게 꾸며줄까 하는 것이다.
예를 들어, Link에 및줄을 없애고 싶다고 할 때
text-decoration:none과 같은 용법을 사용할 수 있다.
예제......A:link{text-decoration:none}
text-indent
값...........길이,퍼센트값
설명......얼마나 좌측에서 들여쓰기(indentation)를 할 것인가를
설정한다.
예제......P{text-indent:3m}
line-height
값...........숫자,길이,퍼센트값
설명......두줄 사이의 간격을 설정한다.
예제......DIV(line-height:1.2cm}
□ 스타일 시트의 레이아웃 관련 속성 □
margin-X
속성......margin-top, margin-right, margin-bottom, margin-left 등
값..........길이,퍼센트값,auto
설명......해당하는 내용의 위, 오른쪽, 아래, 왼쪽 등의 여백을 설정한다. 일반 워드 프로세서에서의 위아래, 좌우 여백 설정을 하는 것처럼 설정하면 된다.
예제......BODY{margin:1cm 2cm 3cm}
기타......여백 속성을 각각 상하좌우로 설정해 줄 수도 있지만, 위의 예제처럼 margin이라는 하나의 이름으로도 묶어서 설정할 수 있다. 이 때 속성값은 네개를 가지는데, 순서는 Top, Right,Bottom,Left의순서이다. 만일 속성값이 하나라도 상하 좌우를 모두 해당 값으로 설정하고, 속성값이 두개라면 첫번째 값은 Top과 Botttom,두번째 값은 Right와 Left의 값이 된다. 만일 속성값이 세 개라면 모자라는 속성값은 반대쪽 즉,마지막의 속성값은 Left이므로 Right에 설정돼 있는 값으로 설정된다.
padding-X
속성......padding-top,padding-right,padding-bottom,padding-left 등
값...........길이,퍼센트값,auto
설명......텍스트나 이미지 등에 있어서 border(테두리)와 내용간의 빈 공간을 얼마나 넣어줄 것인가 설정한다.
예제......H1{padding:1cm 2cm}
기타......margin과 마찬가지로 padding이라는 하나의 이름으로 속성을 묶어서 사용할수 있다.
border-X
속성......border-top,border-right,border-bottom,border-left
값...........thin,medim,thick,길이값,none,dotted,dashed,solid,double, groove,ridge,insert,outset
설명......border값을 얼마나 줄 것인가 설정한다.
예제.....P{border:solid}
기타.....margin과 마찬가지로 border라는 하나의 이름으로 속성을 묶어서 사용할 수 있다.
□ 스타일 시트의 클래스와 id관련 속성 □
스타일 시트를 정의 할때 상황에 따라 다른 스타일을 적용하고 싶을 때가 있을겁니다.
특정 부분마다 다른 스타일시트를 적용하고 싶을때 클래스나 id속성을 이용합니다.
즉 특정 부분만 묶어서 사용한다고 보심 편합니다.
# 클래스 속성
각각 다른 a 태그 설정으로 구분하여 줍니다.
a.a1 { ~ }
a.a2 { ~ }
위와 같이 스타일 시트에 삽입하고 불러올 때는 아래와 같이 불러옵니다.
class="a1"
class="a2"
ex)
<head>
<style type="text/css">
font { color:red }
font.style1 { color:blue }
font.style2 { font-size:20; color:green }
</style>
</head>
<body>
<font> 폰트 태그에 스타일 시트를 적용 </font><br>
<font class="style1"> 클래스 속성을 이용한 폰트 태그 스타일 </font><br>
<font class="style2"> 클래스 속성을 이용한 폰트 태그 스타일 2 </font><br>
</body>
# id속성
id속성을 사용할 경우는 id속성 선택자 "#" 을 사용합니다.
a#a1 { ~ }
a#a2 { ~ }
위와 같이 스타일 시트에 삽입하고 불러올 때는 아래와 같이 불러옵니다.
id="a1"
id="a2"
ex)
<head>
<style type="text/css">
font { color:red }
font#style1 { color:blue }
font#style2 { font-size:20; color:green }
</style>
</head>
<body>
<font> 폰트 태그에 스타일 시트를 적용 </font><br>
<font id="style1">id 속성을 이용한 폰트 태그 스타일</font><br>
<font id="style2">id 속성을 이용한 폰트 태그 스타일 2</font><br>
</body>
□ 스타일 시트의 문맥 선택자 □
p 태그안의 b 태그가 사용되는 공간은 빨간색으로 표현하고싶다.
이럴 때 쓰는 방법입니다.
이때 사용하는 스타일 시트를 "문맥선택자"라고 합니다.
사용법은 아래와 같습니다.
<head>
<style type="text/css">
p b { color:red }
</style>
</head>
<body>
<p> 안녕하세요! <b>♡카멜롯™♡의 소스천국 태그피아</b></p>
</body>
좌측 html강좌에 나온 스타일시트는 부족한 부분이 만아서 다솜지기님 홈에서 발췌해온 것입니다.
분량이 상당히 많기 때문에 천천히 읽어보도록 하세요. 만은 도움이 될겁니다.
스타일 시트가 필요한 가장 큰 이유는 웹페이지를 보다 깔끔하고 보기 좋게 꾸며 관리하기 쉽게 하는데 있다.
스타일 시트의 가장큰 장점을 든다면 같은 스타일의 문단이 반복적으로 사용될 경우 작업의 속도를 향상시키고
웹 페이지의 용량을 줄일 수 있다는데 있다. 또한 글자의 크기 자간과 행간을 마음대로 조절할 수 있으며 하이퍼
링크의 형태를 다양화 시킬 수 있다.
아무튼 스타일 시트는 현재와 앞으로 웹 페이지를 작성하면서 몰라서는 안될 부분의 하나이다.
스타일 시트를 선언하는 방법은 3가지가 있다.
첫번째는 <head>와 </head>사이에 넣는 방법이다.
아래 예제와 같이 사용한다.
<html>
<head>
<title>스타일 시트 선언하기</title>
<STYLE TYPE="text/css"> [스타일 시트의 시작을 의미한다]
<!--
선택자 스타일 속성1:속성의 값; 스타일 속성2:속성의 갑; ...
//-->
</STYLE>[스타일 시트의 끝을 의미한다]
</head>
<body>
본문내용
</body>
두번째는 HTML태그 내에 삽입하여 선언한다.
<태그 style="스타일 속성1:속성의 값; 스타일 속성2:속성의 값;..">....</태그>
세번째는 외부파일을 이용하여 선언한다.
스타일 시트의 외부 파일의 이름은 확장자가 CSS인 파일을 사용한다.
사용법은 <head>와 </head>사이에 넣는다.
<html>
<head>
<title>스타일 시트 선언하기</title>
<link rel="StyleSheet" HREF="스타일파일의 경로/스타일파일의 이름.css" type="text/css">
<body>
본문내용
</body>
CSS란 Cascading Style Sheet의 약자로서 웹 페이지 제작에 사용되는 HTML의 한계를 보안하기 위해 W3C에서 발표한 것이다.
1바이트 문자인 영어의 경우에는 글자의 여백을 주는 등의 효과를 따로 설정할 필요가 없지만 한글과 같은 2바이트의 문자에는 이것이 불가능하다
따라서 이런 2바이트의 문장의 한계를 보안하기 위해서 생겨난 것이 바로 CSS라 할 수 있다.
□ 스타일 시트의 폰트 관련 속성 □
font-family
값..............c:windowsfonts 디렉토리에 있는 폰트 이름
설명......화면에 나타나는 글씨의 종류를 설정할 때 쓰인다. 시스템에 있는 폰트 이름 중 하나를 사용하면 된다.
예제......P{font-family:Courier New}
기타......만일 윈도우 시스템에 굴림체가 없다면 Arial로 대체 하라는 의미로 다음과 같이 사용할 수도 있다. 참고로, 이것은 제작자의 시스템에는 해당 폰트가 있으나, 다른 사람들의 컴퓨터에는 폰트가 없을 시 아주 유용하게 쓰인다.
P{font-family:굴림,Arial}
font-style
값...........normal,italic,oblique
설명......화면에 나타나는 글씨의 모양, 즉 이탤릭으로 나타낼 것이냐 아니면 오를리크로 나타낼 것이냐를 설정한다.
예제......H1{font-style:italic}
font-weight
값...........normal,bold,border,lighter,100,200,300,400,500,600,700,800,900
설명......글씨의 굵기 설정.일반적인 폰트는 normal 또는 bold만을 지원한다.
예제......H2{font-weight:bold}
font-size
값..........절대값-포인트(pt),센티미터(cm),픽셀(px),인치(in)
상대값- larger,smaller
퍼센트 값 등
설명......글씨의 크기를 설정한다.
예제......H3{font-size:9pt}
□ 스타일 시트의 색깔과 배경 관련 속성 □
color
값...........색깔이름,RGB값
설명......글씨의 색깔을 설정한다.RGB 값,십진수, 색깔의 고유 이름으로도 사용.
예제......EM{color:red}
EM{color:rgb(255,0,0)}
background
값...........transparent,색깔 이름,URL,RBG 값 등
설명......백그라운드 색깔 및 이미지를 설정한다.
예제......P{background:transparent}
BODY{background:red}
BODY{background(pcline.gif)}
□ 스타일 시트의 텍스트 문자 관련 속성 □
word-spacing
값..............normal,길이
설명......단어와 단어 사이의 공간을 얼마나 넣어줄 것이냐 하는 속성이다.
예제......H1{word-spacing:0.4cm}
letter-spacing
값...........normal,길이
설명......word-spacing과는 다르게,글자와 글자 사이에 공간을 얼마나 넣어줄 것이냐 하는 속성이다.
예제......H1{letter-spacing:0.4cm}
text-decoration
값...........none,underline,overline,line-through,blink
설명......글자 또는 문자열을 어떻게 꾸며줄까 하는 것이다.
예를 들어, Link에 및줄을 없애고 싶다고 할 때
text-decoration:none과 같은 용법을 사용할 수 있다.
예제......A:link{text-decoration:none}
text-indent
값...........길이,퍼센트값
설명......얼마나 좌측에서 들여쓰기(indentation)를 할 것인가를
설정한다.
예제......P{text-indent:3m}
line-height
값...........숫자,길이,퍼센트값
설명......두줄 사이의 간격을 설정한다.
예제......DIV(line-height:1.2cm}
□ 스타일 시트의 레이아웃 관련 속성 □
margin-X
속성......margin-top, margin-right, margin-bottom, margin-left 등
값..........길이,퍼센트값,auto
설명......해당하는 내용의 위, 오른쪽, 아래, 왼쪽 등의 여백을 설정한다. 일반 워드 프로세서에서의 위아래, 좌우 여백 설정을 하는 것처럼 설정하면 된다.
예제......BODY{margin:1cm 2cm 3cm}
기타......여백 속성을 각각 상하좌우로 설정해 줄 수도 있지만, 위의 예제처럼 margin이라는 하나의 이름으로도 묶어서 설정할 수 있다. 이 때 속성값은 네개를 가지는데, 순서는 Top, Right,Bottom,Left의순서이다. 만일 속성값이 하나라도 상하 좌우를 모두 해당 값으로 설정하고, 속성값이 두개라면 첫번째 값은 Top과 Botttom,두번째 값은 Right와 Left의 값이 된다. 만일 속성값이 세 개라면 모자라는 속성값은 반대쪽 즉,마지막의 속성값은 Left이므로 Right에 설정돼 있는 값으로 설정된다.
padding-X
속성......padding-top,padding-right,padding-bottom,padding-left 등
값...........길이,퍼센트값,auto
설명......텍스트나 이미지 등에 있어서 border(테두리)와 내용간의 빈 공간을 얼마나 넣어줄 것인가 설정한다.
예제......H1{padding:1cm 2cm}
기타......margin과 마찬가지로 padding이라는 하나의 이름으로 속성을 묶어서 사용할수 있다.
border-X
속성......border-top,border-right,border-bottom,border-left
값...........thin,medim,thick,길이값,none,dotted,dashed,solid,double, groove,ridge,insert,outset
설명......border값을 얼마나 줄 것인가 설정한다.
예제.....P{border:solid}
기타.....margin과 마찬가지로 border라는 하나의 이름으로 속성을 묶어서 사용할 수 있다.
□ 스타일 시트의 클래스와 id관련 속성 □
스타일 시트를 정의 할때 상황에 따라 다른 스타일을 적용하고 싶을 때가 있을겁니다.
특정 부분마다 다른 스타일시트를 적용하고 싶을때 클래스나 id속성을 이용합니다.
즉 특정 부분만 묶어서 사용한다고 보심 편합니다.
# 클래스 속성
각각 다른 a 태그 설정으로 구분하여 줍니다.
a.a1 { ~ }
a.a2 { ~ }
위와 같이 스타일 시트에 삽입하고 불러올 때는 아래와 같이 불러옵니다.
class="a1"
class="a2"
ex)
<head>
<style type="text/css">
font { color:red }
font.style1 { color:blue }
font.style2 { font-size:20; color:green }
</style>
</head>
<body>
<font> 폰트 태그에 스타일 시트를 적용 </font><br>
<font class="style1"> 클래스 속성을 이용한 폰트 태그 스타일 </font><br>
<font class="style2"> 클래스 속성을 이용한 폰트 태그 스타일 2 </font><br>
</body>
# id속성
id속성을 사용할 경우는 id속성 선택자 "#" 을 사용합니다.
a#a1 { ~ }
a#a2 { ~ }
위와 같이 스타일 시트에 삽입하고 불러올 때는 아래와 같이 불러옵니다.
id="a1"
id="a2"
ex)
<head>
<style type="text/css">
font { color:red }
font#style1 { color:blue }
font#style2 { font-size:20; color:green }
</style>
</head>
<body>
<font> 폰트 태그에 스타일 시트를 적용 </font><br>
<font id="style1">id 속성을 이용한 폰트 태그 스타일</font><br>
<font id="style2">id 속성을 이용한 폰트 태그 스타일 2</font><br>
</body>
□ 스타일 시트의 문맥 선택자 □
p 태그안의 b 태그가 사용되는 공간은 빨간색으로 표현하고싶다.
이럴 때 쓰는 방법입니다.
이때 사용하는 스타일 시트를 "문맥선택자"라고 합니다.
사용법은 아래와 같습니다.
<head>
<style type="text/css">
p b { color:red }
</style>
</head>
<body>
<p> 안녕하세요! <b>♡카멜롯™♡의 소스천국 태그피아</b></p>
</body>
'인터넷관련' 카테고리의 다른 글
| iframe / 투명 아이프레임 / 불투명 아이프레임 (0) | 2008.01.18 |
|---|---|
| 이미지 하이퍼 링크시 border=0을 스타일시트로.... (0) | 2008.01.18 |
| SELECT 메뉴의 배경색 및 폰트색상을 다르게 (0) | 2008.01.18 |
| 그림문자 (0) | 2008.01.18 |
| 테이블 프레임(frame) 형태 지정하기 (0) | 2008.01.18 |
| 글자/단어 간격을 입맛대로 바꾸자. (0) | 2008.01.18 |
| 링크를 새창 or 현재창으로 선택해서 열게하자 (0) | 2008.01.18 |
| 인풋태그에 지정된 텍스트 글자수 이상이 되면 다음 인풋태그로 커서가 이동. (0) | 2008.01.18 |
