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

목차

1. min-width 예제 - 인라인요소 최소 너비 설정
2. min-width 정의
3. min-width 구문
4. 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>

결과보기

PS. 인라인요소에 최소 너비 설정 위해선 display:inline-block 코드도 필요.

min-width 정의

 

요소의 최소 너비 설정.

 

---

 

1.

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

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

 

즉,

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

 

2.

기본값: 0

상속여부: X

애니효과: O

CSS버전: CSS2 

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

 

3.

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

 

4.

inline 요소 경우엔 min-width 속성값 적용 X.

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

 

min-width 구문

 

selector {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>

 

결과보기