CSS1(Cascading Style Sheets)-속성관련

■ display 속성
    디스플레이 속성은 4가지 값을 갖는다.
    block : 이 속성으로 지정되는 엘리먼트는 새로운 블록상자내에 표시된다. 이 상자에 포함되는 텍스트 블록의 앞과 뒤쪽에는 줄바꿈 제어 문자가 삽입되어 포맷된다. 블록상자에는 패딩, 테두리, 마진 속성으로 상자의 편집이 가능하다. 즉 이 블록은 ㄷ른 블록과 확실히 구분이 되는 Layout을 갖게 된다.( 단 display 속성은 절대 상속을 하지 않는다. 즉 다른 언급이 없는한 내부 엘리먼트는 디폴트값인 inline으로 설정될 것이다.)

<Block 으로 설정되면 위와 같은 모델을 같게되고 각기 값을 설정이 가능하다.>

    inline : 새로운 블록을 만들지 않고 줄바꿈 문자도 삽입되지 않는다. 기본적으로 Default값이다.

    list-item : 블록의 앞부분에 목록 표시 기호가 붙는 것으로 대부분의 웹 브라우저에서는 지원하지 않는다.
    none : none으로 설정하면 포맷을 하지 않는다는 뜻으로 결국 화면상에 출력되지 않는다.

■ 글꼴속성
    font관련되어 5개의 속성이 있다.
    font-family : 엘리먼트의 텍스트에 적용되는 글꼴의 이름을 지정하기 위해 사용된다. 복수개로 글꼴을 설정할 수 있다. 이 경우 ","(컴마)를 구분으로 글꼴을 나열하게 되는데, 왼쪽부터 적용되는 글꼴이고 그 오른쪽 글꼴들은 대체 글꼴이다. 첫번째 글꼴이 없다면 다음 언급된 글꼴을 검색하여 사용한다.

    font-size : 글꼴의 크기를 지정하기 위해서 사용되는데, 그 방식에는 다시 4가지가 있다.
                   - 절대값(absolute size) 지정
                         [xx-small,x-small,small,medium,large,x-large,xx-large] 이 7가지의 키워드를 이용하여 절대값을 지정한다. 키워드간의 글자 크기는 1.5배로 커지거나 줄어든다.
                   - 상대값 지정
                         [smaller, larger] 키워드를 이용해 상대값을 지정한다. smaller는 현재 부모 엘리먼트의 글자 크기보다 상대적으로 더 작은 글자 크기이며, larger는 부모 엘리먼트의 글자 크기보다 더 큰 글자 크기를 지정한다.
                   - 크기 값 지정
                         font-size : 12pt 식으로 바로 크기값을 직접 지정한다. 보통 pt, em,ex, px단위를 사용한다.
                   - 백분율 값 지정
                         부모 엘리먼트의 글자크기에 대한 상대적인 글자 크기를 정할 수 있다.

    font-style : 텍스트 글꼴의 이탤릭체를 지정하기 위해서 사용된다.
                       [italic, oblique, normal] 3가지의 속성이 있다.(첫번째랑 두번째는 거의 비슷함.)

    font-weight : 엘리먼트의 텍스트에 볼드체를 지정하기 위해 사용한다. 다음의 13개 키워드를 지정.
                          [bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900]
                          bolder와 lighter는 부모 엘리먼트에 지정된 글꼴에 대한 상대적인 무게감 정도이고, 100~900범위는 글꼴의 무게감의 크기 순서이다. 400이 normal의 값이고 700이 bold와 같은 값을 갖는다. [상속시 연산된 결과 값으로 상속받는다.]

    font-variant : 텍스트의 문자를 소문자를 대문자로 대체한다.  
                          [small-caps, normal] 속성이 있다. small-caps는 소문자를 대문자로 대체시키고 normal은 원래의 문자 그대로 보여준다. 단 원래 대문자와는 조금 다른 모양으로 보인다.

