CSS Property Value   CSS 속성 값

(2017-06-17)
통신/네트워킹통신이론
선로/전송
통신망 일반
회선교환(PSTN)
무선/이동통신
광통신
인터넷/데이터통신
 > 인터넷/데이터통신 1. 데이터통신망
2. 인터넷
3. 데이터 네트워크 설계

데이터 단위
프로토콜/계층
데이터 링크
TCP/IP
라우팅
인터넷 QoS
인터넷 관리
인터넷 응용
인터넷 기타
패킷교환(PSN)
인터넷 관련 기관
 > 인터넷 응용NetBIOS
DNS
가상단말
FTP
전자메일
VoIP
웹기술
VPN
무선인터넷
전자상거래
개인 컨텐츠
인터넷 기타 응용
 > 웹기술 1. 웹 이란?
2. 하이퍼텍스트

웹 구성
HTTP
웹 언어
웹 식별체계
차세대 웹
웹기술 기타일반
 > 웹 언어마크업 언어
스크립트 언어
DOM,BOM
웹페이지 기능 요소
웹 디자인
 > 웹 디자인 1. 웹 디자인
2. 스타일 시트
3. CSS
4. CSS 선택자
5. CSS 속성 값

     
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 : 값 }
     - 단축형 지정 例) { border : solid black 5px; } // 두꺼운 검은색의 5 픽셀 테두리
     - border-top
     - border-right 
     - border-left
     - border-bottom     


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%); }
        . rgba(red,green,blue,alpha 투명도) : 0.0 반투명, 1.0 완전 불투명
        . Hexa 값 방식              : 例) 백색 => #ffffff; 흑색 => #000000;


4. CSS 속성 값  [ 페이지 레이아웃 ]

  ㅇ 위치 지정 기준 (Position)         : { position : 값; }
     - position : static, relative, absolute, fixed
        . static   : 기본 위치 (디폴트 무 설정과 같음)
        . relative : 기본위치로부터 위치 지정 타입
        . absolute : 위치지정 타입(relative)이 설정된 부모 요소로부터 위치 고정 지정
           .. 부모 박스(relative) 내 포함된 자식 박스의 위치 지정(absolute)에 유용함
           .. 주변 요소의 사라짐/보임 등의 효과를 주는 경우에도, 그 위치 그대로 고정되어 존속
           .. 다른 요소들의 위에 고정되어 보임
        . fixed    : 웹브라우저 창 기준으로 위치 지정 (스크롤 때도 위치 고정)

  ㅇ 실제 위치 지정                    : { top/bottom/right/left : 값; }
     - top    : 상단으로부터 위치
     - bottom : 하단으로부터 위치
     - right  : 우측단으로부터 위치
     - left   : 좌측단으로부터 위치

  ㅇ 요소 상자에 다양한 표현 효과를 줌 : { display : 값; }
     - display : inline, block, inline-bloc, none, list-item, ...
        . block   : 요소를 박스화시켜, 위아래에 줄바꿈이 일어나도록 함
        . inline  : 요소들을 같은 줄에 표시
        . none    : 요소가 페이지에서 완전히 사라지도록 함

  ㅇ 요소 부유화                       : { float : 값; }
     - float : left, right, none
        . left   : 해당 요소를 왼쪽으로 띄워 이동시키기
        . right  : 해당 요소를 오른쪽으로 띄워 이동시키기 
        . none   : float된 요소의 해당 속성 삭제

  ㅇ 부유화된 요소의 좌우 비우기
     - clear : left, right, both, none
        . left   : float된 요소의 왼쪽을 비우기
        . right  : float된 요소의 오른쪽을 비우기
        . both   : float된 요소의 양쪽 모두를 비우기
 

5. 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된 요소 후면에 경계선,배경색이 나타나지 않도록 레이아웃을 잡을 때에 유용함

 
6. 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 속성 값  

 
        최근수정     모바일웹     참고문헌