CSS 요약

CSS 단위

글씨크기

px, %, em 중 택1

%와 em은 부모 크기에 비례에서 변함

색깔 RGB(255,255,255) 3바이트

#aabbcc 앞뒤가똑같으면 줄여서쓰기가능

#abc 이런식

CSS 링크방법

<link href="main.css" rel="stylesheet" type="text/css" />

<style type="text/css">

    h1{

      color: red;

    }

</style>

<h1 style="color:#fff;font-size:2em;">Hello world</h1>

CSS 선택자들

1. 요소선택자

p {

    color: red;

  }

2. ID 선택자

#abc {

    color: red;

  }

3. 클래스 선택자

.abc {

    color: red;

  }

4. 선택자 선택적 사용

p.box {

    color: red;

  }

5. 선택자 다중선택

.abc, p, #box, h1, a {

    color: red;

  }

6. 후손 선택자

.box2 .name{

    color: red;

  }

.box1 .name, .box2 .name{

    color: red;

  }

7. 선택자 우선사항

  1. 똑같으면 나중에 선언된거 적용

  2. 더많은 단계의 선택자 우선적용

  3. ID선택자 최상위 적용

  4. 겹치지 않은 요소들은 일괄적용됨

색깔 요소

color: #aabbcc; rgb(); 택1

서체류 요소

font-family: "돋움", dotum, "굴림", gulim, arial, helvetica, sans-serif;

마지막은 항상 서체류로 끝나야함

서체류의 종류

Serif = Georgia, Times New Roman

Sans-Serif = Arial, Helvetica

Monospace = 'Courier New', 'Consolas', 'Monaco'

Cursive

Fantasy

글씨크기 요소

font-size: 1px, 100%, 1em; 택1

font-style: normal, italic, oblique, inherit; 택1

italic은 해당서체의 별개의 이탤릭이있어야 작동함

oblique은 기본글꼴을 기울여서 표현함

font-weight: bold, normal, inherit; 택1 bold=700 normal=400

bolder 700이상, lighter 400이하 등도 있음

font-variant: small-caps; 소문자를 작은 대문자로 표현함

normal, inherit 등도 지원함

line-height: px, & , em; 중 택1 em 쓸경우 단위 생략 가능

줄간격

폰트요소 한번에 다선언하기

font : font-style font-variant font-weight font-size/line-height font-family

마지막 서체류는 반드시 선택해줘야함 빈값으로 넘기면 기본값으로 선택됨

글씨 줄귿기 요소

text-decoration: none, underline, overline, line-through; 택1

문단 정렬 요소

text-align: left, right, center, justify; 택1 justify는 양쪽으로 땡김

들여쓰기 요소

text-indent: px, em; 택1 음수면 내어쓰기 양수면 들여쓰기, 내어쓰기일때는 여백필수

대소문자 변환 요소

text-transform: none, capitalize, uppercase, lowercase, inherit; 택1

capitalize는 첫글자만 대문자로 만듬

글자간격, 단어단격 요소

letter-spacing: px, em; 택1

word-spacing: px, em; 택1

수직정렬요소 (테이블제외)

vertical-align:

baseline = 텍스트 기본 베이스라인

sub = 아래첨자

super = 윗첨자

top = 해당줄의 가장높은 요소

text-top = 부모요소기준 맨위

bottom = 해당줄의 가장낮은 요소

text-bottom = 부모요소 기준 맨아래

middle = 부모요소 기준 가운데

단위(px, em, %) 선택시 양수 위로음수 아래로

inherit 상속

줄바꿈 요소

white-space:

normal = 줄바꿈 기본

nowrap = 줄바꿈 무조건 안됨

pre = 줄바꿈 띄어쓰기 공백 허용 박스 벗어나도 줄바굼 안됨

pre-line = 줄바꿈 허용 띄어쓰기 공백 비허용 박스벗어나면 자동줄바꿈

pre-wrap = pre-line + 띄어쓰기 공백 허용

inherit = 상속

배경 색 요소

background-color: #aabbcc, #abc, rgb(); 택1

배경 이미지 요소

background-iamge: url('절대경로/상대경로');

배경 이미지 반복 요소

background-repeat:

repeat = 바둑판식으로 반복,

repeat-x = x 축으로 반복

repeat-y = y 축으로 반복

no-repeat = 반복안함

inherit = 상속

배경 이미지 위치 요소

background-position: x y;

단위 px, % 택 1

left, right x 값 택 1

top, bottom y 값 택 1

center x y 공용 사용 가능 중앙

inherit 상속

배경 이미지 고정요소

background-attachment:

scroll = 요소에 고정 기본값

local = 요소안에 내용에 고정

fixed = 뷰포트 웹화면을 기준으로 고정

inherit = 상속

배경요소 한번에 선언

background: background-image  background-repeat background-attachment

background-position background-color;

background: url('../img/bg.png') no-repeat scoll right 50% #eee;

순서 상관없음 안써주면 기본값 할당

테두리(Border) 요소

선굵기 요소 (단위 px, em 택1)

border-top-width:

border-right-width:

border-bottom-width:

border-left-width:

선의 형태

border-top-style:

border-right-style:

border-bottom-style:

border-left-style:

none = 선없음

solid = 실선

dotted = 점선

dashed = 바느질선

double = 이중선 3px 이상되야함

groove = 입체적 이중선 2px 이상

ridge = 음영값 반대로보임 groove의반대

inset = 요소 전체가 안으로 들어간거처럼 보임

outset = 요소전체가 돌출되 보임

inherit = 상속

선 색상(#aabbcc, #abc, rgb() 택1)

border-top-color:

border-right-color:

border-bottom-color:

border-left-color:

편리성

크기 선스타일 색깔

border-top : 3px dotted red;

이런식으로 선언가능

네방향 한번에 하기 top right bottom left 순서

border-width: 3px 2px 1px 2px;

border-width: 3px 1px 2px;

이런건

top, (right+left), bottom 이런거임

border-color : red #333;

이런건

"(top+bottom), (right+left)" 이런거임

최대로줄인 경우

border: 1px solid red;

네방향 3가지 요소 한번에 해결

굵기 형태 색

바깥여백(margin)

단위

px, em, % 택 1

선언방식

margin-top:

margin-right:

margin-bottom:

margin-left:

margin: 1px 1px 1px p1x;

마진 2개가겹치면 둘중 큰 마진만 적용됨

안여백(padding)

단위

px, em, % 택 1

선언방식

padding-top:

padding-right:

padding-bottom:

padding-left:

padding: 1px 1px 1px p1x;

너비와 높이

width:

height:

총너비가 %일경우 주의요망 CSS3 써야됨

리스트 형태

list-style-type:

none = 없음

disc = 검은원

circle = 흰원

square = 사각형

decimal = 숫자형

lower-alpha = 소문자

upper-alpha = 대문자

lower-roman = i ii iii

upper-roman = I II III

Bullet 이미지정해주기

list-style-image: url('절대경로/상대경로');

Bullet 위치

list-style-position:

outside = 요소밖 기본값 줄바꿈 영향안받음

inside = 요소안 줄바꿈 영향받음

inherit = 상속

한번에 선언

list-style: list-style-type list-style-image list-style-position;

image 로딩실패시 type으로 대체됨

출처 : http://webberstudy.com