- 가로 너비를 설정합니다.
- border 의 값은 따로 계산되므로 border 의 합만큼 빼주어야 합니다. (세번째 예제)
width
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
width 는 너비를 설정합니다. (가로 길이)
예제 1
px 값으로 설정하기
보기
width : 300px ;
width : 400px ;
border + width : 390px ;
소스
<div style="background:#efefef; width:300px;">width : 300px ;</div>
<div style="background:#efefef; width:400px;">width : 400px ;</div>
<div style="background:#efefef; width:390px; border:5px solid gray;">border + width : 390px ;</div>
<div style="background:#efefef; width:400px;">width : 400px ;</div>
<div style="background:#efefef; width:390px; border:5px solid gray;">border + width : 390px ;</div>
설명
예제 2
% 값으로 설정하기
보기
width : 25% ;
width : 50% ;
width : 100% ;
소스
<div style="background:#efefef; width:25%;">width : 25% ;</div>
<div style="background:#efefef; width:50%;">width : 50% ;</div>
<div style="background:#efefef; width:100%;">width : 100% ;</div>
<div style="background:#efefef; width:50%;">width : 50% ;</div>
<div style="background:#efefef; width:100%;">width : 100% ;</div>
사용된 CSS (클릭시 보기) :
backgroundwidth
예제 3
실습 - 이미지에 width 적용해 보기 (px 단위)
보기
설명
- width 로 값을 정할때 height 값이 없어야 이미지 비율대로 조절됩니다.
예제 4
실습 - 이미지에 width 적용해 보기 (% 단위)
보기
이거 놓지 못할까 !
설명
- 100% 로 지정하면 해당 영역에 맞게 채울 수 있습니다.
연구 1
width 와 margin 으로 DIV 가운데 정렬하기
보기
DIV 가운데로 정렬하기
소스
<div style="width:300px; margin:0 auto; background:yellow;">DIV 가운데로 정렬하기</div>
설명
- DIV 는 table 과 달리 가운데 정렬이 좀 번거롭습니다.
- 테이블의 경우 align="center" 속성만 넣어주면 끝인데 말이죠.
- width 값을 설정하고 margin:0 auto; 처럼 설정해 주면됩니다.
- 테이블의 경우 align="center" 속성만 넣어주면 끝인데 말이죠.
- width 값을 설정하고 margin:0 auto; 처럼 설정해 주면됩니다.
+ 관련 CSS +