Cascading Style Sheets
CSS는 구체적으로 어떤 스타일로 요소가 표시 되는지를 정하는 규격이라고 할 수 있다.
사용법
CSS 내부적으로 사용되는 문법은 동일하며, 어디에 기술하느냐의 차이가 존재한다. 기술하는 방법은 아래의 3가지가 있다.
HTML태그의 style 속성을 이용<style>태그를 통해 HTML 문서 내부에 기술 (<style>태그는 주로<head>태그 내부에 사용한다).css파일로 분리하여 HTML 문서에 연결
<!-- 1번 방법 -->
<div style="color: red"> this is red text </div><!-- 2번 방법 -->
<html>
<head>
<style type="text/css">
.my-text{ color: blue }
</style>
</head>
<body>
<div class="my-text">
this is red blue
</div>
</body>
</html>1번 처럼 사용시 HTML과 CSS를 분리하는 장점이 없어지기 때문에 2,3번을 주로 활용한다.
style태그의 type="text/css"는 필수가 아니지만, 더 정확한 표현을 위해 함께 써주기도 한다.
주석
/ asdfasdf /
#my-box{
/* color: red; */
color: blue;
}적용 우선순위
- 속성 값 뒤에 !important 를 붙인 속성
- HTML에서 style을 직접 지정한 속성
- #id로 지정한 속성
- .class, :추상class로 지정한 속성
- 태그이름으로 지정한 속성
- 상위객체에 의해 상속된 속성
같은 우선 순위에 있는 경우, 부모-자식 관계가 많은 경우가 우선되며, 모든 설정이 같은 경우 나중에 선언한 것이 우선되어 적용된다.
React, React-Native Developer