이제 property(속성)과 value(속성값)에 대해 알아보도록 하겠습니다. CSS의 기초 챕터에서 말씀드렸듯이, property는 CSS에서 지정하고 싶은 스타일의 속성 이름을, value는 임의의 값을 의미합니다. property는 CSS의 정해진 문법에 따라 작성되어야 하며, value는 자유롭게 사용할 수 있습니다.
https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/
위의 그림은 마이크로소프트에서 개발한 bing이라는 검색엔진을 통해 수집된 전 세계 웹페이지의 통계자료입니다. 자료에 따르면 가장 빈도수가 높은 속성은 타이포그래피, 박스 모델로 제시되어 있습니다.
타이포그래피는 쉽게 말해 **글자(font)**에 대한 것을 의미하고, 박스 모델은 텍스트들을 담는 박스를 뜻합니다. 위에 나온 Property 상세 내용을 살펴보도록 하겠습니다.
font가 붙은 property는 얼마나 있을까요? 우선 p 태그로 간단하게 문서를 만들어 크롬 개발자 도구로 열어보았습니다.
요소 선택 버튼을 누르신 다음 hello world를 클릭하시고 개발자 도구에서 Computed를 클릭해주세요. 그 다음 Show all을 누르면 가질 수 있는 property가 모두 나옵니다. 여기서 font가 붙은 property를 찾아보겠습니다.
여기서 보다 많은 정보를 습득할 수 있습니다. 1.3.2부터는 해당 창을 열지 않을 것입니다.
바로 알아볼 수 있는 property와 value로는 맑은 고딕 폰트를 사용하고 있고 size는 16px, font-weight은 400이군요.
여기서 font-size가 가질 수 있는 value는 아래와 같습니다. 각각의 Test는 w3schools에서 할 수 있습니다.(https://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=medium)