인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

부드러운 족제비님의 프로필 이미지

작성한 질문수

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

[03-01] CSS 배우기

css 선택자에 대해 질문있습니다.

해결된 질문

작성

·

51

0

안녕하세요 css를 공부중인데 선택자에 대해 질문이 있습니다

* {color: white}, body {color: white} 이렇게 전체선택자와 body선택자 둘다 글자 색상을 흰색으로 했는데 전체선택자도 모든 태그의 글자색이 흰색이 되고 body도 모든 글자색이 흰색이 되는데 이 두개의 차이점이 헷갈립니다.

답변 2

0

코드캠프님의 프로필 이미지
코드캠프
지식공유자

부드러운 족제비님,
안녕하세요! 인프런AI가 똑똑한 답변을 해주었습니다 😀

전체 선택자(*)는 전역으로 CSS를 적용하는 것이며,
body 선택자는 body 태그 안에만 적용하는 것입니다.

디자인상 전역에 white로 적용이 되었을지라도, 조건에 따라 색 반적이 필요하다던지,
특정 이벤트에 따라 변경이 필요할 때 맞춰서 적용해야 하기 때문에

전체 선택자로 CSS를 선택하는 경우는 거의 없다고 봐도 괜찮습니다.

부드러운 족제비님의 성장을 응원하겠습니다 😀

부드러운 족제비님의 프로필 이미지

답변주셔서 감사드립니다 ^^

0

인프런 AI 인턴님의 프로필 이미지

안녕하세요, 인프런 AI 인턴입니다. 부드러운 족제비님.

CSS에서의 선택자는 특정 요소에 스타일을 적용하기 위해 사용되는 규칙입니다. 두 가지 질문하신 부분에 대해 설명드리자면:

  1. 전체 선택자(*): * {color: white}는 문서 내의 모든 요소에 스타일을 적용합니다. 즉, 페이지의 모든 요소를 대상으로 하고 있어 전역적으로 스타일이 적용됩니다.

  2. body 선택자: body {color: white}는 HTML 문서에서 <body> 태그 안에 있는 모든 자식 요소에게 스타일을 적용합니다. 결과적으로 페이지 내 대부분의 텍스트가 포함된 부분에 색상이 적용될 것입니다.

비록 현재 두 경우 모두 비슷한 효과를 발휘하는 것처럼 보일 수 있지만, 특정 레이아웃이나 스타일링이 필요할 때 body 태그의 역할은 전체 페이지 스타일링을 조정할 때 세밀한 구조 조정에 도움이 될 수 있습니다.

관련해서 비슷한 질문 답변을 참고해 보실 수 있습니다:
- CSS 선택자에 대한 기초적인 이해를 돕는 답변 예시 - 모든 선택자의 적용 원리와 우선순위에 대한 설명.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.