이번 포스팅에서는 레이어 관련 CSS속성에 대해서 알아보도록 하겠습니다.

중학교 때 집합을 배우게 되면 동그라미 두개를 겹쳐서 그리는 것 부터 시작하죠?

그런것이 바로 레이어링 하는 것입니다.

레이어링을 위한 속성에는 z-index라는 것이 있습니다.

다음 예제를 한번 볼까요??

<div style="background-color:red;
 width:300px;
 height:100px;
 position:relative;
 top:10px;
 left:80px;
 z-index:2">
</div>
<div style="background-color:yellow;
 width:300px;
 height:100px;
 position:relative;
 top:-60px;
 left:35px;
 z-index:1;">
</div>
<div style="background-color:green;
width:300px;
 height:100px;
 position:relative;
 top:-220px;
 left:120px;
 z-index:3;">
</div>

결과는 아래처럼 나올 것입니다. 

어떤가요??? 간단하죠???

Reference :  http://www.tutorialspoint.com/css/css_layers.htm

이번 포스팅에서는 CSS를 이용한 위치 설정에 대해서 알아보도록 하겠습니다.

우선 CSS에서 제공하는 위치 관련 속성은 position이 있습니다.

그리고 위치는 크게 절대위치와 상대위치가 있습니다.

그럼 하나씩 알아보도록 할까요? 

Relative Positioning:

상대 위치 설정에서 사용되는 하위 속성으로는 top, bottom, left와 right가 있습니다.  

top과 left의 속성값이 마이너스 (- ) 숫자를 사용함으로서 bottom과 right를 표현할 수 있습니다. 

• Move Left - Use a negative value for left.
• Move Right - Use a positive value for left.
• Move Up - Use a negative value for top.
• Move Down - Use a positive value for top.

NOTE: You can use bottom or right values as well in the same way as top and left.

다음 예제를 보시죠.

<div style="position:relative;left:80px;top:2px;
            background-color:yellow;">
This div has relative positioning.
</div>

This will produce following result:

Absolute Positioning:

절대 포지셔닝은 특정 위치에 항상 위치할 수 있도록 고정시키는 것이죠.

상대 포지셔닝처럼 top, left, bottom, right 모두 사용가능합니다. 사용방법도 동일하죠.

• Move Left - Use a negative value for left.
• Move Right - Use a positive value for left.
• Move Up - Use a negative value for top.
• Move Down - Use a positive value for top.

NOTE: You can use bottom or right values as well in the same way as top and left.

다음 예제를 보시죠.

<div style="position:absolute;left:80px;top:20px;
            background-color:yellow;">
This div has absolute positioning.
</div>

결과는 직접 테스트해보시고 보도록 하세요. ^_^ 

Fixed Positioning:

고정 포지셔닝은 자칫 잘못 이해하면 절대 포지셔닝과 동일하다고 생각하실 수 있는데 이 고정 포지셔닝은 상대 + 절대 포지셔닝이라고 생각하시면 됩니다. 고정 포지셔닝은 눈으로 보여지는 화면의 특정 위치에 고정시키는 것입니다. 스크롤링이 있더라도 무조건 화면의 특정위치에 보이도록 하는 속성이죠.

역시 상대, 절대 포지셔닝처럼 top, left, bottom, right 속성을 사용할 수 있으며 사용방법도 동일합니다. 

• Move Left - Use a negative value for left.
• Move Right - Use a positive value for left.
• Move Up - Use a negative value for top.
• Move Down - Use a positive value for top.

NOTE: You can use bottom or right values as well in the same way as top and left.

다음 예제를 보시죠. 

<div style="position:fixed;left:80px;top:20px;
            background-color:yellow;">
This div has fixed positioning.
</div>

결과는 직접 테스트해보시고 보도록 하세요. ^_^

Reference : http://www.tutorialspoint.com/css/css_positioning.htm 

이번에는 CSS를 이용해서 특정 요소를 화면에서 안보이도록 설정하는 것을 해보겠습니다.  

화면을 구성하다보면 화면에 그리기는 그려야 하는데 사용자에게 보여주면 안되는 것들이 있을 수도 있겠죠?

visibility 속성이 바로 그것을 위한 속성입니다. 사용자가 원할 때만 보여주면 되는 그런 요소들을 위해서 사용하시면 되는 속성입니다.

NOTE: 중요한 정보들을 단순히 안보이게끔 하는데는 사용하시면 안됩니다. 화면에 정보가 뿌려는 지지만 사람 눈에만 안보이도록 속여놓은 것이기 때문에 언제든지 사용자가 볼 수 있다는 것을 명심하세요.

이 속성은 다음과 같은 속성값들을 가질 수 있습니다.

다음 예제를 한번 보시죠. 

<p>
This paragraph should be visible in normal way.
</p>
<p style="visibility:hidden;">
This paragraph should not be visible.
</p>

결과는 아래와 같습니다. 

두개의 문단을 출력하는데 두번째 문단은 visibility속성값이 hidden이라서 눈에 보이지는 않겠지만 저기 위에 분명 있습니다.

