프로그래밍 공부 일기

2020년 8월 19일 Progate Lv.226
CSS에서 width와 height의 지정은 알기 쉽기 때문에, 간단한 프로퍼티라고 생각하기 쉽지만, 실제로는 그다지 사용하지 않는 것을 알았다. 그 이유를 정리해 둔다.
원칙의 룰로서 부모 요소의 범위를 넘어 지정해서는 안된다.

width:100% 정보

이유 중 하나로서 코드가 길어지는 것이 올라간다.width:100% 는 쓸데없는 코드이다. 블록 요소라면 가로폭 가득 퍼지고 있는데도, 블록 요소에 width:100% 를 지정해도 의미가 없다. 블록 요소에 이 지정은 무의미하고, 쓸데없는 코드가 되어 버린다.

또, 이하와 같이 초기치이다 width:auto 그럼 padding은 폭에 포함되지만, width:100%로 해 버리면 padding의 분만큼 폭을 넘어 버린다.

이를 피하기 위해 box-sizing: border-box 를 기술하지 않으면 안되어 코드의 양이 늘어나 버린다.
　

height를 사용해서는 안되는 이유

이 기사 하지만 다룬 것처럼 반응형 디자인을 생각하는 것이 필수 불가결하다. 반응형은 같은 코드로 PC나 태블릿, 스마트폰 등의 멀티 디바이스에 대응시키는 것이다.
반응성은 width와 height에 의해 바뀐다. 요소의 height를 고정해 버리면, 다음과 같이 고정한 높이를 넘어서 돌출해 버릴 가능성이나 여백이 남아 버릴 가능성이 있다.


그래서 height는 지정하지 않는 것이 좋다!

참고문헌

width와 height의 사용법 정리와 주의점에 대해 【CSS 초보자 입문】