본문 바로가기
Spec UP - Frontend/부스트코스_UI 개발

CSS 속성의 정의와 syntax(문법) 확인 방법

by TIS_Ha 2020. 3. 24.
반응형

https://www.w3schools.com/

https://developer.mozilla.org/ko/

 

CSS 속성의 정의와 syntax (구문,문법) 확인 방법

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

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

이러한 잦은 변화로 인해 CSS 관련 서적이나 강의를 통해서 모든 속성을 파악하는 데는 어려움이 있습니다.

 

위에 참조된 사이트의 정보를 통해 학습하는 것을 추천드립니다.

 

 

CSS Reference를 통해 확인 가능한 사항들은 다음과 같습니다.

정의

해당 속성이 어떤 변화를 일으키고 어떻게 동작하는지 파악할 수 있습니다.

  • 기본 값
  • 상속 여부
  • 애니메이션 가능 여부
  • 사용 가능한 CSS버전

문법

해당 속성값을 어떤 식으로 나열하여 사용하는지를 파악할 수 있습니다.

속성 값

해당 속성이 인식하여 적용할 수 있는 값의 형태나, 키워드 등을 파악할 수 있습니다.

  • Initial : 초기값, 즉 속성의 기본값으로 정의 (ie에서 지원하지 않음)
  • Inherit : 부모 요소의 해당 속성 값을 적용 (상속 가능할 요소일 경우)
    즉, 상속이 불가능한 속성일 경우에는 적용 되지 않습니다.

지원 범위

해당 속성이 정의에 맞게 동작 가능한 CSS 버전, 브라우저별 버전을 확인할 수 있습니다.

  • 어떤 브라우저의 어떤 버전이냐에 따라 같은 값이어도 다르게 렌더링 될 수 있으므로,
    현재 프로젝트의 사용자 제공 지원 범위를 잘 확인하고 적용해야 합니다.

예제

문법과 속성값을 바탕으로 실제로 속성을 동작하는 예제 코드를 확인할 수 있습니다.

참고 사항

해당 속성에 대해 특이사항이나 버그에 대해서 확인할 수 있습니다.

 

 

 

 

 

 

 

 

dd

반응형

'Spec UP - Frontend > 부스트코스_UI 개발' 카테고리의 다른 글

CSS속성_색상(Color) / HTML Color Names  (0) 2020.03.25
CSS 속성_단위  (0) 2020.03.24
CSS_캐스케이딩 (Cascading)  (0) 2020.03.24
CSS_상속  (0) 2020.03.23
CSS_구체성  (0) 2020.03.23

댓글