웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
부트스트랩(Bootstrap)을 사용중입니다. 만약 아래처럼 사용중인 컬럼 요소에 padding 값을 제거하고 싶은데 css에 사용가능한게 부트스트랩에 있나요? 예를들어 no-padding처럼 방법이 존재하는지 궁금합니다.
# 요소에 padding 제거하는 css 방법
아쉽게도 현재까지는 bootstrap에서 패딩(Padding)을 제거하는 css는 없는 것 같습니다. 아무래도 커스텀 CSS 룰을 별도로 만들어 사용하는 것이 좋을 것 같습니다.
아래는 간단하게 만든 css 코드입니다. 해당 html에 no-padding 클래스를 추가하여 제거합니다. 아래 예제를 참고하세요.
아래는 CSS코드입니다.
위 방법에 추가하여 아래처럼 원하는 방향만 적용가능한 코드를 추가하는 것 좋을 것 같습니다.
이처럼 padding이나 margin 값 조정을 위해 전체보다는 하나의 방향에만 사용가능한 css를 별도로 지정하는 것이 더 편리합니다.
# 요소에 padding 제거하는 css 방법
아쉽게도 현재까지는 bootstrap에서 패딩(Padding)을 제거하는 css는 없는 것 같습니다. 아무래도 커스텀 CSS 룰을 별도로 만들어 사용하는 것이 좋을 것 같습니다.
아래는 간단하게 만든 css 코드입니다. 해당 html에 no-padding 클래스를 추가하여 제거합니다. 아래 예제를 참고하세요.
<!-- 변경 전 코드 -->
<div>
<p>No Padding</p>
</div>
<!-- 아래 코드는 변경 후 -->
<div>
<p class="no-padding">No Padding</p>
</div>아래는 CSS코드입니다.
.no-padding {
padding: 0 !important;
}위 방법에 추가하여 아래처럼 원하는 방향만 적용가능한 코드를 추가하는 것 좋을 것 같습니다.
.no-padding {
padding: 0 !important;
}
.no-top-padding {
padding-top: 0 !important;
}
.no-bottom-padding {
padding-bottom: 0 !important;
}
.no-left-padding {
padding-left: 0 !important;
}
.no-right-padding {
padding-right: 0 !important;
}이처럼 padding이나 margin 값 조정을 위해 전체보다는 하나의 방향에만 사용가능한 css를 별도로 지정하는 것이 더 편리합니다.
아래의 글도 찾고 계시지 않나요?