이번에는 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를 이용해서 폰트를 설정하는 방법에 대해서 알아보도록 하겠습니다.

• 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 

이번 포스팅에서는 각종 HTML 태그내에서 쓰이는 배경 관련 속성에 대해서 알아보도록 하겠습니다. 배경관련 속성에는 다음과 같은 것들이 있습니다.

•  background-color 는 배경 색상을 설정하기 위한 속성입니다.

•  background-image 는 배경 이미지를 설정하기 위한 속성입니다.

•  background-repeat 는 배경 이미지의 반복 여부를 설정하기 위한 속성입니다.

•  background-position 는 배경 이미지의 위치를 설정하기 위한 속성입니다.

•  background-attachment 는 배경 이미지의 스크롤링을 설정하기 위한 속성입니다.

•  background property is used as shorthand to specify a number of other background properties.

배경 색 설정하기

<p style="background-color:yellow;">
This text has a yellow background color.
</p>

This will produce following result:

배경 이미지 설정하기

<table style="background-image:url(/images/pattern1.gif);">
<tr><td>
This table has background image set.
</td></tr>
</table>

배경 이미지 반복하기

<table style="background-image:url(/images/pattern1.gif); 
              background-repeat: repeat;">
<tr><td>
This table has background image which repeats multiple times.
</td></tr>
</table>

아래 예제는 배경 이미지를 세로로 반복시키는 예제입니다.

<table style="background-image:url(/images/pattern1.gif); 
              background-repeat: repeat-y;">
<tr><td>
This table has background image set which will repeat vertically.
</td></tr>
</table>

아래는 배경 이미지를 가로로 반복시키는 예제입니다.

<table style="background-image:url(/images/pattern1.gif); 
              background-repeat: repeat-x;">
<tr><td>
This table has background image set which will repeat horizontally.
</td></tr>
</table>

배경 이미지 위치 설정하기

배경 이미지를 왼쪽에서 100 픽셀 떨어뜨려서 위치시키는 예제입니다. 

<table style="background-image:url(/images/pattern1.gif); 
              background-position:100px;">
<tr><td>
Background image positioned 100 pixels away from the left.
</td></tr>
</table>

다으므 예제는 배경 이미지의 위치를 왼쪽에서 100 픽셀 그리고 위에서 200 픽셀 떨어진 곳에 위치시키는 예제입니다.

<table style="background-image:url(/images/pattern1.gif); 
              background-position:100px 200px;">
<tr><td>
This table has background image positioned 100
pixels away from the left and 200 pixels from the top.
</td></tr>
</table>

배경 이미지 고정 또는 스크롤 여부 설정하기

Background attachment determines whether a background image is fixed or scrolls with the rest of the page.

아래 예제는 배경이미지를 고정시키는 예제입니다. 

<p style="background-image:url(/images/pattern1.gif); 
              background-attachment:fixed;">
This parapgraph has fixed background image.
</p>

이번 예제는 스크롤링을 해주는 예제네요.

<p style="background-image:url(/images/pattern1.gif); 
              background-attachment:scroll;">
This parapgraph has scrolling background image.
</p>

배경 속성 한꺼번에 설정하기

background 속성은 여러개의 배경관련 속성을 한꺼번에 설정할 수 있도록 해줍니다. 

<p style="background:url(/images/pattern1.gif) repeat fixed;">
This parapgraph has fixed repeated background image.
</p>

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

CSS 에서 색깔을 지정하는 방법은 아래처럼 5가지 방법이 있습니다

아래에서 좀 더 자세히 알아보도록 하죠. 

1. CSS Colors - Hex Codes ( 16진수 RRGGBB 코드 )

16진수 코드로 표현할 때는 # 기호를 먼저 붙여주고 6자리의 RRGGBB 코드를 넣어주면 됩니다. RGB의 R은 빨강, G는 초록, B는 파랑입니다. RR이라는 것은 빨강을 나타내는 16진수 숫자를 말합니다. 예를 들면 00부터 FF까지의 값이 됩니다. GG와 BB역시 마찬가지입니다.

아래는 이렇게 16진수를 이용해서 색깔을 표시했을 때 어떻게 화면에 보여지는지를 보여주는 표입니다.

CSS Colors - Short Hex Codes ( 16진수 RGB 코드 )

