CSS Property Value   CSS 속성값

(2021-04-03)

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


1. CSS 속성

  ㅇ 수치 (단위 값) 지정 방식                              ☞ CSS 폰트(font-size: 글꼴 크기) 참조
     - 상대 값 (부모 요소와의 비교)
        . em : 부모 요소 크기와의 상대 배수 값
           .. 기본값 : 1em (= 16px) 
           .. em은, W3C에서 권고하는 방식임
        . rem : 부모 요소가 아닌 최상위 루트 요소 크기와의 상대 배수 값
        . %  : 부모 요소 크기와의 백분율 (기본 100%)
        . ex : 부모 요소 폰트의 소문자 크기와의 상대 값
     - 상대 값 (화면해상도에 따른 비교)
        . px : 픽셀 (한편, 폰트 크기는 기본 16px 임)
           .. 픽셀이란, 미리 물리적으로 정해진 크기가 아니고,
           .. 모니터 화면해상도에 따라 달라지는 상대적인 크기임
     - 상대 값 (뷰포트에 따른 비교)
        . vw,vh : 뷰포트 너비(vw),높이(vh) 값의 100분의 1 단위 (%)
        . vmin, vmax : 뷰포트 너비 최소,최대 크기를 정함. 그 크기 이상 커지거나/작아지지 않음.
     - 절대 값
        . 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 속성값 (단위,지정방식)  


Copyrightⓒ written by 차재복 (Cha Jae Bok)
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"