Reference : http://www.tutorialspoint.com/css/css_visibility.htm 

CSS 속성 중에 overflow 라는 속성이 있는데 이녀석은 컨텐트 박스보다 많은 양의 컨텐트가 들어갈 경우에 컨텐트가 어떻게 보여져야 하는지에 대해서 설정해주는 속성입니다.

이 속성에 대한 속성값은 다음과 같은 값들이 있습니다. 

다음 예제를 보실까요. 

<style type="text/css">
.scroll{
 display:block;
 border: 1px solid red;
 padding:5px;
 margin-top:5px;
 width:300px;
 height:50px;
 overflow:scroll;
 }
.auto{
 display:block;
 border: 1px solid red;
 padding:5px;
 margin-top:5px;
 width:300px;
 height:50px;
 overflow:auto;
 }
</style>
<p>Example of scroll value:</p>
<div class="scroll">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
 as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class="auto">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.
</div>

결과는 아래와 같습니다. ( 결과 이미지 )

 직접 페이지를 만들어서 구현해보세요. ^-^ 

Reference : http://www.tutorialspoint.com/css/css_scrollbars.htm  

이번에는 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>

결과는 아래와 같습니다.

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>

결과는 아래와 같습니다.

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 

이번에는 외곽선 속성에 대해서 알아보도록 하겠습니다.

아웃라인(외곽선)은 테두리와 많이 유사합니다. 그래서 준비했습니다. 

이 두개의 차이점:

• 외곽선은 공간을 차지하지 않습니다.

• 외곽선은 직사각형일 필요가 없습니다.

• 외곽선은 사방이 모두 똑같은 선입니다. 테두리처럼 왼쪽은 점선, 오른쪽은 직선, 이렇게 따로 설정할 수가 없습니다.

NOTE: 이 속성도 IE 6 이나 Netscape 7에서는 안된다고 하는군요. 아직도 이런 브라우저를 사용하시는 분들은 없겠지만요 ㅋ 

자 그럼 외곽선 관련 속성에 어떤것들이 있는지 한번 알아봅시다. 

•  outline-width

•  outline-style  

•  outline-color  

•  outline  

The outline-width Property:

The outline-width property specifies the width of the outline to be added to the box. Its value should be a length or one of the values thin, medium, or thick . just like the border-width attribute

A width of zero pixels means no outline.

다음 예제를 한번 보시죠. 

<p style="outline-width:thin; outline-style:solid;">
This text is having thin outline.
</p>
<br />
<p style="outline-width:thick; outline-style:solid;">
This text is having thick outline.
</p>
<br />
<p style="outline-width:5px; outline-style:solid;">
This text is having 5x outline.
</p>

결과는 아래와 같습니다.

The outline-style Property:

The outline-style property specifies the style for the line (solid, dotted, or dashed) that goes around an element. It can take one of the following values:

• none: No border. (Equivalent of outline-width:0;)

• solid: Outline is a single solid line.

• dotted: Outline is a series of dots.

• dashed: Outline is a series of short lines.

• double: Outline is two solid lines.

• groove: Outline looks as though it is carved into the page.

• ridge: Outline looks the opposite of groove.

• inset: Outline makes the box look like it is embedded in the page.

• outset: Outline makes the box look like it is coming out of the canvas.

• hidden: Same as none.

다음 예제를 한번 보시죠.

<p style="outline-width:thin; outline-style:solid;">
This text is having thin solid  outline.
</p>
<br />
<p style="outline-width:thick; outline-style:dashed;">
This text is having thick dashed outline.
</p>
<br />
<p style="outline-width:5px;outline-style:dotted;">
This text is having 5x dotted outline.
</p>

결과는 아래와 같습니다.

The outline-color Property:

The outline-color property allows you to specify the color of the outline. Its value should either be a color name, a hex color, or an RGB value, as with the color and border-color properties.

다음 예제를 한번 보시죠.

<p style="outline-width:thin; outline-style:solid;
             outline-color:red">
This text is having thin solid red  outline.
</p>
<br />
<p style="outline-width:thick; outline-style:dashed;
             outline-color:#009900">
This text is having thick dashed green outline.
</p>
<br />
<p style="outline-width:5px;outline-style:dotted;
             outline-color:rgb(13,33,232)">
This text is having 5x dotted blue outline.
</p>

결과는 아래와 같습니다.

The outline Property:

The outline property is a shorthand property that allows you to specify values for any of the three properties discussed previously in any order but in a single statement.

다음 예제를 한번 보시죠.

<p style="outline:thin solid red;">
This text is having thin solid red outline.
</p>
<br />
<p style="outline:thick dashed #009900;">
This text is having thick dashed green outline.
</p>
<br />
<p style="outline:5px dotted rgb(13,33,232);">
This text is having 5x dotted blue outline.
</p>

결과는 아래와 같습니다.

Reference : http://www.tutorialspoint.com/css/css_outlines.htm 