CSS Colors - RGB Values ( 10진수 RGB 코드 )

이 방법은 rgb( ) 속성을 이용합니다.  0 부터 255 숫자나 퍼센트를 값에 넣어줄 수 있습니다.

NOTE: 모든 브라우저가 rgb() 속성을 지원하는 것이 아니기 때문에 이 방법은 권장하지 않습니다. 

예제 :  

<body style="color:rgb(0,0,255); background-color:rgb(0,255,0);"> 

Building Color Codes:

색깔 코드를 만들어주는 칼라 코드 빌더라는게 있네요.  HTML Color Code Builder.  

Browser Safe Colors:

아래 표는 브라우저의 영향이나 컴퓨터 디스플레이의 영향을 가장 안받는 그런 칼라표라고 하네요. 총 216 개의 색깔이 있습니다.

색깔을 보고 맘에드는거 코드 골라다가 쓰시면 됩니당. ^____^

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

CSS 에서 사용하는 단위(Unit)

실제로 CSS로 뭔가를 하기전에 기본부터 다지고 가는게 좋겠죠?

그래서 이번에는 각종 속성값에 쓰이는 단위를 한번 알아보도록 하겠습니다.

CSS는 절대값을 나타내는 inches, centimeters, points 등등 뿐 아니라 상대값을 나타내는 percentages나 em 단위를 지원합니다. 이런 단위들은 자주 쓰이기 때문에 꼭 짚고 넘어가시는 것이 좋습니다.

다음은 단위와 단위에 대한 설명 및 사용 예제입니다. 

example에 있는 내용을 css 파일에 작성해서 꼭!! 테스트해보세요~

Reference : http://www.tutorialspoint.com/css/css_measurement_units.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

CSS 를 사용하려면 문법에 따라야겠죠?? 이번 포스팅에서는 그 문법에 대해서 알아보도록 하겠습니다.  

CSS는 스타일 규칙을 따르는데 이 스타일 규칙에는 세가지 요소가 있습니다. 

• 셀렉터 : 셀렉터는 HTML 태그의 이름을 말합니다. 예를들면 <h1> 태그의 h1이나 <table> 태그의 table이 셀렉터인거죠.

• 속성 : 속성은 html태그 내에서 사용되는 그런 속성들을 말합니다. color나 border같은 것들을 말하는거죠.

• 값 : 이 값은 속성에 할당되는 값을 말합니다. color속성이 red값을 갖는다 뭐 이런거죠.

이 세가지 요소를 합하면 그게바로 아래와 같은 스타일 규칙입니다.

셀렉터 { 속성 : 값 }

예제 : 테이블 셀렉터의 속성 지정하기

table{ border :1px solid #C00; }

위 예제가 뭐하는건지 이해가 되나요? table태그의 속성 중에 border 속성 값을 1px solid #C00 로 설정을 한겁니다.

자, 이제 어느정도 감이 오나요???  

그럼 이제 셀렉터들이 어떤 것들이 있는지도 한번 봐볼까요? 

The Type Selectors ( 타입 셀렉터 )

h1태그가 뭔지는 이미 아시겠죠? 레벨1 헤더 태그죠. 그 태그의 색깔 속성을 지정해주는 예제가 밑에 있군요.

h1 { 
   color: #36CFFF; 
}

The Universal Selectors ( 유니버설 셀렉터 )

하나의 특정한 셀렉터를 선택하는 것이 아니라 모든 셀렉터에 대해서 속성을 지정해주고 싶을때 사용하는 유니버설 셀렉터입니다. * 기호는 "모든"이라는 의미를 갖고있죠.

* { 
  color: #000000; 
}

모든 셀렉터(태그)에 대해서 색까 속성값을 검정으로 설정한 예제죠? 아닌가요? 

The Descendant Selectors ( 후손 셀렉터 )

태그안에 또 다른 태그가 들어갈 수가 있습니다. 그럴때 후손 셀렉터에 대해서만 적용을 하고 싶은 속성값이 있을텐데 그럴때는 아래와 같이 사용하시면 됩니다. 아래 예제는 ul태그 안에 사용된 em태그의 속성을 지정해주는 예제입니다.

ul em {
  color: #000000; 
}

The Class Selectors ( 클래스 셀렉터 )

만약 클래스 단위로 속성값을 지정해주고 싶다면 클래스 셀렉터를 사용하시면 됩니다.  

사용법은 아래와 같습니다. 점(.)을 찍고 붙여서 클래스명을 써주시면 됩니다. 

.black {
  color: #000000; 
}

위 예제는 black클래스에 속한 모든 태그의 색을 검정색(#000000)으로 지정해주는 예제네요 . 좀 더 범위를 좁혀서 아래처럼 사용하실 수도 있습니다.  

h1.black {
  color: #000000; 
}

 <h1> 태그이면서 black클래스에 속한 태그들의 색깔을 모두 #000000으로 지정해주는 예제군요.

# 참고로 아래처럼 하나의 태그에 여러개의 클래스를 부여할 수 있다는 점도 알고계시면 좋겠네요:

<p class="center bold">
This para will be styled by the classes center and bold.
</p>

The ID Selectors ( 아이디 셀렉터 )

이번에는 아이디 셀렉터에 대해서 보도록 하겠습니다. 모든 태그에는 아이디를 부여할 수 있습니다. 그리고 그렇게 부여된 아이디를 셀렉트하기위해서는 # 기호를 사용합니다. 

#black {
  color: #000000; 
}

위 예제는 id가 black인 요소의 색깔을 검정으로 지정하는 예제입니다.

h1#black {
  color: #000000; 
}

