CSS 2012. 9 Youn-Hee Han LINK@KOREATECH .

CSS

2012. 9

Youn-Hee HanLINK@KOREATECH

http://link.koreatech.ac.kr

1. What is CSS?

LINK@KOREATECH 2

Why Styles?

Styles Solve a Common Problem– HTML were originally designed to define the content of a

document. – HTML Tags were supposed to say "This is a header",

"This is a paragraph", "This is a table", “This is a hyperlink”, and “This is a link” by using tags like <h1>, <p>, <table>, <a>, <img> and so on.

– In HTML, the representational elements should be not used• <body bgcolor=“#ffffff”> (X)• <body

background="http://www.w3schools.com/clouds.gif"> (X)• <font size=“3”> (X)• <font color=“red”> (X)

LINK@KOREATECH 3

Why Styles?

Styles Solve a Common Problem– HTML became more and more difficult to create Web

sites where the content of HTML documents was clearly separated from the document's presentation layout.

– As the two major browsers - Netscape and Internet Explorer - continued to add new (representational) HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification

– It became more and more difficult to create clean Web sites where the content of HTML documents was clearly separated from the document's presentation layout.

LINK@KOREATECH 4

Why Styles?

Styles Solve a Common Problem– To solve this problem, the World Wide Web Consortium

(W3C) created “Cascading Style Sheets” in addition to HTML 4.0.

– All major browsers support “Cascading Style Sheets.”

Demo– http://www.w3schools.com/css/demo_default.htm

LINK@KOREATECH 5

What is Styles?

Styles– Styles are rules that modify the presentation of tags in

your document.– Styles define how to display HTML elements, just like the

font tag and the color attribute– Styles are normally stored in Style Sheets– External Style Sheets can save you a lot of work

• External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing one single CSS document

• External Style Sheets are stored in CSS files (.css)

– CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once

LINK@KOREATECH 6

Visit CSS Demonstration– http://zencss-skin.considero.net/ZenCSS-Skin/(_______)/Fixed-

Simple.aspx• Red• Violet• Gray• Deep-Blue

– CSS Zen Garden • The goal of the site is to showcase what is possible with CSS-based

design• http://www.csszengarden.com/• http://www.mezzoblue.com/zengarden/alldesigns/

[Practice-1] Visit CSS Demo website

LINK@KOREATECH 7

What is Cascading?

CSS (Cascading Style Sheets)– Multiple style definitions will “cascade” into one – Cascading order

• What style will be used when there is more than one style specified for an HTML element?

• All the styles will "cascade" into a new style sheet by the following rules, where “number 4” has the highest priority:

1. Browser default 2. External style sheet 3. Internal style sheet (inside the <head> tag) 4. Inline style (inside an HTML element)

• So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).

LINK@KOREATECH 8

Specifying a CSS

<html><head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style type="text/css"> @import url(standardstyles.css); h1, h2 { font: arial,sans-serif; } </style></head><body> ...<div style="color: red">this block is red.</div>…</body></html>

[External Style Sheet]

[Imported Style Sheet] [Internal Style Sheet]

[Inline Style]

How to Specify CSS?

LINK@KOREATECH 9

2. Basic CSS Syntax

LINK@KOREATECH 10

CSS Syntax

Basic Syntax

– The selector is normally the HTML element/tag– The property is the attribute you wish to change, and

each property can take a value. – The property and value are separated by a colon

• body {color: black}• p {font-family: "sans serif"}

– If you wish to specify more than one property, you must separate each property with a semicolon.• p {text-align:center; color:red}

– Make the style definitions more readable!!!

selector { property: value; property: value; . . .}

LINK@KOREATECH 11

p { text-align: center; color: black; font-family: arial }

CSS Syntax Class Selector

– You can declare a class and apply this class to all elements of which share the same style

– General Rule

– Without tag name

p.right {text-align: right} p.center {text-align: center}p.green {color:green}

<p class="right"> This paragraph will be right-aligned. </p><p class="center"> This paragraph will be center-aligned. </p><p class="center green"> This is a paragraph. </p>

.center {text-align: center}

