티스토리 뷰

[개발]프로그래밍/css3

[css3] width,height - 박스 모델의 너비와 높이

좋은 블로그 2021. 4. 21. 09:39
1. 개념
width,height - 박스 모델의 너비와 높이
width,height는 박스 모델에서의 너비와 높이를 지정하는 속성

속성

설명

크기

픽셀(px)이나 센티미터(cm) 같은 단위와 함께 숫자로 지정(고정너비)

백분율

박스 모델을 포함하는 부모 요소를 기준으로 지정(가변 너비)

auto

너비와 높이가 콘텐츠 양에 따라 자동 결정(기본값)
2. 태그
width,height
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
<style>
.div_style1
{
width : 200px ;
height : 100px ;
background : yellow ;
padding : 10px ;
}
.div_style2
{
width : 20% ;
height : 100px ;
background : red ;
}
</style>
</head>
<body>
1
<div class = "div_style1" > </div>
2
<div class = "div_style2" > </div>
</body>
</html>
결과 화면
width,height 사용 예제
코드 설명
1
width : 200px ;
첫번째 박스 모델에서의 너비는 200px를 주었습니다.
이는 고정 값으로 부모 요소의 너비에 영향 없이 200px로 고정이 됩니다.
지금 같은 경우 브라우저의 크기를 줄였다 키웠다 해도 해당하는 div에 너비는 그대로 입니다.
그리고 padding를10px로 주었다는 것은 상하좌우 모두 10px 너비가 생긴 만큼 실제 너비는 220px가 되는 것입니다.
2
width : 20% ;
백분율은 부모 요소의 크기의 영향을 받게 됩니다.
따라서 여기서 브라우저의 크기를 조절하게 되면 거기에 따라서 너비가 넓어지거나 좁아지게 됩니다.
저작자표시

'[개발]프로그래밍 > css3' 카테고리의 다른 글

[css3] border-style - 테두리 스타일 지정  (0) 2021.04.23
[css3] display - 화면 배치 방법 결정  (0) 2021.04.22
[css3] radial-gradient - 원형 그라데이션  (0) 2021.04.20
[css3] linear-gradient - 선형 그라데이션  (0) 2021.04.19
[css3] background - 하나의 속성으로 배경 이미지 설정  (0) 2021.04.16
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday