📚 CSS 규칙: Seperation of concern을 위한 필수요건
CSS 규칙에 대해 전반적으로 알아보며, 그동안 놓쳤던 부분에 대해 다시 한 번 정리해보며 코드를 깔끔하게 리팩토링 하는 법에 대해 숙지해보자. 추가적으로, CSS 선택자의 종류에 대해서도 학습하며 언제 어떠한 선택자를 사용해야 할 지도 고민해보는 시간을 가져보고자 한다.
CSS 규칙
📌 CSS 규칙은 왜 사용하는 것일까?
HTML 태그에 style 속성을 사용하면 스타일을 적용할 수 있었다. 그런데, 만일 태그에 개수가 매우 많다면? 이 모든 태그에 style 속성을 적용해야 할까? 상상만으로도 벌써부터 고된 역경이 예상된다.
이런 경우를 대비하기 위해 Seperation of concerns, 관심사의 분리라는 것을 하는 것이다. 즉, 내용이랑 스타일을 분리하는 것이다.
Seperation of concerns를 하면 뭐가 좋을까?
- 내용이랑 스타일을 따로따로 고치기 편하다.
- 코드가 나눠져 있기에 따로 저장하기에도 용이하다.
이 때 필요한 개념이 바로 CSS 규칙이다. CSS 규칙을 사용하면 훨씬 효율적으로 스타일을 적용할 수 있다.
📌 CSS 규칙 구성 요소?
CSS 규칙은 선택자와 선언으로 이루어져 있다.
선택자는 스타일을 적용할 HTML 태그를 선택하는 것이고, 선언은 선택자에 적용할 스타일을 정의하는 것이다.
아래 예를 통해 살펴보면, h3가 선택자이고, color: #ff0000;이 선언이다.
h3{
color: #ff0000;
}
- 선택자: 어떤 요소에 규칙을 적용할지 선택하는 것
- 선언: 어떤 스타일을 적용할지 선언하는 것
📌 CSS 선택자 종류
CSS 규칙에서 선택자로 다양한 것을 사용할 수 있다. 그 중 가장 많이 사용하는 선택자인 HTML 선택자, id 선택자, 그리고 class 선택자를 알아보자
HTML 선택자
HTML 선택자는 HTML 태그를 선택하는 선택자로,태그 이름을 사용하여 적용할 수 있다. HTML 선택자는 CSS규칙에서 태그가 보이는 방식을 재정의한다.
id 선택자
id 선택자는 HTML 태그에 id 속성을 사용하여 적용할 수 있다. id 선택자는 #을 사용한다.
이 때 주의해야 할 점은, 아이디 이름은 중복해서 쓸 수 없다.
class 선택자
id 선택자는 딱 하나의 태그에만 적용할 수 있다. 만일 여러 태그에 적용하고 싶다면 class 선택자를 사용하면 된다. class 선택자는 HTML 태그에 class 속성을 사용하여 적용할 수 있다. class 선택자는 .을 사용한다.
id 선택자 vs class 선택자
- 하나만 스타일링 하고 싶을 때는 id 선택자를 사용
- 여러 개를 스타일링 하고 싶을 때는 class 선택자를 사용
예제>
/* css 파일 */
p{ /* 태그 선택자 */
color: #00ff00;
}
#hello{ /* id 선택자 */
color: #0000ff;
}
.red{ /* class 선택자 */
color: #ff0000;
}<!-- html 파일 -->
<p>h1 world</p> <!-- 태그 선택자 -->
<h3 id="hello">id hello world</h3> <!-- id 선택자 -->
<h3 class="red">class red world 1</h3> <!-- class 선택자 -->
<h3 class="red">class red world 2</h3> <!-- class 선택자 -->Outro
깔끔하고 가독성 있는 코드를 위해서 Seperation of Concerns는 필수며, 이를 잘 지키는 개발자가 되기 위해서는 CSS 규칙에 대해 잘 숙지하고, 이를 적극 활용할 수 있어야 한다.
CSS의 규칙을 이해하고 적절히 활용하는 것은 웹 개발의 중요한 부분이다. 오늘 학습한 내용을 바탕으로 보다 효과적이고 가독성 높은 Style Sheet를 작성하며, 사용자에게 더 나은 웹 경험을 제공할 수 있는 개발자로 한 걸음 더 다가가보자.
