이번에는 dimension에 대해서 포스팅을 해보도록 하겠습니다. 여기서 말하는 디멘션이란 3차원 4차원 이런 것을 말하는 것이 아니고 음...단지 너비와 높이를 다루는 것을 말합니다.
컨텐트가 들어가는 박스의 디멘션과 관련된 속성들에는 다음과 같은 것들이 있습니다.
height 박스의 높이를 결정짓는 속성입니다.
width 박스의 너비를 지정하는 속성이죠.
line-height 글자 라인의 높이를 지정합니다.
max-height 박스의 최대 높이를 제한합니다.
min-height 박스의 최소 높이를 제한합니다.
max-width 박스의 최대 너비를 제한.
min-width 박스의 최소 너비를 제한.
The height and width Properties:
The height and width properties allow you to set the height and width for boxes. They can take values of a length, a percentage, or the keyword auto.
다음 예제를 보시죠.
<p style="width:400px; height:100px;border:1px solid red;
padding:5px; margin:10px;">
This paragraph is 400pixels wide and 100 pixels high
</p>
|
결과는 아래와 같습니다.
|
This paragraph is 400pixels wide and 100 pixels high |
The line-height Property:
The line-height property allows you to increase the space between lines of text. The value of the line-height property can be a number, a length, or a percentage.
다음 예제를 보시죠.
<p style="width:400px; height:100px;border:1px solid red;
padding:5px; margin:10px;line-height:30px;">
This paragraph is 400pixels wide and 100 pixels high
and here line height is 30pixels.This paragraph is 400 pixels
wide and 100 pixels high and here line height is 30pixels.
</p>
|
결과는 아래와 같습니다.
|
This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels. |
The max-height Property:
The max-height property allows you to specify maximum height of a box. The value of the max-height property can be a number, a length, or a percentage.
NOTE: This property does not work in either Netscape 7 or IE 6.
다음 예제를 보시죠.
<p style="width:400px; max-height:10px;border:1px solid red;
padding:5px; margin:10px;">
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
</p>
<img alt="logo" src="/images/css.gif" width="95" height="84" />
|
결과는 아래와 같습니다.
|
This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px 
|
The min-height Property:
The min-height property allows you to specify minimum height of a box. The value of the min-height property can be a number, a length, or a percentage.
NOTE: This property does not work in either Netscape 7 or IE 6.
다음 예제를 보시죠.
<p style="width:400px; min-height:200px;border:1px solid red;
padding:5px; margin:10px;">
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
</p>
<img alt="logo" src="/images/css.gif" width="95" height="84" />
|
결과는 아래와 같습니다.
|
This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px
|
The max-width Property:
The max-width property allows you to specify maximum width of a box. The value of the max-width property can be a number, a length, or a percentage.
NOTE: This property does not work in either Netscape 7 or IE 6.
다음 예제를 보시죠.
<p style="max-width:100px; height:200px;border:1px solid red;
padding:5px; margin:10px;">
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
</p>
<img alt="logo" src="/images/css.gif" width="95" height="84" />
|
결과는 아래와 같습니다.
|
This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px
|
The min-width Property:
The min-width property allows you to specify minimum width of a box. The value of the min-width property can be a number, a length, or a percentage.
NOTE: This property does not work in either Netscape 7 or IE 6.
다음 예제를 보시죠.
<p style="min-width:400px; height:100px;border:1px solid red;
padding:5px; margin:10px;">
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
</p>
<img alt="logo" src="/images/css.gif" width="95" height="84" />
|
결과는 아래와 같습니다.
|
This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px
|
꼭 따라해 보시는 것 잊지 마시고, 이것저것 수치도 바꿔서 해보세요. ^-^
Reference : http://www.tutorialspoint.com/css/css_dimension.htm
'💻 Programming > CSS' 카테고리의 다른 글
| [CSS] 20. Visibility ( 가시성 ) (0) | 2016.06.12 |
|---|---|
| [CSS] 19. Scrollbars ( 스크롤바 ) (0) | 2016.06.12 |
| [CSS] 17. Outlines ( 외곽선, 아웃라인 ) (0) | 2016.06.12 |
| [CSS] 16. Cursor ( 마우스 커서 모양 ) (0) | 2016.06.12 |
| [CSS] 15. Paddings ( 패딩 ) (0) | 2016.06.12 |
The jQuery library supports nearly all of the selectors included in Cascading Style Sheet (CSS) specifications 1 through 3, as outlined on the World Wide Web Consortium's site.
Using JQuery library developers can enhance their websites without worrying about browsers and their versions as long as the browsers have JavaScript enabled.
Most of the JQuery CSS Methods do not modify the content of the jQuery object and they are used to apply CSS properties on DOM elements.
CSS 속성 적용하기
This is very simple to apply any CSS property using JQuery method css( PropertyName, PropertyValue ).
Here is the syntax for the method:
selector.css( PropertyName, PropertyValue ); |
Here you can pass PropertyName as a javascript string and based on its value, PropertyValue could be string or integer.
예제:
Following is an example which adds font color to the second list item.
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("li").eq(2).css("color", "red");
});
</script>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>
|
CSS 속성 다중 적용하기
You can apply multiple CSS properties using a single JQuery method CSS( {key1:val1, key2:val2....). You can apply as many properties as you like in a single call.
Here is the syntax for the method:
selector.css( {key1:val1, key2:val2....keyN:valN})
|
Here you can pass key as property and val as its value as described above.
예제:
Following is an example which adds font color as well as background color to the second list item.
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("li").eq(2).css({"color":"red",
"background-color":"green"});
});
</script>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>
|
요소의 Width & Height 세팅하기
The width( val ) and height( val ) method can be used to set the width and hieght respectively of any element.
예제:
Following is a simple example which sets the width of first division element where as rest of the elements have width set by style sheet:
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div:first").width(100);
$("div:first").css("background-color", "blue");
});
</script>
<style>
div{ width:70px; height:50px; float:left; margin:5px;
background:red; cursor:pointer; }
</style>
</head>
<body>
<div></div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
</body>
</html>
|
JQuery CSS 메소드
다음은 CSS 속성과 관련있는 모든 메소드 목록입니다.
| Method | Description |
|---|---|
| css( name ) | Return a style property on the first matched element. |
| css( name, value ) | Set a single style property to a value on all matched elements. |
| css( properties ) | Set a key/value object as style properties to all matched elements. |
| height( val ) | Set the CSS height of every matched element. |
| height( ) | Get the current computed, pixel, height of the first matched element. |
| innerHeight( ) | Gets the inner height (excludes the border and includes the padding) for the first matched element. |
| innerWidth( ) | Gets the inner width (excludes the border and includes the padding) for the first matched element. |
| offset( ) | Get the current offset of the first matched element, in pixels, relative to the document |
| offsetParent( ) | Returns a jQuery collection with the positioned parent of the first matched element. |
| outerHeight( [margin] ) | Gets the outer height (includes the border and padding by default) for the first matched element. |
| outerWidth( [margin] ) | Get the outer width (includes the border and padding by default) for the first matched element. |
| position( ) | Gets the top and left position of an element relative to its offset parent. |
| scrollLeft( val ) | When a value is passed in, the scroll left offset is set to that value on all matched elements. |
| scrollLeft( ) | Gets the scroll left offset of the first matched element. |
| scrollTop( val ) | When a value is passed in, the scroll top offset is set to that value on all matched elements. |
| scrollTop( ) | Gets the scroll top offset of the first matched element. |
| width( val ) | Set the CSS width of every matched element. |
| width( ) | Get the current computed, pixel, width of the first matched element. |
Reference : http://www.tutorialspoint.com/jquery/jquery-css.htm
'💻 Programming > 웹프로그래밍' 카테고리의 다른 글
| [jQuery] 8. Event Handling ( 이벤트 핸들링 ) (0) | 2016.06.12 |
|---|---|
| [jQuery] 7. DOM Manipulation Methods ( DOM 조작 메소드 ) (0) | 2016.06.12 |
| [jQuery] 5. DOM Traversing ( DOM 선회 ) (0) | 2016.06.12 |
| [jQuery] 4. DOM Attributes ( DOM 속성 ) (0) | 2016.06.12 |
| [jQuery] 3. Selectors ( 셀렉터 ) (0) | 2016.06.12 |