<h1 class="center"> This heading will be center-aligned </h1><p class="center"> This paragraph will also be center-aligned. </p>

CSS

HTML

CSS

HTML

LINK@KOREATECH 12

CSS Syntax

Pseudo-Class Selector– A:link

• 보통 때의 링크 텍스트의 스타일– A:visited

• 이미 방문한 적이 있는 링크의 스타일– A:hover

• 마우스가 링크 위에 올라갈 때의 스타일– A:active

• 마우스를 클릭하여 실제로 해당 링크로 페이지가 옮겨지는 동안의 색깔

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

LINK@KOREATECH 13

[Practice-2] Pseudo-Class Selector Pseudo-Class Selector Example

<html><head><style type="text/css">a:link { text-decoration:underline; color:blue }a:visited { text-decoration:underline; color:red }a:hover { text-decoration:underline; color:cyan }a:active { text-decoration:underline; color:yellow }

a.no-uline:link { text-decoration:none; color:green }a.no-uline:visited { text-decoration:none; color:green }a.no-uline:hover { text-decoration:underline; color:cyan }a.no-uline:active { text-decoration:none; color:yellow }</style></head><body><a href="http://www.google.co.kr/">Google 검색 </a><br /><a href="http://www.google.co.kr/" class="no-uline">Google 검색 </a></body></html>

LINK@KOREATECH 14

CSS Syntax Grouping

Selectors can be contextual

h1,h2,h3,h4,h5,h6 { color: pink}

<html><head> <style type="text/css"> h2 { font-style: italic; color:cyan} h2 i { font-style: normal } </style></head><body> <p>This paragraph has <i>Italics</i></p><h2>This heading has <i>Italics</i> too</h2></body></html>

<h1> This paragraph is in h1 tag </h1><h2> This paragraph is in h2 tag </h2><h3> This paragraph is in h3 tag </h3>

CSS HTML

LINK@KOREATECH 15

CSS Syntax

Selectors can be contextual ( 주변을 둘러싸고 있는 태그들이 고려됨 )

<html><body> <div>one<br/>two<ul><li>One</li><li>Two</li></ul><ul><li class="nav">One</li><li class="nav">Two</li></ul></div></body></html>

div li.nav {font-size:2.1em;}div li {font-size:2.1em;}

LINK@KOREATECH 16

CSS Syntax id selector

– With the id selector you identify an element to be an *unique instance* in a document.

#blue {color: green}p#para1 { text-align: center; color: red}p#exampleID1 { background-color: yellow; }p#exampleID2 { text-transform: uppercase; }

<h1 id="blue">Good Morning</h1><p id="para1">Hello</p><p id="exampleID1">This paragraph has an ID name of "exampleID1" and has a white CSS defined background</p><p id="exampleID2">This paragraph has an ID name of "exampleID2" and has had its text transformed to uppercase letters. </p>

CSS

HTML

LINK@KOREATECH 17

CSS Syntax

Comments

/* This is a comment */p { text-align: center; /* This is another comment */ font-family: arial}

LINK@KOREATECH 18

Multiple Style Sheets

The same selector in different style sheets– If some properties have been set for the same selector in

different style sheets, the values will be…• overridden by the same selector of the following ( 후행하는 ) style

sheet if the values has been already defined• inherited from the same selector of the proceeding ( 선행하는 ) style

sheet if the values has not defined before

h3 { color: yellow; text-align: right; font-size: 20pt; text-decoration:underline}

a.css ( 선행 )

h3 { color: green; text-align: left; font-size: 30pt;}

b.css ( 후행 )

inheritedoverriddenoverridden

overridden

LINK@KOREATECH 19

Multiple Style Sheets

The same selector in different style sheets

<html><head> <link rel="stylesheet" type="text/css" href="a.css"> <style type="text/css"> h3 { color: green; text-align: right; font-size: 30pt; } </style></head><body> <h3>This is Tom</h3></body></html>

example.html

LINK@KOREATECH 20

CSS Inheritance