이번에는 패딩에 대해서 알아보도록 하겠습니다. 패딩은 내용과 테두리 사이의 간격을 말합니다. 이전에 여백( 또는 마진)에 대해서 공부한 적이 있었죠? 마진과 패딩의 차이가 무엇인지 아시겠죠? 잘 모르시겠다구요? 그럼 일단 패딩 관련된 속성에는 어떤 것들이 있는지 한번 보도록 합시다. 패딩 속성에 대한 속성값은 길이, 퍼센티지, 또는 inherit입니다.  inherit 는 부모의 그 값과 동일하게 한다는 의미입니다.퍼센티지 값이 사용되었다면 내용물이 들어있는 컨텐트 박스 안에서의 퍼센티지입니다.

다음은 패딩관련 속성들 입니다.

• padding-bottom  

• padding-top  

• padding-left  

• padding-right  

• padding  

그럼 이제 각 속성에 대한 예제를 보러 가 봅시다~~~ Go Go Go ~

The padding-bottom Property:

The padding-bottom property sets the bottom padding (space) of an element. This can take a value in terms of length of %.

다음 예제를 한번 볼까요. 

<p style="padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>

<p style="padding-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom padding in percent
</p>

결과는 아래와 같습니다.

The padding-top Property:

The padding-top property sets the top padding (space) of an element. This can take a value in terms of length of %.

다음 예제한번 볼까요.

<p style="padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>

<p style="padding-top: 5%; border:1px solid black;">
This is another paragraph with a specified top padding in percent
</p>

결과는 아래와 같습니다.

The padding-left Property:

The padding-left property sets the left padding (space) of an element. This can take a value in terms of length of %.

다음 예제를 한번 볼까요.

<p style="padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>

<p style="padding-left: 15%; border:1px solid black;">
This is another paragraph with a specified left padding in percent
</p>

결과는 아래와 같습니다.

The padding-right Property:

The padding-right property sets the right padding (space) of an element. This can take a value in terms of length of %.

다음 예제를 한번 볼까요.

<p style="padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
</p>

<p style="padding-right: 5%; border:1px solid black;">
This is another paragraph with a specified right padding in percent
</p>

결과는 아래와 같습니다.

The padding Property:

The padding property sets the left, right, top and bottom padding (space) of an element. This can take a value in terms of length of %.

다음 예제를 한번 볼까요.

결과는 아래와 같습니다.

Reference :  http://www.tutorialspoint.com/css/css_padding.htm

이번에는 목록과 관련된 CSS속성에 대해서 알아보도록 하겠습니다. 

우선 어떤 속성들이 있는지 그놈들의 이름부터 한번 살펴봅시다. 

• list-style-type 이건 목록 스타일, 예를 들면 숫자, 영문, 동그라미, 사각형 , 뭐 이런 것들을 설정하는 속성입니다. 

• list-style-position 이건 목록이 인덴트 되어야 하는지를 결정하는 속성입니다. 하위 목록이냐 아니냐 뭐 이런거죠. 

• list-style-image 목록 앞에 이미지를 보여주겠다는 겁니다. 단순한 숫자목록이나 기호목록이 싫다면 이걸 쓸 수도 있겠네요.

• list-style 목록 관련 스타일을 한꺼번에 정의할 수 있게 해주는 속성이죠.

• marker-offset 목록에서 마커(숫자, 동글라미 등등)와 텍스트 사이의 간격을 결정짓는 속성입니다.

이제 각 속성들을 어떻게 사용하는지 예제를 한번 볼까요?? 

The list-style-type Property:

list-style-type 속성은 뭐 목록에 보여지는 마커의 스타일을 변경하기위한 속성입니다. 

목록에는 크게 순서있는 목록과 순서없는 목록이 있죠.

다음은 순서없는 목록에서 사용할 수 있는 list-style-type의 속성값입니다. 

다음은 순서있는 목록에서 사용되는 속성값입니다. 

예제를 한번 볼까요. 

<ul style="list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ul style="list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style="list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<ol style="list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<ol style="list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

결과는 아래와 같습니다. 

The list-style-position Property:

list-style-position 속성은 bullet point를 포함하는 박스의 내부 또는 외부의 위치를 지정하는 속성입니다.

다음 예제를 보시죠.

<ul style="list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ul style="list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style="list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<ol style="list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

결과는 아래와 같습니다.

The list-style-image Property:

list-style-image 속성은 위에서 말씀드린 것처럼 이미지 파일을 소스로 지정하여 목록의 마커로 사용할 수 있게끔 해주는 속성입니다.  

다음 예제를 보시죠.

<ul>
<li style="list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol>
<li style="list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

결과는 아래와 같습니다. ( url에 어떤 이미지 소스의 경로가 들어가느냐에 따라 달라지는 결과입니다. ) 

The list-style Property:

다음 예제를 보시죠. 

<ul style="list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style="list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

결과는 아래와 같습니다.

The marker-offset Property:

이 속성은 IE 6, Netscape 7 이하에서는 지원하지 않는다는군요.

예제를 봅시다. 

<ul style="list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style="list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

