CSS width, max-width 속성

width, max-width, margin:auto;

이전 장에서 언급했듯이, 블록 레벨 요소는 항상 사용 가능한 전체 너비를 차지한다(가능한 한 왼쪽과 오른쪽으로 뻗어 있다).

블록 수준 요소의 너비를 설정하면 요소가 컨테이너 가장자리로 확장되지 않는다. 그런 다음 여백을 자동으로 설정하여 요소를 컨테이너 내에서 수평으로 중앙에 배치할 수 있다. 요소가 지정된 너비를 차지하고 나머지 공간은 두 여백 사이에 균등하게 분할된다:

참고: 위의 <div> 문제는 브라우저 창이 요소의 너비보다 작을 때 발생한다. 그런 다음 브라우저는 페이지에 수평 스크롤 막대를 추가한다.

대신 최대 너비를 사용하면 브라우저의 작은 창 처리가 향상된다. 이는 소규모 장치에서 사이트를 사용할 수 있도록 할 때 중요하다:

CSS max-width: 500px, margin:auto 설정 화면 예시

팁: 브라우저 창의 크기를 500px 이하로 조정하여 두 div의 차이를 확인한다!

다음은 위의 두 개의 div의 예입니다:

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>CSS Max-width</h2>

<div class="ex1">이 div 요소의 width는 500px입니다;</div>
<br>

<div class="ex2">이 div 요소의 max-width: 500px;</div>

<p><strong>Tip:</strong> 브라우저 창을 500px 너비 미만으로 끌어서 다음과 같은 차이를 확인합니다 두 div!</p>

</body>
</html>

div.ex1 요소에 width: 500px, margin:auto를 설정하였고,

div.ex2 요소에 max-width:500px, margin:auto를 설정한 결과 화면은 아래 그림과 같다.

지금까지 CSS에서 width, max-width 설정값에 따라 레이아웃의 모양이 어떻게 바뀌는지 확인할 수 있었다.

차이를 이해하고 꼭 손으로, 눈으로, 머리로 실습하며 익히기를 추천합니다.

모두 화이팅입니다.!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS z-index 속성 (0)	2023.08.21
CSS position 속성 (0)	2023.08.20
CSS display 속성 (0)	2023.08.18
CSS table style (0)	2023.08.17
CSS 적응형 테이블(Responsive Table) (0)	2023.08.16