[CSS]css 속성 표기법

목차

css 속성 표기법

padding-top: 0px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 10px;
==> padding: 0px(위); 20px(오른쪽); 30px(아래); 10px(왼쪽);
padding과 margin 둘다 같은 속기법 사용 가능
만일 padding이나 margin이 모든 방향에서 같은 값을 가지면 padding: 20px(위, 오른쪽, 아래, 왼쪽 모두 같은 값) 이런식으로 작성할 수 있음
padding이나 margin을 단축하는 또 다른 방법:

위아래가 동일하고 우측과 좌측이 동일한 경우 ==> padding: 0px(위, 아래) 20px(우,좌);
속기법 암기를 위해서는 속기법 순서가 시계방향으로 된다고 생각..위 -> 오른쪽 -> 아래 -> 왼쪽

• border 속성은 margin이나 padding보다 더 유연한 속기법:
  border-width: thin;
  border-style: solid
  border-color: red
  ==> border: solid thin red(순서 변경가능);
  
  
• 배경에 대한 속기법
  background-color: white;
  background-image: url(images/image.gif);
  background-repeat: repeat-x;
  ==> background: white url(images/image.gif) repeate-x(순서 변경 가능);
  속기법을 사용하는 이유? CSS 파일의 크기를 줄여주는 이점이 있고, 입력내용을 줄여 빨리 작성 가능, 하지만 정확하지 않은 값으로 작성할 경우 디버그하기 좀 더 어려운 단점이 있으니 잘 사용할 것을 권장
  
  
• 의사클래스(pseudo-class)
  CSS에서 의사클래스는 선택하고자 하는 HTML요소의 특별한 '상태(status)'를 명시할 때 사용
  문법: 선택자:의사클래스이름 {속성: 속성값;} ex)a선택자의 의사클래스 사용 예제
  a:link {color: green} ==> 이 선택자는 방문하지 않은 상태일 때의 링크에 적용됨
  a:visited {color: red;} ==> 이 선택자는 방문했을 때의 링크에 적용됨
  a:hover {color: blue;} ==> 이 선택자는 마우스를 링크에 올려 놓을 때 적용됨
  그밖에 많은 의사 클래스 종류가 있음

테이블에서의 의사클래스 ==> nth-child
css에서 선택자:nth-child(even) or 선택자:nth-child(odd) 이런식으로 하고 배경색을 바꾸거나 하는데 사용
tr:nth-child(odd) {background-color: green;} ==> 홀수문단만 녹색 배경 적용
혹은 숫자 n을 이용하는 간단한 표현식으로도 가능 ==> tr:nth-child(2n) or (2n+1) {background-color: green;}
li요소 스타일 꾸미기
li요소에 사용자 정의 마커 사용하는 방법
css의 list-style-image 속성을 사용해서 이미지를 마커로 설정할 수 있음
li {list-style-image: url(images/image.gif)}