CSS inheritance also works contextually <html><head><style type="text/css"> .foo { background-color: yellow; color: green; } .bar { text-decoration: underline; }</style></head><body> <div class="foo">Hello, world. <p class="bar">This is a very short paragraph!</p></div></body></html>

example2.html

LINK@KOREATECH 21

CSS Inheritance

CSS inheritance also works contextually example3.html<html><head><style type="text/css"> .foo { background-color: yellow; color: green; } .bar { text-decoration: underline; }</style></head><body> <div class="foo">Hello, world. <p class="foo bar">This is a very short paragraph!</p></div></body></html>

앞선 example2.html 과 동일한 효과를 지님 .즉 , bar 만 적어도 됨

LINK@KOREATECH 22

CSS Inheritance

Utilizing OOP (Object Oriented Programming)’s “Inheritance” concept

.oddBoxOut { width: 12em; float: left; padding: 0.5em; margin: 0.5em; border: solid 1px black;}

.evenBoxOut { width: 12em; float: right; padding: 0.5em; margin: 0.5em; border: solid 1px black;}

.boxOut { width: 12em; padding: 0.5em; margin: 0.5em; border: solid 1px black;}

.oddBoxOut { float: left;}

.evenBoxOut { float: right;}

<div class="boxOut oddBoxOut">…

LINK@KOREATECH 23

class vs. id

구 분 클래스 선택자 아이디 선택자

시작기호 .( 마침표 ) #(hash)

속성명 class id

주 역 할 및 용도

문 서 에 서 주 로 사 용 되 는 서 식 을 class 명 으 로 지정하여 문서에 통일감을 준다 .

스크립트 언어 ( 자바스크립트 )로 id 에 지정된 스타일이나 행동 양식을 변경한다 .

주 사용태그

<p> <div> <span> 등 <div> 등

적용범위 여러 개의 태그 ( 태그 그룹 )에 적용 가능하다 .

하 나 의 태 그 에 만 적 용 하 여 사용한다 .

공통점 이름은 사용자가 임의로 지정한다 . 태그에 제한 없이 어느 태그에서나 사용 가능하다 .

LINK@KOREATECH 24

CSS 글꼴 꾸밈관련 스타일

속성 설명 값

color 글자색 Navy, #ffffcc

font-size 글자크기 xx-small, x-small, small, medium, large, x-large, xx-large,smaller, larger,20px, 20pt, 20%, 80%

font-family 글자체 (sans-)serif, cursive, fantasy, monospace, 굴림 , 돋움 ,궁서체 , Verdana, Times New Roman, Arial…

font-weight 글자굵기 100, 200, 300, 400, 500, 600, 700, 800, 900normal, bold, lighter, bolder

font-style 글꼴모양 normal, oblique, italic

text-decoration

글꼴장식 none, underline, overline, line-through

text-transform

대소문자 capitalize, lowercase, uppercase

font-variant

소문자크기

small-caps

font-stretch

글자폭 Condensed, expanded

블록 & 인라인 엘리먼트에 모두 사용

LINK@KOREATECH 25

CSS 문단 꾸밈관련 스타일

속성 설명 값

text-align 수평 정렬 left, center, right, justify

vertical-align 수직 정렬 baseline, top, middle, bottom, text-top, text-bottom, super, sub, 실수 값 + 단위 , %

line-height 행간 실수 값 + 단위 , %

letter-spacing

자간 실수 값 + 단위 , %

word-spacing 단 어 와 단 어 사이의 간격

실수 값 + 단위 , %

text-indent 들여쓰기 실수 값 + 단위 , %

white-space 공 백 , 탭 , 줄 바 꾸 기 에 대 한 처리

normal, pre, nowrap

블록 엘리먼트에만 사용

LINK@KOREATECH 26

CSS 에서 쓰이는 단위

상대적인 단위– em : 현재 사용중인 폰트 크기를 1 로 설정하여 크기 결정– ex : 문자 ‘ x’ 의 크기를 1 로 설정하여 크기 결정– px : 모니터의 화소 (pixel) 에 대한 상대적인 크기로 결정– %: 현재 사용중인 폰트 크기에 대한 상대 크기로 결정

