CSS의 간단한 속성이나 팁

Cascading Style Sheet의 약어.

 css 속성

• color : 텍스트 엘리먼트의 폰트 색 설정
• font-weight : 텍스트 굵기 제어
• font-size : 텍스트의 크기를 더 크게나 작게
• font-style : 이탤릭체 등을 설정할 때 
• left : 왼쪽에서 얼마나 떨어져 있는지 위치 설정
• line-height : 텍스트 엘리먼트에 있는 줄들 사이의 공간설정
• top : 맨위에서 어느 정도 떨어져 있을지를 제어
• background-color : 엘리먼트의 배경색 제어 
• background-image : 엘리먼트 뒤(배경)에 이미지를 넣을 때  
• border : 엘리먼트 주위에 경계선을 넣는다.
• margin : 엘리먼트와 그 콘텐츠의 경계에 공간이 필요할때 
• text-align : 왼쪽 중심 혹은 오른쪽 중심으로 텍스트를 정렬하기 위해서
• letter-spacing : 문자 사이에 공백을 넣는다.

• list-style : 리스트 아이템들이 리스트에서 어떻게 보여지는지 변경할 때 

   

 

 폰트 패밀리

• 산세리프 패밀리 : 세리프에 없는 폰트 보통 컴퓨터 화면에서 보기 쉽게 구성

      - Verdana , Arial Black, Trebuchet MS, Arial, Geneva

• 세리프 패밀리 : 세리프 폰트 신문에서 흔히 볼 수 있는 폰트

      - Times, Times New Roman, Georgia

• 모노스페이스 패밀리 : 일정한 폭의 문자를 가진 폰트 i 와 m의 글자폭이 같다.

      - Courier, Courier New, Andale Mono

• 흘림체 패밀리 : 손으로 쓴 것 같아 보이는 것

     - Comic Sans, Apple Chancery

• 판타지 패밀리 : 화려한 양식의 폰트들

     - Last Ninja, Impact

 

 링크의 상태에 따라 엘리먼트를 꾸미기

   a:link { 방문하지 않은 상태일 때의 링크}

   a:visited{ 방문했을때의 링크}

   a:active{ 방문 중인 텍스트 메뉴}

   a:hover{ 마우스를 링크에 올려놓았을때의 링크}

 

 글꼴과 관련 된 CSS속성

• font-family : 글꼴의 종류를 지정, 속성값:글꼴이름  ex> font-family : 굴림
• font-size : 글꼴의 크기를 지정, 속성값: 글꼴 크기, 단위 ex> font-size : 12pt
• font-style : 보통 모양인지 기울임인지 가정, 속성값:normal, Italic  ex> font-style : Italic
• font-variant : 대문자로의 변환을 지정, 속성값: normal, small-caps ex> font-variant:small-caps
• font-weight : 글자의 굵기를 지정, 속성값:400(normal),bold,bolder,lighter ex> font-weight:bold
• letter-spacing : 글자의 간격을 지정, 속성값:숫자, 단위 ex> letter-spacing:30pt
• line-height : 줄 사이의 간격을 지정, 속성값:숫자, 단위 ex> line-height:20pt

 

 문자열과 관련된 CSS 속성

• text-align : 텍스트의 정렬을 지정, 속) left,right,center,justify(양쪽정렬)   ex)text-align:center
• text-indent : 단락의 들여쓰기를 지정, 속)숫자   ex)text-indent: 20
• text-decoration : 텍스트의 링크 줄을 지정, 속)none, underline, overline, link(깜박임)   ex) text-decoration:none
• text-transform : 영문자의 대소문자를 지정, 속)none,capitalize,(첫대문자),uppercase(대문자),lowercase(소문자) ex) text-transform:capitalize

 

  CSS를 파일로 저장하고 불러와서 작업

    < link rel="stylesheet" type="text/css" href="스타일시트 파일명" >

      ex) html파일 head에 추가 => < link rel="stylesheet" type="text/css" href="index.css" >

 

  스크롤바를 구성하고 있는 7가지 요소

• scrollbar-face-color : 스크롤바의 전체 색상
• scrollbar-arrow-color : 스크롤바 위, 아래에 있는 화살표 색
• scrollbar-track-color : 스크롤바가 움직이는 통로의 색
• scrollbar-highlight-color : 스크롤바 왼쪽과 위쪽의 색
• scrollbar-3dlight-color : 스크롤바 왼쪽과 위쪽 바깥부분의 색
• scrollbar-shadow-color : 스크롤바 오른쪽과 아래쪽 색
• scrollbar-darkshadow-color : 스크롤바 오른쪽과 아래쪽 바깥부분의 색 

   

 

  마우스 포인터 변경

   

     ex) cursor:wait;

 

 Alpha 필터 속성

    <태그 style="filter:alpha(속성)">

    

 

  blur 필터 : 이미지나 글자를 흐릿하게 만드는 필터

    < 태그 style="filter:blur(속성)" >

    

 

 glow 필터 : 지정하는 색으로 번짐 효과

    <태그 style="filter:glow(속성)">