width, height
- width 와 height의 속성값은 %(퍼센트) 또는 px(픽셀 사용)
선택자 {
width: 속성값;
height: 속성값;
}
ex) 블록요소에 가로 세로 적용
첫번째 div : 클래스명 box-red, 배경색 #ff0000, box-red에 가로 500px 세로60px을 적용하기.
두번째 div : 클래스명 box-blue, 배경색 #0000ff, box-blue에 가로 700px 세로80px을 적용하기
p 요소에 .box-blue를 적용한 후 가로 세로 값을 확인하기.
<style>
.box-red{width:500px; height:60px; background-color: #f00;}
.span-red{width:500px; height:60px; background-color: #f00; display: inline-block;}
.box-blue{width:150px;height: 150px;background-color: #00f;}
.span-blue{width:150px; height:150px; background-color: #00f; display: inline-block;}
</style>
<body>
<div class="box-red">
css 에서 가로 세로가 어떻게 적용되는지 확인해 보겠습니다.
</div>
<div class="box-blue">
css 에서 가로 세로가 어떻게 적용되는지 확인해 보겠습니다.
</div>
<p class="box-blue">
p 에서 가로 세로가 어떻게 적용되는지 확인해 보겠습니다.
</p>
</body>최대(최소) width와 최대(최소) height 지정
- •최대(최소) width 와 최대(최소) height 는 화면해상도에 맞는 페이지 작성할 때 유용
선택자 {
max-width: 속성값;
min-width: 속성값;
max-height: 속성값;
min-height: 속성값;
}
<style>
.box{background-color: #aaddee; max-width: 980px; min-width: 800px; max-height: 200px; min-height: 170px;}
</style>