CSS 텍스트가 아닌 레이아웃 블록 요소의 가운데 정렬, 이미지 태그의 자동 크기 조절 예제

CSS에서 레이아웃을 담당하는 컨테이너 같은 블록요소<div>,<span> 등의 가운데 정렬 은 margin을 이용해서 합니다.

 

{margin-left:0 auto; margin-right:0 auto; }

 

<div> 태그나 컨테이너나 부모요소 태그에 width를 설정하더라도 

 

이미지 태그는 텍스트와는 달리 줄바꿈이 일어나지 않으므로 

 

이미지 태그의 이미지의 size를 설정하지 않으면 부모 요소를 벗어나 표시되게됩니다. 

 

이미지의 크기를 브라우저 크기에 자동 조절하려면 max-width 속성을 사용합니다.

 

 

CSS 예제:

img {width: inherit; max-width:100%; height: auto;}

 

 

 

 

 

 

DEV