CSS란?

스타일시트, 포장지

CSS의 선언방법

인라인 스타일

HTML에 스타일로 선언 하는 방법

				<div style="color:#aaa">

내장 CSS(임베디드 embedded) 스타일

HTML 문서의 head에 style을 선언하는 방법

				<style type="text/css">
				.al		{width:300px;text-align:justify}
				.f_var	{font-variant:small-caps;}
				.value	{color:#aaa}
				</style>

외부 css 링크

HTML문서의 상단 head에 외부 style sheet를 링크 시크는 방법

				<link rel="stylesheet" type="text/css" href="tta.css"  media="all" />

CSS의 초기화

CSS 초기화의 장점

각 브라우저별 디폴트 스타일이 틀리다. 그 차이로 인해 발생하는 문제를 해결할 수 있다.

CSS 초기화의 반대입장

전체선택자(*)를 사용하는 등의 css초기화가 브라우저의 성능저하를 발생시킬 수 있다.
초기화 파일 때문에 추가적인 서버 요청이 발생하여 사이트 성능이 저하된다.(외부 리소스 링크의 수를 줄이는 방법)

CSS사용 기본규칙

  • 마크업이 구조적으로 구성되어야 합니다.
  • dtd에 맞는 표준 문법을 준수
  • css도 표준문법으로 처리(주석)
  • 단위표시
  • 컬러값표시방법

CSS사용

폰트

  • font
    • font-style
    • font-varian : normal, small-caps, f_var
    • font-weight
    • font-size
    • font-family
    • line-height
  • color
  • letter-spacing
  • text-align
  • text-decoration
  • text-indent
  • vertical-align
  • white-space
hellow~~im kim KKKK

배경

  • background
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position

테두리

  • border
    • border-top
    • border-right
    • border-bottom
    • border-left
    • border-width
    • border-top-width
    • border-right-width
    • border-bottom-width
    • border-left-width
    • border-style
    • border-top-style
    • border-right-style
    • border-bottom-style
    • border-left-style
    • border-color
    • border-top-color
    • border-right-color
    • border-bottom-color
    • border-left-color

간격

  • margin
    • margin-top
    • margin-right
    • margin-bottom
    • margin-left
  • padding
    • padding-top
    • padding-right
    • padding-bottom
    • padding-left

크기

  • width
  • height

위치

  • position
  • top
  • right
  • left
  • bottom
  • z-index
positiion속성

위치에 대한 속성

static
Default값, 일반적인 내용물들의 흐름. 상단과 좌측에서 거리를 지정할 수 없음
relative
일반적인 내용물들의 흐름을 말하지만, 상단과 좌측에서 거리 지정이 가능
absolute
부모 속성으로 부터 top, left, bottom, right등의 절대적인 위치
fixed
고정, scroll이 일어나도 항상 브라우저 화면상의 지정된 위치에 고정
inherit
부모속성을 상속

흐름

  • float
  • clear

넘침

  • overflow

표시

  • display
  • visibility

css 단축

font 단축 속성

구문 : { font: font-style | font-variant | font-weight | font-size | line-height | font-family }
예제 : { font: 0.75em/1.4em 돋음, san-serif; }

margin 단축 속성

구문 : { margin: margin-top | margin-right | margin-bottom | margin-left }
예제 : { margin: 1em 2em 3em 4em; }

padding 단축 속성

구문 : { padding: padding-top | padding-right | padding-bottom | padding-left }
예제 : { padding: 1em 2em 3em 4em; }

border 단축 속성

구문 : { border: border-width | border-style | color }
예제 : { border: 1px dotted #123456; }

border-top, border-right, border-botoom, border-left 단축 속성

구문 : { border-top: border-width | border-style | color }
예제 : { border-top: 1px dotted #123456; }

list-style 단축 속성

구문 : { list-style: list-style-type | list-style-position | list-style-image }
예제 : { list-style: URL(“hooney.gif”) inside disc; }

background 단축 속성

구문 : { background: background-color | background-image | background-repeat | background-attachment | background-position }
예제 : {background: #123456 URL(“hooney.net”) no-repeat center left; }

단위 비교

Points Pixels Ems Percent
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%