반응형으로 작업을 할 때 보통 width 100%를 주게 된다.
height만을 고정으로 잡아주게 되고.
세로야 크게 문제가 없을지 몰라도 보통 가로 너비가 문제가 많이 발생을 하거나 고정으로 잡을 때 좁은 화면에서 레이아웃을 찢어버리는 경우가 많이 발생한다.
특히 이미지등이 그렇다.
그래서 width 100%를 주기도 하는데
개별적으로 해상도 별로 적용을 시키기 위해 추가적으로 미디어 쿼리가 거의 필수로 들어간다.
@media screen and(max-width:픽셀값) {
# {
}
.{
}
}
식으로 쓰게 된다. pc일 때는 보이는 레이아웃이 폰에서 안보이게 하기 위해서 특정 스크린 영역에서는 해당 엘리먼트를 hidden 시킨다던지 하는것이 하나의 예이다.
혹은 배경색을 변경하거나 크기를 바꿔야 할 때도 자주 사용을 하는 거의 필수적인 요소이다.
꼬여버리면 문제가 발생하기도 하기 때문에 !important를 남용하지 말고 체계적으로 잘 정리를 하면 되고 그렇게 습관을 들여야 한다.
인라인 css도 당연히 자제를 해야 한다. 바로 눈으로 확인 하기 위해서 인라인으로 작성을 하는 경우도 있지만 까먹고 놔둬버리면 나중에 정리해야할 목록이 되어버린다.
사사로운것 하나하나가 쌓이면 큰일이 된다. 언제나.