절대적인 단위– in : inches, 1in = 2.54cm– cm : centimeters– mm : millimeters– pt : points, 1pt = 1/72 in– pc : picas, 1pc = 12pt– xx-small, x-small, small (12px), medium, large, x-large, xx-

large 기본 폰트 사이즈 값

– 12 pt == 16 px == 1em == 100%

참고사이트 - http://pxtoem.com: px em 변환

LINK@KOREATECH 27

font 속기형 작성법

LINK@KOREATECH 28

CSS file

[Practice-3] Putting all together

p.right {text-align: right} p.center {text-align: center}p.green {color:green}

.center {text-align: center}

#blue {color: blue}p#para1 { text-align: center; color: red}p#exampleID1 { background-color: yellow; }p#exampleID2 { text-transform: uppercase; }

h1,h2,h3,h4,h5,h6 { color: pink}

h2 { font-style: italic; color:cyan}h2 i { font-style: normal }

htdocs\mystyle.css

LINK@KOREATECH 29

HTML file (1/2)


<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>XHTML Practice</title> <link rel="stylesheet" type="text/css" href="mystyle.css"></head><body> <p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p> <p class="center green"> This is a paragraph. </p> <hr/>

<h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p> <hr/> (continue…)

htdocs\index2.html

LINK@KOREATECH 30

HTML file (2/2)


<h1 id="blue">Good Morning</h1> <p id="para1">Hello</p> <p id="exampleID1">This paragraph has an ID name of "exampleID1" and has a white CSS defined background</p> <p id="exampleID2">This paragraph has an ID name of "exampleID2" and has had its text transformed to uppercase letters. </p> <hr/>

<h1> This paragraph is in h1 tag </h1> <h2> This paragraph is in h2 tag </h2> <h3> This paragraph is in h3 tag </h3> <hr/>

<p>This paragraph has <i>Italics</i></p> <h2>This heading has <i>Italics</i> too</h2></body></html>

htdocs\index2.html

LINK@KOREATECH 31

You can see the following web.


text-align: right

text-align: center

color:green

text-align: center

color: blue

text-align: center;color: red

background-color: yellow;

text-transform: uppercase;

color: pink

font-style: italic; color:cyan

font-style: normal LINK@KOREATECH 32

Change CSS file


body { background-image: url("http://b.dryicons.com/files/graphics_previews/blue_background.jpg"); background-size: cover }

p.right {text-align: right} p.center {text-align: center}p.green {color:green}…

htdocs\mystyle.css

LINK@KOREATECH 33

3. CSS 박스 모델

LINK@KOREATECH 34

Box model• Box dimension

– HTML 의 모든 (block or online) element 는 여러 겹의 상자로 둘러 쌓여 있다고 가정하는 것이 CSS2 의 box model 이다 .

– margin 은 투명하다 . • 따라서 box 밖의 배경색이나 무늬가 비쳐 보이게 된다 .

– margin, border, padding 속성을 이용해 각각의 폭이나 색을 조정할 수 있다 .

내용 (contents)

패딩 (padding)

경계 (border)

여백(margin)

LINK@KOREATECH 35

Box model

LINK@KOREATECH 36

Box model Box model

LINK@KOREATECH 37

Box model•Box 관련 속성

속성 속성값 의미

width숫자 또는 백분율 너비 , 높이

height

float left, right, none 위치

margin, margin-top, margin-bottom, margin-left, margin-right

숫자 또는 백분율

여백

padding, padding-top padding-bottom, padding-left, padding-right

채워넣기

border, border-top, border-bottom, border-left, border-right

경계

LINK@KOREATECH 38

•Margin 속성 – 마진 부분의 폭을 지정하는 속성으로 margin-left, margin-

right, margin-top, margin-bottom 을 이용하면 4 곳의 마진 값을 각각 설정할 수 있고 margin 속성을 이용하면 4 곳의 마진 값을 동시에 설정할 수 있다 .

< 이후 설명에서의 기호 설명 >- A | B : A 또는 B 중의 하나이다 .- [ ] : 일반적인 의미의 괄호이다 .- A{1,4} : A 가 최소한 1 번에서 최대한 4 번 들어간다 . - <A> : A 속성의 값이 들어간다 .- A || B : A 또는 B 중의 하나 , 또는 두 개가 다 들어갈 수 있다 .

