슬라이더를 움직여 보세요 ^^
- span 태그는 기본설정 상태에서는 height 가 적용되지 않습니다.
- 정렬에 관해서 다루기 편리한것은 table 이지만 무분별한 사용은 좋지 않습니다.
- table 의 경우는 한때 무분별하게 사용되었었죠.
height
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
height 는 높이를 지정합니다.
예제 1
실습 - height 값 조절해 보기
보기
^^ |
^^ |
 |
|
|
| DIV | span | 이미지 | table |
설명
예제 2
속성값 초기화 시키기
보기
가운데 새는 높이가 초기화 되었습니다.
소스
<style type="text/css">
.css_test img {
height : 100px;
}
</style>
<div class="css_test">
<img src="http://superkts.com/img/bird.gif" />
<img src="http://superkts.com/img/bird.gif" style="height:auto;" />
<img src="http://superkts.com/img/bird.gif" />
<br>가운데 새는 높이가 초기화 되었습니다.
</div>
.css_test img {
height : 100px;
}
</style>
<div class="css_test">
<img src="http://superkts.com/img/bird.gif" />
<img src="http://superkts.com/img/bird.gif" style="height:auto;" />
<img src="http://superkts.com/img/bird.gif" />
<br>가운데 새는 높이가 초기화 되었습니다.
</div>
사용된 CSS (클릭시 보기) :
height
설명
- height : auto 를 사용하면 설정된 값이 초기화 됩니다.
- 원래 이미지의 크기로 보입니다.
- 원래 이미지의 크기로 보입니다.
예제 3
실습 - height : 100% 로 설정된 이미지의 변화 보기
보기
|
| height : 100% 으로 설정된 새 이미지 |
설명
슬라이더를 움직여 보세요 ^^
- % 단위로 설정시 해당 영역에 맞도록 높이가 조절됩니다.
- % 단위로 설정시 해당 영역에 맞도록 높이가 조절됩니다.
연구 1
제이쿼리로 새키우기 (height 값 제이쿼리 애니메이션)
보기
|
새를 눌러보세요 |
소스
<style type="text/css">
.css_test td {
height : 200px;
text-align : center;
}
.css_test img {
cursor : pointer;
}
</style>
<table class="css_test" cellpadding="0" cellspacing="0" align="center">
<tr>
<td valign="bottom">
<img src="http://superkts.com/img/bird.gif" />
<img src="http://superkts.com/img/bird.gif" />
<img src="http://superkts.com/img/bird.gif" />
<img src="http://superkts.com/img/bird.gif" />
<img src="http://superkts.com/img/bird.gif" />
<img src="http://superkts.com/img/bird.gif" />
<br>새를 눌러보세요
</td>
</tr>
</table>
<button type="button" onclick="$('.css_test img').animate({height:'37'}, 500, 'easeInOutBack')">작아지게 하기</button>
<script type="text/javascript">
$('.css_test img').bind('click', function(){
$(this).animate({height:'100'}, 250, 'easeInOutBack');
});
</script>
.css_test td {
height : 200px;
text-align : center;
}
.css_test img {
cursor : pointer;
}
</style>
<table class="css_test" cellpadding="0" cellspacing="0" align="center">
<tr>
<td valign="bottom">
<img src="http://superkts.com/img/bird.gif" />
<img src="http://superkts.com/img/bird.gif" />
<img src="http://superkts.com/img/bird.gif" />
<img src="http://superkts.com/img/bird.gif" />
<img src="http://superkts.com/img/bird.gif" />
<img src="http://superkts.com/img/bird.gif" />
<br>새를 눌러보세요
</td>
</tr>
</table>
<button type="button" onclick="$('.css_test img').animate({height:'37'}, 500, 'easeInOutBack')">작아지게 하기</button>
<script type="text/javascript">
$('.css_test img').bind('click', function(){
$(this).animate({height:'100'}, 250, 'easeInOutBack');
});
</script>
설명
- height 값을 조절해서 커지게 만드는 예제입니다.
- "제이쿼리 공작소" 오픈 후 다루겠습니다 ^^;
- "제이쿼리 공작소" 오픈 후 다루겠습니다 ^^;
연구 2
실습 - 박스 모델 (Box Model) 이해 하기
보기
+ CSS 연구소 +
아래 슬라이더를 움직여 보세요.
아래 슬라이더를 움직여 보세요.
설명
+ 관련 CSS +