[CSS 속성]

CSS의 속성은 그 종류가 다양하고, 지속해서 업데이트되고 있다.

기존의 속성 명이 변경되기도 하고, 속성이 스펙아웃되기도 하며, 새로운 속성이 추가되기도 한다.

이러한 잦은 변화때문에 CSS 관련 서적이나 강의로 모든 속성을 파악하는 데에는 어려움이 있다.

때에 따라 CSS 속성에 대해 알아볼 수 있는 방법을 알고있으면 공부나 실무에 큰 도움이 될 것이다.

 

CSS 속성에 대해 자세히 알아보고 싶을 때 사용하는 대표적인 두 사이트가 있다.

https://www.w3schools.com/cssref/index.php

CSS Reference

https://developer.mozilla.org/ko/docs/Web/CSS/Reference

CSS 참고서 - CSS: Cascading Style Sheets | MDN

 

w3schools 사이트는 속성의 간단한 스펙과 예제를 확인할 때 유용하고

MDN 사이트는 버그를 해결할 때, 속성의 추가적인 스펙을 확인할 때 유용하다.

 

w3schools 사이트에서 font-size 속성을 클릭해서 살펴보자.

w3schools

속성의 정의와 사용법에 대해 알려준다.

Default value는 기본값, 설정하지 않아도 기본으로 설정되어있는 값을 뜻한다.

Inherited는 상속을 할 수 있는지에 대해 알려준다.

Animatable은 애니메이션 동작이 가능한지에 대해 알려준다.

Version은 CSS 버전을 뜻한다. CSS 버전에 따라 브라우저 지원률이 달라지기 때문에 꼭 확인해야 한다.

CSS 버전에 따른 브라우저 지원

위 이미지처럼 브라우저에 따라 지원하는 font-size 또한 기록되어 있다.

 

CSS 문법

CSS Syntax에는 이 속성의 값으로 어떤 것들을 선언할 수 있는지 알려준다.

대부분의 속성들이 마지막에 initial이나 inherit를 가지고 있는데,

initial은 초기값 즉, 기본값으로 초기화한다는 의미이고(인터넷 익스플로러는 지원하지 않음)

inherit은 부모 요소의 해당 속성의 값을 상속하겠다는 의미이다. 당연히 Inherited가 Yes로 표기되어 있어야만 사용할 수 있다.

 

두 사이트를 잘 이용해서 원하는 속성이나 궁금한 속성에 대해 자력으로 공부할 수 있도록 하자.

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/cs120

비전공자를 위한 HTML/CSS