CSS Property Value   CSS 속성 값


   

CSS 속성, rgb, rgba

     (수정일:2017-09-04)

  [웹 디자인]   
  1. CSS 구문 형식(선택,속성,값) 및 속성 종류
    1. 구문 형식 : selector { property1 : value1 ; property2 : value2 ; ... }
      1. selector => CSS 선택자
      2. property : value => CSS 속성 값의 지정 방법 (속성명 : 값)
        1. 속성명 바로 뒤에 콜론(:) 을 붙인 후 그 값을 적음
      3. 만일, 다수를 지정하려면 각각 사이에 세미콜론(;)으로 분리함
    2. 주요 속성 : 일반, 색상, 페이지 레이아웃, 박스, 기타
  2. CSS 속성 값 [ 일반 : 배경,글꼴,텍스트효과 등 ]
    1. 배경 (Background) : { background : 값 }
      1. 단축형 지정 例) { background : #ffbc53 url(test.gif) no-repeat }
      2. background-color : 배경색
      3. background-image : 배경 이미지
        1. 이미지 포멧 : PNG, JPEG, GIF
        2. 형식 : url(이미지 파일 url 주소)
      4. background-repeat : 배경 이미지 반복 (마치 타일 처럼 보임)
      5. background-attachment : 요소와 함께 스크롤 또는 고정 여부
      6. background-position X Y : 배경 이미지 위치 (좌측 상단이 기준 위치)
    2. 서체/글꼴 (Font) : { font : 값 }
      1. 단축형 지정 例) { font : bold italic 24pt helvetica }
      2. font-family : 글꼴(서체 유형)
        1. [참고 #1] 영문 서체 주요 유형
          1. serif 유형 : Times, Time New Roman, Georgia 등
          2. sans-serif 유형 : Arial, Heltvetica, Verdana 등
        2. [참고 #2] 일반 텍스트가 아니고, 프로그램 소스 형태로 보이려면, font-family: monospace 가 바람직
      3. font-size : 글꼴 크기
        1. 서체 크기 단위 구분 : % => 백분율, em => 현 글꼴 크기의 배수, px => 픽셀
      4. font-weight : normal (보통), bold (강조)
      5. font-height : 글꼴 높이
      6. font-style : normal, italic(oblique)
    3. 텍스트 효과 (Text) : { text : 값 }
      1. text-decoration
        1. none (없음), underline (밑줄), overline (윗줄), line-through (가운뎃줄,취소선), blink (깜박거림, 대부분의 웹브라우저에서는 이에 무 반응)
      2. text-shadow : 4개 요소로 그림자 표현
        1. horizontal offset (수평 분리), vertical offset (수직 분리), bluerriness (번짐), color (그림자색)
      3. text-indent : 들여씀
      4. letter-spacing : 글자 간격
      5. word-spacing : 단어 간격
    4. 여백 (Margin) : { margin : 값 }
      1. margin-top
      2. margin-right
      3. margin-left
      4. margin-bottom
    5. 테두리 (Border) : { border : 값 } ☞ w3schools.com
      1. 단축형 지정 例) { border : solid black 5px; } // 두꺼운 검은색의 5 픽셀 테두리
      2. border-width
      3. border-color
      4. (top, right, bottom, left) border-top, border-right, border-bottom, border-left
      5. border-style
        1. dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden
  3. CSS 속성 값 [ 색상 ]
    1. 색상 (Color) : { color : 값 }
      1. color 키워드
        1. acua (바다물색), black (검정), blue (파랑), fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow
      2. 색상 표현 방식 구분
        1. 키워드 방식 : 例) 백색 => { color : white; }
        2. rgb(red,green,blue) 방식 : 例) 백색 => { rgb(100%,100%,100%); }, 흑색 => { rgb(0,0,0) }
        3. rgba(red,green,blue,alpha 투명도) : 0.0 반투명, 1.0 완전 불투명
        4. Hexa 값 방식 : 例) 백색 => #ffffff; 흑색 => #000000;
  4. CSS 속성 값 [ 박스 관련 속성 (Box model) ]
    1. box-sizing 속성 : CSS 박스모델에서 박스의 폭,높이를 다르게 계산토록 하는 방식
      1. box-sizing : content-box => 기본값(default)으로써, content 영역 만 해당
      2. box-sizing : padding-box => (padding + content) 영역 만 포함된 것으로 계산
      3. box-sizing : border-box => (border + padding + content) 영역 또는 background 영역에 해당
    2. overflow 속성 : 지정된 폭,높이 보다 표시될 내용이 넘칠 때의 동작 방식
      1. overflow : visible => 넘친 내용 그대로 표시하는 기본값(default)
      2. overflow : scroll => 항상 스크롤바 나타남
      3. overflow : auto => 넘치면 스크롤바 나타남
      4. overflow : hidden => 넘친 내용이 안보임
        1. float된 요소 후면에 경계선,배경색이 나타나지 않도록 레이아웃을 잡을 때에 유용함
  5. CSS 속성 값 [ 기타 ]
    1. 리스트(목록) (List style) : { list-style : 값; }
      1. list-style-type : none, disc, circle, square, decimal, decimal-leading-zero, upper-alpha, lower-alpha, upper-roman, lower-roman, ...
      2. list-syle-position : outside, inside
    2. 컨텐츠 속성 : { content : 값; }
      1. HTML 문서로 쓰지 않고도, CSS 만으로도 내용 생성 가능, 가상 선택자(:after,:before)와 함께 사용
    3. 비표준 속성
      1. 속성 이름 앞에 붙는 웹브라우저 제조사 접두어 ( Vendor-prefixed Properties)
      2. (W3C 표준화 이전에, 웹브라우저별로 독점적인 구현)
        1. -wekit-속성명 : 크롬,사파리 등 Webkit 기반 브라우저
        2. -moz-속성명 : 모질라 파이어폭스 브라우저
        3. -o-속성명 : 오페라 브라우저
        4. -ms-속성명 : IE 브라우저

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

       최근수정이력     PC 화면