준비학습 2: CSS 11장. CSS 12장. 이미지, 목록, 하이퍼링크 스타일

Presentation on theme: "준비학습 2: CSS 11장. CSS 12장. 이미지, 목록, 하이퍼링크 스타일"— Presentation transcript:

1 준비학습 2: CSS 11장. CSS 12장. 이미지, 목록, 하이퍼링크 스타일
13장. 테두리, 폼 양식 관련 스타일과 레이어 14장. 필터 효과와 CSS 활용하기

2 CSS 개요와 삽입법 선택자 글꼴/문단 관련 스타일

3 CSS – 개요 Cascading Style Sheets의 약자 “계단형 스타일시트”라고 한다.
CSS의 표준화 작업과 신기술 및 팁을 제공하는 W3C에서 1996년 CSS레벨1 발표 1998년 CSS레벨2 발표 W3C

4 홈페이지 제작 시간을 감소시키고 문서의 용량을 줄여준다. 기존 홈페이지의 개념을 넘는 DHTML, XML의 기초가 된다.
CSS – 사용 목적 HTML의 제약성에서 탈피한다. 홈페이지 전체에 통일감과 일관성을 유지한다. 홈페이지 제작 시간을 감소시키고 문서의 용량을 줄여준다. 기존 홈페이지의 개념을 넘는 DHTML, XML의 기초가 된다.

5 CSS – 삽입법 3가지 태그 내부 삽입형(In-line style) 문서 내 지정형(Embedding style)
<Styel type="text/css"> <!-- 스타일내용 //--> </Style> 외부 문서 삽입형(link style) <link rel=stylesheet href="스타일 외부 파일 전체경로" type="text/css">

6 CSS – 선택자의 종류 기본 형식 <Style type="text/css"> 태그 선택자 또는 ‘type 선택자’
선택자{속성:값} </Style> 태그 선택자 또는 ‘type 선택자’ 클래스(class) 선택자 아이디(ID) 선택자 복수 선택자 자손(descendant) 선택자 태그 선택자와 클래스 선택자 연계 태그 선택자와 아이디 선택자를 연계 가상클래스 선택자

7 CSS – 클래스 선택자와 아이디 선택자 구분 클래스 선택자 아이디 선택자 시작기호 .(마침표) #(hash) 속성명
class Id 역할 문서에서 주로 사용되는 서식을 클래스명으로 지정하여 문서에 통일감을 준다. 스크립트로 아이디에 지정된 스타일의 속성을 변경할 수 있어 DHTML로 가는 관문 역할을 한다. 주된용도 문서를 꾸며준다. 레이어의 동작을 제어한다. 주 사용태그 <p> <div> <span> 등 <div> 등 적용범위 여러 개의 태그에 적용 가능하다. 하나의 태그에만 적용하여 사용한다. 공통점 이름은 사용자가 임의로 지정한다. 태그에 제한 없이 어느 태그에서나 사용 가능하다.

8 기본 형식 사용 예 CSS – 가상클래스 선택자 A:지정자{속성:값;} a:link{text-decoration:none}
a:visited{text-decoration:none} a:hover{text-decoration:underline}

9 CSS – 글꼴 꾸밈 관련 스타일 속성 설명 값 color 글자색 Navy, #ffffcc font-size 글자크기
xx-small, x-small, small, medium, large, x-large, xx-large,smaller, larger,20px, 20pt, 20%, 80% font-family 글자체 Serif, cursive, fantasy, monospace, 굴림, 돋움,궁서체 font-weight 글자굵기 100, 200, 300, 400, 500, 600, 700, 800, 900 normal, bold, lighter, bolder font-style 글꼴모양 normal, oblique, italic text-decoration 글꼴장식 none, underline, overline, line-through text-transform 대소문자 Capitalize, lowercase, uppercase font-variant 소문자크기 small-caps font-stretch 글자폭 Condensed, expanded

10 CSS – 문단 관련 스타일 속성 설명 값 text-align 수평 정렬 left, center, right, justify
vertical-align 수직 정렬 baseline, top, middle, bottom, text-top, text-bottom, super, sub, 실수 값+단위, % line-height 행간 실수 값+단위, % letter-spacing 자간 word-spacing 단어와 단어 사이의 간격 text-indent 들여쓰기 white-space 공백, 탭, 줄 바꾸기에 대한 처리 normal, pre, nowrap