퍼블 html을 받고 서버에서 데이터를 받아서 화면에 뿌릴 때, 이미지의 경우 크기가 들쭉날쭉 하다면 다음과 같이 게시판 모양이 어그러집니다.
저의 경우, 게시판 이미지의 넓이는 고정되어 있었지만, 높이는 고정되어 있지 않기 때문에 문제가 발생하였습니다.
높이를 고정해보겠습니다.
.card-img {
height: 25rem;
}card-img 클래스를 추가하였습니다. 하지만 결과는 바뀌지 않았습니다.
해당 클래스가 잘 적영되었나 개발자 도구를 확인하는데, 이미 height 속성이 정의되어 적용이 되지 않았습니다.
!important 속성을 추가해줍니다.
.card-img {
height: 25rem !important;
}!important 속성을 추가해줍니다.
!important 규칙은 해당 속성이 정의가 되어 있더라도 !important 규칙이 추가되어 있다면 그 속성 값을 따릅니다.
게시판이 성공적으로 정렬되었습니다. 하지만 또 다른 문제가 있습니다.
퍼블리싱이 반응형이라면 화면을 줄였을 때에는 게시글 이미지의 높이가 너무 낮습니다.
이럴 때에는 미디어쿼리(@media) 를 사용합니다.
@media(min-width:992px){
.card-img {
height: 25rem !important;
}
}이제 모바일에서도 어그러지지 않은 예쁜 게시판을 만들 수 있게 되었습니다! ㅎㅎ