결과는 아래와 같습니다.

Reference : http://www.tutorialspoint.com/css/css_lists.htm

margin 속성은 HTML 요소의 주변 공간을 조절합니다. 다른 컨텐트와 오버래핑 할 수도 있습니다. 음수값을 사용한다면 말이죠.

이 속성의 값은 자식 요소에게 상속되지 않습니다. 그리고 주의할 점은 붙어있는 두 요소간의 top, bottom 마진의 경우 중복 적용이 되는 것이 아니라 큰 숫자만 적용이 된다는 것입니다. 이게 무슨 말이냐고요? 천천히 예제를 따라가보도록 해보세요.

다음은 여백 관련 속성입니다.

• margin 

• margin-bottom  

• margin-top  

• margin-left  

• margin-right  

이제 하나하나 예제를 통해서 알아보도록 할까요? 

The margin Property:

한방에 끝내는 속성입니다. 모든 마진 관련된 속성값을 넣어서 한번에 설정을 할 수 있습니다.

아래는 p 태그 주변에 마진을 설정할 때의 마진 속성 사용법입니다. 

예제를 한번 보시죠. 

결과는 아래와 같습니다.

The margin-bottom Property:

이건 뭐 말 안해도 아래족 마진 속성이라는 것을 아실겁니다. 속성값으로는 length, % 또는 auto 를 가질 수 있습니다.

결과는 아래와 같습니다.

The margin-top Property:

결과는 아래와 같습니다.

The margin-left Property:

결과는 아래와 같습니다. 

The margin-right Property:

결과는 아래와 같습니다. 

Reference : http://www.tutorialspoint.com/css/css_margins.htm 

이번 포스팅에서는 테두리에 대한 속성들에 대해서 알아보도록 하겠습니다.

• border-color 테두리 색상을 설정하는 속성이죠. 

• border-style 테두리 스타일을 결정짓는 속성이네요.

• border-width 테두리 두께를 설정하는 속성입니다. 

늘 그렇듯이 역시 예제를 보는게 빨리 배우는 지름길이죠.  

시작해 볼까요?? 

The border-color Property:

테두리 색상을 변경할 때는 사방을 한꺼번에 변경할 수도 있겠지만 방향마다 다르게 색상을 지정할 수도 있습니다. 아래와 같은 속성들을 이용해서 말이죠.

• border-bottom-color

• border-top-color 

• border-left-color 

• border-right-color 

예제를 한번 볼까요?? 

<style type="text/css">
p.example1{
   border:1px solid;
   border-bottom-color:#009900; /* Green */
   border-top-color:#FF0000;    /* Red */
   border-left-color:#330000;   /* Black */
   border-right-color:#0000CC;  /* Blue */
}
p.example2{
   border:1px solid;
   border-color:#009900;        /* Green */
}
</style>
<p class="example1">
This example is showing all borders in different colors.
</p>
<p class="example2">
This example is showing all borders in green color only.
</p>

결과는 아래와 같습니다.

The border-style Property:

테두리 스타일을 내 마음대로 변경할 수 있습니다. 테두리 스타일의 종류로는 아래와 같은 것들이 있습니다.

• none: No border. (Equivalent of border-width:0;)

• solid: Border is a single solid line.

• dotted: Border is a series of dots.

• dashed: Border is a series of short lines.

• double: Border is two solid lines.

• groove: Border looks as though it is carved into the page.

• ridge: Border looks the opposite of groove.

• inset: Border makes the box look like it is embedded in the page.

• outset: Border makes the box look like it is coming out of the canvas.

• hidden: Same as none, except in terms of border-conflict resolution for table elements.

테두리 스타일 역시 방향에 따라 각기 다른 스타일을 설정할 수 있습니다. 아래 속성들을 이용해서 말이죠. 

• border-bottom-style 

• border-top-style 

• border-left-style 

• border-right-style 

예제를 한번 보시죠. 

<p style="border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style="border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style="border-width:4px; border-style:dashed;">
This is a dahsed border.
</p>
<p style="border-width:4px; border-style:double;">
This is a double border.
</p>
<p style="border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style="border-width:4px; border-style:ridge">
This is aridge  border.
</p>
<p style="border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style="border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style="border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style="border-width:4px; 
             border-top-style:solid;
             border-bottom-style:dashed;
             border-left-style:groove;
             border-right-style:double;">
This is a a border with four different styles.
</p>

결과는 아래와 같습니다.

The border-width Property:

테두리 두께를 내 마음대로 변경할 수 있게끔 해주는 속성입니다. 단위로는 px, pt, cm을 사용할 수도 있고, 정도에 따라 thin, medium, 또는 thick 값을 지정할 수도 있습니다.

이 속성 역시 방향에 따라 각각 부여 할 수 있습니다. 

• border-bottom-width 

• border-top-width 

• border-left-width 

• border-right-width 

다음 예제를 한번 보시죠. 

