CSS Property Value   CSS 속성 값

(2017-09-04)

CSS 속성, rgb, rgba

1. CSS 구문 형식(선택,속성,값) 및 속성 종류구문 형식 :  selector { property1 : value1 ; property2 : value2 ; ... }
     - selector          => CSS 선택자 
     - property : value  => CSS 속성 값의 지정 방법 (속성명 : 값)
        . 속성명 바로 뒤에 콜론(:) 을 붙인 후 그 값을 적음
     - 만일, 다수를 지정하려면 각각 사이에 세미콜론(;)으로 분리함

  ㅇ 주요 속성 :  일반, 색상, 페이지 레이아웃, 박스, 기타


2. CSS 속성 값  [ 일반 : 배경,글꼴,텍스트효과 등 ] 

  ㅇ 배경 (Background)              :  { background : 값 }
     - 단축형 지정 例)  { background : #ffbc53 url(test.gif) no-repeat }

     - background-color  : 배경색
     - background-image  : 배경 이미지
        . 이미지 포멧 : PNG, JPEG, GIF
        . 형식 : url(이미지 파일 url 주소)
     - background-repeat : 배경 이미지 반복 (마치 타일 처럼 보임)
     - background-attachment : 요소와 함께 스크롤 또는 고정 여부
     - background-position X Y : 배경 이미지 위치 (좌측 상단이 기준 위치)

  ㅇ 서체/글꼴 (Font)                    :  { font : 값 }
     - 단축형 지정 例)  { font : bold italic 24pt helvetica }

     - font-family  : 글꼴(서체 유형)
        . [참고 #1] 영문 서체 주요 유형 
           .. serif 유형      : Times, Time New Roman, Georgia 등
           .. sans-serif 유형 : Arial, Heltvetica, Verdana 등
        . [참고 #2] 일반 텍스트가 아니고, 프로그램 소스 형태로 보이려면,
                    font-family: monospace 가 바람직
     - font-size    : 글꼴 크기
        . 서체 크기 단위 구분 : % => 백분율, em => 현 글꼴 크기의 배수, px => 픽셀
     - font-weight  : normal (보통), bold (강조)
     - font-height  : 글꼴 높이
     - font-style   : normal, italic(oblique)

  ㅇ 텍스트 효과 (Text)             :  { text : 값 }
     - text-decoration
        . none (없음), underline (밑줄), overline (윗줄), line-through (가운뎃줄,취소선),
          blink (깜박거림, 대부분의 웹브라우저에서는 이에 무 반응)
     - text-shadow     : 4개 요소로 그림자 표현
        . horizontal offset (수평 분리), vertical offset (수직 분리), bluerriness (번짐),
          color (그림자색)
     - text-indent     : 들여씀
     - letter-spacing  : 글자 간격
     - word-spacing    : 단어 간격

  ㅇ 여백 (Margin)                  : { margin : 값 }
     - margin-top
     - margin-right 
     - margin-left
     - margin-bottom

  ㅇ 테두리 (Border)                : { border : 값 }                      ☞ w3schools.com
     - 단축형 지정 例) { border : solid black 5px; } // 두꺼운 검은색의 5 픽셀 테두리
     - border-width
     - border-color
     - (top, right, bottom, left)  border-top, border-right, border-bottom, border-left
     - border-style  
        . dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden


3. CSS 속성 값  [ 색상 ] 색상 (Color)                   :  { color : 값 }
     - color 키워드 
        . acua (바다물색), black (검정), blue (파랑), fuchsia, gray, green, lime, maroon,
          navy, olive, orange, purple, red, silver, teal, white, yellow

     - 색상 표현 방식 구분 
        . 키워드 방식               : 例) 백색 => { color : white; }
        . rgb(red,green,blue) 방식  : 例) 백색 => { rgb(100%,100%,100%); },
                                          흑색 => { rgb(0,0,0) }
        . rgba(red,green,blue,alpha 투명도) : 0.0 반투명, 1.0 완전 불투명
        . Hexa 값 방식              : 例) 백색 => #ffffff; 흑색 => #000000;


4. CSS 속성 값  [ 박스 관련 속성 (Box model) ]

  ㅇ box-sizing 속성 : CSS 박스모델에서 박스의 폭,높이를 다르게 계산토록 하는 방식
     - box-sizing : content-box => 기본값(default)으로써, content 영역 만 해당
     - box-sizing : padding-box => (padding + content) 영역 만 포함된 것으로 계산
     - box-sizing : border-box  => (border + padding + content) 영역 
                                   또는 background 영역에 해당

  ㅇ overflow 속성 : 지정된 폭,높이 보다 표시될 내용이 넘칠 때의 동작 방식
     - overflow : visible => 넘친 내용 그대로 표시하는 기본값(default)
     - overflow : scroll  => 항상 스크롤바 나타남
     - overflow : auto    => 넘치면 스크롤바 나타남
     - overflow : hidden  => 넘친 내용이 안보임
        . float된 요소 후면에 경계선,배경색이 나타나지 않도록 레이아웃을 잡을 때에 유용함

 
5. CSS 속성 값  [ 기타 ]리스트(목록) (List style)      :  { list-style : 값; }
     - list-style-type  : none, disc, circle, square, decimal, decimal-leading-zero,
                          upper-alpha, lower-alpha, upper-roman, lower-roman, ...
     - list-syle-position : outside, inside

  ㅇ 컨텐츠 속성                     :  { content : 값; }
     - HTML 문서로 쓰지 않고도, CSS 만으로도 내용 생성 가능,
       가상 선택자(:after,:before)와 함께 사용

  ㅇ 비표준 속성
     - 속성 이름 앞에 붙는 웹브라우저 제조사 접두어 ( Vendor-prefixed Properties)
     - (W3C 표준화 이전에, 웹브라우저별로 독점적인 구현)
        .  -wekit-속성명 : 크롬,사파리 등 Webkit 기반 브라우저
        .  -moz-속성명   : 모질라 파이어폭스 브라우저
        .  -o-속성명     : 오페라 브라우저
        .  -ms-속성명    : IE 브라우저


[웹 디자인] 1. 웹 디자인 2. 스타일 시트 3. CSS 4. CSS 선택자 5. CSS 속성 값 6. CSS 위치 레이아웃

 
        최근수정     참고문헌