• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

 

 

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

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


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
selector CSS - element>element 자식선택자 ★ - 직접 자식요소만 선택. (요소선택자, IE7)
selector CSS - element+element 인접선택자 ★★ - 바로 뒤 인접형제요소 (요소선택자, IE7) + …
selector CSS - element~element 형제선택자 ★★ - 지정요소 뒤의 모든 특정형제요소 (요소선택자군…
selector CSS - [attribute] 속성선택자 - 특정 속성 보유 요소 (IE7) ※ 여러 속성 보유 선택자
selector CSS - [attribute=value] 속성선택자 - 지정속성값보유요소 선택 (IE7) ※ 특정 (속성/…
1/25
목록
찾아주셔서 감사합니다. Since 2012