<p style="border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
<p style="border-width:4pt; border-style:solid;">
This is a solid border whose width is 4pt.
</p>
<p style="border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style="border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style="border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>
<p style="border-bottom-width:4px;
             border-top-width:10px;
             border-left-width: 2px;
             border-right-width:15px;
             border-style:solid;">
This is a a border with four different width.
</p>

결과는 아래와 같습니다. 

Border Properties Using Shorthand:

지금까지 테두리의 색상, 스타일, 그리고 두께에 대해서 속성값을 변경하는 법을 배워보았습니다.

그런데 하나하나 지정해주려니 좀 귀찮은 감이 없지않아 있네요.

그래서 여기 type less do more를 실천하고있는 방법을 하나 소개해 드리려고 합니다.

다음 예제를 한번 보실까요??

<p style="border:4px solid red;">
This example is showing shorthand property for border.
</p>

결과는 아래와 같습니다. 

위 처럼 두께, 스타일, 색상 속성을 한꺼번에 쓸 수도 있습니다.

어때요? 완전 간단하죠? ^_^ 

Reference : http://www.tutorialspoint.com/css/css_borders.htm

이번 포스팅에서는 CSS를 이용한 테이블 관련 속성을 설정하는 것을 알아보도록 하겠습니다.

테이블 관련 속성에는 다음과 같은 것들이 있습니다. 

• border-collapse

• border-spacing 

• caption-side 

• empty-cells 

• table-layout 

이제 이 속성들을 어떻게 사용하는지 한번 볼까요??? ^-^ 

The border-collapse Property:

이 속성은 다음 두가지 값을 가질 수 있습니다. collapse 와 separate.  

다음은 두 가지 값에 대한 예제입니다. 

<style type="text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
      border-style:dotted; 
      border-width:3px; 
      border-color:#000000; 
      padding: 10px;
}
td.b {border-style:solid; 
      border-width:3px; 
      border-color:#333333; 
      padding:10px;
}
</style>
<table class="one">
<caption>Collapse Border Example</caption>
<tr><td class="a"> Cell A Collapse Example</td></tr>
<tr><td class="b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class="two">
<caption>Separate Border Example</caption>
<tr><td class="a"> Cell A Separate Example</td></tr>
<tr><td class="b"> Cell B Separate Example</td></tr>
</table>

직접 테스트 해보세요.

Collapse 속성값을 주게되면 테이블 내의 셀들의 보더가 붙어있을 경우 한줄로 보이게 됩니다.

반대로 separate속성값을 주게되면 붙어있는 두 셀의 보더가 따로 떨어져서 보이게 됩니다.

The border-spacing Property:

이 속성은 보더 사이의 간격을 띄우는 속성입니다. 속성값으로는 하나 또는 두개의 값을 가질 수 있고, 이 값은 길이의 단위여야 합니다.

값을 하나만 줄 경우에는 가로, 세로에 동일한 값이 적용이 되며 두개의 값을 줄 경우에는 첫째값이 가로 스페이스, 두번째 값이 세로 스페이스를 위한 값으로 간주됩니다.

NOTE: Netscape 7 또는 IE 6 에서는 적용되지 않는다고 하네요. 아직도 IE 6 사용하는 사람이 있을지는 의문이지만요. 

<style type="text/css">
/* If you provide one value */
table.example {border-spacing:10px;}
/* This is how you can provide two values */
table.example {border-spacing:10px; 15px;}
</style>

앞서 했던 예제의 소스를 변경해보도록 하겠습니다. 

<style type="text/css">
table.one {
   border-collapse:separate;
   width:400px;
   border-spacing:10px;
}
table.two {
   border-collapse:separate;
   width:400px;
   border-spacing:10px 50px;
}
</style>
<table class="one" border="1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />
<table class="two" border="1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>

결과는 아래와 같습니다.

직접 테스트 해보는 것 잊지 마세요. 꼭 이요!!! ^-^ 

The caption-side Property:

이 속성은 캡션을 어디에 위치시킬 것인지에 대한 속성입니다. 속성값으로는 다음 네가지 중 한개를 가질 수 있습니다. top, bottom, left or right.  그럼 각각의 예제를 한번 볼까요?? 

NOTE: IE 에서는 작동을 안할 수 있다는 군요.

<style type="text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>

<table style="width:400px; border:1px solid black;">
<caption class="top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />

<table style="width:400px; border:1px solid black;">
<caption class="bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />

<table style="width:400px; border:1px solid black;">
<caption class="left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />

<table style="width:400px; border:1px solid black;">
<caption class="right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>

결과는 아래와 같습니다.

The empty-cells Property:

이 속성은 빈 셀과 관련된 속성입니다. 속성값으로는 show, hide, inherit 중에 하나를 가질 수 있습니다. 

<style type="text/css">
table.empty{
    width:350px;
    border-collapse:separate;
    empty-cells:hide;
}
td.empty{
    padding:5px;
    border-style:solid;
    border-width:1px;
    border-color:#999999;
}
</style>
<table class="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty"></td>
</tr>
</table>

결과는 아래와 같습니다. 

The table-layout Property:

