Cascading Style Sheet (CSS)
CSS는 Cascading Style Sheet의 약자입니다.
Cascading은 계단식을 의미하며, "위에서 아래로 우선순위를 정한다" 라고 생각하시면 됩니다.
중요한건 문서가 위에서 아래로 읽어내려가기때문에 위에있는 코드보다 아래에 위치한 코드가 마지막으로 적용된다는것입니다.
h1 {
color: red;
}
h1 {
color: blue;
}
h1 {
color: yellow;
}위에 코드를 보면 h1 선택자에 color속성이 3번이나 중첩되어있는데 계단식을 떠올리면서 이해해보시면 맨 처음 h1부분에는 컬러가 레드였다가 맨 마지막 코드인 color: yellow로 최종적으로 적용됩니다.
이건 css파일 안에서만 작동되는것이 아니라,
<!DOCTYPE html>
<html>
<head>
<title>Cascading Style Sheet</title>
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="./style2.css" />
</head>
</html>외부링크 방식으로 불러올때에도 마찬가지로 HTML도 위에서 아래로 읽기때문에 style2.css가 최종적으로 적용되는것을 알 수 있습니다.
국비지원이나, 독학이나 부트스트랩이건, 만들어진 템플릿을 수정할 때 잘 안돼서 !important를 사용하는경우가 많은데 !important는 절대적으로 사용하지 마시고(유지보수가 매우힘듬)
" 왜 안되는지에 대해 생각해보시면 좋을것 같습니다. "
CSS문서 자체에서도 생각도 해보아야하고 내가 링크를 건 HTML파일에서도 순서가 잘 맞는지 꼭 생각해보세요 !!
CSS 우선순위
- !important
- 인라인방식 (HTML태그에다가 style속성 사용하는 것.)
- 아이디 선택자
- 클래스 선택자
- 타입선택자 (태그 선택자)
여기서 말하는 우선순위는 위에 얘기했던거랑은 조금 다릅니다.
위에는 명시도(얼마나 자세하게 선택자를 잡는지)가 같고 중복된 속성에서는 맨 아래에 있는 코드가 적용되는거지만 여기서 얘기하는 CSS 우선순위는 코드읽는거랑 상관이 없습니다.
!important
절대 사용하지마세요, 물론 사용할 때도 있지만 !important를 많이 사용하게되면 나중에 유지보수할때 너무 힘듭니다.
인라인방식
인라인방식도 많이 안씁니다.
html은 뼈대를 구성하는용도이지 여기다가 css까지 같이 붙여넣게되면 이것역시 가독성도 떨어지고
파일의 분리가없어서 작업속도도 안나고 유지보수 하기에도 굉장히 힘듭니다.
무엇보다 반응형 웹에서는 어떻게 할 수가 없습니다.
아이디 선택자
한국 에이전시에서는 아이디 선택자를 사용하는걸 거의 본적이 없는데요.
아이디 선택자는 1개 이상 사용할 수 없고 정말 특별할 때 사용하는게 좋습니다.
(일반적으로 클래스를 많이 사용합니다.)
CSS도 모듈화 방식으로 많이 사용하기에 아이디보다 클래스를 사용하는게 더 좋습니다.
클래스 선택자
클래스는 다양한 확장이 가능합니다.
예를들어 버튼을 만든다고하면, 버튼에대해 사이즈들이 있을것입니다.
button.large {
width: 300px;
height: 56px;
}
button.medium {
width: 200px;
height: 48px;
}
button.small {
width: 150px;
height: 36px;
}위에 방식처럼 사이즈나, 컬러나 다 다르기때문에 클래스를 사용하게되면 여러개의 확장성 있는 버튼들을 만들 수가 있습니다. 클래스명만 바꾸어주면 되는것이죠.
이런 이유로 클래스를 더 많이 사용합니다.
타입 선택자
타입선택자는 태그 선택자라고 생각하시면 됩니다.
태그 선택자 또한 많이 사용합니다. 클래스를 주지 않게되면 선택자가 많이 겹치게 되기때문에
일반적으로 ul > li a 이런식으로 많이 작성합니다. (명시도를 많이 따집니다.)
에이전시에서는 위에처럼 한줄로 코딩을 많이합니다.
서비스, 플랫폼 회사에서는 여러줄로 코딩을 많이합니다.
이건 장단점이 있기에 내가 속해있는 기업에 컨벤션을 맞춰가는게 좋습니다 :)
한줄 코딩
div { width: 300px; height: 300px; }
div ul { display: flex; }
div ul li { flex: 1; }여러줄 코딩
.box {
width: 300px;
height: 300px;
}
.box__lists {
display: flex;
}
.box__list {
flex: 1;
}
참고자료