위 예제는 <h1> 요소내의 모든 요소들 중에서 id가 black인 녀석에게만 검정색 속성을 주었네요

이 id셀렉터가 가장 유용하게 쓰이는 경우는 아래처럼 후손 셀렉터들에게 속성을 부여할 때입니다.

#black h2 {
  color: #000000; 
}

위 예제는 태그id가 black인 태그내의 h2태그의 색깔 속성값을 지정해주는 예제죠? 아닌가요? 맞습니다. 

The Child Selectors ( 자식 셀렉터 )

위에서 말한 후손 셀렉터는 descendant 라고하여 모든 후손들에 대해 적용이 됩니다. 하지만 이 자식 셀렉터는 직계 자식만 해당이 됩니다. 예제를 한번 보실까요.

body > p {
  color: #000000; 
}

<body> 태그 바로 밑에 있는 <p> 에 대해서만 적용되는 스타일을 정의했군요. body안의 div안에서 사용된 p태그는 위 스타일의 적용을 받지 않습니다.

The Attribute Selectors ( 속성 셀렉터 )

아래 예제는 input태그의 type속성이 text인 녀석들의 색을 지정해주는 예제입니다.

input[type="text"]{
  color: #000000; 
}

위에 정의된 스타일은 <input type="submit" /> 요소에는 적용이 되지 않는다는 것이죠.

아래는 속성 셀렉터의 사용법입니다.

• p[lang] -  lang 속성을 갖는 모든 문단요소를 선택.

• p[lang="fr"] - lang attribute이 "fr"인 모든 문단 요소를 선택.

• p[lang~="fr"] - lang 속성이 "fr"을 포함하는 모든 문단 요소를 선택.

• p[lang|="en"] - lang 속성이 "en"이거나 또는 "en"으로 시작하는 문단 요소를 선택.

Multiple Style Rules ( 다중 스타일 규칙 )

지금까지는 하나의 요소에 하나의 스타일만 적용을 했습니다. 하지만 요소마다 여러개의 속성을 가질 수 있으니 여러개의 스타일을 지정할 수도 있어야겠죠?  

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

위 예제처럼 세미콜론 (;) 으로 스타일을 구분하여 정의해주면 됩니다. 간단하죠?

각 속성에 지정된 속성값들에 대해서는 이게 뭔가 하실 수도 있는데 신경쓰지마시고 일단 넘어가세요. 차근차근 배우면 됩니다 ^___^ 

Grouping Selectors ( 셀렉터 그룹화 )

내가 지정한 스타일을 여러개의 요소에 한꺼번에!!!!  적용하고 싶으시다면!!!!

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

위 예제는 h1, h2 and h3 요소에 한꺼번에 스타일을 적용시키는 예제입니다. 순서는 전혀 상관이 없구요 콤마를 이용해서 셀렉터들을 구분지어주시면 되겠습니다. 아래처럼 아이디 셀렉터를 이용할 수도 있습니다.