Box model - Margin

LINK@KOREATECH 39

Box model - Margin•Margin 관련 속성

– margin-left : 길이 | 퍼센트 | auto

• 왼쪽 마진의 폭을 정한다 .• 모든 element 에 적용할 수 있고 상속되지 않는다 .• 초기값은 0 이다 .• 길이 : 상대길이와 절대길이가 있다 .

– 상대길이 : em( 현재 글자의 크기 ), ex( 현재 글자 중 x 자의 크기 ), px( 픽셀 ) – 절대길이 : in( 인치 ), cm( 센티미터 ), mm( 밀리미터 ), pt( 포인트 : 1pt=1/72in),

pc ( 피카 : 1pc=12pt)

• 퍼센트 : 현재의 element 폭을 기준 • auto : 브라우저가 자동으로 정한다 .

– margin-right : 길이 | 퍼센트 | auto– margin-top : 길이 | 퍼센트 | auto – margin-bottom : 길이 | 퍼센트 | auto

LINK@KOREATECH 40

•Margin 관련 속성– margin : [ 길이 | 퍼센트 | auto]{1,4}

• 네 곳의 마진 폭을 동시에 정한다 .• 네 번을 썼을 때 순서는 top, right, bottom, left 이다 .• margin 과 같이 여러 개의 속성을 하나로 묶어서 쓰도록 한 속성을

대표속성 (Shorthand property) 이라고 한다 .• 모든 element 에 적용할 수 있고 상속되지 않는다 .

BODY { margin: 2em } /* 모든 마진이 2em */BODY { margin: 1em 2em } /* top 과 bottom 은 1em, right 과 left 는 2em */BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em,

left=2em (right 의 값을 그대로 가져옴 ) */

Box model - Margin{1,4} 는 최소 한 번에서 최대 4 번이 들어간다는 의미 . 즉 , 길이나 퍼센트나 auto를 1 번에서 4 번까지 쓸 수 있다는 의미임 .

LINK@KOREATECH 41

•Padding 속성– 패딩 부분의 폭을 지정하는 속성으로 padding-left, padding-right,

padding-top, padding-bottom 을 이용하면 4 곳의 패딩 값을 각각 설정할 수 있고 padding 속성을 이용하면 4 곳의 패딩 값을 동시에 설정할 수 있다 .

– padding-right : 길이 | 퍼센트 – padding-top : 길이 | 퍼센트 – padding-bottom : 길이 | 퍼센트 – padding : [ 길이 | 퍼센트 ]{1,4}

H1 { background: white; padding: 1em 2em;}/*H1 의 배경색은 흰 색이고 , 상하 패딩 폭은 1em, 좌우 패딩 폭은 2em 이다 .*/

Box model - Padding

LINK@KOREATECH 42

•Border 속성– 테두리의 두께 등을 지정하는 속성으로서 다음과 같이 세분화된다 .

• border-width• border-color• border-style

– border 속성으로 위 세가지 ( 두께 , 색상 , 스타일 ) 을 동시에 설정 가능하다 .

Box model - Border

LINK@KOREATECH 43

•Border-width 관련 속성– border-top-width : thin | medium | thick | 길이

• 윗쪽 border 의 폭을 정한다 . – thin 이 가장 얇고 thick 이 가장 두껍다 . 초기값은 medium 이다 .

• 모든 element 에 적용할 수 있고 , 상속되지 않는다 .

–border-right-width : thin | medium | thick | 길이 –border-bottom-width : thin | medium | thick | 길이 –border-left-width : thin | medium | thick | 길이 –border-width : [thin | medium | thick | 길이 ]{1,4}

• 네 곳의 border 폭을 동시에 정한다 .• 모든 element 에 적용할 수 있고 상속되지 않는다 .

H1 { border-width: thin } /* thin thin thin thin */H1 { border-width: thin thick } /* thin thick thin thick */H1 { border-width: thin thick medium } /* thin thick medium thick */

