전역CSS
페이지 정보
작성자 서방님 댓글 0건 조회 184회 작성일 07-05-28 17:11본문
전역 스타일시트
<HEAD> 태그 내에 <STYLE> 태그를 이용하여 정의
<html>
<head>
<title>스타일 정의</title>
<style type="text/css">
<!-- h1 {font-family:굴림; font-style:italic; }
P {font-family:휴먼매직체; font-size:20pt; }
-->
</style>
</head>
<body> ……</body>
</html>
인라인 스타일시트
각 태그 내에 STYLE 속성으로 정의
<html>
<head>
<title>스타일 정의</title>
</head>
<body>
<h1 style=“font-family:굴림; font-style:italic;” > CSS </h1>
<p style=“font-size:20pt; text-align:center” > 스타일 시트 연습</p>
</body>
</html>
외부 스타일시트
정의된 스타일 시트를 파일로 저장 후 각 문서에서 사용
스타일 시트 파일이름 : *.CSS
<HEAD> 태그 내에서 <LINK> 태그를 이용하여 선언
<link rel="stylesheet" type="text/css" href=“css_filename">
스타일 정의 유형
tag { … } : 해당 태그에 스타일 적용
P {font-family:휴먼매직체; font-size:20pt; }
tag, tag, … tag { … } : 여러 종류의 다른 태그에 같은
스타일 적용
P, B {font-family:휴먼매직체; font-size:20pt; }
tag1 tag2 { … } : tag1 내의 tag2에만 스타일 적용
P B {font-family:휴먼매직체; font-size:20pt; }
클래스를 이용한 스타일 정의
tag.class_name { 속성:속성값; … }
ID를 이용한 스타일 정의
tag#id_name { 속성:속성값; … }
Class를 이용한 스타일 정의
클래스별 스타일 지정
하나의 태그에 여러 가지 종류의 스타일 적용
tag.class_name { 속성:속성값; … }
<html>
<head> <title>스타일 정의</title>
<style type="text/css">
<!-- p.red{font-size:25pt; color:red}
p.blue{font-size:20pt; color:blue} -->
</style> </head>
<body>
<p class=“blue”> 스타일 시트를 이용한 다양한 문서 제작</p>
<p class=“red”> 클래스를 이용한 스타일 정의 </p>
</body>
</html>
Class를 이용한 스타일 정의(2)
클래스별 스타일 지정
하나의 스타일을 여러 가지 태그에 스타일 적용
.class_name { 속성:속성값; … }
<html>
<head> <title>스타일 정의</title>
<style type="text/css">
<!-- .red{font-size:25pt; color:red}
.blue{ font-size:20pt; color:blue} -->
</style>
</head>
<body>
<p class=“blue”> 스타일 시트를 이용한 다양한 문서제작</p>
<h1 class=“red”> 클래스를 이용한 스타일정의 </h1>
</body>
</html>
ID를 이용한 스타일 정의
클래스와 동일 tag#id_name { 속성:속성값; … }
<html>
<head>
<title>스타일 정의</title>
<style type="text/css">
<!-- #red{font-size:25pt; color:red}
#blue{ font-size:20pt; color:blue} -->
</style>
</head>
<body>
<p id=“blue”> 스타일 시트를 이용한 다양한 문서제작</p>
<h1 id=“red”> 클래스를 이용한 스타일정의 </h1>
</body>
</html>
글자 관련 스타일 속성
글꼴 지정 font-family : 글꼴1, 글꼴2, …
글자크기 지정 font-size : 크기(숫자+단위)
글꼴의 스타일 font-style : normal, italic
글자의 굵기 font-weight : normal, bold
글자간격 지정 letter-spacing : 숫자px
글자색상 지정 color : 색상
글자꾸밈효과 지정 text-decoration : none, underline, line-through, overline
가로방향 정렬 text-align : left, center, right
세로방향 정렬 vertical-align : top, middle, bottom
들여쓰기 text-indent : 숫자px
줄 간격 line-height : 숫자px
줄바꿈 방지 white-space : normal, nowrap
대소문자 설정 text-transform : uppercase, lowercase, capitalize
배경색 지정
background-color : 색상
배경 이미지 관련 속성
배경 이미지 삽입 background-image : url(‘image_url’)
배경 이미지 반복 지정 background-repeat : repeat, no-repeat, repeat-x, repeat-y
repeat : 배경 이미지를 반복
no-repeat : 배경 이미지를 반복하지 않음
repeat-x : 배경 이미지를 가로로 반복
repeat-y : 배경 이미지를 세로로 반복
배경 이미지 위치 지정
background-position : Lpx Tpx
L : 왼쪽 여백, T : 위쪽 여백
배경 이미지 고정
background-attachment : scroll, fixed
박스 관련 스타일
CSS의 각 요소가 가지는 영역
HEIGHT, WIDTH : 박스의 크기 지정
<HTML>
<HEAD>
<title>스타일 정의</title>
<style type="text/css">
<!-- .small { height:10px; width:30px;}
.big { height:20px; width: 60px ;}
--> </style> </HEAD>
<body>
<p>박스관련 스타일 연습</p>
<input type="text" class="small"><br>
<input type="text" class="big">
</body>
</HTML>
박스 외곽선 스타일 지정
BORDER-TOP-STYLE, BORDER-BOTTOM-STYLE, BORDER-LEFT-STYLE, BORDER-RIGHT-STYLE
속성
none : 기본 값, hidden : 외곽선 숨김
solid : 실선, double : 두 줄
groove : 선이 안쪽으로 들어간 느낌
ridge : 선이 밖으로 튀어나온 느낌
inset : 내용이 안으로 들어간 느낌
outset : 내용이 밖으로 나온 느낌
dashed : 긴 점선, dotted : 짧은 점선
박스 외곽선과 글자와의 여백 지정
PADDING-TOP, PADDING-BOTTOM, PADDING-LEFT, PADDING-RIGHT
박스 외곽선 두께 관련 스타일
BORDER-TOP-WIDTH, BORDER-BOTTOM-WIDTH,
BORDER-LEFT-WIDTH, BORDER-RIGHT-WIDTH
BORDER-WIDTH : 한꺼번에 지정
박스 외곽선 색상 관련 스타일
BORDER-TOP-COLOR, BORDER-BOTTOM-COLOR,
BORDER-LEFT-COLOR, BORDER-RIGHT-COLOR
BORDER-COLOR : 한꺼번에 지정
위치 관련 스타일 속성
개체의 위치 지정
relative : 자기 자신 객체에서의 상대적인 위치 지정
absolute : 브라우저 내에서의 절대적인 위치 지정
레이어 순서 지정
z-index : 레이어의 순서를 지정 (0 ~ n)
객체 숨김 지정
visibility : hidden; visibility : visible
커서의 모양 설정
<style type="text/css">
.my { cursor: 속성 }
</style>
crosshair
default
help
move
hand
text
wait
스크롤 바 관련 색상 지정
scrollbar-face-color 스크롤바 전체 색상
scrollbar-shadow-color 스크롤바 그림자 부분
scrollbar-highlight-color 스크롤바 밝은쪽
scrollbar-track-color 스크롤 트랙
scrollbar-arrow-color 화살표
링크 색상 지정
a:link{ } : 링크 스타일
a:visited{ } : 방문 링크
a:active{ } : active 링크
a:hover{ } : 마우스 오버 시
자바스크립트
문자 관련 스타일 요약
글꼴 지정
font-family : 글꼴1, 글꼴2, …
글자크기 지정
font-size : 크기(숫자+단위)
글꼴의 스타일
font-style : normal, italic
글자의 굵기
font-weight : normal, bold
글자간격 지정
letter-spacing : 숫자px
글자색상 지정
color : 색상
글자꾸밈효과 지정
text-decoration : none, underline, line-through, overline,
글자간격 지정
letter-spacing : 숫자px
정렬 관련 스타일 요약
가로방향 정렬
text-align : left, center, right
세로방향 정렬
vertical-align : top, middle, bottom
들여쓰기
text-indent : 숫자px
줄간격
line-height : 숫자px
줄바꿈방지
white-space : normal, nowrap
대소문자 설정
text-transform : uppercase, lowercase, capitalize
댓글목록
등록된 댓글이 없습니다.