이 속성은 브라우저에 테이블을 보여줄 때 어떻게 보여줄 것인지를 컨트롤 할 수 있게 해주는 속성입니다. 속성값으로는 fixed, auto, 또는 inherit 을 가질 수 있습니다.

세가지 값에 대한 차이점을 한번 알아보도록 하죠. 

NOTE: 참고로 이 속성은 많은 브라우저에서 지원하지 않는다고 합니다.

<style type="text/css">
table.auto
{
table-layout: auto
}
table.fixed
{
table-layout: fixed
}
</style>
<table class="auto" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
<br />
<table class="fixed" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>

결과는 아래와 같습니다.

꼭 스스로 테스트 해보고 결과를 확인하세요.  

브라우저 별로 해보고 브라우저의 버전별로 해보고 열심히 공부해야 고수가 될 수 있습니다.

Reference : http://www.tutorialspoint.com/css/css_tables.htm

이번에는 CSS 속성을 이용해서 텍스트를 조작하는 방법에 대해서 알아보겠습니다.

• The color property is used to set the color of a text.

• The direction property is used to set the text direction.

• The letter-spacing property is used to add or subtract space between the letters that make up a word.

• The word-spacing property is used to add or subtract space between the words of a sentence.

• The text-indent property is used to indent the text of a paragraph.

• The text-align property is used to align the text of a document.

• The text-decoration property is used to underline, overline, and strikethrough text.

• The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.

• The white-space property is used to control the flow and formatting of text.

• The text-shadow property is used to set the text shadow around a text.

텍스트 색깔 설정

<p style="color:red;">
This text will be written in red.
</p>

결과는 아래와 같습니다.

텍스트 방향 설정

Following is the example which demonstrates how to set the direction of a text. Possible values are ltr or rtl.

<p style="direction:rtl;">
This text will be renedered from right to left
</p>

결과는 아래와 같습니다.

문자 사이의 공간 설정

Following is the example which demonstrates how to set the space between characters. Possible values are normal or a number specifying space..

<p style="letter-spacing:5px;">
This text is having space between letters.
</p>

결과는 아래와 같습니다.

단어 사이의 공간 설정

Following is the example which demonstrates how to set the space between words. Possible values are normal or a number specifying space..

<p style="word-spacing:5px;">
This text is having space between words.
</p>

결과는 아래와 같습니다.

텍스트 인덴트 설정

Following is the example which demonstrates how to indent the first line of a paragraph. Possible values are % or a number specifying indent space..

<p style="text-indent:1cm;">
This text will have first line indented by 1cm
and this line will remain at its actual position
this is done by CSS text-indent property.
</p>

결과는 아래와 같습니다.

텍스트 정렬 설정

Following is the example which demonstrates how to align a text. Possible values are left, right, center, justify..

<p style="text-align:right;">
This will be right aligned.
</p>
<p style="text-align:center;">
This will be center aligned.
</p>
<p style="text-align:left;">
This will be left aligned.
</p>

결과는 아래와 같습니다.

텍스트 꾸밈 설정

Following is the example which demonstrates how to decorate a text. Possible values are none, underline, overline, line-through, blink..

<p style="text-decoration:underline;">
This will be underlined
</p>
<p style="text-decoration:line-through;">
This will be striked through.
</p>
<p style="text-decoration:overline;">
This will have a over line.
</p>
<p style="text-decoration:blink;">
This text will have blinking effect
</p>

결과는 아래와 같습니다.

텍스트 대소문자 설정

Following is the example which demonstrates how to set the cases for a text. Possible values are none, capitalize, uppercase, lowercase..

<p style="text-transform:capitalize;">
This will be capitalized
</p>
<p style="text-transform:uppercase;">
This will be in uppercase
</p>
<p style="text-transform:lowercase;">
This will be in lowercase
</p>

결과는 아래와 같습니다.

텍스트 white-space 설정

Following is the example which demonstrates how white space inside an element is handled. Possible values are normal, pre, nowrap.

<p style="white-space:pre;">This text has a line break
and the white-space pre setting tells the browser to honor it
just like the HTML pre tag.</p>

결과는 아래와 같습니다. 

텍스트 그림자 설정

Following is the example which demonstrates how to set the shadow around a text. This may not be supported by all the browsers.

<p style="text-shadow:4px 4px 8px blue;">
If your browser supports the CSS text-shadow property, 
this text will have a  blue shadow.</p>

결과는 아래와 같습니다.

Reference : http://www.tutorialspoint.com/css/css_text.htm

이번 포스팅에서는 CSS를 이용해서 폰트를 설정하는 방법에 대해서 알아보도록 하겠습니다.

• font-family 는 폰트를 변경하는 속성입니다. ( 돋움체, 굴림체 뭐 이런것들 있죠? ) 

• font-style 는 폰트를 체를 변경하는 속성입니다. ( italic, oblique ) 

• font-variant 는 대소문자를 설정하는 속성입니다.

• font-weight 는 폰트의 굵기를 설정하는 속성입니다. ( bold, light ) 

