구현할 화면
배민상회 사이트 홈 화면
잘못 쓴 코드 예시
그런데 코드를 쓰다보니 아래와 같은 두 가지 문제가 있었다.
1. 막상 만들고 보니, 카드의 형태가 아니기에 커스텀을 넘어서 그냥 내가 직접 만든 꼴이 되어 버린 것
2. 부트스트랩 클래스에 이미 적용된 스타일때문에 내가 커스텀한 스타일이 묻히는 것
<!-- HTML --><div class="card">
<div class="card-body">
<img src="/Image/기획전_최저가.jpg" class="card-img" alt="최저가">
<p class="card-text">최저가</p>
</div>
</div>
HTML
복사
/* CSS 파일 */.card {
border: none !important;
display: flex !important;
justify-content: space-between !important;
width: 100% !important;
margin-top: 15px !important;
}
.card-body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 5rem;
font-size: 14px;
}
.card-img {
margin-bottom: 10px;
border-radius: 16px;
width: 3.75rem;
}
CSS
복사
그래서 위와 같이 !important를 임시로 남용했는데, 사실 이 방법은 좋지 않은 방법이다. 물론 부트스트랩의 card 클래스에서 크게 벗어나지 않게 커스터마이징하고자 한다면, 부트스트랩의 클래스와 선택자를 조합하여 스타일을 변경하면 된다.
하지만 내 상황처럼 직접 만든 것에 가깝다면 이미 부트스트랩에 내장된 클래스명(e.g. card)이 아닌, 직접 정의한 클래스(e.g. custom-card)로 적용하는 것이 부트스트랩 클래스를 커스터마이징하기 더 좋은 방법인 것이다. 선택자를 조금 더 구체적으로 만들고, 스타일 선언을 먼저한 후에 부트스트랩 스타일을 불러오면 !important 없이도 충분히 우선순위를 높일 수 있다.
즉, 부트스트랩 스타일과 커스텀 스타일 조합을 하는 셈이다. 어떻게 조합하는지는 아래의 방법을 참고하자.
CSS 우선순위에 따른 스타일 덮어쓰기 방법
1. 같은 클래스명이나 스타일을 하단에 작성하기
•
같은 class 명이라도 하단에 정의한 클래스 명과 스타일을 우선적으로 적용된다.
•
CSS 파일이 여러 개 첨부되어있을 때도 유효하다. (e.g. 상단에 적용한 main.css < 하단에 적용한 main2.css)
2. id, style 등 우선순위를 높여 작성하기
•
tag < class << id <<< style="" <<<< !important 순으로 우선순위가 높다.
•
다만, !important는추후 추가 수정 시를 대비해 근본적인 해결 방안은 아니다.
3. Specificity (구체성) 높여서 작성하기
•
div.container.box 대신, div.container div.box와 같이 셀렉터를 여러 개 구체적으로 나열하면 후자가 (더 상단에 있더라도) 덮어써서 적용된다.
•
따라서 추후 덮어쓰는 상황을 염두해서 class 이름은 하나만 써서 작성하는 것이 좋다.
개선한 코드
<!-- HTML --><div class="custom-card">
<div class="card-body">
<img src="/Image/기획전_최저가.jpg" class="card-img" alt="최저가">
<p class="card-text">최저가</p>
</div>
</div>
HTML
복사
/* CSS */.custom-card {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 15px;
}
.custom-card .card-body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 5rem;
font-size: 14px;
}
.custom-card .card-img {
margin-bottom: 10px;
border-radius: 16px;
width: 3.75rem;
}
CSS
복사
완성한 화면
HTML과 CSS로 만든 배민상회 사이트
배운 점
아무래도 현업에 가면 새로운 스타일과 화면을 구현하기보다, 이미 있는 화면을 개선하는 일이 더 많을텐데 위와 같이 CSS 우선순위를 고려하면 더 확장 가능한 코드를 작성할 수 있을 것이다.