• Q&A
  • 회원가입
  • 로그인

[box] CSS - min-width 속성 - 최소너비 (=최소가로길이 = 민위드스속성 = min-width속성)

min-width 예제

 

<style>

span {background-color: yellow; }

span.hz {min-width: 500px; display: inline-block;}

</style>


<span>홈짱닷컴 Homzzang.com</span>

<span class="hz">홈짱닷컴 Homzzang.com</span>


결과보기

 

 

min-width 정의

 

요소의 최소너비 설정.

 


 

1.

내용 width < min-width : min-width 적용.

내용 width > min-width : 내용 width 적용.

 

2.

width가 min-width보다 작아지는 걸 막는 역할.

 

3.

기본값: 0

상속여부: X

애니효과: O

CSS버전: CSS2 

JS구문: object.style.minWidth="400px";

 

4.

IE7이상 주요 최신브라우저 지원.

 

5.

Inline 요소 경우엔 min-width 속성값 적용 안 됨.

(즉, display:inline-block 또는 display:block 속성 이용해 block 레벨로 바꿔줘야 적용됨.)

 

 

min-width 구문

 

min-width: length|initial|inherit;

 


[속성값]

 

length

px, cm 등의 길이 단위 숫자. (기본값: 0)

 

initial

이 속성의 기본값으로 자동 설정.

 

inherit

부모요소의 속성값 상속.

 


min-width 예제

 

<style>

div { margin-bottom:50px;  border:1px solid red; display:inline-block;}

.b {min-width:500px;}
</style>

l<div class="a">홈짱닷컴 Homzzang.com - 홈페이지 제작관리강의</div><br>

<div class="b">홈짱닷컴 Homzzang.com - 홈페이지 제작관리강의</div>

 

결과보기

 

오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012