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 화면