Redis 는 오픈소스이며 메모리를 이용한 키-값 페어로 저장하는 데이터베이스입니다. 따라서 일반 디스크에 저장하는 데이터베이스보다 속도가 월등히 뛰어나며 웹어플리케이션에서 유용하게 사용될 수 있습니다.

Redis 는 다른 경쟁 데이터베이스와 비교했을 때 다음과 같은 차이점이 있습니다.

• Redis 는 데이터베이스를 완전히 메모리에 저장하며 영속성을 위해서만 디스크를 사용합니다.

• Redis 는 다른 키-값 저장형태를 사용하는 데이터베이스들과 비교했을 때 상대적으로 다양한 데이터 타입을 지원합니다.

• Redis 는 무제한의 슬레이브 복제를 가능하게 합니다.

Redis Advantages (레디스의 장점)

• Exceptionally Fast (매우 빠른 속도) : Redis 는 매우 빠른 속도를 자랑합니다. 초당 110000 건의 업데이트가 가능하며, 약 81000 건의 조회가 가능합니다.

• Supports Rich data types (다양한 데이터 타입 지원) : Redis 는 기본적으로 개발자들이 알고있는 대부분의 데이터 타입을 지원합니다. 리스트(list), 집합(set), 정렬된 셋(sorted set), 해쉬(hashes) 등을 모두 지원합니다. 따라서 왠만한 문제를 해결하기 위해서 특별히 공을 들여 특정 데이터 타입에 맞도록 설계할 필요가 없어집니다.

• Operations are atomic (동작의 원자성) : 모든 레디스 오퍼레이션은 원자성을 띄기 때문에, 두 명 이상의 사용자가 동시에 레디스 서버에 접속할 경우 업데이트된 값을 조회할 수 있습니다.

• MultiUtility Tool () : Redis 는 멀티 유틸리티 툴이고 다양한 케이스에 사용될 수 있습니다. 예를들면 캐싱(caching), 메시지 큐(messaging-queues), 또는 세션 정보나 웹페이지 방문자수와 같은 짧은 기간동안에만 필요한 데이터들을 저장하기 위해 사용될 수 있죠.

레디스가 다른 키 - 값 저장 DB에 비해 다른 점?

• Redis 는 더 복잡한 데이터 타입을 값으로 저장할 수 있다는 점과 그런 데이터 타입을 저장하거나 조회하는데 atomic 접근을 보장하기 때문에 여타의 키-값 저장 DB와는 다른 길로 진화를 했다고 볼 수 있습니다.

• Redis 는 in-memory 기반이지만 디스크에 영속적인 데이터베이스이기 때문에 메모리에 저장될 수 없을만큼 많은 양의 데이터를 저장할 수는 없습니다. in-memory databases의 장점은 복잡한 데이터 구조를 다루는 것이 디스크에 저장된 동일한 데이터 구조를 다루는 것보다 쉽다는 것입니다. 이게 무슨 말인지는 아직 잘 이해가 되질 않네요.

Install Redis on Ubuntu (우분투에 레디스 설치하기)

우분투에 레디스를 설치하기 위해서는 터미널 창에서 아래와 같은 명령어를 입력하면 됩니다.

$sudo apt-get update
$sudo apt-get install redis-server

Start Redis (레디스 시작하기)

$redis-server

아주 간단하죠?

Check if redis is working? (레디스가 동작하는지 확인하기)

$redis-cli

이 명령어는 아래와 같은 레디스 프롬프트를 띄웁니다.

redis 127.0.0.1:6379>

이제 ping을 날려봅시다.

redis 127.0.0.1:6379> ping
PONG

그러면 위 처럼 PONG라는 단어가 출력이 되야 합니다. 여기까지 됐다면 레디스가 정상적으로 설치된 것입니다.

자바 프로그램을 짜다보면 현재 프로젝트의 root 경로를 필요로 할 때가 있다.

그럴 경우 아래처럼 

