[CSS] 스타일시트 속성 우선순위 정리

외부, 내부, 인라인 적용 스타일이 존재할 때, 인라인 > 내부 > 외부 순으로 스타일 적용 우선순위를 가진다.

• 외부 스타일시트 : head 태그 안에 <link rel="stylesheet ...>
• 내부 스타일시트 : head 안에 <style type="text/css"> body {margin: 0; padding: 0}...
• 인라인 스타일시트 : body 내부의 태그 안에 <p style="color:green">hello</p>

css는 이름에서 알 수 있듯, 같은 우선순위일 때에는 가장 아래에 있는 스타일이 먹혀진다. 선언 방식은 아래와 같다.

p {
    font-size: 20px;
}
#id {
    color: black;
}
.class {
    colod: red;
}

근데, 가급적이면 생산성을 위해서는 적절하게 CSS 프레임워크를 쓰는 게 좋은 것 같다. css 프레임워크 중 대중적으로 활용되는 건 tailwind, bootstrap, ant design 등이 있다. ant design은 커스텀하면서 사용하기 어렵다고 하고, tailwind가 부트스트랩보다는 좀 더 이쁘다는 주관적인 평가를 전해들었다.