이번에는 CSS 를 이용한 이미지 관련 속성을 설정하는 방법에 대해서 알아보도록 하겠습니다. 

• The border property is used to set the width of an image border.

• The height property is used to set the height of an image.

• The width property is used to set the width of an image.

• The -moz-opacity property is used to set the opacity of an image.

image border 속성

The border property of an image is used to set the width of an image border. This property can have a value in length or in %.

A width of zero pixels means no border.

Here is the example:

<img style="border:0px;" src="/images/css.gif" />
<br />
<img style="border:3px dashed red;" src="/images/css.gif" />

결과는 아래와 같습니다.

image height 속성

The height property of an image is used to set the height of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.

Here is the example:

<img style="border:1px solid red; height:100px;" 
        src="/images/css.gif" />
<br />
<img style="border:1px solid red; height:50%;" 
        src="/images/css.gif" />

결과는 아래와 같습니다.

image width 속성

The width property of an image is used to set the width of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.

Here is the example:

<img style="border:1px solid red; width:100px;" 
        src="/images/css.gif" />
<br />
<img style="border:1px solid red; width:100%;" 
        src="/images/css.gif" />

결과는 아래와 같습니다.

-moz-opacity 속성

 -moz-opacity 속성은 이미지의 opacity를 설정하기위한 속성입니다. 이 속성은 Mozilla에서 이미지의 투명도를 설정하기 위한 것입니다. IE 는 filter:alpha(opacity=x) 를 사용하죠.

Mozilla에서 (-moz-opacity:x) 속성을 사용할 때 x 값은 0.0 에서 1.0 을 지정할 수 있습니다. 숫자가 낮을 수록 더 투명해지죠.  

In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent.

Here is the example:

결과는 아래와 같습니다.

Reference : http://www.tutorialspoint.com/css/css_images.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를 HTML문서에서 사용하는 방법은 네가지가 있습니다. 그 중에서도 가장 많이 쓰이는 방법은 inline CSS와 External CSS.

1. Embedded CSS - The <style> Element:

 <style> 요소를 이용해서 <head>...</head> 태그 내에 삽입하는 방법입니다. 

<head>
<style type="text/css" media="...">
Style Rules
............
</style>
</head>

속성:

 <style> 태그 내의 속성과 값은 아래와 같습니다.

예제:

<head>
<style type="text/css" media="all">
h1{
color: #36C;
}
</style>
</head>

2. Inline CSS - The style Attribute:

인라인 CSS는 그냥 html태그 안에다가 써넣는 것을 말합니다. 가장 일반적으로 이렇게 사용하죠. 그러다가 따로 분리해서 관리해야되는 스타일이 있다면 이 다음에 설명한 External CSS를 이용하시면 됩니다. 

<element style="...style rules....">

속성:

예제:

<h1 style ="color:#36C;"> This is inline CSS </h1>

적용된 결과는 아래와 같습니다. 

3. External CSS - The <link> Element:

 <link> 요소를 이용하여 HTML 문서에 외부에서 정의된 CSS파일을 링크시킬 수가 있습니다. 

간단한 문법을 한번 볼까요??

<head>
<link type="text/css" href="..." media="..." />
</head>

속성:

 <link> 태그의 속성과 속성값들 입니다. 

예제:

간단하게 mystyle.css 를 만들어 봅시다.

h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

이제 mystyle.css파일을 HTML문서에 링크를 시켜볼까요??

<head>
<link type="text/css" href="mystyle.css" media="all" />
</head>

4. Imported CSS - @import Rule:

@import 를 이용해서 <link> 요소처럼 스타일파일에 링크를 걸 수도 있습니다.  기본문법은 다음과 같습니다.

<head>
@import "URL";
</head>

아래처럼 url()메소드를 이용할 수도 있습니다.

<head>
@import url("URL");
</head>

예제:

<head>
@import "mystyle.css";
</head>

CSS Rules Overriding ( 규칙 오버라이딩 )

지금까지 CSS를 사용하는 네가지 방법에 대해서 알아보았습니다. 이 네가지 규칙이 동시에 적용이 된다면 어떤일이 벌어질까요??? 서로서로 오버라이딩을 하게 되는데 그 규칙을 한번 알아보도록 하겠습니다. 

• inline 스타일이 다른 방법보다 항상 최우선시 적용됩니다.  

• <style>...</style> 태그 내에 지정된 스타일들은 외부 CSS파일에 정의된 값들보다 우선권을 가집니다.

• 외부 CSS파일은 항상 최저우선권을 가집니다. 

Handling old Browsers ( 구버전 브라우저 처리 )

구버전 브라우저 중에는 CSS를 지원하지 않는 브라우저가 있고 이런 브라우저를 사용하는 사용자들이 있을 수도 있겠죠. 만약 그럴경우에는 CSS를 적용하지 않도록 할 수 있습니다. 아래처럼 <!-- 와  --> 로 감싸서 말이죠. 

<style type="text/css">
<!--
body, td {
   color: blue;
}
-->
</style>

CSS Comments ( 주석 )

CSS에서 주석은 /* 주석처리 할 내용 */  이렇게 쓰시면 됩니다. 여러 줄에 걸쳐도 관계 없습니다. 

예제:

/* This is an external style sheet file */
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
/* end of 
style rules. */

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