속성
개요
HTML과 비슷하게, CSS도 특정한 기능을 하는들이 미리 정의되어 있으며, 이를 활용하여 태그의 스타일을 정의 할 수 있습니다.
속성: 값 의 형태로 사용되며, 여러 속성끼리는 ;를 통해 구분됩니다.
하나의 선택자의 속성들을 한 줄로 쓰든, 여러줄로 나누어 쓰든 상관이 없으며 작업하는 사람들 끼리 정하여 편한대로 사용하면 됩니다.
선택자{ 속성1: 값1; 속성2: 값2 }
/* or */
선택자{
속성1: 값1;
속성2: 값2;
}
Chrome의 디버깅 툴을 이용하면, 특정 태그에 어떤 CSS 속성이 사용되었는지 쉽게 알 수 있습니다.
이를 통해 자신이 모르는 속성을 알 수도 있고, 속성의 사용법을 공부할 수도 있습니다.
목록
CSS 속성의 수는 매우 많으며, 이 강의에서는 대표적인 몇 가지 속성만 소개 할 예정입니다.
- width, height
- margin, padding
- color
- font
- text-align
- background
- border
- visibility
- display
- float
- clear
- position
- cursor
상속
어떤 속성들은 부모 태그에 특정 값을 적용하면 하위 태그에도 그 속성들이 그대로 전달되기도 합니다. (color, font 등)
속성: inherit 처럼 작성하면 강제로 부모의 속성을 상속받게도 할 수 있습니다.
-webkit-
간혹 웹페이지에 적용된 속성을 살펴볼 때 -webkit- 이라는 prefix가 붙은 속성을 볼 수 있습니다.
webkit은 Chrome, Safari등의 브라우저에 탑재된 엔진으로, 이 엔진을 쓰는 브라우저에서만 작동하는 속성이라는 의미인데요,
주로 아직 표준화가 되지 않은 새로운 기능들의 속성이 -webkit- 이라는 prefix를 달고 등장합니다.
유용한 기능들은 실제로 표준화가 되기도 하니 참고로 알아두세요.