자주 사용되는 너비(width)와 높이(height)의 경우 웹 요소의 크기를 지정하기 위해 사용되는 중요한 속성이다. 이 속성들은 픽셀(px), 백분율(%), em, rem, vw, vh, cm 등등으로 크기를 지정할 수 있다.
- width: 값;
값을 auto로 설정하게 되면, 부모 태그의 padding 전까지 맞춰서 너비가 지정된다. auto와 100%는 다른 것이기 때문에 사용 시에 유의해야한다. 최소값(min-width: 값;), 최대값(max-width: 값;) 을 설정할 수 있으며, 이를 통해 반응형 디자인을 구현할 수 있다. - height: 값;
height의 경우 기준이 컨텐츠 기준이다. 따라서 auto로 설정하게 되면 컨텐츠의 기준만큼 높이가 지정된다. 최소값(min-height: 값;), 최대값(max-height: 값;) 을 설정할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
width: 200px;
height: 100px;
background-color: lightblue;
}
.child{
/* 부모 태그에 맞춰 width 지정 */
width: auto;
/* height를 auto로 하면 컨텐츠 크기에 맞춰 변경 */
height: auto;
background-color: lightcoral;
}
.width{
width: 80%;
height: 80%;
max-width: 100px;
min-height: 100px;
background-color: lightcyan;
/* margin: auto는 부모 태그의 정중앙에 위치시킬 수 있다. */
margin: auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">height auto: 컨텐츠 크기</div>
<div class="width"></div>
</div>
<div></div>
</body>
</html>
'Frontend > CSS' 카테고리의 다른 글
| CSS의 선택자(selector) - 3. 가상 클래스 선택자(pseudo class)와 가상요소 선택자(pseudo element) (0) | 2024.07.07 |
|---|---|
| CSS의 선택자(selector) - 2. 속성선택자 (0) | 2024.07.07 |
| CSS의 선택자(selector) - 1. 하위선택자, 자식선택자, 인접선택자, 형제선택자 (0) | 2024.07.07 |
| CSS를 이용해 오디오와 비디오를 넣어보자 (0) | 2024.07.07 |
| CSS에서 display를 사용해서 테이블을 만들어보자 (0) | 2024.07.07 |
| CSS에서의 배치 방법 (0) | 2024.07.07 |
| CSS3의 박스모델 (0) | 2024.07.07 |
| CSS에서 배경에 이미지를 넣어보자 (0) | 2024.07.04 |