■ 색상속성
    색상은 이 전에서 언급한 것처럼 색상단위로 속성값을 지정한다. 색상속성값은 상속되어 하위 엘리먼트에서 그대로 적용된다.

■ 배경속성
    

    엘리먼트의 배경은 엘리먼트가 표시되는 영역이다. 위의 포맷팅 모델에서 보면 Border와 content사이의 padding영역이 배경에 해당한다. 테두리의 경우 테두리 속성에서 따로 설정되며, 여백(margin)은 항상 투명하기 때문에 margin은 값으로 두께만 지정이 가능하다.

    CSS표준은 엘리먼트의 배경에 색상이나 이미지를 지정하도록 다음 속성들을 제공한다.
    background-color : 빽그라운드의 색상을 지정한다. 속성값으로는 color와 같은 속성들을 사용한다. 추가로는 transparent 키워드가 있는데 이는 배경색을 투명하게 지정한다. 또한 background-color은 상속되지 않으나, Default값이 transparent(투명하게 함.)이기때문에 부모의 값이 비춰보이게 되어, 상속받은 것 같은 효과를 준다.
    background-image : 배경에 이미지를 삽입한다. 형식은 [background-image:url("URL주소")]이다. 기본적으로는 none값이 들어 있고, 배경색에 앞서 위쪽면으로 출력된다.
    background-repeat : 속성은 [repeat, repeat-x,repeat-y,no-repeat]값을 갖는다. repeat는 수직, 수평으로 반복되고 x는 x축 방향으로만 y는 y축 방향으로만 반복되어 배치된다. 당연히 no-repeat의 값을 같는다면 반복되지 않는다.
    background-position : 배경에 이미지가 지정되었다면 그 위치를 지정이 가능하다.
                                    방식은 3가지로
                                    1) 길이 단위 값지정 :  [수평 위치 값] [수직 위치 값]
                                        ex) background-position: 25mm 15mm
                                    2) 백분율 단위 값 지정 : [수평 위치 값] [수직 위치 값] (전체 길이에 대한 퍼센트이다.)
                                        ex) background-position: 50% 50%
                                    3) 키워드 지정 : [left|center|right] [top|center|bottom]
                                        (전체를 비교해서 left는 왼쪽 top은 상단)
                                        ex) background-positon : right bottom 

■ 텍스트 속성
    word-spacing : 단어 사이의 간격의 크기값을 지정하기 위해서 사용된다. 속성값이 양수인 경우 단어 사이의 간격이 늘어나며, 음수인 경우에는 간격이 줄어든다. nomal로 사용하면 원래의 크기로 사용된다.
    letter-spacing : 문자 사이의 간격을 지정하기 위해 사용되고 속성값은 양수 또는 음수이다. 사용법은 word-spacing과 같다. 단위는 주로 em을 사용함.
    text-align : 엘리먼트 내의 텍스트 정렬방식을 지정하기 위해 사용된다. 블록 수준의 엘리먼트에만 적용된다. 즉 display가 block으로 지정된 엘리먼트에 대해서만 이속성이 사용 가능하다. 속성 값 [left, right, center, justify] 4개가 있다. justify는 양쪽 정렬, 나머지는 단어 뜻과 같다.
    text-indent : 엘리먼트 내에 있는 텍스트의 첫 번째 줄의 드여쓰기를 지정하기 위해 사용된다. 들여쓰기 값은 길이 단위 또는 퍼센티지 단위를 사용하여 지정된다.
    text-height : 엘리먼트 내에 있는 텍스트의 줄간격을 지정하기 위해 사용된다. 속성 값으로는 [숫자, 길이 단위, 백분율 단위, normal 키워드]가 사용된다. 숫자가 사용되면, 텍스트의 줄간격은 숫자를 현재 글꼴의 크기에 곱한 값이 되고 백분율의 경우도 font-size값의 퍼센티지로 계산된다. normal 키워드는 원래의 줄 간격을 사용한다는 의미이다. 주의해야 할 점은 속성에 숫자값이 지정되면 그 값이 바로 상속되나, 길이 단위나 백분율 값이 속성 값일 경우 계산된 값이 상속된다.
    text-decoration : 텍스트에 밑줄과 같은 선 그리기, 깜박이는 장식효과등을 지정할 수 있다. 속성 값으로는 [underline, overline, line-through, blink, none]가 있다.
    vertical-alignment : 위첨자(supescript) 또는 아래첨자(subscript)와 같은 텍스트의 수직 정렬 효과를 지정할 수 있다.이 속성은 display 속성이 inline일 경우에만 적용된다. 속성은 [baseline, sub, super, 백분율]의 4가지가 있다.
    text-transform : 엘리먼트의 텍스트를 대소문자로 변환할 수 있다. 속성은 [capitalize, uppercase, lowercase, none]가 있다. capitalize는 모든 단어의 첫 문자를 대문자로 변환하고, uppercase는 엘리먼트의 모든 문자들을 대문자로 변환하며, lowercase는 엘리먼트의 모든 문자를 소문자로 변환한다. none은 문자 변환을 하지 않는다.
   
