CSS height 및 width 속성은 요소의 높이 및 너비를 설정하는 데 사용된다.
CSS max-width 속성은 요소의 최대 너비를 설정하는 데 사용된다.
CSS height, width 설정
height 및 width 속성의 값은 다음과 같습니다:
- auto - 기본값이다. 브라우저가 높이와 너비를 계산한다
- length - 높이/폭을 px, cm 등으로 정의한다.
- % - 포함 블록의 높이/폭을 백분율로 정의한다
- initial - 높이/폭을 기본값으로 설정한다
- inherit - 높이/폭이 상위 값에서 상속된다
| div { height: 200px; width: 50%; background-color: powderblue; } |
div에 높이 200px width는 50% 설정한 예제는 아래 코드와 같다.
| <!DOCTYPE html> <html> <head> <style> div { height: 200px; width: 50%; background-color: powderblue; } </style> </head> <body> <h2>요소의 높이 및 너비 설정</h2> <div>이 div 요소의 높이는 200px이고 폭은 50%입니다.</div> </body> </html> |
위의 코드를 실행한 결과 화면은 아래 그림과 같다.
또다른 예제로 height는 100px이고 width는 500px인 경우의 예제이다.
| div { height: 100px; width: 500px; background-color: powderblue; } |
예제 코드는 아래 표와 같다.
| <!DOCTYPE html> <html> <head> <style> div { height: 100px; width: 500px; background-color: powderblue; } </style> </head> <body> <h2>요소의 높이 및 너비 설정</h2> <div>이 div 요소는 높이가 100px이고 폭이 500px입니다.</div> </body> </html> |
위의 코드를 실행한 결과 화면은 아래 그림과 같다.
참고: height 및 width 속성에는 패딩, 테두리 또는 여백이 포함되지 않는다! 요소의 패딩, 테두리 및 여백 내부 영역의 높이/폭을 설정합니다!
CSS max-width 설정
max-width 속성은 요소의 최대 너비를 설정하는 데 사용된다.
max-width는 px, cm 등의 길이 값 또는 포함 블록의 백분율(%)로 지정하거나 없음(기본값)으로 설정할 수 있다. max-width가 없음을 의미한다.
위 <div>의 문제는 브라우저 창이 요소의 너비(500px)보다 작을 때 발생한다. 그런 다음 브라우저는 페이지에 수평 스크롤 막대를 추가한다.
대신 max-width를 사용하면 브라우저의 작은 창 처리가 향상된다.
팁: 브라우저 창을 500px 너비 미만으로 끌면 두 div의 차이를 확인할 수 있다!
참고: 같은 요소에서 width 속성과 max-width 속성을 모두 사용하는 경우, width 속성의 값이 max-width 속성보다 크면 max-width 속성이 사용된다(그리고 width 속성은 무시된다).
| <!DOCTYPE html> <html> <head> <style> div { max-width: 500px; height: 100px; background-color: powderblue; } </style> </head> <body> <h2>요소의 최대 너비 설정</h2> <div>이 div 요소의 높이는 100px이고 최대 너비는 500px입니다.</div> <p>브라우저 창의 크기를 조정하여 효과 확인.</p> </body> </html> |
위의 코드를 실행한 결과 화면은 아래 그림과 같다.
CSS 크기 속성(CSS dimmension properties)
| 속성 | 설명 |
| height | 요소의 높이를 설정합니다 |
| max-height | 요소의 최대 높이를 설정합니다 |
| max-width | 요소의 최재 너비를 설정합니다 |
| min-height | 요소의 최소 높이를 설정합니다 |
| min-width | 요소의 최소 너비를 설정합니다 |
| width | 요소의 너비를 설정합니다 |
지금까지 CSS height, width, max-width 속성의 개념과 활용 예제를 살펴보았다.
예제는 꼭 실습하기를 추천합니다.
모두 화이팅입니다.!!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > CSS문법' 카테고리의 다른 글
| CSS outline (0) | 2023.07.23 |
|---|---|
| CSS box model (0) | 2023.07.22 |
| CSS 패딩(CSS padding) (0) | 2023.07.20 |
| CSS 여백 축소(CSS margin collapse) (0) | 2023.07.19 |
| CSS 여백(margin) (0) | 2023.07.18 |
댓글