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

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

16,577  
목차
  1. width 예제 - 너비 (= 가로 길이)
  2. width 정의
  3. width 구문
  4. width 이슈 - 실제 너비 계산 ★★★★★
  5. width 이슈 - border, padding, margin 계산
  6. width 예제 - 실제 너비
  7. width 이슈 - 순수 width만으로 너비 계산

 

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 */
widthcalc(100% - 18px);  /* Standard */
 
 

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는 좌우 양쪽 모두 정의될 경우 가정
box-sizing 속성 : width 계산 방식 결정.
 

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;


[주의] 속성값이 1~3개 경우, 해당 값에 곱하기 2를 해줘야 함.
 

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만으로 요소 너비 설정 가능.

 



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