목차
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)
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
최신댓글