CSS Attributes

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 : 사각형)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s