목차
- width 예제 - 너비 (= 가로 길이)
- width 정의
- width 구문
- width 이슈 - 실제 너비 계산 ★★★★★
- width 이슈 - border, padding, margin 계산
- width 예제 - 실제 너비
- width 이슈 - 순수 width만으로 너비 계산
- 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 */
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;
[주의] 속성값이 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
