CSS 1st

마크업에 옷을 입히자!

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도 표준문법으로 처리(주석)
  • 단위표시
  • 컬러값표시방법

기본문법

선택자	{속성 : 값}
selector	{property : value}


.클래스명 {속성:값; 속성:값}
#아이디명 {속성:값; 속성:값}
.엄마 .자식 .손자		{속성:값; 속성:값}
.엄마 > .자식만		{속성:값; 속성:값}

폰트

  • font
    • font-weight
    • font-size
    • font-family
    • line-height
  • color : #ff0000" , rgb(255,0,0), red
  • letter-spacing
  • text-align
  • text-decoration
  • text-indent
  • vertical-align
  • white-space
hellow~~im kim KKKK

배경

  • background
    • background-color
    • background-image : url('paper.gif');
    • background-repeat : repeat-x , repeat-y, no-repeat
    • background-attachment : scroll, fixed, local
    • background-position : left right top bottom px %

테두리

  • 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 : dotted, dashed, solid, double, groove, ridge, inset, outset
    • 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 : pixels, pt, em, %
    • margin-top
    • margin-right
    • margin-bottom
    • margin-left
  • padding : pixels, pt, em, %
    • padding-top
    • padding-right
    • padding-bottom
    • padding-left

크기

  • width : pixels, pt, em, %
  • height : pixels, pt, em, %