■ 상자 속성

CSS에서 엘리멘트의 내용은 상자모델을 사용하여 포맷팅된다. 모델은 위와 같이 표현된다.
이들 상자 속성들은 자식 엘리먼트에 상속되지 않는다. 그리고 으들 속성들은 블록 엘리먼트에만 적용된다. display가 inline으로 설정되어 있다면 적용되지 않는다. block으로 적용되어 있어야 한다.

    margin : margin(여백)은 엘리먼트 주위의 여백을 설정하기 위하여 사용된다. 여백은 4개의 속성을 갖는데 이는 박스 주변의 여백을 지정하기 위해 사용된다. 여백의 디폴트 값은 0으로 설정된다.
                 margin-top : 상단의 여백
                 margin-right : 우측 여백
                 margin-bottom : 아래쪽 여백
                 margin-left : 왼쪽 여백
                 단위로는 길이 단위와 백분율 값이 지정된다. 여백의 속성 값을 지정할 때 약어 형식으로 간략히 표기된다.
                 ex) margin : 2em [네 면의 여백을 2em으로정함]
                       margin : 1em 2em [top과 bottom은 1em으로, right와 left는 2em으로 여백 지정]
                       margin : 1em 2em 3em [top은 1em으로 right는 2em으로 bottom은 3em으로 left는 2em으로 지정한다.
   border-style : 테두리 스타일을 지정한다. 속성은 다음과 같다.
                       [dotted, dashed, solid, double, groove, ridge, inset, outset, none] (주로 dashed와 solid 사용)
                       연속으로 4개까지 지정이 가능한데 이는 top, right, bottom, left의 순서로 테두리 값 지정을 의미한다.
                       만약 속성이 설정되지 않는다면 자신의 반대편(상자개념상, ex:오른쪽의 반대는 왼쪽)의 속성을 그대로 따른다.
   border-width : 테두리의 각 면에 대한 폭을 지정한다. 각각 4가지 속성이 있다.
                        border-top-width : 위쪽 테두리의 두께
                        border-right : 오른쪽 테두리의 두께
                        border-bottom : 아래쪽 테두리의 두께
                        border-left : 왼쪽 테두리의 두께

            속성값으로는 [thin, medium, thick] 3가지가 있다. 그밖에 크기 값의 직접 지정도 가능하다. border-width로 값을 한번에 지정도 가능한데 지정된 값들은 top,right, bottom, left순서로 적용되고 한만 지정되면 모든 두께가 같은 값으로 지정되며, 속성에 값이 두개 또는 세개가 지정되면 지정되지 않은 값은 자신의 반대편의 속성을 따른다. border-style와 같음

   border-color : 네면에 대한 각 테두리의 색상을 지정한다. 적용되는 원리는 border-width 및 border-style와 같다.
   padding : 엘리먼트의 내용 영역 주위에 공간을 추가하기 위하여 사용된다.
                 padding-top : 패딩영역의 상단 부분

                 padding-right : 패딩영역의 우측 부분
                 padding-bottom : 패딩영역의 하단 부분
                 padding-left : 패딩영역의 왼쪽 부분
                 패딩의 디폴트값은 0으로 설정된다. 즉 패딩을 따로 지정하지 않으면 테두리(border)는 엘리먼트의 내용 상자에 붙게 된다. 패딩속성에는 길이 단위와 백분율 단위의 값을 지정한다. 역시 border-width, border-style, border-color와 마찬가지 원칙으로 초기화가 가능하다.
   height, width : 엘리먼트의 상자 모델에서 하나의 상자는 width와 height를 가진다. 폭은 각각 왼쪽과 오른쪽의 여백, 테두리, 패딩, 내용 영역의 합으로 정의된다. 높이도 마찬가지이다. (위의 그림과는 조금 다르다.) 폭과 높이를 조정하기 위해서는 [길이단위 값, 백분율 단위 값, auto 키워드 값]을 이용한다.
                        백분율 값은 부모 엘리먼트에 대한 백분율 값이고, auto 키워드는 디폴트값으로 설정되어 있고 이는 자동으로 웹 브라우저가 엘리먼트의 폭과 높이를 조정한다. (이는 사용자가 웹 브라우저의 폭이나 높이를 변동시킬 수 있는 것에 대한 이유에서 이다.)
                        웹 브라우져는 width 속성에 지정된 엘리먼트의 크기에 맞게 텍스트를 배치한다. 지정된 엘리먼트의 폭을 넘어서는 엘리먼트의 텍스트는 다음줄에 배치된다. 그러나 텍스트가 지정된 엘리먼트의 height를 넘어서면 웹 브라우저는 자동으로 height를 재설정한다. (가로 우선시)  
    float : 두개의 인접한 블록 엘리먼트에서 앞쪽 블록 엘리먼트의 텍스트가 뒤따라 나오는 블록 엘리먼트의 왼쪽 또는 오른쪽 위치에 배치되도록 한다. 속성 값으로는 [left, right, none]가 있다. left로 지정되는 엘리먼트의 텍스트는 그 뒤에 오는 엘리먼트의 왼쪽에 배치된다. right로 지정되는 엘리먼트의 텍스트는 그 뒤에 오는 엘리먼트의 오른쪽에 배치되고, none는 보통의 엘리먼트 출력 형태를 지정한다. 즉, 엘리먼트 바로 아래에 다음 엘리먼트의 텍스트가 배치된다.
    clear : 어떠한 엘리먼트의 왼쪽이나 오른쪽에 float속성을 가진 엘리먼트가 나타나도록 할 것인지를 지정한다. 속성은 [left, right, both, none]가 있다.
              left : 엘리먼트의 왼쪽에 float:left로 지정된 엘리먼트가 나타나지 못하도록 한다. 즉, float:left로 지정된 엘리먼트는 그 다음에 나오는 엘리먼트의 앞쪽에 나타난다.
              right : 엘리먼트의 오른쪽에 float:right로 지정된 엘리먼트가 나타나지 못하도록 한다. 즉, float:right로 지정된 엘리먼트는 그 다음에 나오는 엘리먼트의 앞쪽에 나타난다.
              both : 엘리먼트의 왼쪽과 오른쪽에 float:left와 float:right로 지정된 엘리먼트가 나타나지 못하도록 한다. 즉, float:left나 float:right로 지정된 엘리먼트는 그 다음에 나오는 엘리먼트의 앞쪽에 나타난다.
              none : float속성으로 지정된 엘리먼트가 그 다음에 나오는 엘리먼트의 왼쪽 또는 오른쪽에 표시되도록 한다.



※ 지금까지 언급한 CSS속성은 모두 CSS1.0에 기초한 것들이다. 그렇다고 다음 2.0버전부터 삭제된것은 아니고, 다음버전에도 쓰이는 기본적인 것들에 대해 언급해 보았다.(혹시 다음에 기회가 되면 2.0에서도 언급해 보겠다.)