[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 레벨로 바꿔줘야 적용됨.)
• 모바일모드에서 <fieldset> 태그에 가로 스크롤 자동 생성되게 하려면 overflow-x: auto; white-space: nowrap; 속성뿐만 아니라  min-width:0 설정도 추가해줘야 함.
• transform:rotate(○○○deg) 속성 사용해 요소 회전시킬 때 min-width 속성으로 해당 요소의 너비를 잡아줘야 제대로 원하는대로 회전함. 예제보기

 

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>

 

결과보기