13장. 테두리, 폼 양식 관련 스타일과 레이어 테두리 관련 스타일 폼 양식 관련 스타일 레이어.

Presentation on theme: "13장. 테두리, 폼 양식 관련 스타일과 레이어 테두리 관련 스타일 폼 양식 관련 스타일 레이어."— Presentation transcript:

1 13장. 테두리, 폼 양식 관련 스타일과 레이어 테두리 관련 스타일 폼 양식 관련 스타일 레이어

2 테두리, 폼 양식 관련 스타일과 레이어 – 테두리 속성 설명 값 border 테두리 지정
border-width 테두리 두께 실수 값+단위, thin, medium, thick 등이 있다. border-style 테두리 형태 none, dotted, dashed, solid, double 등이 있다. border-color 테두리 색 색상명 border-collapse 표현방법 Separate, collapse *표 전용 스타일 Width 넓이 실수 값+단위, % height 높이 padding 내부여백 실수 값+단위 margin 외부여백 background-color 배경색 background-image 배경그림 url("이미지 전체 경로") ime-mode 입력방식 Inactive, active *폼 전용 스타일

3 테두리, 폼 양식 관련 스타일과 레이어 – 레이어 속성 설명 값 레이어에서 주로 사용되는 스타일 속성 (***) z-index
레이어의 계층 순서 정수 값 visibility 보이기 형식 visible, hidden display 레이어 숨기기 display:none float 정렬과 어울림 left, right clear 어울림 해제 left, right,both overflow 스크롤 바 표시 여부 visible, hidden, scroll, auto direction 글자 방향 ltr, rtl 레이어 위치 지정 (***) position 표시 방법 static, relative, absolute, fixed top 시작점의 수직(y)좌표 실수 값+단위, % bottom 끝점의 수직(y)좌표 left 시작점의 수평(x)좌표 right 끝점의 수평(x)좌표

4 테두리, 폼 양식 관련 스타일과 레이어 – 깔끔한 실선 테이블을 만드는 소스
깔끔한 실선 테이블을 만드는 소스 <style type="text/css"> <!-- table{border:solid 1px orange ; border-collapse:collapse;} th{border:solid 1px orange ; background-color:#FFCC66; color:white;} td{border:solid 1px orange ;} --></style>

5 태그에 지정하는 법 스타일 태그로 생성하는 법 테두리, 폼 양식 관련 스타일과 레이어 – 레이어 생성하는 법 2가지
<div id=id명 style=”position:absolute”>레이어안에 들어갈 내용</div> 스타일 태그로 생성하는 법 <style type="text/css"> #id명{position:absolute;} </style> ~~ <div id="id명">레이어안에 들어갈 내용</div>

6 테두리, 폼 양식 관련 스타일과 레이어 – 레이어의 계층 구조와 레이어 right :0 bottom :0 right:0
top:0 left:0 top:0 left:0 bottom :0