#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}

클래스 셀렉터나 다른 셀렉터들을 함께 사용해보는 연습도 해보세요 ^____^

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

The jQuery library supports nearly all of the selectors included in Cascading Style Sheet (CSS) specifications 1 through 3, as outlined on the World Wide Web Consortium's site.

Using JQuery library developers can enhance their websites without worrying about browsers and their versions as long as the browsers have JavaScript enabled.

Most of the JQuery CSS Methods do not modify the content of the jQuery object and they are used to apply CSS properties on DOM elements.

CSS 속성 적용하기

This is very simple to apply any CSS property using JQuery method css( PropertyName, PropertyValue ).

Here is the syntax for the method:

selector.css( PropertyName, PropertyValue );

Here you can pass PropertyName as a javascript string and based on its value, PropertyValue could be string or integer.

예제:

Following is an example which adds font color to the second list item.

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {
      $("li").eq(2).css("color", "red");
   });

   </script>
</head>
<body>
   <div>
   <ul>
     <li>list item 1</li>
     <li>list item 2</li>
     <li>list item 3</li>
     <li>list item 4</li>
     <li>list item 5</li>
     <li>list item 6</li>
   </ul>
   </div>
</body>
</html>

CSS 속성 다중 적용하기

You can apply multiple CSS properties using a single JQuery method CSS( {key1:val1, key2:val2....). You can apply as many properties as you like in a single call.

Here is the syntax for the method:

selector.css( {key1:val1, key2:val2....keyN:valN})

Here you can pass key as property and val as its value as described above.

예제:

Following is an example which adds font color as well as background color to the second list item.

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {
      $("li").eq(2).css({"color":"red", 
                         "background-color":"green"});
   });

   </script>
</head>
<body>
   <div>
   <ul>
     <li>list item 1</li>
     <li>list item 2</li>
     <li>list item 3</li>
     <li>list item 4</li>
     <li>list item 5</li>
     <li>list item 6</li>
   </ul>
   </div>
</body>
</html>

요소의 Width & Height 세팅하기

The width( val ) and height( val ) method can be used to set the width and hieght respectively of any element.

예제:

Following is a simple example which sets the width of first division element where as rest of the elements have width set by style sheet:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {
      $("div:first").width(100);
      $("div:first").css("background-color", "blue");
   });

   </script>
   <style>
   div{ width:70px; height:50px; float:left; margin:5px;
      background:red; cursor:pointer; }
  </style>
</head>
<body>
  <div></div>
  <div>d</div>
  <div>d</div>
  <div>d</div>
  <div>d</div>
</body>
</html>

JQuery CSS 메소드

다음은 CSS 속성과 관련있는 모든 메소드 목록입니다. 

Reference : http://www.tutorialspoint.com/jquery/jquery-css.htm

안녕하세요~ 이번에는 CSS에 대해서 알아볼텐데요~

CSS가 뭔지를 알려면 뭐의 약자인지부터 알아봐야 겠죠?

CSS는 Cascading Style Sheets의 약자입니다. 캐스케이딩 스타일 시트. 스타일이라는 단어라 들어갔으니 뭔가 스타일링하기위한 어떤거라고 생각해볼 수 있으려나요?  

CSS는 html태그내의 속성값들을 따로 분리해서 저장해놓기 위해서 사용이 됩니다.

왜 따로 저장해놓을까요??

여러 페이지에서 적용이 되야하는 스타일값들을 분리해서 저장해놓고 여러 페이지에서 그냥 호출해서 사용하기 때문에 재사용성이 높아지고 똑같은 속성을 타이핑해야하는 수고도 덜 수 있으며 시간도 단축될 것이고 유지보수도 쉬워지겠죠?

그래서 점점 html내의 속성들이 사라지고 대신 CSS를 이용하는 것이 표준이 될거라는 말도 있습니다.

(2020년 현재 이미 그렇게 되어버렸습니다. html 내에 inline style을 정의해서 쓰는 일은 거의 없죠)

그러면 기본적인 문법을 여기서 한번 짚고 넘어가볼까요??

에이 그냥 다음에 알아보기로 하죠 ㅋㅋ