Box model - Border

LINK@KOREATECH 44

•Border-style 관련 속성 – border-top-style : none | dotted | dashed | solid | double |

groove | ridge | inset | outset • 윗쪽 경계의 모양을 정한다 .• 모든 Element 에 적용할 수 있고 상속되지 않는다 .• 초기값은 none 이다 .

– border-right-style : none | dotted | dashed | solid | double | groove | ridge | inset | outset

– border-bottom-style : none | dotted | dashed | solid | double | groove | ridge | inset | outset

– border-left-style : none | dotted | dashed | solid | double | groove | ridge | inset | outset

Box model - Border

LINK@KOREATECH 45

•Border-style 관련 속성 – border-style : [none | dotted | dashed | solid | double |

groove | ridge | inset | outset ]{1,4}

span { border-style : dotted }span.solid { border-style : solid }span.dashed { border-style : dashed }span.double { border-style : double }span.groove { border-style : groove }span.ridge { border-style : ridge }span.inset { border-style : inset }span.outset { border-style : outset }

Box model - Border

LINK@KOREATECH 46

•Border-color 관련 속성 – border-top-color : 색이름 | RGB 값

• 윗쪽 경계의 색을 정한다 .• 초기값은 자신 또는 부모 element 의 color 속성 값이다 .

– border-right-color : 색이름 | RGB 값 – border-bottom-color : 색이름 | RGB 값 – border-left-color : 색이름 | RGB 값 – border-color : [ 색이름 | RGB 값 ]{1,4}

H1 { border-color : black } /* black black black black */H1 { border-color : black yellow } /* black yellow black yellow */H1 { border-color : black yellow pink } /* black yellow pink yellow */

Box model - Border

LINK@KOREATECH 47

•Border 관련 속성 – border-top : <border-top-width> || <border-top-style> || color

• 윗쪽 보더의 폭 , 스타일 , 색상을 정한다 .• 초기값은 각 속성의 초기값이다 .

– border-right : <border-right-width> || <border-right-style> || color

– border-bottom : <border-bottom-width> || <border-bottom-style> || color

– border-left : <border-left-width> || <border-left-style> || color – border : [<border-width> || <border-style> || color]{1,4}

P { border: solid red } /* 선은 굵은 선 , 색은 빨강색 .*/

Box model - Border

LINK@KOREATECH 48

기타•Border 관련 기타 속성

– max-width: sets the maximum content width of a block or a replaced element

– max-width: sets the minimum content width of a block or a replaced element

img.example { width: 50%; max-width: 160px; height: auto;}

p.example { max-width: 400px; min-width: 100px;}

LINK@KOREATECH 49

CSS Example Example

<ul> <li><a href="#">Home</a></li><li><a href="#">About us</a></li><li><a href="#">Products</a></li><li><a href="#">FAQs</a></li><li><a href="#">Contact us</a></li> </ul>

LINK@KOREATECH 50

CSS Example Example

