1. 글꼴 관련 스타일 속성
(1) font-size : 수치 ; => 글꼴의 크기 조절
(2) font-family : 글꼴명 ; => 글꼴 타입 조절
(3) font-weight : nomal / bold / 100~900 ; => 글꼴의 굵기 조절
(4) font-style : normal / italic ; => 글꼴의 기울임 조절
(5) color : 색상명 또는 색상코드 ; => 글꼴 색상 조절
2. 글꼴 크기 단위
(1) pt(포인트) => 주로 사용됨.
(2) px(픽셀)
(3) pc(파이카) => (1파이카=12포인트)
(4) in(인치) => (1인치=2.54cm)
(5) cm(센티미터) => (1cm=10mm)
(6) em => 영문 글꼴 높이를 1em
(7) ex => 영문소문자 x 글꼴 높이를 1ex
(8) % => 상위 글꼴을 기준으로 비례함.
3. 글꼴에 장식 효과 스타일
text-decoration : 값 ;
※ 값의 종류 : none / underline / overline(윗줄) / line-through(취소선) / blink(NE)
4. 하이퍼 링크 스타일
(1) a : link => 열어보지 않은 링크 스타일
(2) a : visited => 열어본 링크 스타일
(3) a : active => 링크를 클릭한 순간 스타일
(4) a : hover => 링크 위에 마우스 포인터를 위치하는 순간 스타일
5. 커서 모양 변경 스타일
cursor : 값 ;
※ 값의 종류 : default / hand / move / help / crosshair / text /
n-resize / w-resize / e-resize / s-resize
6. 문서의 여백 스타일
(1) margin-top : 수치 (픽셀) ;
(2) margin-bottom : 수치(픽셀) ;
(3) margin-right : 수치(픽셀) ;
(4) margin-left : 수치(픽셀) ;
※ 한꺼번에 문서 여백 조절 => margin : top right bottom left ; (시계 방향 순)
7. 테두리 스타일
(1) 테두리 모양 => border-style : none, solid, dashed, dotted, double, ridge, groove
(2) 테두리 두께 => border-width
(3) 테두리 색상 => border-color
※ 한꺼번에 테두리 속성 지정 => border : 색상 두께 모양 ;
색상, 두께(픽셀), 모양은 공백으로 구별하며, 순서는 상관없음.
※ 세부위치 지정하여 각각 적용.
border-top, border-bottom, border-left, border-right
※ 한꺼번에 테두리 모양, 두께, 색상 적용.
border-style : top right bottom left ;
border-width : top right bottom left ;
border-color : top right bottom left ; (시계 방향 순)
8. 내용과의 여백 스타일
(1) padding-top : 수치(픽셀) ;
(2) padding-bottom : 수치(픽셀) ;
(3) padding-right : 수치(픽셀) ;
(4) padding-left : 수치(픽셀) ;
※ 한꺼번에 문서여백 조절 => padding : top right bottom left ; (시계방향 순)
9. 수평정렬 스타일
text-align : left / center / right ;
10. 수직정렬 스타일
vertical-align : top / middle / bottom
sub(아래첨자) / super(윗첨자)
11. 줄 간격 스타일
line-height : 수치 ;
(1) 수치에 단위를 표기하지 않을 경우 : 글자 크기에 비례함.
(2) 수치에 단위를 표기할 경우 : 해당 단위로 적용됨.
12. 글자 사이의 간격(자간) 스타일
letter-height : 수치 ;
13. 영문 대소문자 변경 스타일
text-transform : 값 ;
none : 변형하지 않음
capitalize : 첫글자만 대문자
uppercase : 모두 대문자
lowercase : 모두 소문자
14. 배경 그림 스타일
background-image : url("그림파일") ;
15. 배경이미지 반복 스타일
background-repeat : 값 ;
※ 값의 종류 : no-repeat / repeat-x / repeat-y / repeat
16. 배경이미지 고정 스타일
background-attachment : fixed / scroll ;
17. 배경이미지 위치 스타일
background-position : 가로위치 세로위치 ;
18. 스크롤바 스타일 (IE v5.5이상에서만 지원)
scrollbar-face-color : 화살표가 들어있는 박스나 이동박대의 색을 설정
scrollbar-shadow-color : 안쪽(우측, 하단) 색을 설정
scrollbar-highlight-color : 안쪽(좌측, 상단) 색을 설정
scrollar-3dlight-color : 바깥쪽(좌측, 상단) 색을 설정
scrollbar-darkshadow-color : 바깥쪽(우측, 하단) 색을 설정
scrollbar-track-color : 이동줄의 색을 설정
scrollbar-arrow-color : 화살표의 색을 설정(▲, ▼)
19. <span> 태그
텅빈 태그로 특별한 기능이 없이 스타일을 적용할 경우에 사용됨.
(한 줄에 스타일을 적용할 경우에 사용)
20. <div> 태그
특별한 기능이 없이 문단단위로 스타일을 적용할 경우에 사용됨.
<br> 태그처럼 자동으로 라인 스킵(line skip) 기능이 있음.
IE에서 <div> 태그는 레이어를 만드는데 많이 활용됨.
(NE에서는 <layer> 태그를 이용하여 레이어를 만들기도 하지만
브라우저와 상관없이 레이어를 작성하는 태그는 <div> 태그를 사용함)
● 레이어 만들기
(1) 레이어의 크기 조절
width : 수치 ; height : 수치 ; (단위 : 픽셀)
(2) 레이어의 위치 조절
left : 가로위치 ; top : 세로위치 ; (단위 : 픽셀)
(3) 레이어의 우선순위 설정
z-index : 수치 ; (레이어가 여러 개 겹쳐있을 경우 수치가 높은 레이어가 상위에 위치함.)
(4) 레이어 표시유무 지정 1
visibility : hidden(숨김) / visible(표시) => [IE]
visibility : hide(숨김) / show(표시) => [NE]
(5) 레이어 표시유무 지정 2
display : none(숨김) / block(표시) => [IE]
레이어가 차지하는 공간이 없어지고 다시 나타나는 특징이 있음.
(6) 내용이 레이어 크기를 벗어날 경우 내용 표시 조정 스타일
overflow : hidden / visible / scroll
① hidden : 내용이 레이어 크기보다 많을 경우 크기보다 초과된 내용은 숨김.
② visible : 크기보다 초과된 내용을 자동으로 표시함. (기본값)
즉, 레이어의 크기가 자동 확장됨.
③ scroll : 자동으로 레이어에 스크롤바가 생성됨.
(7) 레이어의 이름 지정
<div id="레이어 이름"> ~ </div>
● 자바스크립트로 레이어 객체 호출하기
(1) IE(인터넷 익스플로러)
document.all['레이어 이름'].style
document.all.레이어 이름.style
(2) NE(넷스케이프)
document.layers['레이어 이름']
● 레이어 객체 속성의 자바스크립트식 표현 방법
(1) 레이어의 X좌표 위치
document.all['레이어 이름'].style.left
(2) 레이어의 Y좌표 위치
document.all['레이어 이름'].style.top
(3) 레이어의 숨김(표시) 유무
document.all['레이어 이름'].style.visibility="visible" 또는 "hidden"
(4) 레이어 배경색 지정
document.all['레이어 이름'].style.backgroundColor="색상명"
※ event.clientX == event.x => 마우스 관련 이벤트 발생시 마우스의 X좌표를 반환함.
※ event.clientY == event.y => 마우스 관련 이벤트 발생시 마우스의 Y좌표를 반환함.
※ document.body.scrollLeft => 화면에서 스크롤된 위치의 X좌표
※ document.body.scrollTop => 화면에서 스크롤된 위치의 Y좌표
21. 필터효과
그림이나 글자의 투명도나 블러 효과 또는 그림을 거꾸로 표현하는 등의
효과를 만들어줌. (IE 4.0 이상에서만 지원)
(1) 그림자 효과
filter : shadow (속성 = 값, ...)
※ 속성 => color = 색상명 : 그림자 색상
direction = 방향 : 그림자 방향
(2) 입체 효과 (그로우 효과)
filter : glow (속성 = 값, ...)
※ 속성 => color = 색상명 : 그로우 색상
strength = 수치 : 그로우 강도
(3) 번짐 효과
filter : blur(속성 = 값, ...)
※ 속성 => direction = 방향 : 번짐 방향
strength = 수치 : 번짐 강도
(4) 불투명도 효과
filter : alpha(속성 = 값, ...)
※ 속성 => opacity = % : 불투명도 비율
finishopacity = 수치 : 증감의 끝부분의 불투명도
style = 0 ~3 : 불투명도 모양 (0 : 단일, 1 : 선형, 2 : 원형, 3 : 사각형)