자료실
MH 슬라이딩 배너 0....
MH 위젯스타일
prettyphoto - 본문내...
SCM 플레이어 사용법
XE 1.4.4.2버전 이후에...
네비게이션 위젯
IE 버젼별로 css 따로...
문서보기 유저 지정
문하우스 게시판스킨 V...
내용글 출력시 주소창에...
![[레벨:30]](http://moonhouse.co.kr/xe/modules/point/icons/default/30.gif "포인트:266056point, 레벨:30/30"){kind=icon}
|
css 속성 |
설명 |
사용 예 |
| font-family | 글꼴을 설정합니다. | {font-family:굴림,돋움} |
| font-size | 글꼴의 크기를 지정합니다 | {font-size:12pt} |
| font-style | 글꼴의 스타일을 지정합니다 | {font-style:ifalic} |
| font-weight | 글꼴의 두께를 지정합니다 | {font-weight:bold} |
| font-variant | 소문자를 대문자로 지정합니다 | {font-variant:small-caps} |
| letter-spacing | 글자사이의 간격을 지정합니다 | {font-spacing:10pt} |
| line-height | 줄 간격을 지정합니다 | {line-height:170%} |
| color | 글꼴의 색상을 지정합니다 | {color:orange} |
font -famliy 속성은 지정된 태그나 영역의 글꼴을 지정하기 위해 사용된다.
h2{
font-family:"굴림","돋움","Comic Sans MS";
}
굴림 글꼴을 지정하여 만일 굴림 글꼴을 제대로 표시 할수 없으면"돋음" 글꼴을, 그것마저 여의치 않으면 "Comic Sans MS" 글꼴로 표시 하도록 지정한것이다.
font-size 속성은 글꼴의 크기를 지정하는 속성이다.
in cm mm pt pc meduim small x-small xx-small large x-large xx-large 속성등이 있다.
body{
font-size:9pt
}
.title{
font-size:large;
}
body 태그 내의 모든 문자의 크기를 9포인트로 지정하고 그중 class= "title" 특성이 추가돈 태그에 대해서는 9포인트의 1.5배 인 13.5 포인트로 크기로 표시합니다.
font-style 속성은 글자에 기울임 속성을 주기 위한 것으로 font-style 속성에 사용할 수 있는 값은 다음과 같다.
|
속성 값 |
설 명 |
| normal | 아무런 효과를 주지 않습니다. |
| italic | 글자를 이텔릭 체로 표시 |
| oblique | 글자에 기울임 속성을 줍니다. |
font-variant 속성
이속성은 영문 소문자를 대문자로 표시 하기 위해서 사용되는 속성이다.
|
속성 값 |
설 명 |
| normal | 아무런 효과를 주지 않습니다 . |
| small-caps | 소문자를 대문자로 바꾸어 표시합니다. |
font-weght 속성은 글꼴의 두께를 설정하는 속성
|
속성 값 |
설 명 |
| normal | 아무런 효과를 주지 않습니다. |
| bold | 글자에 HTML의 <B>태그를 준것과 같은 두깨로 굵게 표시합니다 |
| bolder | 글자를 조금 더 굴게 표시합니다. |
| ligher | 글자를 조금 더 얇게 표시합니다. |
| 100~900 | 100(아주 앏게)부터900(아주 두껍게) 사이의 숫자를 100단위로 지정할 수 있습니다. |
h2{font-weight:bold;}
.bolder{font-weight:800;}
이 예제는 <H2> 태그를 모두 <B> 태그를 지정한 것과 같은 두께로 굵게 표시하고 class="bolder"특성이 지정된 테그들은 800 정도의 두꺼운 글꼴로 표시합니다.
letter-spacing 속성은 글자와 글자 사의 간격을 조정
H2{letter-spacing:170%}
이 예제는 <H2> 태그의 글자와 글자 사이를 170% 간격으로 넓힙니다.
line-height 이 속성은 줄 간격을 설정하는 속성입니다.
body{line-height:170%}
이 예제는 <body> 태그 내의 모든 문장에 대해서 줄 간격을 170% 지정하여 줄 간격을 조금 넓힙니다.
color 이 속성은 글꼴의 색상을 지정하며 아래와 같은 방법
body{color:DarkGray;}
H2{color:#FFA500;}
이 예제는 <BODY> 태그 내의 모든 글꼴의 색상을 짙은 회색으로 <H2> 태그의 글꼴 색상은 오랜지 색으로 표시 예제에서는 보듯이 color 속성에는 글꼴 이름을 지정하거나 색상 코드를 지정할 수 있다.
css로 문단 모양 바꿔보기
이번에는 css를 이용해서 문단의 모양을 바꿀 수 있는 속성들을 살펴보겠습니다. 먼저 어떤 속성을 사용되는지 알아보겠습니다.
|
css 속성 |
설 명 |
사용 예 |
| text-align | 문단의 정렬 방식을 지정 | {text-align:center} |
| text-decoration | 글꼴에 선을 긋습니다. | {text-decoration:underline} |
| text-indent | 문장에 들여쓰기 합니다. | {text-indent:3px} |
| vertical-align | 문단의 수직 정렬 방식을 지정 | {vertcal-align:middle} |
text-align속성은 문단의 수평 정렬 방식을 지정합니다. 이 속성에 사용할 수 있는 속성 값은 다음 표와 같다.
|
속성값 |
설 명 |
| left | 문단을 원쪽으로 정렬합니다. |
| center | 문단을 중앙으로 정렬합니다. |
| right | 문단을 오른쪽으로 정렬합니다. |
| justify | 문단을 양쪽으로 정렬합니다. |
text-align 속성을 사용하는 방법
p{text-align:center}
모든<P>태그 내의 문장들을 가운데로 정렬합니다.
text-decoration 속성은 문장 내의 글자에 줄을 긋는 속성으로 다음 표와 같은 속성 값들을 사용할 수 있 습니다.
|
속성 값 |
설 명 |
| none | 아무런 효과를 주지 않습니다. |
| underline | 글자에 밑줄에 긋습니다. |
| overline | 글자의 위쪽에 줄을 긋습니다. |
| line-through | 글자의 중간에 줄을 긋습니다. |
| bink | 글자를 깜박이게 합니다. |
text-decoration 속성을 이용하는 방법
A{text-decoration:none;}
A:hover{text-decoration:underline;}
하이퍼링크의 밑줄을 없애고 하이퍼링크에 마우스 화살표를 올리면 밑줄이 다시 나타나게 하는 예제
A:hover는 마우스 화살표를 울려둔 <A>태그를 의미합니다.
text-indent 속성 문단의 일정 간격 들여쓰기 하는 속성이며 앞서 font-size속성에서 살펴보았던 고정 크기 단위와 상대 크기 단위를 이용해서 문단의 들여쓰기 간격을 지정할 수 있습니다.
P{text-indent:10pt}
모든 <p> 태그의 내용을 10포인트 만큼 들여쓰기 합니다.
vertical-align 속성 글자나 이미지의 세로 정렬 방식을 지정하는 속성으로 다음 표와 같은 속성 값을 이용 할 수 있습니다.
|
속성 값 |
설 명 |
| top | 태그나 표의 위쪽을 기준으로 정렬 |
| middle | 태그나 표의 가운데를 기준으로 정렬 |
| bottom | 태그나 표의 아래쪽을 기준으로 정렬 |
| sub | 요소의 아래 청자 위치에서 정렬 |
| super | 요소의 위 첨자 위치에 정렬 |
| text-top | 요소의 위쪽을 태그나 표의 위쪽을 기준으로 정렬 |
| text-bottom | 요소의 아래쪽을 태그나 표의 아래쪽을 기준으로 정렬 |
IMG {vertical-align-middle:}
<IMG>태그와 함께하는 문장을 수직으로 가운데에 정렬하는 예제입니다.
<HTML>
<HEAD>
<TITLE> css 문단 특성을 지정하자 </TITLE>
<style type="css/text">
body{text-align:justify}
img{vertical-align:middle}
H2{text-indent:20px; text-decoration:underline}
p,div{text-indent:40px}
</style>
</HEAD>
<H2>css 문단 제어의 모든것!!</H2>
<P>css로 글꼴을 제어하는 속성들을 살펴봅시다</p>
<div><img src="list_icon.gif">text-align 속성</div>
<P>text-align 속성은 문단의 수평 정렬 방식을 지정합니다</P>
<div><img src="list_icon.gif">text-indent 속성</div>
<P>text-indent 속성은 문단의 들여쓰기 간격을 지정합니다. 고정 크기
단위와 상대 크기 단위 중 하나를 이용하세요</p>
<BODY>
</BODY>
</HTML>
css로 문서 배경 처리 하기
|
css 속성 |
설 명 |
사용 예 |
| background-color | 배경 색을 지정 | {background-color:black} |
| background-image | 배경 이미지를 지정 | {background-image('icon.gif')} |
| background-repeat | 배경 이미지의 반복 속성 지정 | {background-repeat:no-repeat} |
| background-attachment | 배경 이미지의 고정 속성 지정 | {background-attachment:fixed} |
| background-position | 배경 이미지의 위치를 지정 | {background-position:center} |
모두 배경 이미지와 관련된 속성
backgroud-color 속성 HTML 문서나 태그의 베경 색을 지정하는 속성
H2{background-color:Navy}
이코드는 <H2> 태그의 배경 색상을 짙은 파란색으로 표시합니다.
background-image속성 HTML 문서나 태그에 배경 이미지를 지정하는 속성
DIV{background-image:url('../icon.gif');}
BODY{background-image:url('back.gif');}
태그에 현재 파일과 동일한 폴더에 있는 back.gif라는 이미지를 사용하고 <DIV>태그에는 현제 파일이
위치한 폴더의 상위 폴더에 있는 icon.gif라는 이미지를 파일을 사용합니다.
background-repeat 속성을 이용하여 지전된 배경 이미지가 반복되는 방법을 지정하는 속성입니다.
| 속성 값 | 설 명 |
| repeat | 기본 값으로 배경 이미지가 계속 반복 |
| repeat-x | 배경 이미지가 수평 방향으로만 반복 |
| repeat-y | 배경이미지가 수직 방향으로만 반복 |
| no-repeat | 배경이미지가 반복되지 않습니다. |
body{
background-imge:url('list_icon.gif');
background-repeat:repeat;
}
background-repeat 속성을 repeat로 설정한 경우 다음 그림과 같이 배경 이미지가 반복된다.
<HTML>
<HEAD>
<TITLE> css로 배경제어하기 </TITLE>
<style type="text/css">
body{
background-image:url('list_icon.gif');
background-repeat:repeat;
}
</style>
</HEAD>
<BODY>
<h2>background-repeat:repeat</h2>
</BODY>
</HTML>
이예제는 전체적으로 배경화면이 list_icon.gif 파일로 가득차보인다.
<HTML>
<HEAD>
<TITLE> css로 배경제어하기 </TITLE>
<style type="text/css">
body{
background-image:url('list_icon.gif');
background-repeat:repeat-x;
}
</style>
</HEAD>
<BODY>
<h2>background-repeat:repeat-x</h2>
</BODY>
</HTML>
이예제는 수평으로 list_icon.gif 그림이 퍼져보인다.
<HTML>
<HEAD>
<TITLE> css로 배경제어하기 </TITLE>
<style type="text/css">
body{
background-image:url('list_icon.gif');
background-repeat:repeat-y;
}
</style>
</HEAD>
<BODY>
<h2>background-repeat:repeat-y</h2>
</BODY>
</HTML>
이 예제는 list_icon.gif 그림이 수직으로 펴져보인다.
<HTML>
<HEAD>
<TITLE> css로 배경제어하기 </TITLE>
<style type="text/css">
body{
background-image:url('list_icon.gif');
background-repeat:no-repeat;
}
</style>
</HEAD>
<BODY>
<h2>background-repeat:no-repeat</h2>
</BODY>
</HTML>
이예제는 list_icon.gif 그림 파일이 전혀 반복하지 않습니다.
background-attachment 속성은 배경 이미지의 고정 방법을 지정합니다. 즉 배경 이미지가 HTML 문서를 스크롤 할 떄 따라 움직일 것인지 아니면 계속해서 현제 위치에 고정된 형태로 보여질 것인지를
지정하는 속성으로 사용 가능한 속성 값은 다음 표와 같습니다.
|
속성 값 |
설 명 |
| Fixed | 배경이미지가 현제 위치에 고정되어 나타남 |
| Scroll | 배경이미지가 HTML 문서의 스크롤 크기에 따라 함께 스크롤됩니다. |
body{background-attachment:fixed;}
background-positon 속성 배경 이미지의 위치를 지정 할 수 있는 속성 입니다. 앞서
background-repeat 속성에서 no-repeat 속성 값을 설정하면 배경 이미지가 반복되지 않는데 이 경우
배경 이미지는 왼쪽 상단에 보여지게 됩니다. 이 배경 이미지를 위치를 바꾸자고자 할 때 background-position 속성을 사용하며 사용 가능한 속성 값은 다음 표와 같습니다.
|
속성 값 |
설 명 |
| bottom | 문서의 아래쪽에 나타납니다. |
| left | 문서의 왼쪽에 나타납니다. |
| right | 문서의 오른쪽에 나타납니다. |
| top | 문서의 위쪽에 나타납니다. |
| 픽셀단위 지정 | 배경 이미지가 지정된 픽셀만큼 떨어져서 나타납니다. |
| %단위 지정 | 배경 이미지가 브라우져의 크기에서 지정된 %만큼 떨어져서 나타납니다. |
body{background-position:[가로위치][새로위치]}
<html>
<head>
<title>CSS로 배경 이미지 제어하기</title>
<style type="text/css">
body {
background-image:url('back.gif');
background-repeat:no-repeat;
background-position:80% 50%;
}
</style>
</head>
<body>
</body>
</html>
![[레벨:5]](http://moonhouse.co.kr/xe/modules/point/icons/default/5.gif "포인트:2390point (14%), 레벨:5/30"){kind=icon}
happycomp
