개발/CSS3

CSS width height 같게 반응형 정사각형 만드는 방법 (CSS width height same)

CSS 작업을 하다보면 너비값(width)은 가변으로 설정이 되지만, 높이값(height)은 가변으로 설정이 되지 않아서 고민을 해본 경험이 있을 것입니다. 이번 포스팅에서는 너비값 기준으로 높이값도 동일하게 가변으로 적용하기 위한 방법에 대해서 다뤄보도록 하겠습니다. 구현 예시 우리가 구현해볼 예시는 아래와 같습니다. CSS로 너비값이 퍼센트(percentage)로 설정되어 있고, 높이값 또한 퍼센트로 세팅해서 디바이스의 크기에 따라 원하는 가변 사이즈의 정사각형을 만들어 내는 것 입니다. 아래 코드와 같이 가변 너비값과 동일하게 높이값을 동일하게 퍼센트로 설정하면 어떻게 될까요? .box { float: left; width: 25%; height: 25%; background-color: blue;..