<style type="text/css">.toolbar li { display:inline;background-color:#eee;border:1px solid;border-color:#f3f3f3 #bbb #bbb #f3f3f3;margin:0;padding:.5em; } </style>

<ul class="toolbar"> <li><a href="#">Home</a></li><li><a href="#">About us</a></li><li><a href="#">Products</a></li><li><a href="#">FAQs</a></li><li><a href="#">Contact us</a></li> </ul>

LINK@KOREATECH 51

Color 와 Background 속성• Color 와 Background 속성

속성 속성값 의미color

색의 이름 , 또는 rgb(red, green, blue)

색

배경색background-color

background-image

url(“ 배경 이미지의 URL”) 배경이미지

background-size

background-size : x px, y px;절대 크기로 배경 이미지 크기 적용background-size : x %, y %;적용되는 요소의 크기에 비례하여 배경 이미지 적용background-size : cover;배경 이미지를 늘여 적용되는 요소 전체에 표시background-size : contain;배경 이미지의 가로 세로 비율을 맞추면서 요소에 표시할 수 있는 최대 크기로 표시background-size : auto;

배경이미지 크기 조정

background-repeat

repeat | repeat-x | repeat-y | no-repeat 배경이미지반복 유무

설정 LINK@KOREATECH 52

•Color 속성– Element 의 글자색을 나타낸다 .– color : 색이름 | RGB 값 <html>

<head><style type="text/css">em { color: red } </style>

</head><body>까만 글씨<br><em> 여기는 빨간 글씨</em></body></html>

Color 와 Background 속성

LINK@KOREATECH 53

•Background 속성– Element 의 배경색이나 무늬를 지정할 수 있다 .

• 배경이란 Box model 에서 content 의 배경이 되는 부분과 padding 을 포함한 부분을 말한다 .

– Border 부분의 색과 모양은 border 속성으로 지정할 수 있다 . – margin 부분은 언제나 투명

• 부모 element 의 배경이 비쳐 보인다 .

– 배경에 관계된 속성은 모두 상속되지 않는다 .


LINK@KOREATECH 54

•Background 관련 속성 – background-color : 색이름 | RGB 값 | transparent

• 모든 element 에 적용할 수 있고 상속되지 않는다 .• 초기값은 transparent 이다 .

<html><head><style type="text/css"> h1 { background-color: #ff0000 } </style></head><body><h1>ff0000 에 해당하는 색 </h1></body></html>


LINK@KOREATECH 55

•Background 관련 속성– background-image : url | none

• URL 의 값으로 나오는 이미지를 element 의 배경으로 지정할 수 있다 .• 모든 element 에 적용 가능• 초기값은 none 이다 .• 그림 파일을 불러오지 못할 경우에 대비해 비슷한 색조의 배경색을 함께

지정하는 것이 좋다 .

• 형태 : background-image: url(back-grey1.gif)


LINK@KOREATECH 56

•Background 관련 속성– background-image : url | none예제 )

<head><style type="text/css">body { background-image: none } p { background-image: url(back-grey1.gif) } </style>

</head><body>이 곳에는 배경이 나오지 않습니다 .<br><p> 이 곳에는 배경이 나와야 겠지요 . <br>나와야 정상인데 나오지 않는다구요 ?<br>그렇다면 브라우저를 탓해야지요 . <br></p></body>


LINK@KOREATECH 57

•Background 관련 속성– background-repeat : repeat | repeat-x | repeat-y | no-repeat

• 모든 element 에 적용할 수 있고 상속되지 않는다 .• 초기값은 repeat 이다 .• 배경으로 사용하는 그림은 기본적으로 바둑판식 , 즉 , X, Y 방향 모두 연속되게 출력된다 . Background-repeat 속성을 사용하면 사용자가 원하는 방향으로 연속시키거나 연속되지 않도록 할 수 있다 .

• repeat : 가로 , 세로 모두 연속된다 . • repeat-x : 가로 방향으로만 연속된다 . • repeat-y : 세로 방향으로만 연속된다 . • no-repeat : 그림 한 개만 나온다 .


LINK@KOREATECH 58

•Background 관련 속성– background-attachment : scroll | fixed | inherit

• 초기값은 scroll 이다 .• scroll: 다른 콘텐츠들과 함께 배경도 함게 스크롤된다 .• fixed: 다른 콘텐츠들과 분리되어 배경은 고정되어 있다 .

• 콘텐츠가 떠있는 느낌을 준다 .

• inherit: 부모 엘리먼트의 속성을 상속 받는다 .


LINK@KOREATECH 59

• 속기형 작성법– Background : background-color background-image

background-repeat background-attachment background-position

– 속성 순서는 상관없다 .– 작성하지 않은 속성은 기본값으로 설정– 콤마 (,) 로 구분하여 여러가지 백그라운드 이미지들을 중복해서 배치 가능


LINK@KOREATECH 60

background:

url(../images/banner-arrow.png) no-repeat 20px 140px,

url(../images/banner-photo.png) no-repeat -40px 20px,

url(../images/banner-09.png) no-repeat -20px -90px,

url(../images/banner-bg.png) no-repeat 0 0;

CSS 2012. 9 Youn-Hee Han LINK@KOREATECH .

Documents