Transcript CSS
CSS
CSS
Cascading Style Sheet
HTML의 기능 확장
일괄 처리, 여러 파일에 적용 가능, 통일성
상위의 기능 상속
관리 용이
브라우저 문제
CSS
<STYLE type=“text/css”>
p {color:blue;}
</STYLE>
p : 선택자(Selector), 스타일 적용 대상
color:blue : 선언문, 적용시킬 스타일
Sample
Selector
<STYLE type=“text/css”>
태그명 {선언문}
</STYLE>
HTML 태그에 적용
Sample
<STYLE type=“text/css”>
.클래스명 {선언문}
</STYLE>
태그의 확장 개념
모든 태그에 적용
class 속성으로 참조
Sample
Selector
<STYLE type=“text/css”>
#name {선언문}
</STYLE>
ID 선택자
Class 와 유사
id 속성으로 참조
Sample
<STYLE type=“text/css”>
태그명 태그명 {선언문}
</STYLE>
문장 선택자, 자식 선택자
Sample
CSS 적용 방식
<STYLE type=“text/css”>
태그명 {선언문}
</STYLE>
Embedded Style Sheet
head 안에 삽입, 문서 전체에 적용
가장 일반적
Sample
Sample - 주석
CSS 적용 방식
<태그 style=“선언문”>…</태그>
Inline Style Sheet
태그에 직접 CSS를 삽입
해당 태그에만 적용
Sample
<LINK rel=“stylesheet” type=“text/css” href=“”>
External Style Sheet
외부 CSS 파일을 문서에 적용
사이트 전체에 통일성
Sample
CSS 적용 방식
<STYLE type=“text/css”>
@import url(“파일명”);
</STYLE>
Imported Style Sheet
<STYLE>태그 바로 아래 기술
다른 스타일 시트보다 우선권
Sample
CSS 상속성
부모 태그가 가지는 영역내의 자식 태그는
부모의 CSS 속성을 상속 (Inheritance)
Sample
Sample – 중복시..
CSS 그룹화
유사한 스타일을 묶어서 반복되는 코드를 절
제하고 원활하게 관리
선택자1, 선택자2, 선택자3..{선언문}
Sample – 선택자 그룹화
속성 그룹화
Sample – 속성 그룹화
가상 클래스
코드상에 존재하지 않지만 가상으로 존재하
는 선택자
A:link
A:visited
A:hover
A:active
되도록 순서대로 기재(hover 문제)
Sample
가상 요소
first-line
적용된 영역의 첫 번째 라인에만 적용
Sample
first-letter
적용된 영역의 첫 번째 글자에만 적용
Sample
Font
글꼴 지정
{font-family : 글꼴명1, 글꼴명2,…}
Sample
글꼴 모양
{font-style : 속성값}
Normal, italic, oblique
Sample
Font
글꼴 두께
{font-weight : 두께값}
normal, bold, bolder, lighter
100~900(normal:400)
Sample
글꼴 대소문자 변경
{font-variant : 속성값}
normal, small-caps
Sample
FONT
글꼴 크기
{font-size : 속성값}
px, pt, in, cm, % 등..
Sample
p331
TEXT
글자 간격 지정
{letter-spacing : 간격}
Sample
글자 장식
{text-decoration : 속성값}
none, underline, overline, line-through,
blank
Sample
TEXT
수직 정렬
{vertical-align : 정렬값}
baseline, sub, super 등..
Sample
대소문자 지정
{text-transform : 변환값}
capitalize, none, uppercase, lowercase
Sample
TEXT
수평 정렬
{text-align : 정렬값}
left, center, right, justify
Sample
들여쓰기
{text-indent : 속성값}
Sample
TEXT
줄 간격
{line-height : 줄 간격}
Sample
색상
요소의 색상
{color : 색상명 or #RGB}
Sample
배경
배경색
{background-color : 색상값}
Sample
배경 이미지
{background-image : URL(경로)}
Sample
배경
배경 이미지 반복
{background-repeat : 속성값}
repeat, repeat-x, repeat-y, no-repeat
Sample - repeat
Sample – repeat-x
Sample – repeat-y
Sample – no-repeat
배경
배경 고정(IE)
배경 위치
{background-attachment : 속성값}
fixed, scroll
Sample
{background-position : 속성값}
%, 수치, top, center, bottom, left, right
Sample
{background : 속성값}
Sample
BOX
여백
{margin-top : 여백 값}
{margin-right : 여백 값}
{margin-bottom : 여백 값}
{margin-left : 여백 값}
Sample
{margin : 속성값 속성값 속성값 속성값}
일괄 지정
Sample
p360
BOX
테두리
{border-style : 속성값}
none, dotted, dashed, solid, double,
groove, ridge, inset, outset
border-top-style / border-right-style /
border-bottom-style / border-left-style
Sample
BOX
테두리
{border-width : 속성값}
border-top-width / border-right-width / borderbottom-width / border-left-width
Sample
{border-color : 색상값}
border-top-color / border-right-color / borderbottom-color / border-left-color
Sample
Sample
BOX
여백
padding-top / padding-right / paddingbottom / padding-left
Sample
{padding : 속성값}
Sample
BOX
위치
{position : 속성값}
static, relative, absolute
p369
Sample – static
Sample – relative
Sample - absolute
BOX
보이기/감추기
{visibility : 속성값}
visible, hidden
Sample
우선 순위
{z-index : 속성값}
요소의 출력결과가 겹쳤을 경우 출력우선순위(단,
absolute일 경우)
Sample
Sample
BOX
Question 1
Question 2
List
목록 스타일 유형
{list-style-type : 속성값}
disc, circle, square, decimal, lower-roman,
upper-roman, lower-alpha, upper-alpha,
none
Sample
목록 스타일 이미지
{list-style-image : URL(이미지 경로)}
Sample
기타
단축키 설정
<태그 accesskey=“사용할 문자”>
Alt + 단축키
Sample
Tab Index
{태그 tabindex=“순서”}
tab 이동 순서
Sample
Favicon
즐겨찾기 아이콘을 원하는 아이콘으로 지정
http://www.microangelo.us/ - 제작툴
<link rel="shortcut icon" href=“home.ico">
Sample
TABLE FRAME
테이블 프레임
<TABLE frame=“속성값”>
void, above, below, hsides, vsides, lhs,
rhs
Sample
XMP
소스를 그대로 화면에 출력
pre 태그와 유사
단, 소스 중 태그도 그대로 출력
Sample
Fieldset
글상자
<fieldset>내용</fieldset>
<fieldset><legend align="center">제목</legend>내
용</fieldset>
<fieldset style="width:300; height:100">크기 바꾸
기</fieldset>
<fieldset style="border:1 solid #9FB6FF">두께, 모
양, 색 바꾸기</fieldset>
<fieldset style="padding:15">여백 넣기</fieldset>
Sample
ScrollBar
스크롤바 제어
<body scroll="no">
<body style="overflow:hidden">
<body style="overflow:auto">
Sample
WRAP
테이블 셀 내의 줄바꿈 제어
<td nowrap> : 테이블의 크기에 상관없이 줄
바꿈 안함
Sample
<td style="word-break:break-all> : 영문이
나 숫자에 의한 테이블 늘어짐을 방지
Sample
Rollover
CSS를 이용한 롤오버 효과
a:hover {position:relative; top:2; left:2}
Sample
Sample
FILTER:ALPHA
투명 테이블 만들기
<table bgcolor="#ffffff"
style="filter:alpha(opacity=80)">
<td bgcolor="#ffffff"
style="filter:alpha(opacity=80)">
Sample
Scrollbar
스크롤바 색상 지정하기
Scrollbar
스크롤바 색상 지정하기
<style type="text/css">
<!-body {
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color: navy;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-shadow-color: navy;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: navy}
-->
</style>
Sample
Cursor