CSS Property Value   CSS 속성값

(2019-08-22)

CSS 수치, CSS 단위, 속성값, CSS 단축형

1. CSS 속성

  ㅇ 수치 (단위 값) 지정 방식                   ☞ CSS 폰트(font-size: 글꼴 크기) 참조
     - 상대 값 (부모 요소와의 비교)
        . em : 부모 요소 크기와의 상대 배수 값 (기본 1 : em은 W3C에서 권고하는 방식임)
        . rem : 부모 요소가 아닌 최상위 루트 요소 크기와의 상대 배수 값
        . %  : 부모 요소 크기와의 백분율 (기본 100%)
        . ex : 부모 요소 폰트의 소문자 크기와의 상대 값
     - 상대 값 (화면해상도에 따른 비교)
        . px : 픽셀 (한편, 폰트 크기는 기본 16px 임)
           .. 픽셀이란, 미리 물리적으로 정해진 크기가 아니고,
           .. 모니터 화면해상도에 따라 달라지는 상대적인 크기임
     - 상대 값 (뷰포트에 따른 비교)
        . vw,vh : 뷰포트 너비(vw),높이(vh) 값의 100분의 1 단위 (%)
     - 절대 값
        . pt : 포인트 (1 pt = 1/72 inch = 0.3528 mm, 아래 inch,cm 보다 더 세밀하여 많이 쓰임)
        . in : 인치 (1 in = 2.54 cm)
        . cm : 센티미터 (1 cm = 10 mm)

  ㅇ 키워드 지정 방식 : 굉장히 많음
     - color : acua (바다물색), black (검정), blue (파랑), fuchsia, gray, ...
     - font-size : xx-small, x-small, small, medium, large, x-large, xx-large, ...
     - position : static, relative, absolute, fixed
     - border-style : dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden


2. CSS 속성 값이 여럿일 경우의 단축형 표현font 단축형
     - { font : font-style font-variant font-weight font-size/line-height font-family; }
  ㅇ margin,padding 단축형
     - 4개 값 => { margin : top right bottom left }
     - 3개 값 => { margin : top right&left bottom }
     - 2개 값 => { margin : top&bottom right&left }
     - 1개 값 => { margin : top&bottom&right&left }
  ㅇ border 단축형
     - { border-width border-style(required) border-color }


[CSS] 1. CSS 2. CSS 선택자 3. CSS 속성 4. CSS 속성값 5. CSS 박스 모델 6. block,inline 요소 유형 7. CSS 색상 8. CSS 배경 9. CSS 위치 10. CSS 정렬 11. CSS 텍스트 12. CSS 폰트 13. CSS 리스트 14. CSS @ 규칙 15. CSS 그림자 16. CSS 시간 변형 17. CSS 2차원 변형

 
        최근수정     요약목록     참고문헌