인프런 커뮤니티 질문&답변
작성한 질문수
83강 css 질문입니다
해결된 질문
작성
·
24
0
아래 코드로 충분한데
.header-center {
width: 50%;
font-size: 24px;
justify-content: center;
}
.header-left {
width: 25%;
justify-content: flex-start;
}
.header-right {
width: 25%;
justify-content: flex-end;
}
왜 매번 앞에 .Header를 추가하셨는지 궁금합니다.
.Header.header-center {
width: 50%;
font-size: 24px;
justify-content: center;
}
.Header .header-left {
width: 25%;
justify-content: flex-start;
}
.Header .header-right {
width: 25%;
justify-content: flex-end;
}
그리고 버튼에서도 버튼 버튼_타입으로 하셨는데 버튼 타입 으로 해도 충분하지 않았나 싶습니다. 추후에 타입이 다른 컴포넌트와 겹칠까봐 그런것일까요?
답변 2
1
안녕하세요 김김님 이정환입니다.
말씀하신 것처럼 기능적으로는 충분히 동작합니다. 하지만 클래스명의 충돌을 막기 위해 이렇게 작성하는게 보다 안전합니다.
프로젝트가 커지면 다른 컴포넌트에서 실수로 .header-center 같은 일반적인 이름을 사용할 수 있습니다. .Header 접두사를 붙이면 "이건 Header 컴포넌트 전용이야"라고 명확히 표시하는 거죠.
실무에서는 CSS Modules나 styled-components를 많이 사용해서 이런 고민을 덜 하긴 합니다. 하지만 기본 CSS를 사용할 때는 이런 방식이 안전하고 명확합니다! 말씀하신 방식도 틀린 건 아니지만, 프로젝트가 커질수록 이런 명시적인 방식이 유지보수에 도움이 됩니다 👍
0
안녕하세요, 인프런 AI 인턴입니다. 김김님.
질문하신 내용에 대해 답변을 드리겠습니다. 스타일을 정의할 때 클래스 선택자 앞에 추가적으로 .Header를 붙이는 이유는 CSS의 범위 지정과 구체성(Specificity) 향상 때문입니다.
정확한 범위 지정:
.Header.header-center와 같은 형태로 작성하면, 이 스타일은.Header클래스 안에 있는.header-center요소에만 적용됩니다. 이는 특정 특정 컴포넌트나 모듈 내에서 해당 스타일의 범위를 명확히 지정하는 데 유리합니다. 같은.header-center클래스가 다른 곳에서도 사용할 수 있는데, 이 경우.Header클래스로 시작하여 범위를 더 세밀하게 조절할 수 있습니다.
구체성 향상:
- CSS는 구체적인 정의가 덜 구체적인 정의보다 우선합니다. 따라서
.Header .header-left형식으로 지정하면, 구체성이 더 높아져 다른 일반적인.header-left클래스보다 우선 적용될 수 있습니다.
- CSS는 구체적인 정의가 덜 구체적인 정의보다 우선합니다. 따라서
버튼 타입 관련:
.버튼_타입으로 작성하는 것은 유사한 클래스 이름이 여러 곳에서 사용될 때 스타일 충돌을 피할 수 있습니다. 예시로.버튼 기본또는.버튼 위협처럼, 버튼 유형에 따라 다양한 스타일을 적용할 수 있습니다. 클래스명이 겹칠 것을 염려하여 명확성과 구체성을 높이기 위해 사용하는 경우가 많습니다.
이러한 방법들을 통해 스타일이 더 일관되게 적용되고, 유지 보수성이 높아질 수 있습니다.
관련된 서식 및 스타일링의 중요성을 더 깊게 이해할 수 있는 기존의 답변 링크도 추천드립니다:
- Header css justify-content 질문 - 여러 스타일링 접근 방식에 대해 다룬 예시입니다.
- App.css에서 display:flex를 두 번 적용하는 이유 - flex 속성 및 CSS 구체성에 대한 설명이 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.