평소 티스토리 스킨을 가지고 놀았으므로, 프론트엔드 강의 쉽게 들을 줄 알았는데 의외로 고전하고 있습니다. 오늘도 CSS 스타일을 클래스 여러 개에 적용하려는데 어떻게 해야할지 모르겠더라구요. 나중에 잊지 않기 위해 정리해둡시다.
CSS로 웹 페이지의 스타일을 지정할 때 여러 요소에 동일한 스타일을 적용해야 하는 경우가 많습니다. CSS 클래스를 여러 개 동시에 적용하는 방법을 알면 코드를 효율적으로 작성할 수 있겠죠?
1. 1. 쉼표(,)를 사용한 다중 선택자 방법
가장 기본적이고 널리 사용되는 방법은 쉼표(,)를 사용하여 여러 선택자를 연결하는 것입니다. 이 방법을 사용하면 동일한 CSS 스타일을 여러 요소에 한 번에 적용할 수 있습니다.
<code />.btn1, .btn2, .btn3, .btn4 { font-size: 3em; margin: 0.5em; padding-left: 0.5em; padding-right: 0.5em; }
이렇게 작성하면 btn1, btn2, btn3, btn4 클래스를 가진 모든 요소에 동일한 스타일이 적용됩니다. 코드를 반복해서 작성할 필요가 없어 효율적입니다.
2. 2. 공통 클래스 활용하기
여러 요소에 동일한 스타일을 적용하고 싶을 때는 공통 클래스를 만들어 활용할 수 있습니다.
<code /><button class="btn common-style">버튼1</button> <button class="btn2 common-style">버튼2</button> <button class="btn3 common-style">버튼3</button>
<code />.common-style { font-size: 3em; margin: 0.5em; padding: 0 0.5em; }
이 방법은 HTML에서 클래스를 추가하는 방식으로, 코드의 재사용성을 높일 수 있습니다.
3. 3. HTML 요소에 다중 클래스 적용하기
HTML 요소에 여러 클래스를 동시에 적용하고 싶을 때는 클래스 이름 사이에 공백을 넣어 작성합니다.
<code /><div class="box large blue rounded"> 콘텐츠 </div>
<code />.box { /* 기본 박스 스타일 */ } .large { /* 크기 관련 스타일 */ } .blue { /* 색상 관련 스타일 */ } .rounded { /* 모서리 관련 스타일 */ }
이 방법을 사용하면 스타일을 모듈화하여 관리할 수 있습니다. 여러 개 모듈을 만들고, 페이지 내 요소에 각각 마음대로 색칠하듯이 쓸 수 있겠죠?
4. 4. CSS 선택자 조합하기
특정 조건에 따라 스타일을 적용하고 싶을 때는 선택자를 조합하여 사용할 수 있습니다.
<code />/* 클래스가 두 개 모두 있는 요소 선택 */ .btn.primary { /* 스타일 내용 */ } /* 특정 요소 내의 클래스 선택 */ div.container .item { /* 스타일 내용 */ }
5. 추가 질문
5.1. Q: 여러 클래스를 적용할 때 우선순위는 어떻게 되나요?
A: CSS에서는 나중에 작성된 스타일이 우선 적용됩니다. 단, 선택자의 구체성(Specificity)에 따라 우선순위가 달라질 수 있습니다.
5.2. Q: 클래스를 너무 많이 사용하면 성능에 영향이 있나요?
A: 옛날에는 그랬다고 합니다. 요즘 세상 브라우저에서는 클래스 수가 성능에 미치는 영향이 미미합니다.
5.3. Q: ID와 클래스를 함께 사용할 수 있나요?
A: 네, 가능합니다. 단, ID는 페이지에서 유일해야 하며, 클래스보다 우선순위가 높다는 점을 기억해야 합니다.
6. 결론
쉼표를 활용한 다중 선택자 방법은 기존에 알고 있었는데, 되나 안되나 기억이 안나더라구요. 다중 클래스 적용하는 것과 선택자 조합하는 것은 나중에 티스토리 스킨 제작처럼 프로젝트에서 유용하게 사용될 것 같습니다.
프론트엔드 학습이 어렵다면 아래 강의를 추천합니다.
이 링크를 통해 구매하시면 제가 수익을 받을 수 있어요. 🤗