1.2.5.2 CSS 구성요소 - 속성(property)과 값(value)

선택자를 정했다면 이제 선택자에 스타일을 적용해야 한다. CSS에서는 스타일을 적용하는 수십가지 속성이 있고, 각 속성별로 적용할 수 있는 값이 정해져 있다. 예를 들어 글자 크기를 지정하고 싶다면 font-size의 속성을 선택하고 원하는 크기(값)를 정의하면 된다.

p {

font-size : 1em;

color : red;

}

속성은 글자, 색, 테두리, 여백, 위치 지정 등 다양한 속성이 정의되어 있으며 하나의 선택자에 여러개의 속성을 지정할 수 있다. 

속성에 따라 속성의 값은 달라진다. 그리고 하나의 속성에 여러 형태의 값이 있을 수 있다. font-size에는 em, %, px 등 일정 비율로 텍스트의 크기를 지정하는 속성이 올 수 있고, small, medium, large, x-large 처럼 특정 사이즈를 지정하는 값도 올 수 있다.

값은 속성의 특성에 따라 형태가 달라진다. 글자 크기(font-size) 속성이라면 값은 1em, 100%, 20px처럼 크기를 나타내는 숫자가 오고, 글자 색 속성이라면 blue, red, white, #FF00FF, rgb(255,0,255) 같은 색과 관련된 값이 올 수 있다. border-style처럼 선과 관련된 속성에는 solid, dotted, hidden 같이 선과 관련된 단어가 올 수 있으며 이런 단어들은 속성별로 정해져 있다.

하나의 속성에 여러개의 값이 올 수도 있다.

p{

border : 5px dotted red;

}

p{

border : 5px dotted;

}

테두리를 구성하는 요소는 선의 두께, 종류, 색 등이 복합적으로 표현되야 한다. 이런 속성은 각 요소에 해당하는 값을 한번에 지정할 수 있다. 여러 값을 한번에 지정하려면 각 값을 공백으로 구분해 준다. 이렇게 한번에 여러개의 값을 가질때는 몇가지 값을 무시해도 된다. {border : 5px dotted red;}는 5픽셀의 빨간색 점선이 그려지고, {border : 5px dotted;}는 5픽셀의 점선(기본 색은 검정)이 그려진다. 하지만 선의 스타일(dotted) 값을 무시하면 다른 속성이 표현되지 않는다. 그리고 이런 속성은 대부분 각 요소에 해당하는 속성을 구분해서 지정할 수 있게 되어 있다.

p{

border-width : 5px;

border-style : dotted;

border-color : red;

}