[box] CSS - width 속성 ★ - 너비 (= 가로길이 = width속성 = 위드스속성, 상속X)

1. width 예제 - 너비 (= 가로 길이)
2. width 정의
3. width 구문
4. width 이슈 - 실제 너비 계산 ★★★★★
5. width 이슈 - border, padding, margin 계산
6. width 예제 - 실제 너비
7. width 이슈 - 순수 width만으로 너비 계산
8. width 예제 - 자식요소 너비를 부모요소 밖으로 화면 100% 채우기

width 예제 - 너비 (= 가로 길이) 

<style type="text/css">

div {width:200px; height:200px; border:solid 10px red; padding:20px; margin:70px; line-height: 100px; text-align:center; font-size:20px; font-weight:bold;}

</style>

 

<div> 홈짱닷컴 (Homzzang.com)</div>

결과 보기

width 정의

 

요소 너비  (= 가로 길이) 지정. 

 

---

 

1. 
img 태그에 width height 속성값이 있더라도, 
스타일시트에서 width height 값을 주면 스타일시트 값이 우선 적용.
(예제) 

빨간색 코드 대신 파란색코드 우선 적용.

 

<style type="text/css">

img {width:auto; height:auto;}

</style>

<img src="https://source.unsplash.com/random" border=0 width="750" height=500>

 

결과보기

2. 
calc() 함수 : %에서 특정 길이를 뺀 거리를 표시.
※ IE9 이상 최신 브라우저 지원. (예제)

• width: -moz-calc(100% - 18px); /* Firefox */
• width: -webkit-calc(100% - 18px); /* WebKit */
• width: -o-calc(100% - 18px); /* Opera */
• width: calc(100% - 18px);  /* Standard */

 

3. MDN width 예제 보기
https://developer.mozilla.org/en-US/docs/Web/CSS/width

 

width 구문

 

selector {width:속성값;}

 

---

[속성값]

 

크로스브라우징 위한 웹표준 위해 단위 꼭 표기 !!

 

auto

자동 (요소의 길이에 따라 자동 조정) (기본값)

 

px 단위

(예) 100px

 

cm 단위

(예) 30cm

 

% 단위

(예) 100%

vh 단위

viewport 높이의 1/100 (= 1%).
(예1: 부모 요소 높이가 1000px 일 때, 1vh = 10px)
(예2: 50vh 경우, viewport 높이의 50%)

 

vw 단위

viewport 너비의 1/100 (= 1%).
(예1: 부모 요소 너비가 1000px 일 때, 1vw = 10px)

(예2: 50vw 경우, viewport 너비의 50%)

 

vmin 단위

vh・vw 중 최소값. 
(예: viewport 너비 1000px, 높이 700px 일 때, 1vmin = 7px)

 

vmax 단위

vh・vw 중 최대값.
(예: viewport 너비 1000px, 높이 700px 일 때, 1vmax = 10px) 

※ vh・vw・vmin・vmax 경우,  IE9 이상 최신브라우저 지원.
자세히 보기

 

fit-content

콘텐츠 너비에 맞춤. 

※ 주요 최신 브라우저 지원. 단, IE는 지원 X

 

initial

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

 

inherit

부모 요소의 길이를 상속 

 

width 이슈 - 실제 너비 계산 ★★★★★

요소의 실제 출력 가로 길이 (260px)

= width  +  border x 2  +  padding x 2

= 200px  +  10px  x  2    +   20px  x  2

 

요소의 실제 차지 가로 길이 (400px)

= width  +  border x 2  +  padding x 2  +  margin x 2  

= 200px  +  10px  x  2  + 20px  x  2  +  70px x  2 

 

※ 곱하기 2는 좌우 양쪽 모두 정의될 경우 가정

width 이슈 - border, padding, margin 계산

border・padding・margin 속성값 1개 경우 

 

→ 4면 모두 테두리 (ex) border: 10px

→ 4면 모두 내부 여백 (ex) padding: 10px
→ 4면 모두 외부 여백 (ex) margin: 10px

 

---

border・padding・margin 속성값 2개 경우 

 

→ 상하 좌우  테두리 (ex) border: 10px 10px;

→ 상하 좌우  내부 여백 (ex) padding: 10px 10px;

→ 상하 좌우  외부 여백 (ex) margin: 10px 10px;

 

---

border・padding・margin 속성값 3개 경우

 

→ 상 좌우 하 테두리 (ex) border:10px 10px 10px;

→ 상 좌우 하 내부 여백 (ex) padding:10px 10px 10px;

→ 상 좌우 하 외부 여백 (ex) margin:10px 10px 10px;

 

---

border・padding・margin 속성값 4개 : (시계방향)

 

→ 상 우 하 좌 테두리 (ex) border:10px 10px 10px 10px;

→ 상 우 하 좌 내부 여백 (ex) padding:10px 10px 10px 10px;

→ 상 우 하 좌 외부 여백 (ex) margin:10px 10px 10px 10px;

width 예제 - 실제 너비

<style type="text/css">

div {
   width:200px;
   height:200px;
   border:solid 10px red;
   padding:20px;
   margin:70px;
   line-height: 100px;
   text-align:center;
   font-size:20px;
   font-weight:bold;

}

</style>

 

<div> 홈짱닷컴 (homzzang.com)</div>

결과 보기

---

[실제 너비 계산]

 

요소 실제 너비 = 

width (200) + border(10 x 2) + padding (10 x 2)

 

실제 차지 너비 = 

width (200) + border(10 x 2) + padding (10 x 2) + margin (70 x 2)

 

PS. CSS 스타일은 (가로 나열, 세로 나열) 둘 다 가능.

width 이슈 - 순수 width만으로 너비 계산

 

box-sizing 속성 이용하면, 순수 width만으로 요소 너비 설정 가능.

 

width 예제 - 자식요소 너비를 부모요소 밖으로 화면 100% 채우기

https://homzzang.com/b/css-280