우당탕탕 개발일기

[CSS] 가로 비율 맞는 직사각형 그리기 본문

What I Learned/HTML&CSS

[CSS] 가로 비율 맞는 직사각형 그리기

rilee 2023. 1. 5. 14:06
728x90

height 값이 0이니 상자가 나타나지 않는 모습

 

padding-top을 줌으로써 영역이 생겨 상자가 나타난 모습

padding-top을 %로 주면 해당 비율에 맞는 크기로 직사각형이 그려진다.

즉, 가로만 수정하면 가로 비율에 맞게 height 영역이 잡힌다.

728x90
저작자표시 비영리 동일조건

'What I Learned > HTML&CSS' 카테고리의 다른 글

비활성화(disabled) input 체크박스 CSS 적용하는 방법 (Feat. SCSS)  (0) 2023.01.12
[HTML] html에서 자바스크립트 파일 작동 안할 때(defer)  (0) 2023.01.06
[CSS] 기본 css 초기화 하기 (reset.css)  (0) 2023.01.04
[HTML] JSX에서 공백(띄어쓰기) 넣기  (0) 2022.03.15
[CSS] background-image로 사진 넣을 때 비율 맞추기  (0) 2022.02.08
'What I Learned/HTML&CSS' Related Articles more