오픈소스웹소프트웨어 CSS Foundation

CSS3 syntax

Selector {property : value;}

p { background-color : yellow; }

세미콜론 쓰기

 

 

Type selector

HTL element name used(h1,p,div...)

 

 

ID selector

<p id="target">Hello World!</p>

#target { color : red;}

 

id는 unique함, #으로 가져옴

 

 

Class selector

<p class="target">Hello World!</p>

.target { color : red;}

 

 

 

Universal selector

*{ color : green;}

selects all elements inside the page

 

 

 

CSS Grouping Selector

comma, space, >, +, ~

한번 해보시면 좋을거같습니다

 

 

Attribute selector

 

 

Pseudo-class selector

a:visitied

a:link

a:hover

a:active

 

 

 

 

 

CSS Insertion

external style sheet

.css 파일만들어서 html에 link넣는거

 

Internal style sheet

html파일안에 <style> 태그 안에 넣는거

 

Inline CSS

HTML 태그안에 style=" " 하는거 

세미콜론 넣어주시는게 좋아요

 

우선순위는?

Inline > Internal > external > Web browser default value

 

 

 

background image

horizontal, vertical하게 반복된다

reapeat필요없으면

background-repeat : no-repeat;

 

 

 

background-attachment : fixed, scroll

background- position : center, ...

 

한줄에 할 수도 있음

스페이스 스페이스 스페이스

 

sequence

color, image, repeat, attachment, position

------->

 

 

 

text-align : center, right, justify

justify : 책에서보는거처럼 정렬된거

 

 

text-transform 

소문자, 대문자로 바꿈

단어 첫글자 대문자로 바꿀수 있음

 

 

 

CSS font

 

 

 

CSS table

 

 

css 장점

하나의 css파일을 공유해 사용하기때문에 편리하다

 

 

css combinator

콤마 하면 다 됨(h1,p)

스페이스로 하면(h1 p)

descendant