public static void main(String[] args) {
       
      System.out.println("Current Working Directory = " + System.getProperty("user.dir"));
}

System.getProperty 메서드에 user.dir 을 인자로 넣어주면 현재 프로젝트의 root 경로(absolute path)를 String 으로 반환합니다.

Use 'System.getProperty("user.dir")' method for getting current working directory as absolute path. The method returns a string value of the root path of the java project as an absolute path.

웹페이지를 디자인하다보면 구역을 나눠서 정보를 표시하게 됩니다.

CSS에서는 이렇게 구역을 나눈것처럼 보여지도록 할 수 있습니다. 실제로 테이블이나 frame으로 나눈것은 아니고 그냥 그렇게 보이게끔 하는 거죠.

CSS also provides table-layout property to make your tables load much faster.Following is the example:

<table style="table-layout:fixed;width:600px;">
  <tr height="30">
    <td width="150">CSS table layout cell 1</td>
    <td width="200">CSS table layout cell 2</td>
    <td width="250">CSS table layout cell 3</td>
  </tr>
</table>

You will notice the benefits more on large tables. The reason this makes tables load faster is because with traditional HTML, the browser had to calculate every cell before finally rendering the table. When you set the table-layout algorithm to fixed however, it only needs to look at the first row before rendering the whole table. This means that your table will need to have fixed column widths and row heights.

Sample Column Layout:

CSS를 이용해서 간단한 Column Layout 을 만들어보겠습니다.

우선 문서 전체의 마진과 패딩, 백그라운드를 설정합니다.

<style tyle="text/css">
<!--
body {
    margin:9px 9px 0 9px;
    padding:0;
    background:#FFF;
}
-->
</style>

Now we will define a column with yellow color and later we will attach this rule to a <div>:

<style tyle="text/css">
<!--
#level0 {
     background:#FC0;
}
-->
</style>

Up to this point we will have a document with yellow body, so lets now define another division inside level0:

<style tyle="text/css">
<!--
#level1 {
    margin-left:143px;
    padding-left:9px;
    background:#FFF;
}
-->
</style>

Now we will nest one more division inside level1 and we will change just background color:

<style tyle="text/css">
<!--
#level2 {
    background:#FFF3AC;
}
-->
</style>

Finally we use the same technique, nest a level3 division inside level2 to get the visual layout for the right column:

<style tyle="text/css">
<!--
#level3 {
    margin-right:143px;
    padding-right:9px;
    background:#FFF;
}
#main {
    background:#CCC;
}
-->
</style>

위 소스들을 모두 합쳐서 하나로 만들어보죠