• font-size 는 폰트 사이즈를 설정하는 속성입니다.

• font 는 폰트관련 모든 속성을 한번에 설정할 수 있는 한방 속성입니다.

폰트 패밀리 설정하기

설정 가능한 값은 모든 폰트 패밀리 값입니다. 예를들면 aria, serif와 같은 폰트 서체입니다.  

<p style="font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the default
serif font depending on which font  you have at your system.
</p>

결과는 아래와 같습니다.

폰트 스타일 설정하기

설정 가능한 값은 normal, italic 그리고 oblique 입니다. 

<p style="font-style:italic;">
This text will be rendered in italic style
</p>

결과는 아래와 같습니다.

폰트 변종 설정하기

가능한 값은 normal 과 small-caps가 있습니다.

<p style="font-variant:small-caps;">
This text will be rendered as small caps
</p>

결과는 아래와 같습니다.

폰트 두께 설정하기

폰트의 두께를 설정하는 속성입니다.

가능한 값은 normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 이 있습니다.

<p style="font-weight:bold;">
This font is bold.
</p>
<p style="font-weight:bolder;">
This font is bolder.
</p>
<p style="font-weight:900;">
This font is 900 weight.
</p>

결과는 아래와 같습니다.

폰트 사이즈 설정하기

가능한 값은 xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, 그리고 픽셀값 또는 퍼센트 값입니다.

<p style="font-size:20px;">
This font size is 20 pixels
</p>
<p style="font-size:10pt;">
This font size is small
</p>
<p style="font-size:14pt;">
This font size is large
</p>

결과는 아래와 같습니다. 

폰트 사이즈 adjust 설정하기

이번에는 폰트의 사이즈 adjust 설정을 하는 것이네요. 가능한 값은 모든 숫자값입니다.  

<p style="font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>

결과는 아래와 같습니다.

폰트 스트레치 설정

가능한 값은 normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded 가 있습니다. 이 속성은 여러분 컴퓨터에 있는 폰트가 

<p style="font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that 
your computer doesn't have a condensed or expanded 
version of the font being used.
</p>

결과는 아래와 같습니다.

폰트 속성 한번에 설정하기

<p style="font:italic small-caps bold 15px georgia;">
Applying all the properties on the text at once.
</p>

결과는 아래와 같습니다

이상으로 폰트 관련 속성들에 대해서 알아보았습니다.

휴우~~~ 슬슬 CSS가 재미있어 지시나요? 지겨워지시나요?

이제 시작인데 말이죠 ㅋㅋㅋ

화이팅입니다~~ 

Reference : http://www.tutorialspoint.com/css/css_fonts.htm 

Jboss AS 7 에서 module.xml 설정을 위한 간략한 설명을 적어놓은 좋은 자료를 찾아서 포스팅 해봅니다.

영문이긴하지만 어려운 말은 없으니 한번 읽어보시길 바랍니다 ^-^ 

