-
초코의 풀스택 도전기 7: CSS 선택자와 우선순위 완벽 정복하기스토리텔링 2024. 10. 2. 10:16
도입
초코는 HTML을 익히고 나름 웹페이지를 만들 수 있게 되었지만, 스타일을 입히는 과정에서 뭔가가 부족하다는 느낌을 지울 수 없었다.
"음, 이제 어떻게 이 웹페이지를 더 멋지게 만들지?" 초코는 고민에 빠졌다. 그러다 CSS로 스타일을 꾸며야겠다는 생각이 떠올랐다.
멘토는 초코의 고민을 눈치채고 다가왔다.
"초코야, 이제 CSS 선택자와 우선순위를 배워야 할 때가 왔어."
초코는 궁금해하며 물었다. "CSS 선택자? 그게 뭐죠?"
1. CSS 선택자란 무엇일까?
멘토는 웃으며 설명했다. "선택자(Selector)는 특정 HTML 요소에 스타일을 적용하는 도구야. 선택자를 사용하면 어떤 요소에 스타일을 적용할지 정확히 지정할 수 있어."
멘토는 여러 가지 CSS 선택자를 설명하기 시작했다.
요소 선택자 (Element Selector) "가장 기본적인 선택자는 요소 선택자야. HTML 태그 이름을 기준으로 특정 요소에 스타일을 적용하지."
<style> p { color: blue; font-size: 16px; } </style> <p>이 문장은 파란색으로 표시됩니다.</p> <p>이 문장도 파란색입니다.</p>"여기서는 모든 <p> 태그에 파란색과 16px 크기의 글꼴이 적용돼. 간단하지?"
초코는 고개를 끄덕였다. "하지만, 모든 <p> 태그에 동일한 스타일이 적용되니까 조금 불편할 수도 있겠네요."
클래스 선택자 (Class Selector) "맞아, 그래서 클래스 선택자가 있어. 클래스 선택자는 특정 요소들에만 스타일을 다르게 적용하고 싶을 때 사용해."
<style> .highlight { color: red; font-weight: bold; } </style> <p class="highlight">이 문장은 빨간색과 굵은 글씨입니다.</p> <p>이 문장은 기본 스타일입니다.</p>"여기서 class="highlight"가 적용된 문장은 빨간색과 굵은 글씨로 바뀌어. 여러 요소에 공통된 스타일을 적용할 수 있는 장점이 있지."
초코는 더 흥미를 느꼈다. "그럼 여러 요소에 동일한 스타일을 적용할 수 있군요!"
ID 선택자 (ID Selector) 멘토는 계속 설명을 이어갔다. "그렇지. 이제 ID 선택자를 알아보자. ID 선택자는 특정 요소에만 유일하게 스타일을 적용할 때 사용해."
<style> #unique { color: green; font-size: 20px; } </style> <p id="unique">이 문장은 초록색입니다.</p> <p>이 문장은 기본 스타일입니다.</p>"여기서 #unique는 페이지에서 단 한 번만 사용할 수 있어. 그래서 ID 선택자는 한 요소에만 고유하게 스타일을 지정할 때 유용하지."
2. CSS의 우선순위 (Specificity)
"그런데 멘토님, 만약 한 요소에 여러 스타일이 적용되면 어떤 게 우선 적용되나요?" 초코는 또 하나의 의문을 품었다.
멘토는 웃으며 설명을 시작했다. "아주 좋은 질문이야, 초코야. CSS 우선순위는 여러 스타일이 충돌할 때 어떤 스타일이 적용될지 결정해줘."
멘토는 CSS 우선순위 규칙을 차근차근 설명했다:
- ID 선택자가 가장 높은 우선순위를 가져.
- 그다음이 클래스 선택자.
- 요소 선택자는 가장 낮은 우선순위를 가져.
멘토는 바로 예제를 보여주었다.
<style> p { color: blue; } .highlight { color: red; } #unique { color: green; } </style> <p id="unique" class="highlight">이 문장은 어떤 색으로 표시될까?</p>"여기서는 ID, 클래스, 요소 선택자가 모두 적용되었지? 우선순위가 높은 ID 선택자가 적용돼서 이 문장은 초록색으로 표시될 거야."
초코는 눈을 빛내며 말했다. "ID 선택자가 가장 강력하군요! 확실히 기억해둘게요."
3. CSS 상속 (Inheritance)
멘토는 계속해서 중요한 개념을 설명했다. "초코야, CSS에서는 상속이라는 개념도 있어. 부모 요소에 적용된 스타일이 자식 요소로 자동으로 전달되는 거지."
<style> body { color: purple; } </style> <body> <h1>이 제목은 보라색입니다.</h1> <p>이 문장도 보라색입니다.</p> </body>"여기서는 <body> 태그에 보라색이 적용되었는데, 그 안에 있는 모든 요소에도 똑같이 보라색이 적용돼."
초코는 감탄했다. "일일이 모든 요소에 스타일을 지정할 필요가 없군요!"
4. !important를 사용한 스타일 강제 적용
"근데 멘토님, 만약 제가 어떤 스타일을 반드시 적용하고 싶다면요?"
멘토는 미소 지으며 말했다. "!important를 사용하면 돼. 하지만 남용하면 나중에 스타일을 유지하기 어려워지니 주의해야 해."
<style> p { color: blue !important; } .highlight { color: red; } </style> <p class="highlight">이 문장은 무슨 색일까?</p>"여기서는 .highlight 클래스가 빨간색을 적용하려고 하지만, !important가 우선 적용돼서 문장은 파란색으로 표시될 거야."
초코는 고개를 끄덕였다. "필요할 때만 신중하게 사용해야겠어요."
5. 그룹화 선택자 (Grouping Selectors)
멘토는 마지막으로 초코에게 그룹화 선택자에 대해 설명했다.
"여러 선택자에 동일한 스타일을 적용하고 싶을 때는 그룹화 선택자를 사용하면 돼. 여기서 선택자들을 ,로 묶으면 각각에 동일한 스타일을 한 번에 적용할 수 있지. 이 방법은 코드 중복을 줄이고, 효율적으로 스타일을 관리할 수 있게 해."
<style> h1, p { color: orange; font-family: Arial, sans-serif; } </style> <h1>제목도 주황색입니다.</h1> <p>이 문장도 주황색입니다.</p>"여기서 <h1>과 <p> 태그에 동일한 스타일이 적용된 것을 볼 수 있어. 그룹화 선택자를 사용하면, <h1>과 <p> 각각에 스타일을 따로 적용하는 대신 ,로 선택자를 묶어 한 번에 스타일을 적용할 수 있지."
"아래처럼 따로 스타일을 적용할 수도 있지만, 그룹화 선택자를 사용하면 훨씬 깔끔하고 효율적으로 스타일을 관리할 수 있어!"<style> h1 { color: orange; font-family: Arial, sans-serif; } p { color: orange; font-family: Arial, sans-serif; } </style>초코는 그룹화 선택자가 얼마나 유용한지 깨달았다. "와, 코드가 정말 깔끔해졌어요! 이 방법으로 코드 중복을 줄일 수 있겠네요."
결론
초코는 오늘 CSS 선택자와 우선순위에 대해 완벽히 이해했다. 선택자를 통해 웹페이지의 각 요소에 적절한 스타일을 적용하고, 우선순위를 통해 충돌을 해결하는 방법을 배웠다. 또한, 상속과 !important를 어떻게 사용할지 알게 되었다.
"이제 CSS 박스 모델과 레이아웃을 배우면 진짜 멋진 웹사이트를 만들 수 있을 것 같아!" 초코는 자신감이 넘쳤다.
'스토리텔링' 카테고리의 다른 글
초코의 풀스택 도전기 9: CSS Grid로 복잡한 레이아웃을 쉽게 만들기 (0) 2024.10.04 초코의 풀스택 도전기 8: CSS 박스 모델과 레이아웃의 이해 (0) 2024.10.03 초코의 풀스택 도전기 6: CSS로 웹페이지에 옷을 입히다 (0) 2024.10.01 초코의 풀스택 도전기 5: HTML의 세계를 정리하다(2) (2) 2024.09.28 초코의 풀스택 도전기 4: HTML의 세계를 정리하다(1) (0) 2024.09.28