<style tyle="text/css">
<!--
body {
    margin:9px 9px 0 9px;
    padding:0;
    background:#FFF;}
  #level0 {
    background:#FC0;}
  #level1 {
    margin-left:143px;
    padding-left:9px;
    background:#FFF;}
  #level2 {
    background:#FFF3AC;}
  #level3 {
    margin-right:143px;
    padding-right:9px;
    background:#FFF;}
  #main {
    background:#CCC;}
-->
</style>
<body>
  <div id="level0">
    <div id="level1">
      <div id="level2">
        <div id="level3">
          <div id="main">
            Final Content goes here...
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

자, 이제 이걸 테스트 해보세요. ^____^

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

자~ 오늘은 CSS 필터에 대해서 알아볼 텐데요~ 순수한 CSS를 이용해서 텍스트나 이미지 등등에 효과를 주는 방법을 알아볼 것입니다.

이 필터는 IE 4.0 이상에서만 작동합니다. 

( 테스트를 해봤는데 이 CSS 필터는 최근 브라우저( Chrome, IE, FireFox )에서는 지원을 안하는 것 같네요..^^;; 그냥 이런 것도 있구나 하시면 될것 같습니다.)

자, 그럼 CSS 필터에 대해서 하나하나 알아보도록 할까요?

모든 예제는 브라우저 별로 결과가 다르게 보일 수 있다는 것을 명심하세요. 적용이 안되는 브라우저도 있습니다.

Alpha Channel

이건 뭐 이미 다 아시리라 생각합니다. 알파 값이죠. 객체의 투명도를 설정하는 필터입니다.

다음은 이 필터에서 사용할 수 있는 파라미터와 그에대한 설명입니다.

예제:

Motion Blur

This will be used to create blurred pictures or text with the direction and strength. Following are the parameters which can be used in this filter:

예제:

Chroma Filter

This will be used to make any particular color transparent and usually it is used with images. You can use it with scrollbars also.Following are the parameters which can be used in this filter:

예제:

Drop Shadow Effect

This will be used to create a shadow of your object at the specified X (horizontal) and Y (vertical) offset and color. . Following are the parameters which can be used in this filter:

예제:

Flip Effect

This will be used to create a mirror image of the object. Following are the parameters which can be used in this filter:

예제:

Glow Effect

This will be used to create a glow around the object. If it is a transparent image then glow is created around the opaque pixels of it. Following are the parameters which can be used in this filter:

예제:

Grayscale Effect

This will be used to convert the colors of the object to 256 shades of gray. Following are the parameters which can be used in this filter:

예제:

Invert Effect

This will be used to map the colors of the object to their opposite value in the color spectrum ie. to create a negative image. Following are the parameters which can be used in this filter:

예제:

Mask Effect

This will be used to turn transparent pixels to a specified color and makes opaque pixels transparent. Following are the parameters which can be used in this filter:

예제:

Shadow Filter

This will be used to create an attenuated shadow in the direction and color specified. This is a filter lies in between Dropshadow and a Glow. Following are the parameters which can be used in this filter:

예제:

Wave Effect

This will be used to gives the object a sine wave distortion to make it look wavey. Following are the parameters which can be used in this filter:

예제:

X-Ray Effect

This will be used to grayscales and flattens the color depth. Following are the parameters which can be used in this filter:

예제:

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

이번 포스팅에서는 @ 규칙에 대해서 알아보도록 하겠습니다.

문서에 다른 CSS파일을 import할 때 @import를 쓰게 됩니다.  

이런 규칙들이 몇가지 있는데 이번에는 다음 네가지에 대해서만 알아보도록 하겠습니다. 

• @import 외부 CSS파일을 현재 CSS파일에 import합니다.

• @charset CSS파일의 캐릭터셋을 지정합니다.

• @font-face 문서에서의 문서체를 지정합니다.

• !important 다른 스타일을 오버라이드 합니다.

NOTE: 위 네가지 이외에도 다른 규칙들도 있지만 여기서는 다루지 않습니다. 

The @import rule

이 규칙은 아래 두가지 방법중 한가지 방법으로 사용하시면 됩니다.

로컬파일을 import하는 방법과 url을 이용하여 원격파일을 import하는 방법이 있습니다. 

<style tyle="text/css">
<!--
@import "mystyle.css";
or
@import url("mystyle.css");
.......other CSS rules .....
-->
</style>

CSS를 모듈화 할 수 있게끔 해주는 규칙이므로 중요한 규칙이고 자주 사용하시게 될겁니다. 

The @charset Rule

캐릭터셋을 정의하는 규칙이죠. 별거 없습니다.

<style tyle="text/css">
<!--
@charset "iso-8859-1"
.......other CSS rules .....
-->
</style>

The @font-face Rule

문서내에서 사용될 문서체를 정의하는 규칙입니다. 또한 다운로드할 폰트의 위치를 지정해주기 위한 규칙이기도 합니다.

일반적으로 @font-face 규칙은 매우 복잡하고 폰트 전문가가 아닌 이상 사용을 권장하지도 않습니다.

다음 예제를 보시죠. 

<style tyle="text/css">
<!--
@font-face {
  font-family: "Scarborough Light";
 src: url("http://www.font.site/s/scarbo-lt");
}
@font-face {
 font-family: Santiago;
 src: local ("Santiago"),
 url("http://www.font.site/s/santiago.tt")
 format("truetype");
 unicode-range: U+??,U+100-220;
 font-size: all;
 font-family: sans-serif;
}
-->
</style>

The !important Rule

CSS가 브라우저에 적용될 때 순서대로 적용이 되도록 되어있습니다. 따라서 앞에서 정의했던 것이 적용이 된 뒤에 마지막에 정의한 것이 적용이 되는데 이때 동일한 요소에 대해서 다른 값을 정의해버리면 마지막에 정의한 값이 적용되고 앞에서 정의한 값은 적용이 되지 않습니다. 

만약 어떤 속성이 정말 중요해서 이건 실수로 오버라이드 되면 안된다 싶을때 사용하는것이 바로 이 !important 규칙입니다.  

이 규칙을 적용한 스타일은 문서의 어느곳에나 있어도 적용이 됩니다. 

다음 예제를 한번 보시죠.

<style tyle="text/css">
<!--
p { color: #ff0000; }
p { color: #000000; }
-->
</style>

동일한 요소에 서로다른 색상을 적용시키는 스타일이 선언되어있습니다. 앞에꺼는 빨간색, 뒤에꺼는 검은색이죠. 그러면 후자인 검정색만 적용이 됩니다. 이때 빨간색 속성이 중요한 속성이다라고 아래처럼 선언을 해주시면....

<style tyle="text/css">
<!--
p { color: #ff0000 !important; }
p { color: #000000; }
-->
</style>

뒤에 검은색 속성을 정의했다고 하더라도 빨간색이 적용되어지게 됩니다.

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

이번 포스팅에서는 슈도 엘리먼트들에 대해서 알아보도록 하겠습니다.

이녀석들은 슈도 클래스와 비슷한 녀석들입니다.  

이름 말고는 다른게 없어보이네요. ( 사실 저도 잘 몰라서 ...ㅋㅋㅋ )

문법도 슈도 클래스와 동일해보입니다.

selector:pseudo-element {property: value}

CSS 클래스와 함께 쓰이기도 하죠.

selector.class:pseudo-element {property: value}

가장 많이 사용되는 pseudo-elements에는 다음과 같은 것들이 있습니다. 

The :first-line pseudo-element

Following is the example which demonstrates how to use :first-line element to add special effect to the first line of elements in the document .

<style type="text/css">
p:first-line { text-decoration: underline; }
p.noline:first-line { text-decoration: none; }
</style>
<p class="noline"> This line would not have any underline
because this belongs to nline class.</p>

<p>The first line of this paragraph will be underlined
as defined in the CSS rule above. Rest of the lines in this
paragraph will remain normal. This example shows how to use
:first-line pseduo element to give effect to the first line
of any HTML element.</p>

결과는 아래와 같습니다.

The :first-letter pseudo-element

Following is the example which demonstrates how to use :first-letter element to add special effect to the first letter of elements in the document .

<style type="text/css">
p:first-letter { font-size: 3em; text-color:red; }
p.normal:first-letter { font-size: 10px; }
</style>
<p class="normal"> First character of this paragraph will 
be normal and will have font size 10 px;</p>

<p>The first character of this paragraph will be 3em big
and in red color as defined in the CSS rule above. Rest of the
characters in this paragraph will remain normal. This example 
shows how to use :first-letter pseduo element to give effect to
the first characters  of any HTML element.</p>

결과는 아래와 같습니다.

The :before pseudo-element

Following is the example which demonstrates how to use :before element to add some content before any element .

<style type="text/css">
p:before
{
content: url(/images/bullet.gif)
}
</style>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>

결과는 아래와 같습니다.

The :after pseudo-element

Following is the example which demonstrates how to use :after element to add some content after any element .

<style type="text/css">
p:after
{
content: url(/images/bullet.gif)
}
</style>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>

결과는 아래와 같습니다.

손수 페이지 만들어서 직접 테스트 해보는 것 잊지 마세요.!!!! ^-^ 

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

이번에는 CSS의 슈도클래스에 대해서 알아보도록 하겠습니다.  

슈도클래스는 특정 셀렉터에 특별한 효과를 부여하기 위해서 사용됩니다. Javascript 나 어떠한 다른 script 를 사용할 필요가 없습니다.

슈도클래스를 사용하는 기본적인 문법은 다음과 같습니다. 

CSS 클래스를 사용할 수도 있습니다. 

selector.class:pseudo-class {property: value}

다음은 가장 많이 사용되는 슈도 클래스들 목록 및 설명입니다.

<style>...</style> 블락 내에 슈도 클래스를 이용하게 될 때에는 다음과 같은 사항을 주의해야합니다. 

• a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.

• a:active MUST come after a:hover in the CSS definition in order to be effective.

• Pseudo-class names are not case-sensitive.

• Pseudo-class are different from CSS classes but they can be combined.

The :link pseudo-class

다음은 단순히 링크의 색상을 변경하는 예제입니다. 

<style type="text/css">
a:link {color:#000000}
</style>
<a href="/html/index.htm">Black Link</a>

The :visited pseudo-class

다음은 한번 이상 방문한 링크의 색상을 변경하는 예제입니다. 

<style type="text/css">
a:visited {color: #006600}
</style>
<a href="/html/index.htm">Click this link</a>

The :hover pseudo-class

다음은 마우스 커서가 링크 위에 올라갔을 때 색깔을 변경하도록 하는 예제입니다.

<style type="text/css">
a:hover {color: #FFCC00}
</style>
<a href="/html/index.htm">Bring Mouse Here</a>

The :active pseudo-class

 :active 슈도 클래스는 활성화된 요소에 대한 속성을 지정합니다.  

다음은 활성화된 링크의 색상을 변경하는 예제입니다. 

<style type="text/css">
a:active {color: #FF00CC}
</style>
<a href="/html/index.htm">Click This Link</a>

The :focus pseudo-class

이 클래스는 포커스를 받은 요소에 대한 속성의 속성값을 지정할 때 사용합니다. 

다음은 포커스된 링크의 색상을 변경하는 예제입니다. 

<style type="text/css">
a:focus {color: #0000FF}
</style>
<a href="/html/index.htm">Click this Link</a>

The :first-child pseudo-class

 :first-child 슈도 클래스는 이름만 봐도 첫번째 자식에 대한 속성을 설정하는거라고 보이네요.

이 슈도클래스를 사용하시려면 IE 에서는 문서 가장 윗부분에 <!DOCTYPE> 를 넣어주셔야 합니다.

그럼 예제를 한번 보시죠. 모든 div태그의 첫번째 문단을 인덴트하여 화면에 뿌려주는 예제입니다. 

<style type="text/css">
div > p:first-child
{
text-indent: 25px;
}
</style>

<div>
<p>
First paragraph in div. This paragraph will be indented
</p>
<p>
Second paragraph in div. This paragraph will not be  indented
</p>
</div>

<div>
<h3>Heading</h3>
<p>
The first paragraph inside the div.
This paragraph will not be effected.
</p>
</div>

결과는 아래와 같습니다. 

The :lang pseudo-class

 :lang 슈도 클래스는 특정 요소의 lang속성에 따라서 다른 값을 줄 때 사용합니다.

다국어 처리를 필요로하는 웹페이지를 만들때 유용하게 사용하실 수 있습니다. 예를 들면 인용문구 같은 경우에 불어에서는 꺽쇠 두개로 인용문구를 표현하지만 영어에서는 그냥 홑따옴표나 쌍따옴표를 이용합니다. 이럴때 이 :lang 슈도 클래스를 이용하시면 좋습니다.

그럼 예제를 통해서 좀더 알아보도록 하죠.  

다음 예제는 <blockquote> 태그를 현재 사용중인 언어에 맞게 변경해줍니다.

<style type="text/css">
/* Two levels of quotes for two languages*/
:lang(en) { quotes: '"' '"'  "'"  "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
<p>...<q lang="fr">A quote in a paragraph</q>...</p>

위 예제에서 :lang 셀렉터는 문서 전체 요소에 적용됩니다.   

결과는 아래와 같습니다. 

...<<A quote in a paragraph>>...

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

이번 포스팅에서는 레이어 관련 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 

CSS에서는 커서의 모양을 설정할 수 있는 cursor 속성을 제공합니다. 

이 속성은 submit버튼을 누를때 마치 링크가 걸려있을 때 손가락이 보이는 것처럼 설정을 해줄 수 있도록 해줍니다.  

아래 테이블에는 커서 속성이 가질 수 있는 값들에 대한 설명이 나와있습니다.

그럼 다음 예제를 한번 보도록 하죠.

<p>각 속성값 명칭 위에 마우스를 올려보세요. 마우스 커서모양이 변하는 것을 보실 수 있을 겁니다.</p>
<div style="cursor:auto">Auto</div>
<div style="cursor:crosshair">Crosshair</div>
<div style="cursor:default">Default</div>
<div style="cursor:pointer">Pointer</div>
<div style="cursor:move">Move</div>
<div style="cursor:e-resize">e-resize</div>
<div style="cursor:ne-resize">ne-resize</div>
<div style="cursor:nw-resize">nw-resize</div>
<div style="cursor:n-resize">n-resize</div>
<div style="cursor:se-resize">se-resize</div>
<div style="cursor:sw-resize">sw-resize</div>
<div style="cursor:s-resize">s-resize</div>
<div style="cursor:w-resize">w-resize</div>
<div style="cursor:text">text</div>
<div style="cursor:wait">wait</div>
<div style="cursor:help">help</div>

결과는 아래와 같습니다.

각 속성값 명칭 위에 마우스를 올려보세요. 마우스 커서모양이 변하는 것을 보실 수 있을 겁니다.

Reference : http://www.tutorialspoint.com/css/css_cursors.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를 이용한 링크 관련 설정에 대해서 알아보도록 하겠습니다.  

•  :link Signifies unvisited hyperlinks.

•  :visited Signifies visited hyperlinks.

•  :hover Signifies an element that currently has the user's mouse pointer hovering over it.

•  :active Signifies an element on which the user is currently clicking.

이 링크관련 속성은 HTML문서의 헤더부분에 정의를 하시면 됩니다. 그리고 a:hover속성은 a:link 와 a:visited 다음에 와야 합니다. 그리고 a:active속성은 a:hover속성 다음에 와야 합니다. 

<style type="text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>

# 참고로 아래 예제들은 네이버 블로그 특성상 스타일을 먹지 않고 있습니다. 개인적으로 html문서를 만들어서 테스트 해보시기를 권장합니다.

링크 기본 색상 설정

Following is the example which demonstrates how to set the link color. Possible value could be any color name in any valid format.

<style type="text/css">
a:link {color:#0000FF}
</style>
<a href="/html/index.htm">Black Link</a>

This will produce following black link:

방문했던 링크 색상 설정

Following is the example which demonstrates how to set the color of visited links. Possible value could be any color name in any valid format.

<style type="text/css">
a:visited {color: #006600}
</style>
<a href="/html/index.htm">Click this link</a>

This will produce following link. Once you will click this link, it will change its color to green.

마우스 hover시 링크 색상 설정

Following is the example which demonstrates how to change the color of links when we bring a mouse pointer over that link. Possible value could be any color name in any valid format.

<style type="text/css">
a:hover {color: #FFCC00}
</style>
<a href="/html/index.htm">Bring Mouse Here</a>

This will produce following link. Now you bring your mouse over this link and you will see that it changes its color to yellow.

액티브 링크 색상 설정

Following is the example which demonstrates how to change the color of active links. Possible value could be any color name in any valid format.

<style type="text/css">
a:active {color: #FF00CC}
</style>
<a href="/html/index.htm">Click This Link</a>

This will produce following link. This will change it color to pink when user clicks it.

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