[css] 반응형 정사각형 만들기

« 2024/12 »

목

금

토

[css] 반응형 정사각형 만들기 본문

CODE/css

nutonny 2022. 12. 7. 19:30

반응형 정사각형으로 만들고 싶은 부분(.square)에 아래와 같이 스타일을 적용하면 된다.

.square {
  background-color: #0f6674;
  width: 100%;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

자세하게 알고 싶다면 아래의 코드펜을 참고하면 된다.

[css] 반응형 태그 표시 (태그가 잘리지 않게 표시) (0)	2022.12.01
[css] 동영상을 background-image처럼 넣는 방법 (0)	2022.08.03

Comments

멋진 개발자가 되고 싶어