Full module.xml example with comments 

    <?xml version="1.0" encoding="UTF-8"?> 
     
    <module xmlns="urn:jboss:module:1.1" name="org.jboss.msc"> 
     
        <!-- Main class to use when launched as a standalone jar. --> 
        <main-class name="org.jboss.msc.Version"/> 
     
        <!-- Properties readable through Modules API. Not to be confused with Java system properties. --> 
        <properties> 
            <!-- jboss.api=private means that the module is not part of the JBoss AS 7 public API - basically saying, "Don't use it's packages in your apps." --> 
            <property name="jboss.api" value="private"/> 
        </properties> 
     
        <resources> 
            <!-- Basically, list of jars to load classes and resources from. --> 
            <resource-root path="jboss-msc-1.0.1.GA.jar"/> 
            ... 
        </resources> 
     
        <dependencies> 
     
            <!--  Export paths and packages from the class loader which loaded JBoss Modules (usually the system's application CL). --> 
            <system export="true"> 
                <!-- List of exported paths. Mandatory. --> 
                <paths> 
                   <path name="org/jboss/modules"/> 
                   <path name="org/jboss/modules/log"/> 
                </paths> 
                <!-- Optional limitation of what's exported. --> 
                <exports> 
                     <include path="META-INF/"/> 
                </exports> 
            </system> 
     
            <!-- Dependencies on other modules. Classloader of this module will have their classes visible. --> 
            <module name="javax.api"/> 
            <module name="org.jboss.logging"/> 
     
            <!-- services="import/export/none" controls whether services defined in META-INF/services are also visible to/from this module. 
                   I.e. services="export" will make the services of this module visible to the dependency. Import will do the other way around. 
                   Defaults to "none". --> 
            <!-- export="true" controls whether own exports of this dependency are visible. --> 
            <module name="org.jboss.ws.native.jbossws-native-core" services="export" export="true"> 
                <!-- You can limit what packages in dependency modules are allowed  
                       to be seen from this module's point of view (import), or vice versa (export). 
                       By default, all are imported/exported. When you specify <imports> or <exports>, only those listed are. --> 
                <imports> 
                   <include path="META-INF"/> 
                   <include path="dtd"/> 
                   <include path="schema"/> 
                   <exclude-set> 
                       <path name="org.jboss.example.tests"/> 
                   </exclude-set> 
                </imports> 
                <exports> 
                    <include path="META-INF"/> 
                    <include path="dtd"/> 
                    <include path="schema"/> 
                </exports> 
            </module> 
     
            <!-- Optional deps --> 
            <module name="javax.inject.api" optional="true"/> 
        </dependencies> 
    </module> 


- See more at: https://developer.jboss.org/people/ozizka/blog/2012/11/12/about-modulexml-in-jboss-as-7#sthash.oZ0bLEzI.dpuf

출처 : https://developer.jboss.org/people/ozizka/blog/2012/11/12/about-modulexml-in-jboss-as-7

웹로직 default 어드민 서버 포트(7001) 변경

<Aug 16, 2011 5:03:50 PM GMT+09:00> <Emergency> <Security> <BEA-090087> <Server failed to bind to the configured Admin port. The port may already be used by another process.>
<Aug 16, 2011 5:03:50 PM GMT+09:00> <Critical> <WebLogicServer> <BEA-000362> <Server failed. Reason: Server failed to bind to any usable port. See preceeding log message for details.>
<Aug 16, 2011 5:03:50 PM GMT+09:00> <Error> <Server> <BEA-002606> <Unable to create a server socket for listening on channel "Default[2]". The address 127.0.0.1 might be incorrect or another process is using port 7001: java.net.BindException: Address already in use.>
<Aug 16, 2011 5:03:50 PM GMT+09:00> <Notice> <WebLogicServer> <BEA-000365> <Server state changed to FAILED>
<Aug 16, 2011 5:03:50 PM GMT+09:00> <Error> <WebLogicServer> <BEA-000383> <A critical service failed. The server will shut itself down>
<Aug 16, 2011 5:03:50 PM GMT+09:00> <Notice> <WebLogicServer> <BEA-000365> <Server state changed to FORCE_SHUTTING_DOWN>
<Aug 16, 2011 5:03:50 PM GMT+09:00> <Error> <Server> <BEA-002606> <Unable to create a server socket for listening on channel "Default". The address 192.168.213.132 might be incorrect or another process is using port 7001: java.net.BindException: Address already in use.>
<Aug 16, 2011 5:03:50 PM GMT+09:00> <Error> <Server> <BEA-002606> <Unable to create a server socket for listening on channel "Default[3]". The address 0:0:0:0:0:0:0:1 might be incorrect or another process is using port 7001: java.net.BindException: Address already in use.>
<Aug 16, 2011 5:03:50 PM GMT+09:00> <Error> <Server> <BEA-002606> <Unable to create a server socket for listening on channel "Default[1]". The address fe80:0:0:0:20c:29ff:fee0:753c might be incorrect or another process is using port 7001: java.net.BindException: Address already in use.>

하나의 웹로직 머신에 업무상 다수의 도메인을 사용할 경우,
기본 포트가 7001인 웹로직 서버 도메인의 어드민 서버 구동시 포트 충돌 에러가 발생합니다.
이럴 경우 대처 방법은 간단합니다.

웹로직 도메인 설정 파일을 수정후 재기동 하면됩니다.

1. DOMAIN_HOME/config/config.xml
   

    <name>AdminServer</name>
    <listen-address/>

이러한 부분이 존재하는데요, 여기서 <name>태그 아래 부분에 <listen-port>태그를 추가후 재기동을 하면 됩니다.

    <name>AdminServer</name>
    <listen-port>7000</listen-port>
    <listen-address/>

이렇게 하면 되겠습니다.

즉, 웹로직 서버에는 다수의 도메인을 생성할 수 있으며 하나의 도메인은 각각의 콘솔이 존재한다는 것을 알 수 있습니다.

혹시, <listen-port>를 <listen-address>아랫부분에 추가할 경우 아래와 같은 에러가 발생하는 것을 확인 할 수 있었습니다.
주의하시기 바랍니다.

<Aug 16, 2011 5:32:37 PM GMT+09:00> <Critical> <WebLogicServer> <BEA-000362> <Server failed. Reason: [Management:141245]Schema Validation Error in /home/oracle/Middleware/domains/base_domain/base_domain/config/config.xml see log for details. Schema validation can be disabled by starting the server with the command line option: -Dweblogic.configuration.schemaValidationEnabled=false>
<Aug 16, 2011 5:32:37 PM GMT+09:00> <Notice> <WebLogicServer> <BEA-000365> <Server state changed to FAILED>
<Aug 16, 2011 5:32:37 PM GMT+09:00> <Error> <WebLogicServer> <BEA-000383> <A critical service failed. The server will shut itself down>
<Aug 16, 2011 5:32:37 PM GMT+09:00> <Notice> <WebLogicServer> <BEA-000365> <Server state changed to FORCE_SHUTTING_DOWN>

출처 : http://blog.daum.net/_blog/BlogTypeView.do?blogid=0F6LZ&articleno=12283804